9 पॉइंट द्वारा GN⁺ 2024-09-11 | 4 टिप्पणियां | WhatsApp पर शेयर करें
  • फ़ॉन्ट की छिपी हुई क्षमताएँ: variable axes, alternate glyphs, stylistic alternates, swashes, numbers, Small Caps, contextual alternates

Variable axes

  • OpenType फ़ॉन्ट में एक या अधिक axes हो सकते हैं, और axis values बदलकर फ़ॉन्ट का रूप बदला जा सकता है
  • सबसे आम axis wght है, जो फ़ॉन्ट की मोटाई नियंत्रित करता है
  • अन्य आम axes में wdth (चौड़ाई), slnt (झुकाव), ital (italic), opsz (optical size) शामिल हैं
  • CSS properties का उपयोग करके axes को नियंत्रित किया जा सकता है
  • font-variation-settings property inheritance समस्याएँ पैदा कर सकती है, इसलिए जहाँ संभव हो, specific CSS properties का उपयोग करना बेहतर है

Alternate glyphs

  • फ़ॉन्ट किसी विशेष character के लिए alternate glyphs शामिल कर सकता है
  • Alternate glyphs में numbers, swashes, ligatures जैसी कई styles शामिल हो सकती हैं

Stylistic alternates

  • Stylistic alternates एक ऐसा फीचर है जो कुछ characters के alternate forms को सक्रिय करता है
  • salt सभी characters के लिए stylistic alternates सक्रिय करता है
  • ss01, ss02 जैसे style sets कुछ character sets को बदलते हैं
  • cv01, cv02 जैसे character variants किसी एक character को बदलते हैं
  • CSS properties font-feature-settings और font-variant-alternates का उपयोग करके alternate glyphs सक्रिय किए जा सकते हैं

Swashes

  • कुछ फ़ॉन्ट में swashes शामिल होते हैं, जिनका उपयोग headings में थोड़ा व्यक्तित्व जोड़ने के लिए किया जा सकता है
  • Swashes सजावटी तत्व होते हैं जो headings को अलग पहचान दे सकते हैं
  • font-feature-settings और font-variant-alternates का उपयोग करके swashes सक्रिय किए जा सकते हैं

Numbers

  • फ़ॉन्ट में numbers के कई अलग glyph sets शामिल हो सकते हैं
  • Numbers lining या old-style, और tabular या proportional हो सकते हैं
  • Tabular numbers की चौड़ाई समान होती है, जबकि proportional numbers की चौड़ाई अलग-अलग होती है
  • Lining numbers की ऊँचाई uppercase letters जैसी होती है, जबकि old-style numbers की ऊँचाई lowercase letters जैसी होती है
  • font-variant-numeric property का उपयोग करके मनचाहा number style सेट किया जा सकता है

Small Caps

  • Small Caps, lowercase letters की जगह इस्तेमाल होने वाले uppercase variants होते हैं
  • font-variant-caps property का उपयोग करके Small Caps सक्रिय किए जा सकते हैं
  • अगर फ़ॉन्ट में Small Caps नहीं हैं, तो browser इन्हें synthesize कर सकता है

Contextual alternates

  • Contextual alternates एक ऐसा फीचर है जो आस-पास के characters के आधार पर glyphs को अपने-आप बदलता है
  • उदाहरण के लिए, -> को arrow में बदला जा सकता है, या uppercase letters के बीच होने पर @ की स्थिति समायोजित की जा सकती है
  • Contextual alternates डिफ़ॉल्ट रूप से सक्रिय होते हैं, और font-variant-ligatures property का उपयोग करके इन्हें निष्क्रिय किया जा सकता है

GN⁺ का सार

  • उच्च-गुणवत्ता वाले फ़ॉन्ट कई तरह की सुविधाएँ देते हैं, और उनका सही उपयोग typography की गुणवत्ता को काफ़ी बेहतर बना सकता है
  • OpenType फ़ॉन्ट के variable axes और alternate glyphs फीचर विशेष रूप से उपयोगी हैं
  • Contextual alternates जैसे फीचर developers और users दोनों के लिए सुविधाजनक हैं

4 टिप्पणियां

 
halfenif 2024-09-13

सोचता हूँ कि font features को सही तरीके से support करना इतना मुश्किल क्यों है
> यह तो पूरी मानव इतिहास के साथ चला आ रहा मुद्दा है.. भला इसमें करने के लिए कितना कुछ नहीं होगा!

 
seunggi 2024-09-12

फ़ॉन्ट रेंडरिंग कठिन है

https://faultlore.com/blah/text-hates-you/

 
wedding 2024-09-12

मुझे ligature की बिल्कुल आदत नहीं पड़ पाई..

 
GN⁺ 2024-09-11
Hacker News टिप्पणियाँ
  • जब संख्याएँ कई लाइनों में align होती हैं, तब यह उपयोगी होता है
  • घड़ी या countdown जैसी चीज़ों में भी यह उपयोगी है
  • स्क्रीन पर समय का उछलना बहुत परेशान करने वाला है
  • अगर आप font file को inspect करना चाहते हैं, तो Wakamai Fondue इस्तेमाल करने की सिफारिश है
  • tabular figures बहुत उपयोगी feature हैं
  • Google Fonts file size कम करने के लिए advanced OpenType features लगभग हटा देता है
    • उदाहरण: Google version का Inter font 11 features देता है, लेकिन full version 44 features देता है
  • पेज का font सुंदर है
  • small caps का उपयोग अच्छा लगता है, काश और websites इसका इस्तेमाल करें
  • Berkeley Mono v2 रिलीज़ हुआ है या नहीं, जाँचें; अभी रिलीज़ नहीं हुआ है
  • wght (weight) axis का व्यवहार अजीब है; 400 से नीचे slide करने पर text पतला होने के साथ compress भी हो जाता है, लेकिन 400 से ऊपर slide करने पर text सिर्फ़ मोटा होता है
  • VSCode में comments, jsdocs और दूसरी syntax highlighting के लिए अलग font इस्तेमाल करने हेतु vscode-custom-css extension की ज़रूरत होती है
    • उदाहरण:
      .mtki {
        font-family: 'IosevkaNFM-ExtraLightItalic', monospace !important;
        font-style: italic !important;
        color: #757575 !important;
      }
      .comment {
        font-family: 'IosevkaNFM-ExtraLightItalic', monospace !important;
        font-style: italic !important;
        color: #757575 !important;
      }
      .comment:not(.punctuation) {
        font-family: 'IosevkaNFM-ExtraLightItalic', monospace !important;
        font-style: italic !important;
        color: #757575 !important;
      }
      
    • VSCode की font handling में काफ़ी bugs हैं, इसलिए बहुत experiment करना पड़ता है
  • यह सही तरह से समझ नहीं आता कि font features को ठीक से support करना इतना मुश्किल क्यों है
  • अगर typography में रुचि है, तो Butterick's Practical Typography की सिफारिश है
    • print और digital documents को सुंदर बनाने के लिए इसमें बहुत-सी practical सलाह है
    • उनके font licenses काफ़ी उदार हैं, page views की संख्या पर कोई सीमा नहीं है
    • उनके fonts open source नहीं हैं, लेकिन सुंदर हैं
    • मैंने Valkyrie और Concourse fonts खरीदे हैं, और Concourse contextual alternates के मामले में बहुत flexible है