การจัดช่องไฟตัวอักษร และ Kerning

การจัดช่องไฟของตัวอักษร และการใช้ KERNING
By : Layiji

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

การจัดช่องไฟเริ่มแรกที่ Glyph metrics

การจัดช่องไฟของตัวอักษรแต่ละตัว  ต้องมีระยะหน้าและระยะหลัง  หลายคนจะประสบปัญหาอักษรแต่ละตัวเจอกันแล้วห่างไป ชิดไป วันนี้ผมมีวิธีจัดช่องไฟอย่างง่ายๆมาให้ (ด้วยประสบการณ์ของผมเอง อาจจะไม่ถูกทั้งหมดแต่คิดว่าใช้ได้นะ)

อ่าน Glyph ให้ออก
ปัญหาช่องไปจะเกิดกับภาษาไทยมากกว่าภาษาอังกฤษเนื่องจากว่า ภาษาบ้านเรามีหัวมีหางมีตัวมัวนแพรวพราว ดังนั้นการจัดช่องไฟก็จะยากขึ้นตามความสวยของตัวอักษร
แต่จะจัดยังไงล่ะ .........ใช่ ยากครับ แต่ก็ไม่ยากเกินถ้าเราอ่าน Glyph ให้ขาด


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

สรุปคือ ปรับให้แกนหลักของตัวอักษรมันเท่าๆกันทั้งสองข้างเป็นใช้ได้ แต่เดี๋ยวจะลองยกตัวอย่างตัวปัญหาอื่นๆอีกครับ
บางตัวอักษรไม่ต้องมีช่องไฟ
เช่น สระ อิ อี อึ อือ

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


สระมันจะห่างออกไป ดั้งนั้นจึงตัดช่องไฟออกให้อักษรอยู่หน้าช่องไฟซะเวลาพิมพ์มันจะได้เป็นปกติ

ตัวอักษรหัวอยู่ใน(ด้านซ้าย)
ผ ฝ ย อ ฮ ล ส เ แ


บางคนอาจจะติดว่าเอาระยะหน้าของอักษรน้อยกว่าระยะหลัง (เพราะตัวอักษรส่วนมากใช้ระยะหน้า น้อยกว่า ระยะหลัง) แต่อักษรประเภทนี้ แกนหลัก มันเป็นอย่างในรูป ดังนั้นเราต้องเผื่อระยะหน้าเท่ากับระยะหลัง หรือบางครั้ง ระยะหน้าอาจจะมากกว่าด้วยครับ






ฉ ณ น หนู คืออักษรที่เป็นเคสสตั๊ดดี้ที่คลาสสิคที่สุด ในเรื่องความเจ้าปัญหา การจัดช่องไฟของตัวอักษรประเภทนี้จะยากมาก โดยเฉพาะเมื่อมันมาเจอกับ สระบนทั้งหลาย



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


เมื่อเป็นอย่างนี้แล้ว เลยเป็นข้อจำกัดทางการออกแบบประการหนึ่งคือ "อักษรม้วนหางไม่ควรมีหางใหญ่เวอร์เกินไป" มิฉะนั้นแล้วต้องทำ สร้าง opentype ส่วนตัวขึ้นมา ซึ่งบางโปรแกรมไม่รองรับครับ และการ kerning บางโปรแกรมก็ไม่รองรับเหมือนกัน
ดังนั้น --- เราควรออกแบบช่องไฟให้ดีไว้ก่อนครับ

ตัวอย่างการมอง Glyph ของผม

[มังกร]

เข้าใจง่ายดีค่ะป๋า เยี่ยมเลย 
ไว้รอฟอนต์หน้าแล้วกันนะคะ
ตัวเก่าจัดแบบตามใจชอบไปแล้ว 

น หนู มีปัญหาจริงๆค่ะ ถ้าลายมือปกติ ไม่มีทางออกมาสวยเลย 

แจ่มค่ะป๋า 

อ่านเข้าใจง่าย เห็นภาพชัดเจน




ขอบคุณสำหรับบทความดีๆ ค่ะ 

[ไม่]

เรื่องของ นม นี่เป็นปัญหาของมนุษยชาติมานมนานแล้วครับ

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

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

วกกลับมาถึงคำว่า นม
จริงๆ แล้วเท่าที่เทคโนโลยีของฟอนต์จะอำนวย
ตอนนี้เราก็สามารถออกแบบให้ น มีตูดยื่นไปข้างหลัง 3 กิโลก็ได้ครับ
เพราะด้วยคำสั่ง Opentype สามารถสั่งให้หนูรู้ว่า ถ้าหนูไปเจอตัวอะไรสักอย่าง เช่น ม้า
"ถ้าหนูไปเจอม้า หนูต้องแขม่วตูดเข้ามาหน่อยนะ เพราะของพี่ม้ามันยาว"
เป็นเช่นนี้แล

แต่ส่วนขยายเรื่อง OpenType ก็ต้องไปศึกษาหาอ่านเอาในอีกบทความนึงเอาเองนจ๊ะ





