สร้างฟอนต์จากลายมือของฉันเอง

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

---

ความพยายามเพื่อเพิ่มเอกลักษณ์ให้เว็บไซต์ส่วนตัว

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

ความพยายามกับเครื่องมือโอเพนซอร์สและความล้มเหลว

• ผู้เขียนลองใช้ เครื่องมือโอเพนซอร์สอย่าง Inkscape และ FontForge เพื่อสร้างฟอนต์แบบเวกเตอร์
  • ใช้กราฟิกแท็บเล็ตเขียนตัวพิมพ์ใหญ่ A, B, C แล้วบันทึกเป็น SVG เพื่อนำเข้าโปรแกรมแก้ไขฟอนต์
  • รู้สึกท้อใจกับ ประสบการณ์ใช้งานที่ไม่สะดวกของ FontForge และ UI ที่ไม่เป็นธรรมชาติ
  • แม้แต่ขั้นตอนพื้นฐานอย่างการเลือกไฟล์ การนำเข้า และการโหลด SVG ก็ต้องลองผิดลองถูกและยุ่งยากมาก
  • ระหว่างแก้ไข glyph ยังรู้สึกว่าการจัดการ Bezier handle สำหรับเส้นโค้งนั้นไม่สะดวก
  • ด้วยข้อความผิดพลาดที่ขึ้นซ้ำๆ และการต้องเปลี่ยนเส้นทางไฟล์ไปมาอย่างวุ่นวาย ทำให้ ล้มเลิกกลางคัน
• ผู้เขียนยังลองใช้ความสามารถสร้าง SVG font ของ Inkscape แต่ก็พบว่าเป็น กระบวนการที่ซับซ้อนและไม่มีประสิทธิภาพ เพราะต้องรวมแต่ละ glyph ให้เป็น path เดียวและต้องมีความรู้ด้านการแก้ไขเวกเตอร์พอสมควร

การเลือกใช้เว็บเซอร์วิสแบบเสียเงิน (Calligraphr)

• ระหว่างค้นหาบทแนะนำเกี่ยวกับโอเพนซอร์สหลายแบบ ผู้เขียนก็พบกับบริการแบบปิดซอร์สชื่อ Calligraphr
  • เวอร์ชันฟรีมีข้อจำกัดเรื่อง ligature, รูปแบบแปรผันต่างๆ และจำกัดไว้ที่ 75 glyph แต่สามารถใช้ฟีเจอร์พรีเมียมได้ด้วย การจ่ายเงินครั้งเดียวสำหรับ 1 เดือน
  • ผู้เขียนประเมินสูงกับรูปแบบที่ จ่ายครั้งเดียวโดยไม่มีการต่ออายุอัตโนมัติ และนโยบายราคาที่โปร่งใส
• วิธีใช้งาน Calligraphr
  • พิมพ์เทมเพลตออกมาแล้วเขียนด้วยลายมือ จากนั้นสแกนและอัปโหลดกลับเข้าไปในบริการ
  • ในเทมเพลตสามารถใส่ได้ทั้งตัวอักษร สัญลักษณ์ ligature และรูปแบบอื่นๆ ที่เลือกไว้
  • สามารถทำหลายเวอร์ชันเพื่อประเมินและเลือกได้ และยังเพิ่ม custom ligature ให้เข้ากับชื่อบล็อกอีกด้วย
  • ใช้ ปากกา Sharpie เพื่อให้ลายเส้นหนาและคมชัด เป็นเอกลักษณ์ของตัวอักษร
  • ใช้ความสามารถสแกนเอกสารของ iPhone เพื่อสแกนเป็น PDF แล้วอัปโหลด

การปรับปรุงฟอนต์ซ้ำๆ และการเก็บรายละเอียด

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

ผลลัพธ์และประสบการณ์เชิงบวกกับบริการ Calligraphr

