วันอังคารที่ 19 มกราคม พ.ศ. 2559

การเรียนการสอนครั้งที่3

การนำประโยชน์จากฟอนต์ไปขาย


1 ศึกษาพื้นฐานTypeface 


Typeface กับ Font ต่างกันตรงไหน

คำว่า “Typeface” และคำว่า “Font” หลายๆ คนมักใช้ผิดๆ ถูกๆ อยู่ครับ แม้แต่บทความหรือตามเว็บไซต์ดังๆ ก็ยังพบว่ามีการใช้ 2 คำนี้แบบผิดๆ อยู่ บทความนี้จะอธิบายความหมายและความแตกต่างของ 2 คำนี้ รวมไปถึงที่มา ลองมาดูซิว่าคุณใช้ 2 คำนี้ถูกหรือเปล่า?

Typeface vs Font

Typeface คือแบบของตัวอักษร ที่ออกแบบหรือคิดค้นขึ้นมาโดย “นักออกแบบตัวอักษร” นั่นเองครับ ซึ่งในแต่ละ typeface จะมี shape ที่แตกต่างกันออกไป ส่วน Font นั้นเป็นเพียง “รูปแบบ” หรือ “ลักษณะ” หนึ่ง ของ typeface ครับ ตัวอย่างเช่น “Helvetica Bold Condensed Italic” เป็นคนละ font กับ “Helvetica Condensed Italic” และ “Helvetica Bold Condensed” แต่ทั้ง 3 fonts นั้น ถือว่าอยู่ใน typeface เดียวกัน ซึ่งก็คือ “Helvetica”
พูดง่ายๆ ก็คือ typeface หมายถึง กลุ่มของ fonts ต่างๆ ที่มี design เหมือนกัน แต่ต่างกันในแง่ของ “ความหนา(font-weight)”, “ความกว้าง(font-stretch)” และ “ความเอียง(font-style)” นั่นเองครับ

ที่มาของคำว่า “Font”

หลายๆ คนอาจสงสัยว่าทำไมถึงเป็นเช่นนี้ บางคนอาจเข้าใจมาตลอดว่า font คือ แบบของตัวอักษร(Typeface) ถ้าอยากหายสงสัยต้องไปศึกษาที่มาของมันครับ “font” มาจากคำว่า “fount” ซึ่งแปลว่า “สิ่งที่ถูกหลอม” ในสมัยก่อน การจะพิมพ์ตัวหนังสือลงไปบนอะไรสักอย่างจะต้องใช้ “ตัวพิมพ์” ซึ่งมักจะสร้างมาจากโลหะที่เอามาหลอมลงในแม่พิมพ์ ซึ่งหมายความว่า หากเราอยากได้ตัวหนา ตัวกว้าง ตัวเอียง หรือแม้แต่ตัวขนาดใหญ่ขึ้น เราจำเป็นจะต้องสร้าง “ตัวพิมพ์” ขึ้นมาใหม่ เพื่อมารองรับตัวอักษรแบบนั้นๆ โดยเฉพาะ และนี่เอง ที่ทำให้เราเรียก “รูปแบบ” ของตัวอักษรที่แตกต่างกันว่า “font” แต่ในปัจจุบัน ซึ่งเปลี่ยนจากยุคของโลหะมาเป็นยุค digital ทำให้ขนาดของตัวอักษรนั้นสามารถเพิ่มหรือลดได้โดยง่าย นิยามของคำว่า “font” จึงเปลี่ยนไปเล็กน้อย เหลือแค่ความต่างกันในด้านของ ความหนา ความกว้าง และ ความเอียง เท่านั้น

fount
Font หรือ “Fount” ในสมัยก่อนทำมาจากโลหะหรือไม้

รู้จักกับ Glyph ใน Typeface