ทว่า!!!!!!!!!

เวลาออกแบบตัวอักษรก็อย่าลืมเผื่อใจไว้ก่อน ว่า
โปรแกรม ไม่ทุกตัวนะครับที่สนับสนุน Kerning และ OpenType
ตัวอย่างง่ายๆ ก็เช่น แฟลชหน้าพรีวิวฟ๐นต์ของเว็บนี้เองแหละ ที่ไม่สนับสนุน
ดังนั้นเวลาคุณคิดจะทำงานออกมาให้ดูดิบดี
ต้องเผื่อว่าคนที่เขาเอาไปใช้นั้นจะเอาไปใช้กะโปรแกรมอะไร ฉลาดแค่ไหน
เพราะถึงทำรถไถออกมาให้แรงเร็วจัด ฟังก์ชั่นสารพัด ฟังเอ็มพีสามได้ขณะไถนา
แต่ตาแม้นยายมีเอาไปแค่แทนควาย เท่านั้นก็ตรมหนักหนาแล้วครับ

จึงเรียนมาเพื่อทราบและโปรดพิจารณา

[มังกร]

ตัวอย่างเปรียบเทียบเปรียบเทียบได้เหี้ยมากครับ 
ชอบฟังก์ชั่นฟังเอ็มพีสามได้ 

[มังกร]

น หนู ขมวดหางมาอย่างนี้ ก็เป็นวิธีที่น่าลองนะครับ

กรี๊ด
นมสองเต้าไม่เท่ากัน

เหมือนนมคล้อยว่ะ 5โอ 

มีปัญหาเรื่องช่องไฟ กับฟอนต์มานมนานแล้ว.. ขอบคุณค่ะ

// วงกลมข้างหน้า มันคือไรคะ?

 

ขอบคุณค่ะ

(+1)

  เยี่ยมเลย สรุปได้เข้าใจง่ายดีแท้

รอเรียน kerning ด้วยอีกตัว 

อ๊ะ ลืมบอกใปอีกเรื่อง
อย่างตัว V ใหญ่ กับ v เล็ก ก็ไม่เหมือนกันนะ อย่าง V ใหญ่ ระยะซ้ายขวาจะเกือบชิดตัวอักษร แต่ V เล็กจะห่างออกมาอีกนิดนึง

ดังนั้น จะเผื่อซ้ายเผื่อขวายังไง ให้ดูที่

ปริมาตรของตัวอักษรที่อยู่ใกล้เส้นช่องไฟ
เทียบกับสั่ดส่วนความสูงทั้งหมดเป็นเปอร์เซ็น ประมาณที่อยู่ใกล้เส้นที่สุด



แต่สูตรนี้ก็ไม่ตายตัวนะครับ บางตัวก็ต้องจัดเอง หรือการออกแบบตัวอักษรบางจำพวกก็ต้องจัดพิเศษเองเหมือนกัน

[มังกร]

เทียบกับสั่ดส่วนความสูงทั้งหมดเป็นเปอร์เซ็น ประมาณที่อยู่ใกล้เส้นที่สุด

บ้า

การใช้ kerning ด้วย metric window
เมื่อเราจัดช่องไฟระหว่างตัวอักษรดีแล้ว ปัญหาที่ตามมาคือ ข่องไฟของแต่ละตัวเวลาเจอกันจะไม่เท่ากัน ยกตัวอย่างง่ายๆ เช่น A V ติดกัน จะเกิดปัญหาอย่างในรูป



ดังนั้นการแก้ปัญหานี้ต้องใช้ความสามารถของ opentype เข้ามาช่วย ซึ่งเรียกว่าการใช้ kerning

** Kerning คือการกำหนดช่องว่างพิเศษของ คู่ ตัวอักษรต่างๆ ซึ่งสามารถกำหนดให้ห่าง หรือชิดกันได้****เป็นคู่ๆไป****  นั่นหมายความว่า เฉพาะตอนที่ A เจอ V เท่านั้นถึงจะมีการกำหนดให้ชิดกันได้ แต่ถ้า A เจอตัวอื่น ก็ไม่ต้องทำอะไร

พอเข้าใจมั้ยครับ

เอาล่ะ ทำยังไงล่ะทีนี้  มันมีขั้นตอนง่ายๆ อย่างนี้ครับ


เปิดหน้าต่าง metric window


จะได้หน้าต่างแบบนี้ เราก็ทำการพิมพ์ตัวอักษรที่ต้องการ


ทำการ kerning เฉพาะคู เช่น  AV  VA  หรืออักษรไทย เช่น  สระเอ กับ ตัวมีหัวหันออก (ท บ ป ...)

**** ขอย้ำว่าการทำ kern บางโปรแกรมไม่รองรับนะครับ ดังนั้นควรกำหนดช่องไฟให้สวยงามแต่แรกจะดีที่สุด พยายามพึ่งพิงการจัด kerning ให้น้อยที่สุดครับ ***




ชุดตัวเทสช่องไฟ
http://www.f0nt.com/forum/index.php/topic,4723.0.html