हैंडराइटिंग फ़ॉन्ट बनाने की कहानी

 (kokorobot.ca)
3 पॉइंट द्वारा GN⁺ 2023-11-28 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • कॉमिक hakum में हैंडराइटिंग टेक्स्ट का आकार और readability हर पेज पर बदलने लगा, तो मौजूदा फ़ॉन्ट की जगह अपनी handwriting को TTF फ़ॉन्ट में बदलने का फैसला किया गया
  • Pen tablet से लिखी गई digital handwriting की तुलना में, कागज़ पर लिखे अक्षरों को scan करने वाली दूसरी कोशिश ज़्यादा natural और organic लगी
  • काम का दायरा A-Z, a-z, अंक 0-9 और बुनियादी punctuation तक सीमित रखा गया; bold, italic और ligature जैसी extended features लक्ष्य में शामिल नहीं थीं
  • Workflow में Gimp से scan images को साफ़ करना, उन्हें PNG में अलग करना, और फिर FontForge में glyph outlines, left/right spacing और kerning adjust करना शामिल था
  • Autotrace और export के दौरान missing points at extrema, self intersecting जैसी validation issues आ सकती हैं, इसलिए handwriting fonts में काफी post-processing चाहिए होती है

handwriting को font में बदलने की वजह

  • कॉमिक hakum का text पहले pen tablet से सीधे digital रूप में लिखा जाता था
  • नतीजा ठीक था, लेकिन एक ही page में भी अक्षरों का size अक्सर बड़ा या छोटा हो जाता था, जिससे readability डगमगा जाती थी
  • मौजूदा font इस्तेमाल नहीं करना था, इसलिए अपनी handwriting के आधार पर font बनाने का फैसला किया
  • लक्ष्य web publishing के लिए TTF font था, और इसमें सिर्फ़ सीमित character set शामिल किया गया
    • Bold और italic नहीं बनाए गए
    • Font बनाना और FontForge इस्तेमाल करना पहली बार था, इसलिए बेहतर तरीके हो सकते हैं

दो कोशिशें और font की basic terminology

  • पहला font pen tablet से लिखी गई digital handwriting के आधार पर बनाया गया था
  • दूसरा font कागज़ पर लिखे अक्षरों की scanned images से बनाया गया, और कागज़ पर लिखे अक्षर कम precise होने के कारण ज़्यादा organic और natural दिखे
  • Font बनाते समय font structure से जुड़े terms सीखे, और हर element का function समझने से बेहतर design choices और functional font बनाने में मदद मिलती है
    • Ascender: lowercase letters में x-height से ऊपर जाने वाला हिस्सा
    • Baseline: वह reference line जिस पर ज़्यादातर letters टिकते हैं और descender नीचे जाता है
    • Cap Height: ज़्यादातर uppercase letters की ऊंचाई दिखाने वाली line
    • Descender: p, q की तरह baseline से नीचे जाने वाला हिस्सा
    • X-Height: lowercase letters की baseline और mean line के बीच की दूरी

scanned images और Gimp में cleanup

  • बनाने के लिए uppercase A-Z, lowercase a-z, अंक 0-9, और comma, exclamation mark, question mark जैसे basic punctuation चुने गए
  • शुरुआत में sketchbook पर baseline, cap height, x-height और descender reference lines pencil से खींचकर अक्षर बनाए गए
  • Reference lines के बीच अक्षर बनाने पर वे बहुत stiff हो गए, इसलिए बाद में "The quick brown dog jumps over the lazy fox" sentence को uppercase और lowercase में कई बार लिखा गया
    • इस sentence में a-z के लिए ज़रूरी सभी characters शामिल हैं
    • Sentence के रूप में लिखते समय अक्षरों को ज़रूरत से ज़्यादा conscious होकर नहीं लिखा गया, जिससे बेहतर shapes निकले
    • Grid पर बनाते समय ध्यान सिर्फ़ constraints पर चला जाता था
  • सबसे अच्छे लिखे गए sentence को font बनाने के लिए चुना गया, और कुछ जगह grid पर बनाए गए letters भी इस्तेमाल किए गए
  • इस तरीके की वजह से बाद में हर character की cap-height, x-height और descender को digital रूप से align करना पड़ा
  • Scanned letter images में Gimp से Color > Threshold apply करके grey हटाया गया
  • Pencil और paper की प्रकृति, और grid का इस्तेमाल न करने की वजह से Gimp के pencil tool से letters की कमियां सुधारी गईं
    • Tool Options में सभी dynamics बंद करके साफ़ lines हासिल की गईं
  • Cleaned letters को नए Gimp document में copy करके इकट्ठा किया गया, और document size इतना रखा गया कि सबसे बड़ा और चौड़ा letter, uppercase M, उसमें आ सके
  • इस stage पर जांचा गया कि line thickness बहुत ज़्यादा अलग-अलग तो नहीं हो रही
  • सभी letters को अलग-अलग PNG के रूप में project folder में export किया गया

