ฟอนต์ฟอรั่ม

สำหรับคนทำฟอนต์ => ออกแบบฟอนต์ => โพสต์ถูกเริ่มโดย: Sungsit เมื่อ 04 ต.ค. 2014, 06:21 น.

ชื่อเรื่อง: บุญมา พาซื่อ
โพสต์โดย: Sungsit เมื่อ 04 ต.ค. 2014, 06:21 น.
ฟอนต์บุญมา
(http://img3.f0nt.com/04/6cfbbd5edeeaf611205c74241c34c005.png)

ฟอนต์ทาโฮมา
(http://img3.f0nt.com/04/3908e8c0f3f9fb5fdcefa45da8125298.png)

บุญมาเป็นฟอนต์ตัวอ่านไทยแบบไร้อารมณ์ซึ่งได้รับแรงบันดาลใจด้านลบจากฟอนต์ทาโฮมาที่ออกแบบโดยคุณ Matthew Carter ปรมาจารย์ซึ่งทำฟอนต์สำหรับจอแสดงผลความละเอียดต่ำรุ่นบุกเบิก (เจ้าเดียวกับฟอนต์สำหรับจอคอมพิวเตอร์ขั้นเทพอย่าง Georgia) แต่ตัวอักษรไทยของทาโฮมาดูแย่กว่าตัวละตินอย่างไม่น่าเชื่อ (ถ้าไม่ใช่คนอื่นทำตัวไทยเพิ่มทีหลัง ผมก็เดาว่าคุณ Carter คงไม่คุ้นกับตัวอักษรไทยแน่ๆ) สิ่งที่ทำให้ตัวไทยในทาโฮมาดูแย่เป็นพิเศษคือสระบนล่างและวรรณยุกต์ที่ไม่ได้สัดส่วนกับตัวพยัญชนะ (ตามสายตาคนไทยอย่างผม) และการพยายามทำให้ตัวไทยเป็น Humanist sans-serif ที่ดูไม่แข็งทื่อของทาโฮมาก็ล้มเหลวเพราะแทนที่จะดูมีชีวิตชีวามันกลับดูไม่คงเส้นคงวาแทน (เหมือนยังทำไม่เสร็จ) แต่ผมเห็นทาโฮมาในหนังสือภาพประกอบตัวอักษรไทยใหญ่ๆ ของหลานสาววัยขวบครึ่งแล้วมันดูน่ารักนะครับ ผมเลยคิดว่ามันน่าจะเหมาะกับหนังสือเด็ก (พูดจริงๆ)

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

ผมจึงตั้งโจทย์สำหรับฟอนต์บุญมาว่า

1. ทำตัวอักษรไทยที่สัดส่วนใกล้เคียงกับทาโฮมา โดยเฉพาะความสูงที่ใกล้เคียงกับตัวละตินพิมพ์เล็กในฟอนต์มาตรฐานของระบบปฏิบัติการ
2. หาวิธีประกอบฟอนต์หัวกลมที่ง่ายที่สุด อันไหนตรงได้ก็ตรง โดยไม่พยายามทำให้มันดูดีหรือดูเป็น Humanist sans-serif (เพราะมันทำยาก)
3. ทำให้แยกความแตกต่างของสระบนล่างและพยัญชนะหัวแตกแต่ละตัวได้ แต่ต้องมีสัดส่วนที่ไม่ประหลาดตาเกินไปด้วย

ผลที่ออกมาเบื้องต้นก็ได้ฟอนต์แบบหัวกลมดิกที่ประกอบกับเส้นตรงโดยไม่ตัดขอบลบเหลี่ยมทำมน เส้นโค้งส่วนใหญ่จะอยู่ด้านบน ส่วนที่อยู่บนเส้นฐานจะตัดตรงทั้งหมดเหมือนทาโฮมา

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

ตัวอย่างพยัญชนะหัวแตกและสระบน
(http://img3.f0nt.com/04/b031554a47ed57ec11ee6749f0b6bfc8.png)

ความสามารถทั่วไปของฟอนต์บุญมาก็เหมือนเทมเเพลตฟอนต์อยู่นี่ครับ
(http://img3.f0nt.com/04/ac868a77e75329896d09f08fd91aa910.png)

ส่วนความสามารถพิเศษที่ผมเพิ่มเข้ามาคือขยับตำแหน่งวรรณยุกต์มาทางซ้ายโดยอัตโนมัติเมื่อมีสระหน้าตัวสูงตามหลัง มันจะได้ไม่ชนกันเพราะผมจัดช่องไฟไว้ค่อนข้างชิดกัน (ยังไม่ลงตัวเท่าไหร่)
(http://img3.f0nt.com/04/a5d7210a899baf1e65829e582966f3df.png)


ฟอนต์บุญมายังทำไม่เสร็จนะครับ ตัวอักษรยังไม่ครบ แต่ผมอยากให้พี่น้องช่วยเอาไปทดสอบดูหน่อย อยากได้ความเห็นจากสาวกฟอนต์เพื่อพัฒนาต่อ  ดาวน์โหลดฟอนต์ตัวอย่างได้ที่ https://drive.google.com/file/d/0B8QiakPi6U1DNXpZaGtsMGFuWkE/view?usp=sharing (https://drive.google.com/file/d/0B8QiakPi6U1DNXpZaGtsMGFuWkE/view?usp=sharing)

ขอบคุณครับ
ชื่อเรื่อง: ตอบ: บุญมา พาซื่อ
โพสต์โดย: rtEEE เมื่อ 04 ต.ค. 2014, 06:42 น.
จะบอกว่าเยี่ยมมากครับดูจากโครงร่างคร่าวๆ แล้ว
ฟังค์ชั่นหลบสระมาทางซ้ายเมื่อเจอ ใ ไ โ ผมก็ทำไว้ในฟอนต์ของผมเองเหมือนกันครับ แต่กรณี "...ไม่ไ..." แบบนี้โดยส่วนตัวผมชอบให้มันอยู่กับที่มากกว่านะครับ เพราะเวลามันเลื่อนไปทางซ้ายมันดูไม่ชินตา/ไม่สมดุลกันแฮะครับ (หรือว่าผมคิดไปเองหว่า)

แก้ไข #1 ทดสอบดูให้แล้วครับ ถึงแม้ขนาดแค่ 12pt ตัวสับสนพวกนี้ก็แยกได้ไม่ยากครับ :45:
(https://dl.dropboxusercontent.com/u/32456463/f0nt/boonma.PNG)
ชื่อเรื่อง: ตอบ: บุญมา พาซื่อ
โพสต์โดย: iannnnn เมื่อ 04 ต.ค. 2014, 13:49 น.
ยอดเยี่ยม แก้บั๊กของทาโฮม่าได้ละเอียดเลยครับ :07:

ผมลองแทนที่ในโครม (แมค)
ผลออกมาสวยงาม ตัวเล็กๆ อย่างเบอร์ 11 ยังอ่านง่ายเลย สุดยอดครับ

(http://img3.f0nt.com/04/d9d0ff6f3635c88c569989ae34a4c156.png)

ยังมีที่ติดใจอยู่ก็ไม้โทกับไม้หันอากาศครับ รู้สึกว่ากิ่งที่ออกจากหัวไม้โทด้านซ้ายมันยังไม่เคลียร์
ดูแล้วเหมือนไม้หันอากาศอยู่ (ซึ่งทาโฮมาไม่เจอปัญหานี้เพราะมันต่างกันสนิท)
ชื่อเรื่อง: ตอบ: บุญมา พาซื่อ
โพสต์โดย: nobetakung เมื่อ 04 ต.ค. 2014, 21:11 น.
งามครับ  :12:
ชื่อเรื่อง: ตอบ: บุญมา พาซื่อ
โพสต์โดย: Layiji เมื่อ 04 ต.ค. 2014, 21:39 น.
มันเจ๋งมากเลยครับ
ชื่อเรื่อง: ตอบ: บุญมา พาซื่อ
โพสต์โดย: Sungsit เมื่อ 04 ต.ค. 2014, 23:40 น.
ขอบคุณทุกท่านครับ เดี๋ยวจะทยอยแก้แล้วมาปรึกษาใหม่
ชื่อเรื่อง: ตอบ: บุญมา พาซื่อ
โพสต์โดย: แอ้ เมื่อ 06 ต.ค. 2014, 19:15 น.
พอเป็นตัวเล็กๆ แล้วดูสวยเป็นระเบียบงามตา  :25:
ชื่อเรื่อง: ตอบ: บุญมา พาซื่อ
โพสต์โดย: Sungsit เมื่อ 09 ต.ค. 2014, 19:20 น.
ผมเปิดโปรเจ็คต์ไว้ที่ Github แล้วนะครับ ดาวน์โหลดเวอร์ชั่นทดสอบตัวใหม่ได้ที่ https://github.com/sungsit/boonma/releases (https://github.com/sungsit/boonma/releases)

บุญมา v0.1-alpha2 ตัวจะบางลงนิดหน่อย แก้ตัวสับสนให้ชัดเจนขึ้น (หวังว่า) เติมเลขไทยครบแล้ว ผมลองทดสอบที่ขนาด 13-16px ในเว็บแล้วมันชัดและประหยัดพื้นที่กว่า Tahoma นะ คงเป็นเพราะเส้นคมกว่า แต่ถ้ากำหนด line-height/leading น้อยกว่า 1.5em หรือ 150% วรรณยุกต์เหนือสระบนจะแหว่ง (Tahoma ก็เป็นเหมือนกัน) ยังไม่ได้ทำตัวหนาแต่คิดว่าจะทำ และยังไม่มีตัวละติน อันนี้กำลังคิดว่าจะทำดีไหมเพราะจับคู่กับฟอนต์มาตรฐานไร้อารมณ์อย่างพวก Helvetica, Arial, Free Sans, Droid Sans ฯลฯ แล้วมันไปกันได้ดี เลยขี้เกียจทำตัวละติน

ภาพตัวอย่างจากหน้าเว็บพื้นขาว ที่ใช้ภาษาไทยกับอังกฤษปนกันค่อนข้างเยอะอย่าง blognone.com (สังเกตที่ลิสต์ด้านขวาของภาพ)

BoonMa + Arial
(http://img3.f0nt.com/09/225391f43a1a87ef198bb3272f9a556b.jpg)

Tahoma
(http://img3.f0nt.com/09/df1f491b153d0bdf584810128c9919e2.jpg)

ภาพตัวอย่างจากหน้าเว็บพื้นเข้ม ที่ใช้ตัวอักษรหลายขนาดและหลายสี อย่าง pantip.com จะชัดน้อยกว่าเพราะมันฟุ้งนิดหน่อย แต่ผมว่ามันก็ยังชัดกว่า Tahoma

BoonMa + Arial
(http://img3.f0nt.com/09/87c44d67b773db25e569737c2d248dd1.jpg)

Tahoma
(http://img3.f0nt.com/09/45cd37a14d9630048a65cee07d6c4e19.jpg)

วิธีทดสอบง่ายๆ คือตั้งค่าฟอนต์ของบราวเซอร์สำหรับภาษาไทยเป็น BoonMa หรือถ้าใครเชี่ยว CSS ก็ใช้ Inspector ของบราวเซอร์เปลี่ยนฟอนต์และขนาดตามสะดวก ท่านใดพบข้อบกพร่องก็แจ้งไว้ได้นะครับ วิจารณ์ได้เต็มที่ ระหว่างนี้ผมจะทยอยทำตัวหนากับตัวเอน คงอีกนานกว่าจะเสร็จ
ชื่อเรื่อง: ตอบ: บุญมา พาซื่อ
โพสต์โดย: iannnnn เมื่อ 09 ต.ค. 2014, 22:37 น.
เห็นจากภาพแนบนี่แล้วทึ่งกับ Tahoma จริงๆ ครับ
ถึงหน้าตาจะน่าเกลียด แต่ความอ่านได้อ่านง่ายนี่มันเหนือจริงๆ :12:
hinting เป๊ะมากๆ ด้วย
ชื่อเรื่อง: ตอบ: บุญมา พาซื่อ
โพสต์โดย: ijiryu เมื่อ 10 ต.ค. 2014, 19:05 น.
ถ้าดูจากภาพรวมก็Okดีนะครับ :12: