फ़ॉन्ट साइज़ टेस्टर क्या है?

कोई भी टेक्स्ट टाइप करें और 8px से 96px तक हर साइज़ में एक साथ देखें। px, rem और pt इकाइयों में बदलें, और लाइन हाइट व लेटर स्पेसिंग एडजस्ट करके अपनी टाइपोग्राफी को सही करें।

कोई भी वाक्य चिपकाएँ — टूल उसे एक साथ 14 अलग-अलग आकारों में दिखाता है: 8 पिक्सेल के बारीक कैप्शन से लेकर 96 पिक्सेल के विशाल हीरो तक। यूनिट को px, rem, pt के बीच बदलें; लाइन-हाइट और लेटर-स्पेसिंग को सीधा वहीं घुमाएँ। यह तय करना आसान होता है कि किस आकार पर पढ़ना मुश्किल होने लगता है, या बटन में 14 px और 16 px में से कौन-सा बेहतर है, इससे पहले कि CSS छेड़ें।

उपयोग कैसे करें

1. चरण 1 — वह टेक्स्ट टाइप या पेस्ट करें जिसे आप टेस्ट करना चाहते हैं।
2. चरण 2 — प्रीव्यू के लिए साइज़ रेंज और यूनिट (px, rem या pt) एडजस्ट करें।
3. चरण 3 — अपने डिज़ाइन के लिए सबसे अच्छा विकल्प चुनने हेतु सभी साइज़ की साथ-साथ तुलना करें।

कब उपयोग करें

• नेविगेशन लेबल का आकार चुनना — पढ़ने योग्य रहे, और बार में भीड़ न हो।
• 14 px और 16 px के बॉडी टेक्स्ट की तुलना करके डिज़ाइन टीम की बहस सुलझाना।
• डिज़ाइनर के दिए हुए px स्पेक को rem में बदलना, ताकि पेज यूज़र की फ़ॉन्ट प्राथमिकता का सम्मान करे।

परिणाम

नेविगेशन लेबल का परीक्षण: 'Dashboard' टाइप करें और 12px, 14px व 16px पर तुलना करके जगह बचाते हुए सबसे पठनीय साइज़ खोजें।

अक्सर पूछे जाने वाले प्रश्न

वेब फ़ॉन्ट साइज़ के लिए px, rem या pt — किसका इस्तेमाल करें?

बॉडी टेक्स्ट और कंपोनेंट्स के लिए rem बेहतर है — यह यूज़र के रूट फ़ॉन्ट साइज़ के साथ बढ़ता-घटता है, जो एक्सेसिबिलिटी के लिए ज़रूरी है। बॉर्डर या बहुत छोटे आइकन के लिए px रखें ताकि वे पिक्सेल-परिशुद्ध दिखें। pt प्रिंट युग की इकाई है, स्क्रीन पर इसे टालें।

बॉडी टेक्स्ट का उचित आकार क्या है?

वेब पर पैराग्राफ़ का वस्तुतः मानक 16 px (1 rem) है। कैप्शन या लेबल जैसे सहायक टेक्स्ट के लिए ही 14 px पर उतरें। मुख्य टेक्स्ट को 14 px से नीचे रखने वाली साइटें अक्सर एक्सेसिबिलिटी ऑडिट में फेल होती हैं और छोटे स्क्रीन वालों को थका देती हैं।

लाइन-हाइट पढ़ने पर कितना असर डालती है?

बॉडी के लिए 1.4 से 1.6 का लक्ष्य रखें। ज़्यादा सटाने पर भीड़ लगती है; ज़्यादा खोलने पर पैराग्राफ़ के बीच की लय टूट जाती है। हेडिंग कसी हुई (लगभग 1.1 से 1.2) रह सकती हैं क्योंकि उनकी लाइनें वैसे भी छोटी होती हैं।

लेटर-स्पेसिंग (ट्रैकिंग) कब बदलनी चाहिए?

ऑल-कैप्स लेबल पर थोड़ी ज़्यादा (लगभग 0.05 em) रखें, क्योंकि डिफ़ॉल्ट कर्निंग वहाँ कस जाता है। बहुत बड़े डिस्प्ले हेडिंग में थोड़ा खींचें (–0.01 से –0.02 em)। बॉडी टेक्स्ट को न छेड़ें — फ़ॉन्ट डिज़ाइनर ने वह पहले ही ठीक किया हुआ है।

क्या WCAG सचमुच कम-से-कम 16 px फ़ॉन्ट साइज़ की माँग करता है?

WCAG कोई कड़ी न्यूनतम सीमा तय नहीं करता, पर माँग करता है कि टेक्स्ट को 200% तक बढ़ाया जा सके बिना लेआउट टूटे। व्यवहार में बॉडी 16 px से शुरू करना और सापेक्ष इकाइयाँ इस्तेमाल करना यह आसानी से पूरा कर देता है। छोटे डिफ़ॉल्ट यूज़र को ज़ूम करने पर मजबूर करते हैं, और अधिकतर लोग ऐसा नहीं करते।

संबंधित उपकरण