ขึ้นชื่อว่าเป็น typeface จะต้องมี “Glyph” ครับ เพราะมันก็คือ “อักขระ” ที่ใช้แทน ตัวอักษร ตัวเลข เครื่องหมาย รวมไปถึงสัญลักษณ์ต่างๆ นั่นเอง บาง typeface อาจรองรับหลายภาษาด้วยกัน จึงทำให้มี glyph อยู่เป็นจำนวนมาก ด้วยเหตุนี้เอง จึงมีกระบวนการ “Subsetting” เกิดขึ้นมา ซึ่งก็คือการตัด glyph ที่เราไม่ต้องการออก เพื่อลดขนาดของ font file ให้เล็กลงนั่นเอง

Typeface แบบ Serif กับ Sans-Serif ต่างกันอย่างไร?

เชื่อว่าหลายๆ คน คงเคยได้ยินคำว่า “Serif” กันมาตั้งแต่เริ่มใช้คอมพิวเตอร์ แต่คงมีคนจำนวนไม่น้อย ที่ยังไม่รู้ความหมายของมัน คำว่า “Serif” ก็คือ “การเล่นหาง” นั่นเองครับ typeface ใดก็ตามที่เป็นแบบ serif ก็หมายความว่า ทุกๆ glyph จะมีการตวัดหาง ไม่ได้จบแบบห้วนๆ ซึ่งจะตรงกันข้ามกับ typeface แบบ “Sans-serif” ที่จะไม่มีการเล่นหางใดๆ ทั้งสิ้น (คำว่า “sans” มาจากภาษาฝรั่งเศส ซึ่งแปลว่า “ไม่มี”)
จากการสำรวจ พบว่า typeface แบบ serif นั้นจะอ่านได้ง่ายกว่าหากใช้กับข้อความยาวๆ ซึ่งนี้เอง เป็นสาเหตุที่สื่อสิ่งพิมพ์นิยมใช้ typeface แบบนี้ อย่างไรก็ตาม การใช้ typeface แบบ sans-serif กลับได้รับความนิยมมากกว่าบนเว็บไซต์ เนื่องจากการเล่นหางของ serif นั้น อาจทำให้อ่านได้ยากขึ้น หากดูด้วยหน้าจอที่มีความละเอียดไม่สูงนัก

serif vs san-serif typeface

รู้จักกับ Typeface แบบ Proportional และ Monospaced

typeface แบบ “Proportional” จะมีความกว้างของ glyph ที่แตกต่างกันออกไป เช่น glyph ที่ใช้แทนตัว “i” กับ “w” จะมีความกว้างไม่เท่ากัน ตรงข้ามกับ typeface แบบ “Monospaced” ซึ่งแต่ละ glyph จะมีความกว้างเท่ากันเสมอ
โดย ทั่วไปแล้ว typeface แบบ proportional นั้นจะดูสวยงาม และอ่านง่ายกว่า ซึ่งเรามักจะพบเห็น typeface แบบนี้ได้ทั่วไปในชีวิตประจำวัน ไม่ว่าจะเป็นสื่อสิ่งพิมพ์ เว็บไซต์ รวมไปถึง GUI ของ application ต่างๆ
แต่ typeface แบบ monospaced ก็ใช่ว่าจะไม่มีข้อดีเลย ด้วยลักษณะที่ทุกๆ glyph มีความกว้างเท่ากันหมด จึงนิยมนำ typeface แบบนี้มาใช้กับ เครื่องพิมพ์ดีด, หน้าจอที่แสดงผลได้เฉพาะตัวอักษร(เช่น นาฬิกาดิจิตอล) รวมไปถึง หน้าจอ Terminal เป็นต้น

proportional vs monospaced typeface

แล้วทำไมต้องมี Font ?

