CSS font-family के लिए अनुशंसाएँ

 (chrismorgan.info)
1 पॉइंट द्वारा GN⁺ 12 시간 전 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • वेब पर किसी खास font नाम पर भरोसा करके design करने पर platform, network और security settings के हिसाब से चीज़ें टूट सकती हैं, इसलिए font-family को generic family fallback मानकर लिखना चाहिए
  • code, artwork और layout जैसे fixed-width rendering की ज़रूरत वाले मामलों में monospace को ज़रूर शामिल करना चाहिए, और serif व sans-serif भी अगर मनचाही family सुनिश्चित करनी हो तो साथ में देना ज़्यादा सुरक्षित है
  • local में मौजूद होने की संभावना वाले fonts की लंबी stack आम तौर पर ज़्यादा फ़ायदेमंद नहीं होती, और browser का generic family default कभी-कभी बेहतर चुनाव कर सकता है
  • web fonts, fonts न होने की तुलना में धीमे होते हैं और loading failure व font-display जैसे समझौते लाते हैं, इसलिए content में user के default font को ही इस्तेमाल करना भी एक व्यावहारिक विकल्प है
  • system-ui और ui-* का स्वभाव छोटे UI text के लिए ज़्यादा है, इसलिए लंबे content और language support के लिए वे उपयुक्त नहीं हो सकते, और content font के fallback के तौर पर उनका इस्तेमाल जोखिम भरा है

font नामों पर भरोसा न करें

  • सभी प्रमुख platforms पर समान रूप से उपलब्ध कोई web-safe font नहीं है, इसलिए यह मान लेना ठीक नहीं कि कोई खास font नाम हमेशा काम करेगा
  • web fonts भी पक्का समाधान नहीं हैं
    • inline न किए गए subresources कई network कारणों से load होने में fail हो सकते हैं
    • font loading security concern वाला क्षेत्र है, इसलिए कुछ environments में इसे block किया जा सकता है
    • uBlock Origin में remote fonts को disable करने के लिए अलग button है
    • कुछ browsers के data-saving modes font loading को रोक सकते हैं, और मत यह है कि जो नहीं रोकते, उन्हें भी रोकना चाहिए
  • अगर user website की अपनी font choice की अनुमति नहीं देता, तो सिर्फ generic families ही काम करेंगी
  • JavaScript में document.fonts.load("1em my-web-font") इस्तेमाल करने पर लौटने वाला Promise reject हो सकता है
    • 2020–2025 के 6 वर्षों में इस वजह से टूटने के लगभग 4 मामले देखे गए, जिनमें से 2, 2025 में हुए

fallback family को ज़रूर स्पष्ट करें

  • अगर fixed-width text चाहिए, तो font-family में monospace ज़रूर होना चाहिए
    • monospace का न होना कई users को दिखेगा नहीं, लेकिन कुछ environments में यह layout या artwork की मंशा बिगाड़ सकता है
    • उदाहरण के तौर on Adel Faure की ASCII might fly? लिखते समय monospace के बिना थी, इसलिए वह non-fixed-width रूप में दिख सकती है
  • serif या sans-serif के मामले में भी अगर चाही गई font family का fallback चाहिए, तो उन्हें शामिल करना बेहतर है
    • उदाहरण: font-family: Arial, sans-serif;
    • उदाहरण: font-family: Times New Roman, serif;
    • इन्हें न देने पर default font इस्तेमाल होगा, और वह serif हो सकता है, लेकिन कुछ बिल्कुल अलग भी हो सकता है

संभवतः installed fonts की लंबी सूची कम करें

  • Arial, Helvetica, Helvetica Neue, Liberation Sans, Noto Sans जैसे system में होने की संभावना वाले fonts को लंबी सूची में लिखना आम तौर पर मददगार नहीं होता
  • खास तौर पर Arial को sans-serif से बेहतर विकल्प मानने का कारण नहीं दिखता
  • sans-serif को बताए गए fonts से बुरे नहीं, बल्कि संभवतः बेहतर font के रूप में resolve किया जा सकता है
  • वास्तव में देखा गया fixed-width declaration अत्यधिक लंबा था
    • font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif
    • यह declaration font-family: monospace, monospace की तुलना में सख्ती से बदतर है, और monospace को इस सूची से कमतर न होने वाले font के रूप में resolve किया जा सकता है
  • named non-web fonts को पूरी तरह प्रतिबंधित करने की ज़रूरत नहीं है, लेकिन अधिकतम एक तक सीमित रखना उचित है
    • Georgia) और Times New Roman दोनों Microsoft के Core fonts for the Web के serif fonts हैं, लेकिन उनका स्वभाव अलग है
    • Georgia, Times New Roman से काफ़ी चौड़ा है, इसलिए अगर style के लिए वह विशेषता चाहिए, तो font-family: Georgia, serif स्वीकार्य विकल्प है
  • modernfontstacks.com और उसका repository platform-specific font choices के आइडिया देते हैं
    • लेकिन उनका आकलन यह है कि वे named fonts को ज़रूरत से ज़्यादा prescribe करते हैं, और उनमें से काफ़ी को हटाना बेहतर होगा
    • Courier New को लेकर उनका treatment काफ़ी गलत है, और images ऐसी लगती हैं मानो वे macOS Courier से बनाई गई हों