FontForge में glyph बनाना

  • FontForge चुना गया क्योंकि यह Linux पर चलता है और आसपास के लोगों ने इसकी recommendation की थी; इस्तेमाल का अनुभव अच्छा रहा
  • नया project बनाने पर Font View Window खुलती है, और font के सभी glyph slots table के रूप में दिखते हैं
  • Element > Font Info में font information भरी गई, और PS Names के नीचे font का नाम जोड़ा गया
  • TTF में export करने के लिए उसी window के General में Em size को 1024 में बदला गया
    • TrueType fonts में UPM के लिए परंपरागत रूप से 1024 या 2048 जैसे powers of 2 इस्तेमाल होते हैं
    • OTF fonts की requirements अलग होती हैं
    • पुराने metal type में हर letter को समान height मिलाने के लिए अपने अलग space container में रखा जाता था, और इस type piece की height को ‘em’ कहा जाता था
  • Font View में glyph पर double-click करने से Character View खुलती है
    • यहीं glyph draw या edit किया जाता है
    • Tab interface से एक-एक करके देखा जा सकता है, या तैयार text file के ज़रिए words को साथ-साथ check किया जा सकता है
  • नीचे बाईं ओर layer list में Back layer चुनने के बाद File > Import से उस letter का PNG load किया गया
  • इसके बाद glyph outline बनाने के लिए दो तरीकों में से एक इस्तेमाल किया गया
    • Outline को सीधे draw करना
    • Fore layer चुनकर Select > Autotrace से automatic outline generate करना
  • Autotrace background image के reference से control points और Bezier curves वाली outline बनाता है, लेकिन points बहुत ज़्यादा हो सकते हैं या extrema missing की समस्या आ सकती है
  • Closed shape बन जाने पर वह glyph दूसरे windows में भी दिखने लगता है

left/right spacing और preview

  • हर glyph के लिए left और right side bearing adjust करके final glyph width तय की गई
  • सभी glyphs को automatically center align करने के लिए Metrics > Auto Width इस्तेमाल किया जाता है
  • सभी glyphs को width के अंदर center में रखने के लिए Metrics > Center In Width इस्तेमाल किया जाता है
  • Outline ठीक करते समय reference layer बंद रखना मददगार होता है
  • Glyph को फिर से शुरू करने के लिए Font Window में desired glyph चुनकर Edit > Clear इस्तेमाल किया जाता है
  • केवल reference layer हटाने के लिए Edit > Clear Background इस्तेमाल किया जाता है
  • Character View के work canvas के ऊपर text field में current character के बाद कोई word या arbitrary characters डालने पर यह preview किया जा सकता है कि letters एक-दूसरे के पास होने पर कैसे दिखते हैं
  • यह process सभी glyphs के लिए दोहरानी होती है, और खास तौर पर Space glyph की left/right side bearing adjust न की जाए तो words के बीच space बहुत बड़ा हो जाता है

