@font-face के लिए सीएसएस का साइज़ घटाना या बढ़ाना

वेब फ़ॉन्ट लोड होने के दौरान, अब उसके स्केल को अडजस्ट किया जा सकता है. इससे दस्तावेज़ के फ़ॉन्ट साइज़ को सामान्य किया जा सकता है. साथ ही, फ़ॉन्ट के बीच स्विच करते समय लेआउट में होने वाले बदलाव को रोका जा सकता है

Adam Argyle

यहां दिए गए डेमो पर ध्यान दें. इसमें font-size एक जैसा 64px है और इन सभी हेडर के बीच सिर्फ़ font-family का अंतर है. बाईं ओर दिए गए उदाहरणों को अडजस्ट नहीं किया गया है. साथ ही, इनका फ़ाइनल साइज़ अलग-अलग है. दाईं ओर दिए गए उदाहरणों में, size-adjust का इस्तेमाल किया गया है, ताकि यह पक्का किया जा सके कि 64px का फ़ाइनल साइज़ एक जैसा हो.

इस पोस्ट में, size-adjust नाम के नए सीएसएस फ़ॉन्ट-फ़ेस डिस्क्रिप्टर के बारे में बताया गया है. इसमें, फ़ॉन्ट के साइज़ को ठीक करने और सामान्य करने के कुछ तरीके भी बताए गए हैं. इससे उपयोगकर्ताओं को बेहतर अनुभव मिलता है, डिज़ाइन सिस्टम एक जैसे होते हैं, और पेज लेआउट का अनुमान लगाना आसान हो जाता है. इसका एक अहम इस्तेमाल, वेब फ़ॉन्ट रेंडरिंग को ऑप्टिमाइज़ करना है, ताकि कुल लेआउट शिफ़्ट (सीएलएस) को रोका जा सके.

यहां समस्या के बारे में इंटरैक्टिव डेमो दिया गया है. ड्रॉपडाउन का इस्तेमाल करके टाइपफ़ेस बदलें और देखें कि:

1. नतीजों में ऊंचाई का अंतर.
2. कॉन्टेंट में अचानक और बड़े बदलाव होना.
3. इंटरैक्टिव टारगेट एरिया का हिलना (ड्रॉपडाउन इधर-उधर घूमता है!).

size-adjust की मदद से फ़ॉन्ट का साइज़ बदलने का तरीका

सिंटैक्स के बारे में जानकारी:

@font-face {
  font-family: "Adjusted Typeface";
  size-adjust: 150%;
  src: url(some/path/to/typeface.woff2) format('woff2');
}

1. इसकी मदद से, Adjusted Typeface नाम का कस्टम टाइपफ़ेस बनाया जाता है.
2. size-adjust का इस्तेमाल करके, हर ग्लिफ़ को उसके डिफ़ॉल्ट साइज़ से 150% तक बड़ा किया जाता है.
3. इसका असर सिर्फ़ इंपोर्ट किए गए टाइपफ़ेस पर पड़ता है.

ऊपर दिए गए कस्टम टाइपफ़ेस का इस्तेमाल इस तरह करें:

h1 {
  font-family: "Adjusted Typeface";
}

फ़ॉन्ट को आसानी से बदलने की सुविधा की मदद से सीएलएस को कम करना

नीचे दिए गए GIF में, बाईं ओर दिए गए उदाहरणों को देखें. साथ ही, फ़ॉन्ट बदलने पर होने वाले बदलावों को देखें. यह सिर्फ़ एक हेडलाइन वाले एलिमेंट का एक छोटा सा उदाहरण है. इसमें समस्या साफ़ तौर पर दिख रही है.

फ़ॉन्ट रेंडरिंग को बेहतर बनाने के लिए, फ़ॉन्ट स्वैपिंग एक बेहतरीन तकनीक है. कॉन्टेंट को सबसे पहले दिखाने के लिए, तेज़ी से लोड होने वाले सिस्टम फ़ॉन्ट को रेंडर करें. इसके बाद, जब वेब फ़ॉन्ट लोड हो जाए, तो उसे सिस्टम फ़ॉन्ट से बदल दें. इससे आपको दोनों फ़ायदे मिलते हैं: कॉन्टेंट जल्द से जल्द दिखने लगता है और आपको एक बेहतरीन स्टाइल वाला पेज मिलता है. साथ ही, कॉन्टेंट देखने के लिए उपयोगकर्ता को ज़्यादा इंतज़ार नहीं करना पड़ता. हालांकि, समस्या यह है कि कभी-कभी वेब फ़ॉन्ट लोड होने पर, पूरा पेज इधर-उधर हो जाता है. ऐसा इसलिए होता है, क्योंकि यह बॉक्स की ऊंचाई के साइज़ में थोड़ा अंतर दिखाता है.