सिर्फ generic families इस्तेमाल करने का विकल्प

  • अगर local installed fonts की सूची कम कर दी जाए, तो यह भी फिर से देखा जा सकता है कि web fonts सच में ज़रूरी हैं या नहीं
  • web fonts, web fonts न होने की तुलना में धीमे हैं और loading issues पैदा कर सकते हैं
    • इसी वजह से font-display मौजूद है
    • लेकिन block·swap अवधि, redraw और reflow के बीच trade-off संभालने के बजाय user के पास मौजूद font को सीधे इस्तेमाल करना भी संभव है
  • monospace के मामले में भी सिर्फ generic family का विकल्प लिया जा सकता है
    • पहले monospace default अच्छे नहीं थे, और खास तौर पर Microsoft का Courier New#Courier_New) गलत तरह से digitize किया गया था, जिससे वह 400 नहीं बल्कि लगभग 200–250 weight जैसा दिखता था
    • बाद में Apple ने Menlo) पेश किया, और उस दौर में जब browser का default monospace अपडेट नहीं हुआ था, लोगों ने Menlo को font stack में जोड़ना शुरू किया
    • अब browser defaults सभी बेहतर हो चुके हैं, और भले वे हर मामले में शानदार न हों, लेकिन अब खराब भी नहीं हैं
  • Menlo, Monaco, Consolas, Bitstream Vera Sans Mono, Courier, Courier New जैसी सूची हटाकर सिर्फ monospace छोड़ने का विकल्प लिया जा सकता है
  • Courier New को जानबूझकर font stack में डालना बहुत नकारात्मक रूप से देखा गया है

monospace, monospace और browser behavior

  • font-family: monospace; को स्पष्ट या अप्रत्यक्ष रूप से इस्तेमाल करने पर font-size का default 100% नहीं बल्कि शायद 81.25% हो सकता है
    • user generic family font, default font size और default fixed-width font size बदल सकता है
  • अगर सूची में दूसरी family मौजूद हो, तो यह behavior नहीं होता
    • font-family: my-web-font, monospace; ठीक है
    • font-family: monospace, monospace; भी ठीक है
    • सीधे font-size तय करना भी एक तरीका है
  • Lightning CSS में monospace, monospace को बिगाड़ देने की समस्या है
    • संबंधित issue: parcel-bundler/lightningcss#1221
    • फ़िलहाल workaround के तौर पर monospace, m इस्तेमाल किया जा रहा है
  • यह समस्या सिर्फ monospace को प्रभावित करती है
  • मत यह है कि browsers को monospace size behavior छोड़ देना चाहिए, और शायद 13px वाले मान को शायद 16px तक बढ़ाना चाहिए
    • इसके लिए CSSWG में proposal दिया जा सकता है