kerning setup

  • Kerning वह process है जिसमें text पढ़ने में अच्छा लगे, इसके लिए characters के बीच spacing adjust की जाती है
  • Font Window में Element > Font Info पर जाकर Lookups के GPOS tab में Add Lookup दबाया गया
  • Type dropdown में Pair Position (Kerning) चुना गया
  • Feature column में New के पास arrow दबाकर Kern Horizontal Kerning चुना गया और confirm किया गया
  • नए बनाए गए GPOS item को चुनकर Add Subtable दबाया गया और default name जस का तस रखकर confirm किया गया
  • जिन letters की kerning करनी है, उन्हें दोनों tables में drag करके select किया गया
    • Uppercase और lowercase दोनों select करने होंगे
    • एक table में दोनों sets select करने के लिए Shift इस्तेमाल किया जाता है
  • Pairings पर click करने से glyph pair का enlarged version window के नीचे दिखता है
  • दूसरे glyph को drag करके पहले glyph के ज़्यादा पास या दूर रखते हुए adjust किया गया, ताकि सभी glyph combinations अच्छे दिखें

testing और export validation

  • FontForge के अंदर font और kerning test करने के लिए File > Print इस्तेमाल किया जाता है
  • Default text सभी possible combinations नहीं दिखाता, इसलिए अपना text add किया जा सकता है
  • kern_pairings.txt में सभी kerning combinations शामिल हैं, और इसे test screen में paste करके इस्तेमाल किया जा सकता है

  • export के दौरान आने वाली समस्याएं

    • File > Generate Fonts से export करते समय FontForge कुछ characters को review के लिए mark कर सकता है
    • Non-integral coordinates का मतलब है कि glyph outline के एक या कई points की position में 2.25 जैसा decimal component है
    • Problem glyph चुनकर Element > Validation > Find Problems में "non-integral coordinates" check करें और fix दोहराएं
    • ऐसी handwriting font में जो precision पर बहुत निर्भर नहीं करती, points को बहुत पास के integer coordinates पर ले जाने से बड़ा बदलाव नहीं हो सकता
    • Missing points at extrema वह स्थिति है जहां curve का control point curve को boundary के बाहर धकेलता है
    • Control points को इस तरह adjust करना चाहिए कि curve का सबसे ऊंचा point या extreme point yellow point बन जाए
    • Element > Add Extrema मदद कर सकता है, लेकिन glyph को distort कर सकता है या non-integral coordinates की समस्या और बना सकता है
    • Log में यह error होने पर भी font generate हो गया था, लेकिन font में subtle और परेशान करने वाली distortions आ सकती हैं
    • Handwriting font messy हो या Autotrace इस्तेमाल किया गया हो, तो extrema problems आ सकती हैं
    • Self intersecting वह स्थिति है जहां glyph outline खुद से overlap करती है
    • सभी lines जांचकर overlaps हटाने होंगे