สาเหตุที่ใน typeface เดียวกัน ต้องแบ่งออกเป็น fonts ต่างๆ ก็เพื่อ “Readability” นั่นเองครับ ในหน้าเดียวกัน เราอาจใช้ typeface เพียงแบบเดียว แต่อาจเลือกใช้ fonts หลายแบบ เพื่อให้เหมาะกับเนื้อหาในแต่ละส่วน ไม่ว่าจะเป็น header, article, aside, footer เป็นต้น
fonts แต่ละแบบจะแตกต่างกันในเรื่องของ ความหนา ความกว้าง และความเอียง ซึ่งถ้าทั้ง 3 รูปแบบนี้ เป็นค่าปกติทั้งหมด เราจะเรียก font นั้นว่า “Roman” หรือ “Regular” ส่วน font ที่ไม่ใช่ Roman จะเกิดได้ 2 กรณีด้วยกันคือ รูปแบบเหล่านั้น ถูกใส่เข้ามาใน font file(เช่น font “Helvetica Condensed Bold Italic”) หรือ รูปแบบนั้น ถูก render ด้วย “Algorithm” ของ web browser(เช่น font “Helvetica” + font-weight:bold)
ตาม specification ของ CSS3 หากรูปแบบที่เรากำหนดนั้น มีอยู่ใน font file แล้ว web browser จะใช้ font นั้นในการแสดงผลทันที แต่ถ้าไม่พบ web browser จะ “สังเคราะห์” font นั้นๆ ขึ้นมาจาก Roman หรือ Regular ของ typeface นั้นๆ ซึ่ง font ที่ได้ อาจไม่สวยงามเท่า เพราะสร้างมาจากการคำนวณ ตัวอย่างเช่น เราต้องการแสดงผล typeface “Helvetica” แบบตัวหนา ถ้าเรามี font “Helvetica Bold” ตัวอักษรที่แสดงผลจะสวยงาม สมบูรณ์แบบ แต่ถ้าเราไม่มี แล้วเราใช้ font “Helvetica” แทน web browser จะ render โดยการเพิ่ม outline ให้หนาขึ้น เพื่อให้ตัวอักษรที่ออกมาดูหนาขึ้นนั่นเองครับ

font synthesis comparison
ถ้าสังเกตุดีๆ จะเห็นว่า font แท้ๆ จะคมชัดกว่า font ที่สังเคราะห์ขึ้นด้วย algorithm

บทสรุปของ Typeface vs Font

Typeface คือแบบอักษรที่ Designer ได้ออกแบบขึ้นมา ส่วน Font คือ Typeface ที่มีความต่างกันในเรื่องของความหนา ความกว้าง และความเอียง


2 ศึกษาพื้นฐานการออกแบบ Font ลายมือ


เขียนตัวอักษรด้วยลายมือลงบนกระดาษ




สแกน และนำเข้าโปรแกรม AI




แก้ไขและจัดเรียงใหม่



10 วิธีการใช้ Font ในงานออกแบบสำหรับมือใหม่

 การออกแบบที่ดีนั้นไม่ใช่เพียงแค่การเลือกสีและการจัดองค์ประกอบภาพเท่านั้น การวางตัวอักษรให้สวยงามและอ่านง่ายเป็นอีกปัจจัยที่จะทำให้งานออกแบบของคุณออกมาสวยงาม ดังนั้นถ้าคุณต้องการที่จะได้ออกแบบงานของคุณให้สวยเพอร์เฟคคุณต้องเรียนรู้กฏการจัดวางตัวอักษร 20 ข้อนี้

 1. ให้พื้นที่ตัวอักษร การให้พื้นที่กับตัวอักษรจะทำให้คนอ่านไม่รู้สึกปวดตาหรืออึดอัดเกินไป ลองคิดเล่นๆดูว่าคุณกำลังมองวิวเมืองแล้วเห็นถนนมีแต่รถเต็มไปหมดคุณจะรู้สึกอึดอัดรึเปล่า ? ตัวอักษรก็เช่นเดียวกันให้พื้นกับตัวอักษรแล้วงานออกแบบของคุณจะดูไม่อึดอัด

2. เว้นบรรทัดให้พอเหมาะ การเว้นบรรทัดให้พอเหมาะพอดีเป็นอีกหนึ่งจุดที่หลายๆคนลืมให้ความสำคัญ การเว้นระยะห่างระหว่างบรรทัดมีผลต่อการอ่านมาก เพราะถ้าคุณเว้นระยะบรรทัดมากเกินไปคนอ่านจะต้องกวาดสายตาให้มากขึ้นและแน่นอนครับ อาการปวดตาจะตามมาทีหลังอย่างเลี่ยงไม่ได้  