size-adjust को @font-face नियम में रखने से, फ़ॉन्ट फ़ेस के लिए ग्लोबल ग्लिफ़ अडजस्टमेंट सेट हो जाता है. सही समय पर ऐसा करने से, विज़ुअल में कम से कम बदलाव होगा और आसानी से स्वैप हो जाएगा. आसानी से स्वैप करने के लिए, मैन्युअल तरीके से बदलाव करें या Malte Ubl का यह साइज़-एडजस्टमेंट कैलकुलेटर इस्तेमाल करें.

इस पोस्ट की शुरुआत में, फ़ॉन्ट के साइज़ की समस्या को ठीक करने के लिए, कई बार कोशिश की गई. size-adjust को सोर्स कोड में तब तक बदला गया, जब तक Cookie और Arial में मौजूद हेडर, Press Start 2P की तरह ही 64px नहीं बन गया. मैंने दो फ़ॉन्ट को टारगेट फ़ॉन्ट साइज़ के हिसाब से अलाइन किया है.

@font-face {
  font-family: 'Adjusted Arial';
  size-adjust: 86%;
  src: local(Arial);
}

@font-face {
  font-family: 'Cookie';
  size-adjust: 90.25%;
  src: url(...woff2) format('woff2');
}

फ़ॉन्ट कैलिब्रेट किए जा रहे हैं

लेखक के तौर पर, आपको फ़ॉन्ट के साइज़ को सामान्य करने के लिए कैलिब्रेशन टारगेट तय करने होते हैं. आपके पास Times, Arial या सिस्टम फ़ॉन्ट को सामान्य करने का विकल्प होता है. इसके बाद, कस्टम फ़ॉन्ट को मैच करने के लिए उनमें बदलाव किया जा सकता है. इसके अलावा, डाउनलोड किए गए फ़ॉन्ट से मेल खाने के लिए, स्थानीय फ़ॉन्ट में बदलाव किया जा सकता है.

size-adjust को कैलिब्रेट करने की रणनीतियां:

1. रिमोट टारगेट:
   डाउनलोड किए गए फ़ॉन्ट के हिसाब से लोकल फ़ॉन्ट को अडजस्ट करें.
2. लोकल टारगेट:
   डाउनलोड किए गए फ़ॉन्ट को लोकल टारगेट फ़ॉन्ट के हिसाब से अडजस्ट करता है.

पहला उदाहरण: रिमोट टारगेट

यहां दिए गए स्निपेट पर ध्यान दें. यह स्निपेट, स्थानीय तौर पर उपलब्ध फ़ॉन्ट को रिमोट एसआरसी कस्टम फ़ॉन्ट के साइज़ के हिसाब से अडजस्ट करता है. रिमोट कस्टम फ़ॉन्ट, कैलिब्रेशन के लिए टारगेट है. यह शायद कोई ब्रैंड फ़ॉन्ट है:

@font-face {
  font-family: "Adjusted Regular Arial For Brand";
  src: local(Arial);
  size-adjust: 90%;
}

@font-face {
  font-family: "Rad Brand";
  src: url(some/path/to/a.woff2) format('woff2');
}

html {
  font-family: "Rad Brand", "Adjusted Regular Arial For Brand";
}

इस उदाहरण में, लोड किए गए कस्टम फ़ॉन्ट के हिसाब से लोकल फ़ॉन्ट Arial को अडजस्ट किया जा रहा है, ताकि फ़ॉन्ट को आसानी से बदला जा सके.

इस रणनीति का फ़ायदा यह है कि डिज़ाइनर और डेवलपर को साइज़िंग और टाइपोग्राफ़ी के लिए एक ही फ़ॉन्ट मिलता है. ब्रैंड, कैलिब्रेशन का टारगेट होता है. यह डिज़ाइन सिस्टम के लिए बहुत अच्छी खबर है.

ब्रैंड के टाइपफ़ेस को टारगेट करने के लिए, माल्टे का कैलकुलेटर भी इसी तरह काम करता है. कोई Google फ़ॉन्ट चुनें. इसके बाद, यह फ़ॉन्ट यह हिसाब लगाएगा कि Arial को इसके साथ आसानी से बदलने के लिए, उसे कैसे अडजस्ट किया जाए. यहां कैलकुलेटर से Roboto सीएसएस का एक उदाहरण दिया गया है. इसमें Arial को लोड किया गया है और इसका नाम "Roboto-fallback" रखा गया है:

@font-face {
    font-family: "Roboto-fallback";
    size-adjust: 100.06%;
    src: local("Arial");
}

पूरी तरह से क्रॉस प्लैटफ़ॉर्म अडजस्टमेंट बनाने के लिए, यहां दिया गया उदाहरण देखें. इसमें ब्रैंड फ़ॉन्ट के हिसाब से, अडजस्ट किए गए दो लोकल फ़ॉन्ट दिए गए हैं.

@font-face {
    font-family: "Roboto-fallback-1";
    size-adjust: 100.06%;
    src: local("Arial");
}

@font-face {
    font-family: "Roboto-fallback-2";
    size-adjust: 99.94%;
    src: local("Arimo");
}

@font-face {
  font-family: "Roboto Regular";
  src: url(some/path/to/roboto.woff2) format('woff2');
}