• ฟอนต์ที่ทำเสร็จแล้วช่วยให้ ส่วนหัวและคำบรรยายบนเว็บไซต์มีอารมณ์เหมือนลายมือจริง ตรงกับเอกลักษณ์ที่ผู้เขียนต้องการ
• ด้วยความหนาของ Sharpie ทำให้ อ่านได้ชัดแม้ในขนาดตัวอักษรเล็ก
• เมื่อเทียบกับเครื่องมือโอเพนซอร์ส ผู้เขียนรู้สึกถึงความคุ้มค่าในการทำงานให้เสร็จได้ด้วย เวลาสั้นลงและค่าใช้จ่ายต่ำกว่าแรงที่ต้องลงเอง
• แม้หลังจากยกเลิกการสมัครแล้ว Calligraphr ก็ยังส่งออกข้อมูลผู้ใช้เป็นแบ็กอัปโดยอัตโนมัติ
  • อยู่ในรูปแบบ JSON ซึ่งเก็บข้อมูล glyph ทั้งหมดและข้อมูลภาพไว้ เพื่อให้นำไปใช้ตอนกลับมาสมัครใหม่หรือแก้ไขเพิ่มเติมภายหลังได้
  • ผู้เขียนประทับใจกับ แนวปฏิบัติทางธุรกิจที่เป็นมิตรต่อผู้ใช้ เช่น นโยบายที่ชัดเจนล่วงหน้า ไม่มีการชักชวนให้จ่ายซ้ำ และเปิดให้เข้าถึงข้อมูลอย่างโปร่งใส
• หากใครอยากลองทำแบบเดียวกัน ประสบการณ์นี้ก็น่าแนะนำเพียงเพราะ ความเรียบง่ายและการบริการที่ยึดผู้ใช้เป็นศูนย์กลาง ของ Calligraphr

[GN⁺]

ความคิดเห็นจาก Hacker News

• ฉันเคยทำอะไรคล้าย ๆ กันสำหรับเว็บไซต์งานแต่งของตัวเองในปี 2013 ใช้บริการทางไปรษณีย์เพื่อทำ TTF ที่ใช้ได้ดี แล้วแปลงมันเป็น WOFF ตอนนี้ก็ยังออนไลน์อยู่ที่ https://ruthandjosh.net/story/ (ระวังความเป็นมิลเลนเนียล)
  • การดูแลให้เว็บไซต์ที่ลิงก์ยังไม่ตายในยุคนี้ถือว่าน่าทึ่งจริง ๆ
  • เรื่องราวนี้สวยงามมาก ฉันไม่รู้สึกว่ามันน่าอายเลยสักนิด
  • ขอบคุณที่แบ่งปันความเขินอายแบบนี้ ทำให้ปิดสัปดาห์ได้อย่างยอดเยี่ยม ชาบัต ชาโลม
  • เว็บไซต์นี้เจ๋งมาก ดีไซน์และเลย์เอาต์กลับให้ความรู้สึกเหนือกาลเวลาเสียอีก
  • ฉันสงสัยว่า Ruth ดื่มแชมเปญคนเดียวบนเครื่องบินจริงไหม
