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

Typeface vs 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" จึงเปลี่ยนไปเล็กน้อย เหลือแค่ความต่างกันในด้านของความหนา ความกว้าง และ ความเอียง เท่านั้น

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

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

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

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

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

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

แล้วทำไมต้องมี 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 แท้ๆ จะคมชัดกว่า font ที่สังเคราะห์ขึ้นด้วย algorithm

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

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




เว็บไซต์อ้างอิง
http://www.siamhtml.com/%E0%B8%84%E0%B8%A7%E0%B8%B2%E0%B8%A1%E0%B9%81%E0%B8%95%E0%B8%81%E0%B8%95%E0%B9%88%E0%B8%B2%E0%B8%87-typeface-vs-font-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/