TTF selection और installation

  • उपयोग के उद्देश्य के लिए TTF(TrueType Font) पर्याप्त था
  • OTF अनावश्यक था क्योंकि बहुत सारे glyphs store करने की योजना नहीं थी, bold/italic को अलग styles के रूप में जोड़ना नहीं था, और ligature की ज़रूरत नहीं थी
  • जिस content में font इस्तेमाल होना है वह web पर publish होगा, और TTF इस उद्देश्य के लिए suitable है
  • Font View के सभी glyphs से font generate करने के लिए File > Generate Fonts इस्तेमाल किया जाता है
  • Font name के नीचे dropdown में output format के रूप में TTF चुनकर confirm करने पर font project folder में save हो जाता है
  • Generated font को system की font storage location में move कर देना होता है
  • References और usage examples

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2023-11-28
Hacker News की राय

  • FontForge का overview अच्छा था, और बहुत पहले मैंने भी इसे थोड़ा इस्तेमाल किया था
    यह थोड़ा rough है, लेकिन मुझे यह भी नहीं पता कि commercial competitor सच में इससे बहुत बेहतर हैं या नहीं। नाम तक नहीं जानता
    और वेबसाइट बहुत शानदार है। अनोखी है और उसकी अपनी साफ पहचान है

    • FontForge open source, cross-platform और काफी feature-rich है, इसलिए इसकी कद्र है, लेकिन अपने अनुभव से कहूं तो commercial competitor वास्तव में काफी बेहतर हैं
      अगर आपके पास macOS है, तो trial period काफी लंबा होने वाले Glyphs(/Mini) या RoboFont को खुद आजमा सकते हैं। फिर भी सबसे ज्यादा उम्मीद अगली पीढ़ी के tools से है, जिनमें fontra.xyz जैसे web-based tools भी शामिल हैं
    • MFEK पर भी नजर रखना ठीक रहेगा कि क्या यह और ज्यादा complete state में पहुंचता है
      अब तक MFEK से जुड़ा जो भी काम देखा है, सब काफी शानदार लगा
      https://mfek.org/
    • FontForge की बात चली है तो, जानना चाहूंगा कि font बनाते समय कुछ paragraphs के text से preview करने का तरीका किसी को पता है क्या
      सिर्फ “quick brown fox” वाला एक वाक्य अक्सर पर्याप्त नहीं होता

  • 100r.co भी जरूर देखने लायक है
    Devine और Rekka पाल-नाव Pino पर अपना studio चलाते हुए अपनी जिंदगी, यात्राओं और projects को document करते हैं

    • Devine की कही हुई मेरी सबसे पसंदीदा लाइन: “जब आप दिग्गजों के कंधों पर खड़े हों, तो steer करना बहुत मुश्किल होता है”
      https://youtu.be/T3u7bGgVspM?si=dnkROEB15z77Pq7Z में करीब 6 मिनट पर आता है

  • FontForge का summary अच्छा है
    जैसा लेख में संकेत है, handwriting से font बनाने के लिए आसान और automated विकल्प भी हैं। उसके बाद result font को फिर से fine-tune भी किया जा सकता है
    https://www.calligraphr.com/en/ का पुराना नाम MyScriptFont था

  • बनाया गया font मेरे बनाए font से काफी मिलता-जुलता दिखता है
    https://imgur.com/a/g8bIoUY
    kerning जैसी optimizations में मैंने गहराई से नहीं गया, लेकिन जिन 3–4 software को इस्तेमाल किया, वे सभी बेहद frustrating, टूटे हुए या handle करने में कठिन थे। हो सकता है समस्या मेरे इस्तेमाल करने के तरीके में रही हो, और paid software शायद काफी बेहतर हो। इसे आखिर तक पूरा कर लेना शानदार है

  • कई fonts को एक font में merge करने का सबसे आसान तरीका जानना चाहता हूं
    VS Code language या token के हिसाब से font settings support नहीं करता। उदाहरण के लिए comments के लिए Comic Sans और बाकी के लिए कोई दूसरा font इस्तेमाल करना संभव नहीं है, लेकिन italic/bold जैसी settings संभव हैं

  • 80 के दशक में Desktop Publishing के popular होने के साथ जब fonts का व्यापक इस्तेमाल शुरू हुआ, तभी से मुझे fonts पसंद हैं
    कहा जा सकता है कि कुछ समय तक उनका जरूरत से ज्यादा इस्तेमाल हुआ, लेकिन design मायने रखता है—यह बात पहली बार महसूस कराने वाली चीजों में से fonts भी थे। खैर, यह शानदार font है और overview भी बेहतरीन है

  • जानना चाहता हूं कि क्या सच में कोई MetaFont/MetaPost से fonts बनाता है
    यह भी नहीं पता कि FontForge में scripting feature है या नहीं। मैंने इसे खुद इस्तेमाल नहीं किया, सिर्फ पढ़ा है, लेकिन Knuth की “Computers and Typesetting” की सभी 5 volumes पढ़ी हैं

  • जानना चाहता हूं कि font creation कराने वाला कोई AI wrapper startup पहले से है क्या
    prompt दिलचस्प होगा। उदाहरण के लिए “एक बच्चों के लिए friendly Christmas font design करो, जिस पर Balkan influence बहुत मजबूत हो, लेकिन उसमें Soviet brutalism भी मिला हो” जैसा कुछ
    commercial रूप से भी exotic fonts का इस्तेमाल cultural तौर पर natural होना चाहिए। Helvetica, Roboto, Noto Sans और ज्यादा modern fonts क्यों इस्तेमाल होते हैं, यह समझता हूं, लेकिन दुनिया सच कहें तो थोड़ी फीकी हो गई है

  • blog post में ही अपना font इस्तेमाल न करना एक missed opportunity था

  • वाक्य “कुत्ता लोमड़ी के ऊपर से कूदता है” नहीं, बल्कि लोमड़ी कुत्ते के ऊपर से कूदती है होना चाहिए ;-)
    क्योंकि कुत्ता आलसी होता है और लोमड़ी तेज होती है