ฟอนต์ฟอรั่ม

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

---

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

การจัดช่องไฟเริ่มแรกที่ Glyph metrics
(http://img.f0nt.com/image/6029.jpeg)
การจัดช่องไฟของตัวอักษรแต่ละตัว  ต้องมีระยะหน้าและระยะหลัง  หลายคนจะประสบปัญหาอักษรแต่ละตัวเจอกันแล้วห่างไป ชิดไป วันนี้ผมมีวิธีจัดช่องไฟอย่างง่ายๆมาให้ (ด้วยประสบการณ์ของผมเอง อาจจะไม่ถูกทั้งหมดแต่คิดว่าใช้ได้นะ)

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

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

สรุปคือ ปรับให้แกนหลักของตัวอักษรมันเท่าๆกันทั้งสองข้างเป็นใช้ได้ แต่เดี๋ยวจะลองยกตัวอย่างตัวปัญหาอื่นๆอีกครับ
บางตัวอักษรไม่ต้องมีช่องไฟ
เช่น สระ อิ อี อึ อือ
(http://img.f0nt.com/image/6039.jpeg)
อันนี้คงเข้าใจกันพอสมควรนะครับว่าทำไมถึงไม่มีช่องไฟ ก็เพราะว่า ถ้าเรามอง ตัวอักษรทั้งหมดในรูปบบสี่เหลี่ยม ถ้าทุกตัวมีช่องไฟหมด การพิมพ์สระก็จะกลายเป็นแบบนี้

(http://img.f0nt.com/image/6044.jpeg)
สระมันจะห่างออกไป ดั้งนั้นจึงตัดช่องไฟออกให้อักษรอยู่หน้าช่องไฟซะเวลาพิมพ์มันจะได้เป็นปกติ

ตัวอักษรหัวอยู่ใน(ด้านซ้าย)
ผ ฝ ย อ ฮ ล ส เ แ
(http://img.f0nt.com/image/6040.jpeg)

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




(http://img.f0nt.com/image/6037.jpeg)

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

(http://img.f0nt.com/image/6038.jpeg)

การที่จะทำให้สระอีตรงกับหาง น.หนูนั้น ต้องใช้คำสั่ง kerning เข้าช่วย ซึ่งจะพูดต่อไป แต่ปัญหาของการใช้ kerning เมื่อเราเลื่อนสระเข้าไปแล้ว ปัญหาที่ตามมาคือยิ่งเลื่อนมากเท่าไหร่ อักษรตัวต่อไปก็จะยิ่งตามมามากเท่านั้น ดังรูป
(http://img.f0nt.com/image/6042.jpeg)

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

ตัวอย่างการมอง Glyph ของผม
(http://img.f0nt.com/image/6045.jpeg)
(http://img.f0nt.com/image/6046.jpeg)
(http://img.f0nt.com/image/6047.jpeg)
(http://img.f0nt.com/image/6048.jpeg)

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

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

แจ่มค่ะป๋า  :12:

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




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

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

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

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

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

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





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

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

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

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

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

(http://img.f0nt.com/image/6080.jpeg)

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

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

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

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

 :25:

ขอบคุณค่ะ

(+1)

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

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

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

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

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

(http://img.f0nt.com/image/6113.jpeg)

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

อ้างคำพูดจาก: L a y i j i เมื่อ 07 มิ.ย. 2006, 20:45 น.
เทียบกับสั่ดส่วนความสูงทั้งหมดเป็นเปอร์เซ็น ประมาณที่อยู่ใกล้เส้นที่สุด

บ้า :05:

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

(http://img.f0nt.com/image/6481.jpeg)

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

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

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

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

(http://img.f0nt.com/image/6483.jpeg)
เปิดหน้าต่าง metric window

(http://img.f0nt.com/image/6484.jpeg)
จะได้หน้าต่างแบบนี้ เราก็ทำการพิมพ์ตัวอักษรที่ต้องการ

(http://img.f0nt.com/image/6485.jpeg)
ทำการ kerning เฉพาะคู เช่น  AV  VA  หรืออักษรไทย เช่น  สระเอ กับ ตัวมีหัวหันออก (ท บ ป ...)

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




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

ขอบคุณมากครับ  :40:


ทำฟอนต์มาเป็นสิบตัว ไม่เคยใช้ kerning เข้าช่วยเลย ใช้ไม่เป็น...  :31:

อ้าว :08:

จัดมั่วไปแล้วหล่ะ  งั้นผมไปแก้ก่อนดีกว่าครับ

แล้วทำไมในช่องทดลองพิมพ์ในช่อง Opentype features ที่ไม่ใช่ช่อง preview มันไม่เป็นไปตามที่ kerning ล่ะครับ
แต่ว่าในช่อง preview โอเคครับ    ไม่รู้ว่ายึดตัวไหน? :55:

ไม่ทราบว่ามีวิธีขยายขนาดฟอนต์แล้วปรับช่องไฟไปด้วยในตัวไหมครับ

ผมใช้วิธี Transformation/Scale แล้วเช็ค Uniform ใน Fontlab ตัวหนังสือขยายขนาด แต่ช่องไฟไม่ขยายตามอ่ะครับ

ไม่ได้ใช้ FontLab มานาน
มันจะมีอันที่แปลไทยได้ว่า ขอบซ้ายขอบขวาน่ะครับ ในเครื่องมือนั้นแหละ

แต่ถ้าเป็นภาษาไทย ขยายเองดีกว่าครับ
เพราะมันจะไปมีปัญหากะพวกสระบนล่าง ที่ความกว้างเป็น 0 อยู่จ้ะ

ตอนนี้ทำได้แล้วล่ะครับ แต่มีปัญหากับวรรณยุกต์ลอยในกรณีที่ไม่มีสระพวก  ิ  ี  ึ  ื อ่ะครับ

ขอคำแนะนำด้วยครับ :16:

มีปัญหาแบบไหนครับ

ออกแบบได้ แต่ Kerning นี่ลำบากสุดฤทธิ์  :05: ต้องฝึกฝน

(http://img3.f0nt.com/19/2f8d7d8d5bdcb492c85d028cc9deedcf.jpg)

เรื่องการจัดช่องไฟเป็นเรื่องของการมองภาพรวมครับ
คือเราจะไม่มองเป็นตัวๆ แต่เราจะมองว่าเวลามันเป็นประโยคแล้ว
ช่องไฟหรือพวก kerning ออกมาแล้วเป็นอย่างไร

ถ้าสังเกตุจากช่องไฟในรูปด้านบนจะเป็นว่ามันไม่ได้ถูกเรียงชิดตัวอักษรซ้ายขวา
แต่มันออกเหลื่อมๆเข้าไปเสียด้วยซ้ำ ซึ่งก็คือกฎของการหลอกตานั่นเอง
(อันนี้ไม่ใช่การกำหนดเส้นกั้นหน้ากั้นหลังใน fontlab นะครับ แต่เป็นเรื่องของการมองภาพเฉยๆ)

ดูรูปนี้ครับ
(http://img3.f0nt.com/19/c5e5c13f53c18bfe5efc7ddb4681c31f.jpg)
รูปนี้จะเห็นว่ามี space แปลกๆเกิดขึ้น
เช่น ตรง  -- เ รื่  --   กับ -- ง เ --

เมื่อปรับให้ดีๆด้วย matrix แล้วจะเป็นอย่างนี้
(http://img3.f0nt.com/19/1dc3450768d0cdbfb2263da1151b20f7.jpg)


ซึ่งปัญหาใหญ่ๆของการออกแบบช่องไฟ มักจะเกิดกับ

หลังตรง เจอหน้าตรง

เช่น  ปเ  าผ อะไรทำนองนี้
ส่วนใหญ่พวกนี้ต้องตามจัดที่ matrix เพิ่มเกือบทั้งนั้น

หรือไม่ก็ หัวล่าง เจอ หัวบน
เช่น
เน   นร   

ร  จ  ฐ ธ เป็นตัวที่จะพบปัญหาเมื่อเจอตัวที่หัวอยู่ล่างทั้งนั้น

เขียนบันทึกไว้เผื่อลืม

:25: คิดว่าจะมาแซวโพสต์สแปม

เป็นข้อคิดนิดนึงครับ

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

ทางทีดีที่สุด อยากจะแนะนำว่าควรจัดการ Spacing ให้เหมาะสมที่สุดแทนดีกว่าครับ

ครับ ยึดช่องไฟเป็นหลัก kerning เพิ่มความสมบูรณ์เล็กๆน้อยๆ

แต่ถ้าฟอนต์แปลกๆ kerning จะจำเป็นมากครับ

เห็นควรทั้งสองท่านด้วยครับ

อ่านเข้าใจง่าย ครับ  :12: