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

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

यहां दिए गए डेमो को देखें, जहां 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. हर ग्लिफ़ को उसके डिफ़ॉल्ट साइज़ का 150% तक स्केल करने के लिए, size-adjust का इस्तेमाल करता है.
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, AOL या किसी सिस्टम फ़ॉन्ट के लिए सामान्य फ़ॉन्ट इस्तेमाल करने होंगे. इसके बाद, अपनी पसंद के मुताबिक फ़ॉन्ट को मैच के लिए अडजस्ट करना होगा. इसके अलावा, डाउनलोड की गई भाषा के हिसाब से लोकल फ़ॉन्ट में बदलाव किया जा सकता है.

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

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

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

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

@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";
}

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

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

लक्ष्य के रूप में ब्रैंड टाइपफ़ेस होना भी माल्टे के कैलकुलेटर के काम करने का तरीका है. कोई Google फ़ॉन्ट चुनें और यह गणना करेगा कि एरियल में अपने हिसाब से फ़ॉन्ट कैसे बदलें. यहां कैलकुलेटर से रोबोटो सीएसएस का एक उदाहरण दिया गया है, जहां एरियल लोड होता है और उसका नाम "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";
}

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

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

@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 के ऊपर खाली जगह है. वहीं, नीले रंग की हेडलाइन में बदलाव किया गया है, ताकि यह cap height पूरे बाउंडिंग बॉक्स पर फ़िट हो जाए.

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 खास जानकारी
• एमडीएन पर साइज़ अडजस्ट करने की सुविधा
• आसान स्वैप @font-face जनरेटर
• web.dev पर लेआउट शिफ़्ट (सीएलएस)
• फ़ॉन्ट लोड करने के असर को कम करने का नया तरीका: सीएसएस फ़ॉन्ट के ब्यौरे

Unsplash पर क्रिस्टियन स्ट्रैंड की फ़ोटो