मुद्रण कला

वेब की सुविधाएं: font-size rem em unit line-height overflow-wrap text-wrap text-wrap: balance text-wrap: pretty min(), max(), and clamp() व्यूपोर्ट यूनिट

सबसे सही तरीके

  • line-height के लिए, बिना यूनिट वाली संख्याओं का इस्तेमाल करें (जैसे, 1.5). इससे यह पक्का किया जा सकेगा कि फ़ॉन्ट-साइज़ इनहेरिटेंस के दौरान, रिलेटिव स्केलिंग की जा सके.
  • लंबे यूआरएल शामिल करने के लिए, overflow-wrap: break-word (या anywhere) का इस्तेमाल करें.
  • भूलकर भी फ़ॉन्ट-साइज़ के लिए px का इस्तेमाल न करें. उपयोगकर्ता के ब्राउज़र के फ़ॉन्ट-साइज़ की प्राथमिकताओं (रूट फ़ॉन्ट साइज़) का सम्मान करने के लिए, rem को प्राथमिकता दें. इसके अलावा, कॉन्टेक्स्ट के हिसाब से साइज़ तय करने के लिए, em/प्रतिशत का इस्तेमाल करें.

रीडेबिलिटी

  • टेक्स्ट की लंबी लाइनों से बचें: पैराग्राफ़ ब्लॉक की चौड़ाई ज़्यादा से ज़्यादा 80 वर्णों तक रखें.
  • टेक्स्ट के बीच में ज़्यादा खाली जगह छोड़ने से बचें: text-align: justify का इस्तेमाल करने से बचें, क्योंकि इससे टेक्स्ट को पढ़ना मुश्किल हो सकता है. अगर आपको इसका इस्तेमाल करना है, तो इसे hyphens: auto के साथ जोड़ें, ताकि शब्दों के बीच ज़्यादा खाली जगह न रहे.
  • सजावटी फ़ॉन्ट का इस्तेमाल न करें: मुख्य कॉन्टेंट के लिए, कर्सिव टाइपफ़ेस का इस्तेमाल न करें.
  • किसी शब्द पर ज़ोर देने के लिए, उसे सिर्फ़ बड़े अक्षरों में न लिखें: किसी शब्द को विज़ुअल तौर पर हाइलाइट करने के लिए, उसे बोल्ड करें. साथ ही, अगर किसी शब्द पर ज़ोर देने से वाक्य का मतलब बदलता है, तो <em>/<strong> का इस्तेमाल करें.
  • ज़ोर देने की सुविधा का कम इस्तेमाल करें: अगर हर जगह ज़ोर देने की सुविधा का इस्तेमाल किया जाता है, तो इसका कोई मतलब नहीं रह जाता. इसका इस्तेमाल सिर्फ़ वहां करें जहां कॉन्टेंट को पढ़ने का तरीका बदलना हो.
  • उपयोगकर्ता की ज़ूम करने की सेटिंग के साथ काम करना: उपयोगकर्ताओं को टेक्स्ट का साइज़ 200% तक बदलने की अनुमति दें. इससे कॉन्टेंट या फ़ंक्शन पर कोई असर नहीं पड़ना चाहिए.
body {
  line-height: 1.5;
  text-align: start; /* Supports LTR and RTL */
}
article {
  max-width: 80ch; /* Caps line length to ~80 characters for readability */
}

टेक्स्ट रैपिंग

  • हेडलाइन और हेडलाइन जैसे कॉन्टेंट के लिए, text-wrap: balance का इस्तेमाल करें. जैसे, <th>
  • लंबे टेक्स्ट (पैराग्राफ़, ब्लॉककोट वगैरह) के लिए, text-wrap: pretty का इस्तेमाल करें
  • text-wrap: balance या text-wrap: pretty का इस्तेमाल सोच-समझकर करें. इसे * पर लागू न करें, क्योंकि इससे परफ़ॉर्मेंस पर असर पड़ता है.
  • दिखने वाले बॉक्स (बैकग्राउंड, बॉर्डर, शैडो वगैरह) वाले एलिमेंट पर text-wrap: balance का इस्तेमाल करने से बचें. ऐसा इसलिए, क्योंकि इससे कंटेनर की चौड़ाई में बदलाव नहीं होता. इससे सिर्फ़ उस चौड़ाई में टेक्स्ट रैप करने के तरीके पर असर पड़ता है. इसकी वजह से, कंटेनर के आखिर में खाली जगह रह सकती है. आम तौर पर, ऐसा नहीं होना चाहिए.

रिस्पॉन्सिव टाइपोग्राफ़ी

  • DO combine viewport-relative and font-relative units in clamp() for font sizes that scale with the viewport size while ensuring they stay within a desired range. उदाहरण के लिए, clamp(2rem, 1rem + 5vw, 4rem). फ़ॉन्ट-साइज़ में होने वाले बदलावों की स्पीड को कंट्रोल करने के लिए, व्यूपोर्ट और फ़ॉन्ट के हिसाब से तय की गई यूनिट के अनुपात को अडजस्ट करें.
  • clamp() के बिना, फ़ॉन्ट साइज़ के लिए सिर्फ़ vw का इस्तेमाल न करें. ऐसा करने से, बहुत छोटी या बहुत बड़ी स्क्रीन पर टेक्स्ट बहुत छोटा या बहुत बड़ा दिख सकता है.