• ขอเป็นกำลังใจให้กับความพยายามและเส้นทางนี้ ฉันเข้าใจการตัดสินใจอย่างตรงไปตรงมาที่เลิกทางเลือกโอเพนซอร์สแล้วเลือกทางเลือกที่ถูกกว่าเพื่อจะได้มีของเป็นของตัวเอง เรื่องของฉันก็คล้ายกัน ฉันก็เป็นครีเอทีฟสายเรียนรู้เอง เลยชอบดื้ออยากลองใช้เทคนิคหรือเครื่องมือบางอย่างให้ได้เป็นครั้งคราว ไม่แน่ใจว่านี่เป็นเพราะ sunk cost หรือความสมบูรณ์แบบนิยมไหม ดีไซน์ของเว็บมีเอกลักษณ์มาก PS: ฉันบุ๊กมาร์กไว้ใน Firefox ด้วยแท็ก fonts, developer-blog, creative-sites, boutique-designs
• ลายมือฉันแย่มากจริง ๆ และยิ่งเขียนก็ยิ่งแย่ เป็นวงจรอุบาทว์ ลายมือไม่ดีเลยพิมพ์ทุกอย่างแทน แล้วพอไม่ฝึกก็ยิ่งแย่ลงไปอีก ถ้าทำฟอนต์จากลายมือฉันได้คงเอาไปใช้เป็นแฮชรหัสผ่านได้เลย ถึงอย่างนั้นฉันก็ชอบไอเดียนี้นะ ฉันไม่คิดว่าการพิมพ์ข้อความจะมีความเป็นส่วนตัวน้อยกว่าการเขียนด้วยมือ แต่ในความเป็นจริงมันก็ให้ความรู้สึกเป็นส่วนตัวน้อยกว่านิดหน่อย ฟอนต์ลายมือน่าจะช่วยชดเชยความรู้สึกนี้ได้บ้าง
  • น่าจะเหมาะดีถ้าเอาไปใช้เป็นฟอนต์ปกอัลบั้มวง black metal
  • ฉันคิดว่าปรากฏการณ์แบบ "มีวิธีที่ง่ายกว่าอยู่แล้วจนคนไม่รู้สึกจำเป็นต้องฝึกทักษะนั้นเลย และค่อย ๆ เสียโอกาสที่จะได้เรียนรู้มัน" เป็นปัญหาใหญ่มากในทุกวันนี้ พอเรียนรู้แต่ระบบที่ง่าย สุดท้ายเราก็ได้เรียนรู้แค่วิธีใช้ระบบ ไม่ใช่ทักษะจริง ๆ อย่างเช่นรูมเมตฉันใช้ได้แต่ระบบลับมีด แต่ลับมีดด้วยมือไม่เป็น ถ้าไม่มีระบบก็ทำอะไรไม่ได้ เดี๋ยวนี้คนแบบนี้มีเยอะมาก แค่ทำตามคู่มือโดยไม่มีความเชื่อมโยงว่าเหตุผลคืออะไร ในระดับสังคมโดยรวม ความสามารถพื้นฐานก็อ่อนแอลงอย่างหนัก และฉันคิดว่าส่วนหนึ่งเป็นเพราะทุนนิยมทำให้ทุกอย่างกลายเป็นโครงสร้างที่ต้องจ่ายเงินเพื่อประหยัดเวลา
• เท่าที่ฉันรู้ Microsoft Font Maker ยังใช้ได้ฟรีบน Windows Ink stylus อยู่ตอนนี้ (แม้อาจประสิทธิภาพไม่ค่อยดีนัก) ฉันจำไม่ได้ว่าเมื่อก่อนใช้ตัวไหน แต่คิดว่าน่าจะมากับ PowerToy สำหรับ Windows Tablet PC https://apps.microsoft.com/detail/9n9209f8s3vc?hl=en-US&gl=US
• ฉันเคยมีประสบการณ์ถูกทำร้ายตอนเด็ก เลยทำให้ลายมือแย่มาก เขียนหวัดก็ไม่ค่อยได้ ถ้ามีฟอนต์ที่ทำจากลายมือฉัน ทุกคนคงพูดว่า "ว้าว พ่อแม่ของคนนั้นคงไม่รับผิดชอบเอาเสียเลย" แล้วชื่อฟอนต์ใน Microsoft Word คงเป็น "Danny Wets The Bed" พูดเล่นนะ แต่ฉันอ่านอย่างเพลิดเพลินและเป็นโพสต์ที่ยอดเยี่ยมมาก
• ตอนเป็นวัยรุ่น ฉันเคยทำ ttf-font จากลายมือของผู้หญิงที่ฉันชอบแล้วให้เป็นของขวัญ ฉันประเมินงานนั้นต่ำเกินไปจริง ๆ ใช้เครื่องมือที่มากับ Corel Draw Suite แล้วสแกนอักษรที่เธอเขียนให้ ก่อนจะเวกเตอร์ตัวอักษรทุกตัวด้วยมือ งานหนักมหาศาลมาก ผ่านมา 25 ปีแล้ว ฉันก็ยังทึ่งกับความทุ่มเทใสซื่อของตัวเองในตอนนั้น แค่จะทำของขวัญวันเกิดชิ้นหนึ่งกลับทุ่มเวลาไปมากมาย ทั้งที่จริง ๆ ก็แทบไม่รู้ว่าตัวเองกำลังทำอะไรอยู่ สุดท้ายก็ทำเสร็จ แต่คงเป็นไปได้ก็เพราะตอนนั้นไม่รู้อะไรเลย
  • ดีกว่ามิกซ์เทปเยอะ ถ้าให้ฉันเขียนอะไรด้วยลายมือตัวเองคงเหมือนการลงโทษมากกว่า
  • อยากรู้ว่าหลังจากนั้นคุณสองคนเป็นยังไงต่อ ความพยายามนั้นคุ้มค่าไหม แล้วจบแบบแฮปปี้เอนดิ้งหรือเปล่า