content में system-ui और ui-* का इस्तेमाल न करें

  • UI fonts छोटे UI text के लिए होते हैं, लंबे content के लिए नहीं
  • UI fonts content language को ठीक से support नहीं कर सकते
  • कुछ users जानबूझकर मज़ाकिया system UI fonts चुनकर रखते हैं, और कहा जाता है कि Android की कुछ communities में यह काफ़ी आम है
    • चिंता यह है कि system-ui इस्तेमाल करने पर content भी वैसा ही दिख सकता है
  • w3c/csswg-drafts issue #3658 में system-ui की कई समस्याओं पर चर्चा हुई, और निष्कर्ष यह रहा कि system-ui का व्यापक दुरुपयोग हुआ है
  • mdn/content issue #41244 में MDN पर इसके अत्यधिक उपयोग के खिलाफ चेतावनी note जोड़ा गया
  • system-ui और ui-* को बेहतर default font पाने के लिए proxy की तरह इस्तेमाल किया जाता रहा है, लेकिन इस उपयोग को अच्छा नहीं माना गया
  • मत यह है कि system-ui एक गलती थी
    • दृष्टिकोण यह है कि सिर्फ -apple-system रहना चाहिए था और BlinkMacSystemFont को उसी में बदल देना चाहिए था
    • standardization के समय दूसरे platforms पर इसका उपयोगी equivalent नहीं था, और अब कुछ platforms पर ऐसा कुछ मौजूद माना जाता है
    • यह भी माना गया कि इसका ज़्यादातर दुरुपयोग browser के पुराने generic family defaults को bypass करने के लिए हुआ
  • ui-serif, ui-sans-serif, ui-monospace, और खास तौर पर ui-rounded को हटाए जाने योग्य स्पष्ट गलती माना गया है
    • non-Apple environments में इनके किसी font से map होने की उम्मीद नहीं की जानी चाहिए
    • यह concept खुद Apple platforms तक सीमित है, इसलिए इसे standard का हिस्सा नहीं होना चाहिए था
    • अगर Apple इसे देना चाहता, तो -apple-system की तरह -apple prefix वाले रूप में देना चाहिए था
  • web apps में system-ui के कुछ वैध use cases हैं, लेकिन धारणा यह है कि व्यवहार में इसका लगभग पूरा इस्तेमाल दुरुपयोग के रूप में हुआ है, और इसे हटाने की दिशा में दखल भी बुरा नहीं हो सकता

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

