บันทึกการทำฟอนต์ลายมือ

 (kokorobot.ca)
3 คะแนน โดย GN⁺ 2023-11-28 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • เมื่อข้อความลายมือในคอมิก hakum มีขนาดและความอ่านง่ายไม่สม่ำเสมอในแต่ละหน้า จึงตัดสินใจทำลายมือของตัวเองเป็น ฟอนต์ TTF แทนการใช้ฟอนต์ที่มีอยู่
  • ความพยายามครั้งที่สองที่สแกนตัวอักษรที่เขียนบนกระดาษ ดูเป็นธรรมชาติและมีชีวิตชีวามากกว่าลายมือดิจิทัลที่เขียนด้วยแท็บเล็ตปากกา
  • ขอบเขตการทำจำกัดไว้ที่ A-Z, a-z, ตัวเลข 0-9 และเครื่องหมายวรรคตอนพื้นฐาน โดยตัดฟีเจอร์เสริมอย่างตัวหนา ตัวเอียง และ ligature ออกจากเป้าหมาย
  • กระบวนการคือจัดการภาพสแกนใน Gimp แยกเป็น PNG แล้วปรับเส้นโครงร่าง glyph, ระยะขอบซ้ายขวา และ kerning ใน FontForge
  • ในขั้นตอน Autotrace และการส่งออก อาจเกิดปัญหาตรวจสอบอย่าง missing points at extrema และ self intersecting ได้ ฟอนต์ลายมือจึงต้องมีการปรับแต่งหลังทำค่อนข้างมาก

เหตุผลที่เปลี่ยนลายมือเป็นฟอนต์

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

ความพยายามสองครั้งและคำศัพท์พื้นฐานของแบบอักษร

  • ฟอนต์แรกทำจาก ลายมือดิจิทัล ที่เขียนด้วยแท็บเล็ตปากกา
  • ฟอนต์ที่สองทำจากภาพสแกนตัวอักษรที่เขียนบนกระดาษ และตัวอักษรบนกระดาษที่ไม่แม่นยำมากนักก็ดูมีชีวิตชีวาและเป็นธรรมชาติกว่า
  • ระหว่างทำฟอนต์ได้เรียนรู้คำศัพท์โครงสร้างของแบบอักษร และการรู้หน้าที่ของแต่ละองค์ประกอบช่วยให้เลือกการออกแบบได้ดีขึ้นและทำฟอนต์ที่ใช้งานได้มากขึ้น
    • Ascender: ส่วนของตัวพิมพ์เล็กที่ยื่นขึ้นเหนือ x-height
    • Baseline: เส้นฐานที่ตัวอักษรส่วนใหญ่วางอยู่ และเป็นเส้นอ้างอิงที่ descender ยื่นลงไปด้านล่าง
    • Cap Height: เส้นที่แสดงความสูงของตัวพิมพ์ใหญ่ส่วนใหญ่
    • Descender: ส่วนที่ยื่นลงต่ำกว่า baseline เช่น p, q
    • X-Height: ระยะระหว่าง baseline กับ mean line ของตัวพิมพ์เล็ก

ภาพสแกนและการจัดการใน Gimp

  • เป้าหมายการทำคือ ตัวพิมพ์ใหญ่ A-Z, ตัวพิมพ์เล็ก a-z, ตัวเลข 0-9 และ เครื่องหมายวรรคตอนพื้นฐาน เช่น จุลภาค เครื่องหมายตกใจ และเครื่องหมายคำถาม
  • ตอนแรกใช้ดินสอขีดเส้นอ้างอิง baseline, cap height, x-height และ descender ในสมุดสเก็ตช์ แล้ววาดตัวอักษร
  • เมื่อวาดตัวอักษรระหว่างเส้นอ้างอิง ตัวอักษรดูแข็งเกินไป หลังจากนั้นจึงเขียนประโยค "The quick brown dog jumps over the lazy fox" หลายครั้งทั้งตัวพิมพ์ใหญ่และตัวพิมพ์เล็ก
    • ประโยคนี้มีอักขระทุกตัวที่จำเป็นสำหรับ a-z
    • เมื่อเขียนเป็นประโยค จะไม่จดจ่อกับตัวอักษรมากเกินไป ทำให้ได้รูปทรงที่ดีกว่า
    • เมื่อวาดบนกริด จะมัวแต่สนใจข้อจำกัด
  • เลือกประโยคที่เขียนได้ดีที่สุดมาใช้ทำฟอนต์ และบางส่วนก็ใช้ตัวอักษรที่วาดบนกริดด้วย
  • เพราะวิธีนี้ หลังจากนั้นจึงต้องปรับ cap-height, x-height และ descender ของแต่ละตัวอักษรแบบดิจิทัล
  • ภาพตัวอักษรที่สแกนถูกนำไปใช้ Color > Threshold ใน Gimp เพื่อลบสีเทาออก
  • เนื่องจากลักษณะของดินสอและกระดาษ รวมถึงการไม่ใช้กริด จึงใช้เครื่องมือดินสอของ Gimp แก้ข้อบกพร่องของตัวอักษร
    • ปิด dynamics ทั้งหมดใน Tool Options เพื่อให้ได้เส้นที่สะอาด
  • ตัวอักษรที่จัดการแล้วถูกคัดลอกมารวมในเอกสาร Gimp ใหม่ และตั้งขนาดเอกสารให้รองรับตัวอักษรที่ใหญ่และกว้างที่สุดคือ M ตัวพิมพ์ใหญ่
  • ในขั้นตอนนี้ตรวจสอบว่าความหนาของเส้นไม่แตกต่างกันมากเกินไป
  • ส่งออกตัวอักษรทั้งหมดเป็น PNG แยกแต่ละตัวไปยังโฟลเดอร์โปรเจกต์

การสร้าง glyph ใน FontForge

  • เลือกใช้ FontForge เพราะทำงานบน Linux และคนรอบตัวแนะนำ ประสบการณ์ใช้งานก็ดี
  • เมื่อสร้างโปรเจกต์ใหม่ Font View Window จะเปิดขึ้น และแสดงช่อง glyph ทั้งหมดของฟอนต์ในรูปแบบตาราง
  • ป้อนข้อมูลฟอนต์ที่ Element > Font Info และเพิ่มชื่อฟอนต์ใต้ PS Names
  • หากต้องการส่งออกเป็น TTF ให้เปลี่ยน Em size เป็น 1024 ใน General ของหน้าต่างเดียวกัน
    • โดยธรรมเนียม UPM ของฟอนต์ TrueType ใช้เลขยกกำลังของ 2 เช่น 1024 หรือ 2048
    • ฟอนต์ OTF มีข้อกำหนดต่างออกไป
    • ในอดีตของตัวพิมพ์โลหะ ตัวอักษรแต่ละตัวอยู่ในคอนเทนเนอร์พื้นที่ของตัวเองเพื่อให้มีความสูงคงที่ และความสูงของชิ้นตัวพิมพ์นี้เรียกว่า ‘em’
  • เมื่อดับเบิลคลิก glyph ใน Font View จะเปิด Character View
    • ที่นี่ใช้วาดหรือแก้ไข glyph
    • สามารถดูทีละตัวด้วยอินเทอร์เฟซแบบแท็บ หรือใช้ไฟล์ข้อความที่เตรียมไว้เพื่อตรวจคำแบบเรียงติดกันได้
  • เลือกเลเยอร์ Back จากรายการเลเยอร์มุมซ้ายล่าง แล้วนำเข้า PNG ของตัวอักษรนั้นด้วย File > Import
  • จากนั้นสร้างเส้นโครงร่าง glyph ด้วยหนึ่งในสองวิธี
    • วาดเส้นโครงร่างด้วยตัวเอง
    • เลือกเลเยอร์ Fore แล้วสร้างเส้นโครงร่างอัตโนมัติด้วย Select > Autotrace
  • Autotrace อ้างอิงภาพพื้นหลังเพื่อสร้างเส้นโครงร่างที่มี control point และเส้นโค้ง Bezier แต่ก็อาจมีจุดมากเกินไปหรือเกิดปัญหา extrema หายได้
  • เมื่อสร้างรูปทรงปิดแล้ว glyph นั้นจะแสดงในหน้าต่างอื่นด้วย