• ฉันสงสัยว่าเทคโนโลยีพัฒนาไปไกลพอจนแยกไม่ออกจากลายมือจริงแล้วหรือยัง ถ้าใช้สิ่งนี้ทำการบ้านที่อาจารย์ในโรงเรียนบังคับให้เขียนด้วยมือล่ะ จะพอผ่านไปแบบไม่ถูกจับได้ไหม แน่นอนว่านี่เป็นเพียงสถานการณ์สมมุติ
• ฉันสงสัยว่ามีวิธีแปลงแนวทางที่ Amy Goodchild ทดลองไว้ ( https://www.amygoodchild.com/blog/cursive-handwriting-in-javascript ) ให้กลายเป็นไฟล์ฟอนต์จริงหรือไม่
  • น่าจะกลายเป็นปัญหาเรื่องการ "แปล" Chaikin's paths ให้เป็นเส้นโค้ง Bézier จากนั้นก็น่าจะทำเป็นฟอนต์ Metafont ได้ และจากตรงนั้นก็แปลงเป็น ttf, otf ฯลฯ ได้เช่นกัน
• มีคนอื่นที่เดินเส้นทางคล้ายกันเหมือนกัน
  • Amy Goodchild: https://news.ycombinator.com/item?id=40408291
  • Kathleen Tuite: https://kaflurbaleen.blogspot.com/2012/12/creating-font-from-my-handwriting.html
  • Julia Evans: https://jvns.ca/blog/2020/08/08/handwritten-font/
  • แล้วก็ยังมีฟอนต์ Tekton ที่ยอดเยี่ยมและมีมานานมากอีกด้วย อ้างอิงจากลายมือของสถาปนิก Frank D.K. Ching แต่ตัวงานออกแบบจริงทำโดย David Siegel แห่ง Adobe
• เป็นงานที่เจ๋งมากจริง ๆ ขอบคุณที่แบ่งปัน ตอนนี้ฉันกำลังเตรียมเวิร์กช็อปกับเด็ก ๆ อยู่ และอยากให้พวกเขาได้ลอง "วาด" เว็บไซต์หรือเว็บแอปของตัวเองขึ้นมาจริง ๆ จนถึงตอนนี้ฉันยังไม่ได้ใส่ส่วนทำฟอนต์เข้าไปเพราะไม่รู้วิธี แต่ตอนนี้รู้แล้ว ขอบคุณมาก! ถ้าใครมีไอเดียว่าจะทำให้เวิร์กช็อปแบบนี้สนุกขึ้นได้อีกก็อยากฟัง เช่น การทำต้นแบบบนกระดาษแล้วเปลี่ยนเป็นคลิกดัมมีจริง ๆ ที่ใช้งานได้ เพื่อให้การเปลี่ยนผ่านระหว่างอนาล็อกกับดิจิทัลเป็นธรรมชาติขึ้น เด็กที่พูดถึงที่นี่อายุ 8–10 ปีนะ
  • สวัสดีครับ/ค่ะ ถ้าคุณยินดีรับ ผม/ฉันก็อยากมีส่วนช่วยเรื่องนั้นเหมือนกัน ฉันอยากลองสอนเทคโนโลยีเชิงสร้างสรรค์ให้เด็ก ๆ ในบ้านเกิดของฉัน ฉันอยู่ที่ไนจีเรีย/แอฟริกา และใช้ JavaScript แบบไม่ใส่อัญประกาศเดี่ยวกับอัฒภาค