3. อย่าย่อ “สเกล” จนเพี้ยน อีกหนึ่งผิดพลาดที่ไม่สามารถให้อภัยได้ คือการที่คุณย่อหรือเพิ่มขนาดตัวอักษรแต่คุณย่อแบบไม่ดูสเกลของตัวอักษรเลย บางคนย่อจนตัวอักษรบิดเบี้ยวจนหมดรูป อย่าเชียวนะครับ เวลาย่อทุกครั้งอย่าลืมกด Shift ไปด้วยทุกครั้งเพื่อให้เกิดความเคยชิน หรือถ้าคุณไม่อยากจะกด Shift ให้คุณเพิ่มเป็นตัวเลขขนาดแทนจะดีกว่าการย่อขยายเองมากๆเลยครับ


4. ทำสีสันให้ดึงดูด ถ้าอยากให้คนสนใจในงานของคุณ คุณจะต้องออกแบบและจัดวางตัวอักษรของคุณให้สามารถอ่านได้ง่าย และหลักการง่ายๆที่จะมาช่วยให้งานของคุณมีพลังดึงดูดมากขึ้นก็คือการเลือกสีสันให้คนอ่านสามาถอ่านได้ง่าย เลือกสีให้ตัดกัน จะสามารถทำให้อ่านได้ง่ายมากขึ้น  


5. เลือก Font ให้ดี Font บาง Font ไม่เหมาะกับการอ่านที่เยอะๆหรอกนะ Font แต่ละตัวจะมีคุณสมบัติเฉพาะตัว เพราะงั้นคุณจะต้องเลือกดีๆเพื่อที่งานของคุณจะได้ไม่เละเทะ  


6. จัดการติ่งข้อความ หลายคนเจอเนื้อหายาวๆที่ต้องนำมาออกแบบและจัดวาง พยายามเว้นบรรทัดจัดหน้าให้ดูดีที่สุดแต่ในการจัดทุกครั้งมันจะมี “ติ่ง” ข้อความหลุดออกมาเสมอ เพราะงั้นอย่าทิ้งมันไว้ให้โดดเดียวพามันกลับเข้าไปในประโยคด้วย เพื่อที่จะได้ประหยัดเนื้อที่และประโยคจะได้ไม่ขาดหาย  


7. อย่าใช้ Font หลายตระกูล นักออกแบบหลายคนชอบติส 1 ประโยคจัด Font 7 ตระกูล บ้าไปแล้ววววววว !! มันรกเกินไป 1 ประโยคควรจะมี Font ไม่เกิน 3 ตระกูล เพื่อที่จะทำให้ประโยคนั้นไม่รกจนเกินไป

 


8. เลือก Font ให้เข้ากับงาน การเลือก Font ให้เหมาะสมกับงานเป็นเรื่องที่เราต้องใส่ใจให้มากที่สุด หลายคนออกแบบงานมาอย่างดีแต่พอเลือก Font แล้ว บอกได้คำเดียว เลือก Font ผิดชีวิตเปลี่ยน

 


 9. อย่าใช้ Effect ตัวอักษรสุดเห่ย Effect ของ Font ที่มากับโปรแกรมต่างๆ ขอร้องเลยครับว่า อย่า (หรือถ้าเลี่ยงไม่ได้ก็ใช้ให้น้อยที่สุด) ลองเปลี่ยนมาเน้นความหนาให้ Font หรือ ใช้สีให้เด่นๆแทนดีกว่า เพราะ Effect ที่มีให้พวกนั่น มันช่างล้าสมัยและโบราณซะเหลือเกิน  


10. ใหญ่บ้างเล็กบ้าง ถ้าจะพาดหัวอะไรสักอย่างนึงคุณลองนึกดูนะว่ามันจะมีคำที่ต้อง เน้น และ ไม่เน้น ถ้ามันขนาดเท่ากันหมดหรือหนาเท่ากันหมด มันจะดึงความสนใจไปหมด ลองปรับให้ใหญ่บ้างเล็กบ้างดู


 




 ขอบคุณ : www.canva.com