html {
  font-family: "Roboto Regular", "Roboto-fallback-1", "Roboto-fallback-2";
}

दूसरा उदाहरण: स्थानीय टारगेट

यहां दिए गए स्निपेट पर विचार करें. यह स्निपेट, ब्रैंड के कस्टम फ़ॉन्ट को Arial से मैच करने के लिए अडजस्ट करता है:

@font-face {
  font-family: "Rad Brand - Adjusted For Arial";
  src: url(some/path/to/a.woff2) format('woff2');
  size-adjust: 110%;
}

html {
  font-family: "Rad Brand - Adjusted For Arial", Arial;
}

इस रणनीति का फ़ायदा यह है कि यह बिना किसी बदलाव के रेंडर हो जाती है. इसके बाद, यह मिलते-जुलते फ़ॉन्ट को मैच करने के लिए अडजस्ट हो जाती है.

ascent-override, descent-override, और line-gap-override की मदद से बेहतर तरीके से ट्यून करना

अगर आपके डिज़ाइन या लोडिंग की रणनीतियों के लिए, ग्लिफ़ के सामान्य साइज़ में बदलाव करना काफ़ी नहीं है, तो यहां कुछ बेहतर ट्यूनिंग के विकल्प दिए गए हैं. ये size-adjust के साथ काम करते हैं. ascent-override, descent-override, और line-gap-override प्रॉपर्टी, फ़िलहाल Chromium 87+ और Firefox 89+ में लागू की गई हैं.

ascent-override

ascent-override डिस्क्रिप्टर, फ़ॉन्ट की बेसलाइन से ऊपर की ऊंचाई तय करता है.

@font-face {
  font-family: "Ascent Adjusted Arial Bold";
  src: local(Arial Bold);
  ascent-override: 71%;
}

लाल रंग की हेडलाइन (बिना अडजस्ट की गई) में, कैपिटल लेटर A और O के ऊपर जगह है. वहीं, नीले रंग की हेडलाइन को अडजस्ट किया गया है, ताकि इसकी कैप हाइट, पूरे बाउंडिंग बॉक्स के साथ अच्छी तरह से फ़िट हो जाए.

descent-override

descent-override डिस्क्रिप्टर, फ़ॉन्ट की बेसलाइन के नीचे की ऊंचाई तय करता है.

@font-face {
  font-family: "Ascent Adjusted Arial Bold";
  src: local(Arial Bold);
  descent-override: 0%;
}

लाल रंग की हेडलाइन (बिना अडजस्ट की गई) में, D और O के बेसलाइन के नीचे जगह है. वहीं, नीले रंग की हेडलाइन को अडजस्ट किया गया है, ताकि इसके अक्षर बेसलाइन पर ठीक से दिखें.

line-gap-override

line-gap-override डिस्क्रिप्टर, फ़ॉन्ट के लिए लाइन-गैप मेट्रिक तय करता है. यह फ़ॉन्ट के लिए सुझाई गई लाइन-गैप या बाहरी लीडिंग है.

@font-face {
  font-family: "Line Gap Adjusted Arial";
  src: local(Arial);
  line-gap-override: 50%;
}

बिना अडजस्ट किए गए लाल रंग के हेडलाइन में कोई line-gap-override नहीं है. इसका मतलब है कि यह 0% पर है. वहीं, नीले रंग की हेडलाइन को 50% तक अडजस्ट किया गया है. इससे अक्षरों के ऊपर और नीचे जगह बन गई है.

जानकारी को एक जगह इकट्ठा किया जा रहा है

इनमें से हर एक ओवरराइड, वेब के सुरक्षित टेक्स्ट बाउंडिंग बॉक्स से अतिरिक्त टेक्स्ट हटाने का एक और तरीका है. टेक्स्ट बॉक्स को सटीक प्रज़ेंटेशन के लिए अपनी पसंद के मुताबिक बनाया जा सकता है.

नतीजा

@font-face size-adjust सीएसएस सुविधा, वेब लेआउट के टेक्स्ट बाउंडिंग बॉक्स को पसंद के मुताबिक बनाने का एक शानदार तरीका है. इससे फ़ॉन्ट बदलने के अनुभव को बेहतर बनाया जा सकता है. साथ ही, उपयोगकर्ताओं के लिए लेआउट शिफ़्ट से बचा जा सकता है. ज़्यादा जानने के लिए, ये संसाधन देखें:

• सीएसएस फ़ॉन्ट लेवल 5 की खास बातें
• MDN पर साइज़ बदलने की सुविधा
• @font-face जनरेटर की मदद से फ़ॉन्ट को आसानी से स्वैप करना
• web.dev पर कुल लेआउट शिफ़्ट (सीएलएस)
• फ़ॉन्ट लोड होने में लगने वाले समय को कम करने का नया तरीका: सीएसएस फ़ॉन्ट डिस्क्रिप्टर

Unsplash पर Kristian Strand की ली गई फ़ोटो