1 टिप्पणियां

 
GN⁺ 12 시간 전
Lobste.rs की टिप्पणियाँ

  • https://lindenii.org पर font-family बिल्कुल निर्दिष्ट न करने का तरीका अपनाया गया है, ताकि यूज़र ने ब्राउज़र में जो default font चुना है उसका सम्मान हो
    व्यक्तिगत रूप से मुझे sans-serif पसंद है, लेकिन अगर यूज़र serif को default के रूप में इस्तेमाल कर रहा है, तो उसे overwrite करने की कोई खास वजह नहीं दिखती
    हालांकि https://runxiyu.org/soc/ta/ जैसी स्थिति में, जहाँ ऐसे characters इस्तेमाल करने पड़ते हैं जो ज़्यादातर fonts में नहीं होते, web font डालना ही पड़ा, और नतीजतन बाकी text भी यूज़र के default के बजाय sans-serif पर force हो गया
    हर अजीब character को <unusual-character> जैसी किसी चीज़ से wrap किए बिना कोई बेहतर तरीका है या नहीं, मुझे नहीं पता; और “यूज़र का पसंदीदा code font” जैसा कुछ specify करने का तरीका भी हो तो अच्छा होगा
    monospace, monospace वाली तरकीब के लिए शुक्रिया; size का अंतर काफ़ी confusing था

    • दूसरे मुद्दे के लिए, असामान्य character के पास image replacement indicator रखना एक ठीक-ठाक fallback हो सकता है
      Unicode character list sites इसी तरह handle करती हैं
    • मैं अपने blog https://hauleth.dev पर भी कुछ ऐसा ही करता हूँ, लेकिन monospace इस्तेमाल करता हूँ
      site design की तारीफ़ भी मिली है, लेकिन सच कहूँ तो यह बस एक Zola theme लेकर CSS और custom elements कम करने जैसा है, इसलिए खासकर personal pages के मामले में लेख के आशय से मैं काफी सहमत हूँ
    • font-family बिल्कुल specify न करने के बारे में, मुझे लगता है कि अगर browser का default default font serif से sans-serif में बदल जाए, तो शायद यूज़र्स के लिए बेहतर हो
      अधिकतर यूज़र खुद font नहीं चुनते, इसलिए “यूज़र द्वारा चुना गया font” और “browser default font” में फर्क करने का कोई तरीका नहीं है
      मुझे serif पसंद है, लेकिन आजकल ज़्यादातर लोग शायद sans-serif को ज़्यादा पसंद करते होंगे
      मेरे environment में मैंने pages को font specify करने से रोक रखा है, और कोई proper CJK font भी install नहीं किया है
      क्योंकि Chinese characters की जगह “4E2D” जैसे boxes दिखें, तो भी वे मेरे लिए वैसे भी उन ideographs जितने ही अर्थहीन हैं
      ऐसा fallback font handling अपने-आप में अच्छा किया गया था, लेकिन अफसोस कि default font का नाम सीधे specify करने का कोई तरीका नहीं है
      इसके बजाय JavaScript में खाली document पर getComputedStyle(document.documentElement).fontFamily देखें, तो मेरी advanced font settings के आधार पर "serif" या "sans-serif" मिलता है
      “preferred code font” से ठीक-ठीक क्या मतलब है, मुझे नहीं पता; लगता है वे monospace के अलावा कुछ और सोच रहे हैं

  • यह लेख अभी draft है, इसलिए काफी अधूरा है, और दो-तीन अलग-अलग तरह के टुकड़े मिले हुए हैं, इसलिए थोड़ा messy है
    शायद अंतिम रूप में यह एक page से अधिक होगा, अभी से काफी अलग रूप लेगा, और कुछ हिस्सा handwritten, hand-drawn या manual layout वाला भी हो सकता है
    इन दिनों इसके बजाय मैं एक lightweight markup language implementation पर ध्यान दे रहा हूँ, और अब यह लगभग usable है—ऐसा लगता है कि आखिरी 90% भी एक बार पूरा रह नहीं गया है
    उसके बाद फिर लिखकर publish करूँगा

  • यह बात सचमुच दिलचस्प है कि font-family: monospace; इस्तेमाल करने पर font-size default रूप से 100% नहीं बल्कि 81.25% हो सकता है, और list में दूसरा font हो तो ऐसा नहीं होता
    यानी font-family: my-web-font, monospace; या font-family: monospace, monospace; ठीक हैं, लेकिन लगता है MDN में यह अभी documented नहीं है
    क्या कोई समझा सकता है कि ऐसा क्यों हुआ और यह documented क्यों नहीं है?

    • याद पड़ता है कि Firefox वास्तव में यह font size adjustment नहीं करता, और Chrome करता है
      इसलिए यह browsers के बीच inconsistency का कारण भी बनता है
    • शायद intent यह रहा होगा कि fixed-width text body text के साथ visually same size दिखाई दे

  • draft तो है, लेकिन लेख में एक section को दूसरी बार जस का तस copy-paste कर दिया गया हो, ऐसी अजीब repetition है
    खासकर क्योंकि उसमें मेरे पसंदीदा fixed-width font के अच्छा न होने जैसा nuance था, इसलिए और खटका

    • अभी structure फिर से बना रहा हूँ, इसलिए ऐसे हिस्से बचे हुए हैं
      ध्यान से पढ़ें तो दिखेगा कि जिन्हें definitive recommendations के रूप में रखना है और जिन पर ज़्यादा nuanced position लेनी है, उन्हें sort कर रहा हूँ, इसलिए हल्के contradictions भी हैं
      उत्सुक हूँ कि आपका पसंदीदा fixed-width font कौन सा है

  • केवल serif और sans-serif इस्तेमाल करने से रोकने की एक वजह यह है कि default serif font अक्सर Times होता है, जो मुझे अक्सर खास अच्छा नहीं लगता
    इसलिए मैं body font को serif से sans-serif की ओर shift कर रहा हूँ

  • “system में install होने की संभावना वाले fonts list मत करें” और “fixed-width के लिए भी संभव हो तो generic family ही इस्तेमाल करें” वाली सलाह के संदर्भ में, मेरी website पर मैंने कुछ ऐसा सेट किया है
    --sans-serif: Adwaita Sans, Adwaita Sans Bundled, Inter, sans-serif; और --monospace: Iosevka, Iosevka Web, Cascadia Code, monospace; इस्तेमाल करता हूँ
    intent यह है कि अगर GNOME में Adwaita Sans install है तो system font इस्तेमाल हो और web font download न हो; अगर नहीं है तो Adwaita Sans Bundled web font इस्तेमाल हो, और loading के दौरान similar metrics वाले Inter और sans-serif पर fallback हो
    fixed-width के लिए भी इसी तरह system में Iosevka हो तो उसे इस्तेमाल करे, नहीं तो Iosevka Web web font इस्तेमाल करे, और loading के दौरान Cascadia Code और monospace पर fallback हो
    यह भी ध्यान में रखा कि Windows का monospace Consolas है, जो खास अच्छा नहीं है, और नए Windows में Cascadia Code install होता है
    मुझे पता है कि Cascadia Code के metrics Iosevka से काफी अलग हैं और यह बुरी बात है, लेकिन इस approach के बारे में राय जानना चाहता हूँ

    • web programming की जानकारी बहुत कम है, इसलिए हो सकता है कि “system में install न हो तभी font download करना” specify करने का कोई बेहतर तरीका मैं miss कर रहा हूँ

  • साफ-सुथरा लेख है, और monospace, monospace वाली तरकीब के बारे में बिल्कुल पता नहीं था
    एक छोटा formatting issue: मेरे browser में .unimportant paragraph का text पीले background के ऊपर आता है, लेकिन fixed .status bar text के पीछे चला जाता है, इसलिए .unimportant section को scroll करते हुए पार करने पर अजीब दिखता है
    diagonal DRAFT watermark में भी शायद ऐसा ही होता है