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

By Layiji 

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

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

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

อ่าน Glyph ให้ออก

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

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

บางตัวอักษรไม่ต้องมีช่องไฟ
เช่น สระ อิ อี อึ อือ 

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

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

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

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

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

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

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

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

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

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

การใช้ kerning ด้วย metric window

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

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

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

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

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

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

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

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

สุดท้ายนี้ขอบคุณข้อมูลดีๆจาก
ref : http://www.f0nt.com/forum/index.php/topic,6310.0