ระยะขอบซ้ายขวาและการพรีวิว

  • ปรับ side bearing ซ้ายและขวาของแต่ละ glyph เพื่อกำหนดความกว้างสุดท้ายของ glyph
  • หากต้องการจัด glyph ทั้งหมดให้อยู่กึ่งกลางโดยอัตโนมัติ ให้ใช้ Metrics > Auto Width
  • หากต้องการให้ glyph ทั้งหมดอยู่กึ่งกลางภายในความกว้าง ให้ใช้ Metrics > Center In Width
  • เวลาจะแก้เส้นโครงร่าง การปิดเลเยอร์อ้างอิงไว้จะช่วยได้
  • หากต้องการเริ่ม glyph ใหม่ ให้เลือก glyph ที่ต้องการใน Font Window แล้วใช้ Edit > Clear
  • หากต้องการลบเฉพาะเลเยอร์อ้างอิง ให้ใช้ Edit > Clear Background
  • ในช่องข้อความเหนือผืนงานของ Character View ถ้าป้อนคำหรืออักขระใด ๆ ต่อท้ายตัวอักษรปัจจุบัน จะสามารถพรีวิวรูปลักษณ์เมื่ออักขระอยู่ข้างกันได้
  • ต้องทำขั้นตอนนี้ซ้ำกับ glyph ทั้งหมด โดยเฉพาะถ้าไม่ปรับ side bearing ซ้ายขวาของ glyph Space ช่องว่างระหว่างคำจะใหญ่เกินไป

การตั้งค่า kerning

  • Kerning คือกระบวนการปรับระยะห่างระหว่างอักขระเพื่อให้ตัวอักษรดูอ่านง่าย
  • ใน Font Window ไปที่ Element > Font Info แล้วกด Add Lookup ในแท็บ GPOS ของ Lookups
  • เลือก Pair Position (Kerning) จากดรอปดาวน์ Type
  • ในคอลัมน์ Feature ให้กดลูกศรข้าง New เลือก Kern Horizontal Kerning แล้วกดยืนยัน
  • เลือกรายการ GPOS ที่สร้างใหม่ แล้วกด Add Subtable จากนั้นยืนยันโดยคงชื่อเริ่มต้นไว้
  • ตัวอักษรที่จะทำ kerning ให้ลากเลือกจากทั้งสองตาราง
    • ต้องเลือกทั้งตัวพิมพ์ใหญ่และตัวพิมพ์เล็ก
    • หากต้องเลือกทั้งสองชุดในตารางเดียว ให้ใช้ Shift
  • เมื่อคลิก pairings เวอร์ชันขยายของคู่ glyph จะแสดงที่ด้านล่างของหน้าต่าง
  • ลาก glyph ตัวที่สองให้เข้าใกล้หรือห่างจาก glyph ตัวแรกมากขึ้น พร้อมปรับให้ glyph ทุกชุดดูดี

การทดสอบและตรวจสอบการส่งออก

  • หากต้องการทดสอบฟอนต์และ kerning ภายใน FontForge ให้ใช้ File > Print
  • ข้อความเริ่มต้นไม่ได้แสดงทุกชุดที่เป็นไปได้ จึงสามารถเพิ่มข้อความเองได้
  • kern_pairings.txt มีชุด kerning ทั้งหมด และสามารถนำไปวางในหน้าจอทดสอบเพื่อใช้ได้

  • ปัญหาที่อาจพบระหว่างการส่งออก

    • เมื่อส่งออกด้วย File > Generate Fonts FontForge อาจทำเครื่องหมายอักขระบางตัวเป็นรายการที่ต้องตรวจสอบ
    • Non-integral coordinates คือกรณีที่ตำแหน่งของจุดหนึ่งจุดหรือหลายจุดในเส้นโครงร่าง glyph มีส่วนทศนิยม เช่น 2.25
    • เลือก glyph ที่มีปัญหา แล้วที่ Element > Validation > Find Problems ให้ติ๊ก "non-integral coordinates" จากนั้นทำ fix ซ้ำ
    • สำหรับฟอนต์ลายมือที่ไม่ได้พึ่งพาความแม่นยำมากนัก การย้ายไปยังพิกัดจำนวนเต็มที่ใกล้มาก ๆ อาจไม่ทำให้เกิดความเปลี่ยนแปลงใหญ่
    • Missing points at extrema คือสถานการณ์ที่ control point ของเส้นโค้งดันเส้นโค้งออกนอกขอบเขต
    • ต้องปรับ control point เพื่อให้จุดสูงสุดหรือจุดปลายสุดของเส้นโค้งกลายเป็นจุดสีเหลือง
    • Element > Add Extrema อาจช่วยได้ แต่ก็อาจทำให้ glyph บิดเบี้ยวหรือสร้างปัญหา non-integral coordinates เพิ่มขึ้น
    • แม้มีข้อผิดพลาดนี้ใน log ก็ยังสร้างฟอนต์ได้ แต่ฟอนต์อาจเกิดการบิดเบี้ยวเล็ก ๆ ที่น่ารำคาญได้
    • หากฟอนต์ลายมือมีความรกหรือใช้ Autotrace ก็อาจเกิดปัญหา extrema ได้
    • Self intersecting คือสถานการณ์ที่เส้นโครงร่าง glyph ซ้อนทับตัวเอง
    • ต้องตรวจเส้นทั้งหมดและกำจัดการซ้อนทับออก

