ระหว่างที่แก้ฟอนต์ JS Jindara (จินตหรา) ก็เกิดความอยากมีฟอนต์ใช้งานของตัวเองบ้าง เป้าหมายแรกของการออกแบบฟอนต์บรรทัดคือต้องการตัวอักษรทางการเพื่อใช้งานเอกสารเป็นหลัก
การดีไซน์รูปแบบ อยากทำให้ตัวอักษรดูโค้งเพื่อไม่ให้รู้สึกแข็งมากนัก แต่จุดยากของตัวด้านบนโค้งคือเวลาเขียนข้อความยาวเป็นแถว มันอาจจะดูลุ่มๆ ดอนๆ ไม่สม่ำเสมอ
นึกอยู่ว่าจะตั้งชื่อยังไงดี ระหว่างตั้งชื่อโดยไม่ระบุตระกูล (เช่นกูเกิลฟอนต์ ที่ตัดเอา TH ด้านหน้าชื่อฟอนต์แห่งชาติออก) กับตั้งชื่อตระกูลเพื่อให้รายชื่อฟอนต์อยู่ในกลุ่มเดียวกัน สุดท้ายเลือกชื่อตระกูล A5 เพราะเป้าหมายต้องการทำฟอนต์เอาไว้ใช้กับหนังสือขนาด A5
แบบอักษรอิงความกว้างของฟอนต์ JS Jindara ให้อ้วนหน่อยเพื่อความอ่านง่าย แต่หลังจากออกแบบเสร็จก็รู้สึกว่ามันค่อนข้างกินพื้นที่ด้านกว้างอยู่บ้าง พอเอามาใช้กับพื้นที่แคบๆ (หน้าจอโทรศัพท์มือถือ) แล้วมันไม่ค่อยพอใช้ อนาคตถ้าขยัน อาจจะทำทรงผอมที่ลดขนาดลงเหลือ 90%
https://x.com/HudchewMan/status/2088643936529289696
ตอนแรกเริ่มออกแบบโดยอิงขนาดของฟอนต์กูเกิล Chakra Petch (จักรเพชร) ทำส่วนการออกแบบด้วยโปรแกรม InkScape
เพื่อให้สามารถ copy จาก InkScape ไปแปะบน FontForge ได้เลยโดยไม่ต้องปรับสเกลอะไรอีก ผมใช้ฟอนต์จักรเพชรขนาด 750pt ได้ความสูงฟอนต์ที่ 558px
ได้โครงตัวอักขระ ขนาดกว้าง 400 × สูง 560 px (ตัว ก) และใช้เส้นบาง 50 px โดยอิงจากฟอนต์ JS Jindara (จินตหรา) 45px เพราะต้องการเส้นบาง และปัดเป็นตัวเลขกลมๆ ให้ทำงานง่าย
ซึ่งขนาดของฟอนต์ที่ 400 × 560 px นี้ เมื่อนำไปตั้งค่าใน FontForge จะได้ขนาด Em Size 1000 ที่เป็นค่าตั้งต้น โดยไม่ต้องแก้ไขอะไร
แต่หลังจากออกแบบฟอนต์ไปได้สักพัก พบปัญหาว่าตัวเลข 50 px เวลาออกแบบฟอนต์จะเจอปัญหาตอนแบ่งครึ่ง จะได้เป็นเลขคี่ 25 px ซึ่งไม่ตรงกับช่องกริด (ตั้งไว้ที่ช่องละ 10 px) ทำให้สแนปกริดไม่ได้ ครั้นจะใช้เลข 40 px เพื่อให้แบ่งได้ เส้นก็บางเกินไปอีก
ลองคำนวณดูแล้ว ถ้าเพิ่มเส้นขนาด 50 px ให้เป็น 60 px เวลาแบ่งครึ่งจะลงตัวกว่า เลยต้องขยายขนาดของอักขระจาก 400 × 560 px เป็น 500 × 700 px ซึ่งก็คืออัตราส่วนเพิ่มขึ้น 125% (× 1.25) แต่ตัวเลข 60 px จะได้เส้นบางลงนิดนึง (ของเดิม 50 × 1.25 = 62.5) แต่ก็ยังมากกว่าจินตหรา (45 × 1.25 = 56.25) อยู่ดี ซึ่งเป็นค่าที่ยอมรับได้
ขนาดฟอนต์ที่ใช้อ้างอิง จาก 750 pt ก็เพิ่มเป็น 937.5 pt
การทำงานด้วยหน่วย px ขนาดนี้ หน้ากระดาษสำหรับทำงานเลยใหญ่มาก ถ้าลดลง 10 เท่า ตัวอักษรขนาด 50 × 70 px จะลดลงมาก แต่ตอนเอาไปใช้กับ FontForge ต้องขยายสัดส่วนอีก 10 เท่า
เมื่อปรับขนาดเพิ่มขึ้น ดังนั้น Em Size ที่เป็น 1000 เลยต้องปรับเป็น 1250 แทน เป็นตัวเลขที่แปลกๆ ไปสักนิด มีสองวิธีในการปรับค่าตรงนี้คือหลังจากทำฟอนต์จนเสร็จหมดแล้ว ไม่มีแก้ไขอะไร ก็ให้ปรับเลข 1250 เป็น 1000 หรือไม่ก็ตอนที่เอาตัว glyph ไปใส่ใน FontForge ก็ปรับลดขนาดลง 80%
ขนาดของเส้นตัวอักษร พอใช้เส้นของจินตหรามาอ้างอิงเป็นต้นแบบ ตัวเส้นมันเลยจะค่อนข้างบาง ซึ่งในสัดส่วนนี้ หากจะเอามาใช้เป็นขนาดเส้นตัวอักษร คิดเอาไว้ว่าจะแบ่งแบบนี้
เส้น 60 = ตัวบาง
เส้น 80 = ตัวปกติ
เส้น 100 = ตัวกึ่งหนา
เส้น 120 = ตัวหนา
เวลาออกแบบ ถ้าหากต้องการให้มีตัวบางด้วย ก็ออกแบบตัวบางจนเสร็จเป็นฟอนต์ จากนั้นเอาตัวบางมาเพิ่มเส้นสโตรกใน InkScape โดยยึดสัดส่วนแบบนี้
เส้น 20 = ตัวปกติ
เส้น 40 = ตัวกึ่งหนา
เส้น 60 = ตัวหนา
แต่เมื่อใส่เส้นขอบ (สโตรก) ลงไป มันจะขยายขนาดทั้งแนวตั้งและแนวนอน ทำให้ตัวอักษรไม่ใช่แค่กว้าง แต่ยังสูงเพิ่มอีกด้วย ทำให้ความสูงเปลี่ยนไป จึงต้องลดขนาดตัวอักษรลงอีก แต่พอลดตัวอักษรลง ความหนาของเส้นที่ถูกลด มันก็ลดตามไปด้วย เลยต้องเพิ่มขนาดเส้นมากกว่าเดิมเล็กน้อย
เส้น 22 = ตัวปกติ / ย่อ 97%
เส้น 44 = ตัวปกติ / ย่อ 94%
เส้น 66 = ตัวปกติ / ย่อ 91%
ความสูงของ glyph หลังจากย่อแล้ว จะเตี้ยกว่าตัวบางที่ทำไว้เล็กน้อย ไม่เกิน 3px ถือว่ายอมรับได้เมื่อใช้เป็นเลขเต็มไม่ต้องมีทศนิยม
หรือถ้าจะไม่ไปรับขนาดเส้น ยังใช้เส้นขอบที่ 20 / 40 / 60 จะเป็นค่าแบบนี้
97.4% = ตัวปกติ / เส้นหนา 78.4
94.4% = ตัวกึ่งหนา / เส้นหนา 96.4
92% = ตัวหนา / เส้นหนา 114
และการเพิ่มเส้นขอบแบบนี้ ก็จะทำให้หัวตัวอักษรมันตัน ดูไม่สบายตา จึงต้องขยายรูให้ใหญ่ขึ้น
อักขระตัวบาง ใช้หัวขนาด 220 px รูข้างใน 120 px เมื่อทำตัวหนา จะทำรูเป็นขนาด 100px ดูแล้วกำลังดี แต่พวกหัวของสระ-วรรณยุกต์ ที่มีขนาดเล็กลง ก็ปรับสัดส่วนลงตาม
ตอนแรกระยะห่างระหว่างตัวอักษร ใช้ระยะซ้ายขวา (L-bearing / R-bearing) เป็น 80 แต่พอใช้กับข้อความยาวๆ แล้วรู้สึกว่ามันชิดเกินไป เลยปรับระยะเป็น 95 รู้สึกว่าอ่านสบายตาขึ้นกว่าเดิม
การตั้งค่าพื้นฐานโดยรวมรู้สึกพอใจ แต่ยังเหลืองานต้องเก็บรายละเอียดของระยะคู่ชิด (Kerning) ของตัวอักษรภาษาอังกฤษอีก และตั้งค่า GPOS Kerning ของคู่สัญลักษณ์บางตัว
ไม่มีความคิดเห็น:
แสดงความคิดเห็น