การเลือก TTF และการติดตั้ง

  • สำหรับวัตถุประสงค์การใช้งาน TTF(TrueType Font) ก็เพียงพอแล้ว
  • OTF ไม่จำเป็น เพราะไม่มีแผนจะเก็บ glyph จำนวนมาก ไม่ต้องการใส่ตัวหนาและตัวเอียงเป็นสไตล์แยก และไม่ต้องใช้ ligature
  • คอนเทนต์ที่จะใช้ฟอนต์นี้จะเผยแพร่บนเว็บ และ TTF เหมาะกับวัตถุประสงค์นี้
  • หากต้องการสร้างฟอนต์จาก glyph ทั้งหมดใน Font View ให้ใช้ File > Generate Fonts
  • เลือก TTF เป็นรูปแบบเอาต์พุตจากดรอปดาวน์ใต้ชื่อฟอนต์แล้วกดยืนยัน ฟอนต์จะถูกบันทึกในโฟลเดอร์โปรเจกต์
  • ฟอนต์ที่สร้างแล้วสามารถย้ายไปยังตำแหน่งเก็บฟอนต์ของระบบได้
  • เอกสารอ้างอิงและตัวอย่างการใช้งาน
    • FontForge documentation: เอกสาร FontForge
    • My spellbook: วิธีติดตั้งฟอนต์บน Linux
    • kaizah, smile: ตัวอย่างที่ใช้ฟอนต์ที่สร้างขึ้น

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2023-11-28
ความคิดเห็นจาก Hacker News

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

    • FontForge เป็น โอเพนซอร์ส ข้ามแพลตฟอร์ม และมีฟีเจอร์ค่อนข้างครบ จึงน่าขอบคุณมาก แต่จากที่ลองใช้เอง ผลิตภัณฑ์เชิงพาณิชย์คู่แข่งดีกว่ามากจริง ๆ
      ถ้ามี macOS ก็ลองดู Glyphs(/Mini) หรือ RoboFont ได้ โดยมีช่วงทดลองใช้นานพอสมควร แต่สิ่งที่น่าตั้งตารอที่สุดยังเป็นเครื่องมือรุ่นถัดไป รวมถึงเครื่องมือบนเว็บอย่าง fontra.xyz
    • MFEK ก็น่าติดตามต่อไปว่าจะไปถึงสถานะที่สมบูรณ์กว่านี้หรือไม่
      งานทั้งหมดเกี่ยวกับ MFEK ที่เคยเห็นมาจนถึงตอนนี้ดูดีมากทีเดียว
      https://mfek.org/
    • ไหน ๆ ก็พูดถึง FontForge แล้ว อยากรู้ว่ามีใครรู้วิธีพรีวิวด้วย ข้อความยาวหลายย่อหน้า ระหว่างทำฟอนต์ไหม
      ประโยคเดียวอย่าง “quick brown fox” มักไม่พอ

  • 100r.co ก็ควรไปดูให้ได้
    Devine และ Rekka ดำเนินสตูดิโอจากเรือใบ Pino พร้อมบันทึกชีวิต การเดินทาง และโปรเจกต์ต่าง ๆ

    • ประโยคที่ชอบที่สุดจาก Devine: “เวลายืนอยู่บนไหล่ยักษ์ มันบังคับทิศทางยากจริง ๆ”
      https://youtu.be/T3u7bGgVspM?si=dnkROEB15z77Pq7Z อยู่แถว ๆ นาทีที่ 6

  • สรุป FontForge ได้ดี
    อย่างที่บทความบอกเป็นนัย ๆ การ สร้างฟอนต์จากลายมือ ยังมีตัวเลือกที่ง่ายกว่าและอัตโนมัติกว่านี้ด้วย จากนั้นค่อยนำฟอนต์ที่ได้กลับมาแก้ไขเพิ่มเติมก็ได้
    https://www.calligraphr.com/en/ ชื่อเดิมคือ MyScriptFont

  • ฟอนต์ที่ทำออกมาดูค่อนข้างคล้ายกับฟอนต์ที่ผมทำไว้
    https://imgur.com/a/g8bIoUY
    ผมไม่ได้เจาะลึกการปรับแต่งอย่าง kerning มากนัก แต่ซอฟต์แวร์ 3–4 ตัวที่ลองใช้ล้วนชวนหงุดหงิดมาก หรือไม่ก็พัง หรือใช้งานยาก อาจเป็นปัญหาวิธีใช้ของผมเองก็ได้ และซอฟต์แวร์แบบเสียเงินน่าจะดีกว่ามาก นับถือที่ทำจนเสร็จได้

  • อยากรู้วิธีที่ง่ายที่สุดในการ รวมหลายฟอนต์ให้เป็นฟอนต์เดียว
    VS Code ไม่รองรับการตั้งค่าฟอนต์แยกตามภาษาหรือ token เช่น ใช้ Comic Sans กับคอมเมนต์ แล้วใช้ฟอนต์อื่นกับส่วนที่เหลือไม่ได้ แต่ตั้งค่าอย่างตัวเอียง/ตัวหนาได้

  • ชอบฟอนต์มาตั้งแต่ยุค 80s ตอนที่ Desktop Publishing เริ่มได้รับความนิยมและฟอนต์ถูกใช้อย่างแพร่หลาย
    อาจพูดได้ว่าช่วงหนึ่งมันถูกใช้มากเกินไปด้วยซ้ำ แต่ก็เป็นหนึ่งในสิ่งแรก ๆ ที่ทำให้รู้สึกว่าดีไซน์มีความสำคัญ ยังไงก็ตาม ฟอนต์สวยมากและภาพรวมก็ยอดเยี่ยม

  • สงสัยว่ามีคนทำฟอนต์ด้วย MetaFont/MetaPost จริง ๆ ไหม
    ก็ไม่รู้เหมือนกันว่า FontForge มีฟีเจอร์ scripting หรือเปล่า ไม่เคยใช้เอง เคยแค่อ่านดู แต่ผมอ่าน “Computers and Typesetting” ของ Knuth ครบทั้ง 5 เล่มแล้ว

  • สงสัยว่ามี สตาร์ทอัพ AI wrapper ที่ช่วยทำฟอนต์อยู่แล้วหรือยัง
    prompt น่าจะน่าสนใจ เช่น “ออกแบบฟอนต์คริสต์มาสที่ได้รับอิทธิพลจากบอลข่านอย่างแรง แต่ผสม brutalism แบบโซเวียต และเป็นมิตรกับเด็ก” อะไรทำนองนี้
    ในเชิงพาณิชย์ การใช้ฟอนต์ที่มีความแปลกใหม่ต่างวัฒนธรรมก็ควรกลายเป็นเรื่องธรรมชาติทางวัฒนธรรมด้วย เข้าใจว่าทำไม Helvetica, Roboto, Noto Sans และฟอนต์สมัยใหม่กว่านั้นถึงถูกใช้ แต่โลกมันก็ดูจืดไปหน่อยจริง ๆ

  • น่าเสียดายที่บทความบล็อกไม่ได้ใช้ ฟอนต์ของตัวเอง นับเป็นโอกาสที่พลาดไป

  • ประโยคนั้นควรเป็น สุนัขจิ้งจอกกระโดดข้ามสุนัข ไม่ใช่ “สุนัขกระโดดข้ามสุนัขจิ้งจอก” ;-)
    เพราะสุนัขขี้เกียจ ส่วนสุนัขจิ้งจอกว่องไว