टाइपोग्राफी

docs.scrimba.com

वेब पर जो कुछ लोग पढ़ते हैं वह अधिकांश टेक्स्ट है, और एक पृष्ठ जो भावनाएं व्यक्त करता है वह अधिकांशतः इस बात पर निर्भर करता है कि वह टेक्स्ट कैसे सेट है। फ़ॉन्ट को स्वैप करें, लाइन स्पेसिंग को समायोजित करें, लाइन की लंबाई को सीमित करें, और एक ही अनुच्छेद सँकरे और असहज से शांत और पठनीय में बदल जाता है। यह सजावट नहीं है। यह टाइपोग्राफी है, CSS गुणों की एक मुट्ठी जो तय करते हैं कि आपके शब्द पढ़ने में कितने आरामदायक हैं, और यह अध्याय उन लोगों का दौरा है जिन्हें आप प्रतिदिन उपयोग करते हैं।

फ़ॉन्ट का चयन करना

वह संपत्ति जो आपके फ़ॉन्ट को चुनती है font-family है, और आप इसे एक फ़ॉन्ट नहीं बल्कि एक सूची देते हैं। यह सूची फ़ॉन्ट स्टैक है: ब्राउज़र पहले फ़ॉन्ट को आजमाता है, और यदि यह उपलब्ध नहीं है तो यह अगले वाले को फॉलबैक करता है, और इसी तरह लाइन के नीचे जाता है।

body {
  font-family: "Helvetica Neue", Arial, sans-serif;  /* Helvetica को आजमाएँ, फिर Arial, फिर कोई भी sans-serif */
}

अंतिम नाम हमेशा एक सामान्य पारिवारिक नाम जैसे sans-serif या serif होना चाहिए। यह आपकी सुरक्षा जाल है: यदि पाठक के डिवाइस पर कोई भी नाम वाले फ़ॉन्ट नहीं हैं, तो ब्राउज़र अभी भी कुछ समझदारीपूर्ण दिखाता है बजाय एक डिफ़ॉल्ट के जिसे आपने नहीं चुना। स्पेस वाले फ़ॉन्ट नाम उद्धरण चिह्नों में जाते हैं; एक-शब्द के नाम को उनकी आवश्यकता नहीं है।

font-family एक अल्पविराम-अलग फ़ॉन्ट स्टैक लेता है, और ब्राउज़र सूची में पहला फ़ॉन्ट उपयोग करता है जिसे वह वास्तव में रेंडर कर सकता है। प्रत्येक नाम इसके पहले एक का एक फॉलबैक है, और सूची एक सामान्य पारिवारिक नाम (sans-serif, serif, monospace) में समाप्त होनी चाहिए ताकि हमेशा एक अंतिम उत्तर हो।

body {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
}

आप जिन फ़ॉन्ट का नाम देते हैं उनके लिए दो व्यापक विकल्प हैं। सिस्टम फ़ॉन्ट स्टैक प्रत्येक ऑपरेटिंग सिस्टम के डिफ़ॉल्ट इंटरफेस फ़ॉन्ट को सूचीबद्ध करता है, इसलिए पृष्ठ उसे उधार लेता है जो पाठक का डिवाइस पहले से उपयोग करता है। इसे डाउनलोड करने में कोई खर्च नहीं होता है और यह मूल लगता है, यही कारण है कि बहुत सारे ऐप्स इसका उपयोग करते हैं:

body {
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

अन्य विकल्प एक वेब फ़ॉन्ट है: एक फ़ॉन्ट फ़ाइल जिसे आप लोड करते हैं ताकि हर पाठक को एक ही टाइपफेस दिखे। आप Google Fonts जैसे होस्ट से एक लिंक करते हैं, या इसे @font-face के साथ स्व-होस्ट करते हैं। यह आपको डाउनलोड की कीमत पर रूप पर नियंत्रण देता है जो पाठक प्रतीक्षा करता है।

font-family बाएँ से दाएँ एक फ़ॉन्ट स्टैक को हल करता है, पहले परिवार को चुनता है जिसे ब्राउज़र रेंडर कर सकता है, यही कारण है कि सूची एक सामान्य परिवार (sans-serif, serif, monospace) में समाप्त होती है एक गारंटीकृत अंतिम उपाय के रूप में। आपके द्वारा चुने गए नामों के पीछे दो रणनीतियाँ बैठती हैं, और वे अलग-अलग व्यापार करते हैं।

सिस्टम फ़ॉन्ट स्टैक प्रत्येक प्लेटफॉर्म के मूल UI फ़ॉन्ट का नाम देता है, इसलिए पृष्ठ उस टाइपफेस को विरासत में लेता है जिसे ऑपरेटिंग सिस्टम पहले से शिप करता है। कुछ भी डाउनलोड नहीं होता है, इसलिए कोई लोड देरी नहीं है और कोई लेआउट शिफ्ट नहीं है, और टेक्स्ट हर डिवाइस पर मूल दिखता है। लागत यह है कि आपका पृष्ठ प्लेटफॉर्म में थोड़ा अलग दिखता है, जो ऐप-जैसे इंटरफेस के लिए ठीक है और एक ब्रांड के लिए गलत है जिसे एक सुसंगत चेहरा चाहिए।

body {
  /* आधुनिक सिस्टम स्टैक: San Francisco, Segoe UI, Roboto, फिर फॉलबैक */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

एक वेब फ़ॉन्ट एक फ़ॉन्ट फ़ाइल है जिसे ब्राउज़र डाउनलोड करता है ताकि हर पाठक को एक ही टाइपफेस दिखे। आप इसे एक होस्ट से लिंक करते हैं, या इसे @font-face नियम के साथ स्व-होस्ट करते हैं जो एक पारिवारिक नाम को एक फ़ाइल से मैप करता है। स्व-होस्टिंग फ़ॉन्ट को आपके अपने मूल पर रखता है, जो एक तीसरे पक्ष के अनुरोध से बचाता है और आपको कैशिंग पर नियंत्रण देता है और font-display व्यवहार जो यह नियंत्रित करता है कि टेक्स्ट फॉलबैक में दिखता है या नहीं जबकि फ़ॉन्ट लोड होता है।

@font-face {
  font-family: "Satoshi";
  src: url("/fonts/satoshi.woff2") format("woff2");
  font-weight: 400 700;         /* एक चर फ़ाइल जो वजन रेंज को कवर करता है */
  font-display: swap;           /* तुरंत फॉलबैक टेक्स्ट दिखाएँ, लोड होने पर स्वैप करें */
}

body {
  font-family: "Satoshi", system-ui, sans-serif;  /* नामित वेब फ़ॉन्ट, फिर एक मूल फॉलबैक */
}

फॉलबैक के साथ एक वेब फ़ॉन्ट के बारे में महत्वपूर्ण बात यह है कि डाउनलोड धीमा हो सकता है या विफल हो सकता है, और font-display: swap इस बीच आपकी फॉलबैक परिवार प्रस्तुत करता है। एक फॉलबैक चुनना जिसमें वेब फ़ॉन्ट के समान मेट्रिक्स हैं स्वैप को लेआउट को झटका देने से रोकता है।

Junoफ़ॉन्ट का चयन करनाfont-family एक सूची लेता है, एक फ़ॉन्ट नहीं, और ब्राउज़र पहला फ़ॉन्ट उपयोग करता है जिसे वह पा सकता है। सूची के अंत में हमेशा एक सामान्य परिवार जैसे sans-serif के साथ समाप्त करें ताकि एक सुरक्षित फॉलबैक हो। इसमें स्पेस के साथ किसी भी फ़ॉन्ट नाम को उद्धरण चिह्नों में लपेटें।

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

Junoफ़ॉन्ट का चयन करना स्टैक बाएँ से दाएँ हल होते हैं और एक सामान्य परिवार में समाप्त होने चाहिए, इसलिए पाठक हमेशा टेक्स्ट देखता है। सिस्टम स्टैक कुछ भी खर्च नहीं करता है और लेआउट को कभी स्थानांतरित नहीं करता है लेकिन प्लेटफॉर्म भर में भिन्न होता है; एक वेब फ़ॉन्ट एक डाउनलोड की कीमत पर एक सुसंगत चेहरा है जिसे आपको font-display: swap और एक अच्छी तरह मेल खाने वाले फॉलबैक के साथ सुरक्षित रखना चाहिए। @font-face के साथ स्व-होस्ट करें जब आप कैशिंग पर नियंत्रण चाहते हैं और तीसरे पक्ष का अनुरोध चला गया हो।

टेक्स्ट का आकार

आप font-size के साथ टेक्स्ट का आकार निर्धारित करते हैं। आप इसे पिक्सल में एक मान दे सकते हैं, लेकिन जो आकार आपको चाहिए वह rem है, एक इकाई जो पृष्ठ के आधार फ़ॉन्ट आकार से जुड़ी है। एक rem ब्राउज़र के डिफ़ॉल्ट टेक्स्ट आकार के बराबर है, जो आमतौर पर 16px है, इसलिए 1rem एक सामान्य पठन आकार है और 1.25rem थोड़ा बड़ा है।

body {
  font-size: 1rem;             /* आधार पठन आकार, आमतौर पर 16px */
}
h1 {
  font-size: 2rem;             /* आधार आकार का दोगुना */
}

font-size टेक्स्ट का आकार निर्धारित करता है, और बॉडी कॉपी के लिए आपको इसे rem में साइज़ करना चाहिए बजाय px के। एक rem मूल तत्व का फ़ॉन्ट आकार है, जो 16px पर डिफ़ॉल्ट है और एक मान है जिसे पाठक अपनी ब्राउज़र सेटिंग में बदल सकता है। rem में साइज़ करने का मतलब आपका टेक्स्ट उस वरीयता के साथ स्केल होता है; px में साइज़ करने से यह लॉक हो जाता है।

:root {
  font-size: 100%;             /* पाठक के डिफ़ॉल्ट का सम्मान करता है, आमतौर पर 16px */
}
p {
  font-size: 1rem;             /* स्केल करता है यदि पाठक अपना डिफ़ॉल्ट बदलता है */
}

rem में बॉडी टेक्स्ट को साइज़ करें, px नहीं, इसलिए यह पाठक के चुने गए आकार का सम्मान करता है। साइज़िंग इकाइयाँ अध्याय यह बताता है कि rem, em, प्रतिशत, और व्यूपोर्ट इकाइयाँ कैसे हल होती हैं; टाइपोग्राफी के लिए संक्षिप्त संस्करण यह है कि rem आपको स्केलेबल, सुलभ टेक्स्ट पूर्वानुमानित गणित के साथ देता है।

font-size कई इकाइयों को स्वीकार करता है, लेकिन बॉडी टेक्स्ट के लिए पसंद पहुँचनीयता पर आती है। एक rem (रूट em) मूल तत्व (<html>) के font-size के सापेक्ष है, जिसका डिफ़ॉल्ट वह है जो पाठक अपने ब्राउज़र में सेट करता है, आमतौर पर 16px लेकिन स्वतंत्र रूप से परिवर्तनशील है। एक पिक्सल मान उस वरीयता को अनदेखा करता है। एक पाठक जो आराम के लिए या एक दृश्य हानि के लिए अपना डिफ़ॉल्ट टेक्स्ट आकार बढ़ाता है वह rem-आकार वाला टेक्स्ट बढ़ता हुआ देखता है और px-आकार वाला टेक्स्ट रुका हुआ रहता है, इसलिए px बॉडी कॉपी चुप्पी से एक पहुँचनीयता सेटिंग को ओवरराइड करता है जिसे पाठक जानबूझकर चुना है।

:root {
  /* मूल को पाठक के डिफ़ॉल्ट पर छोड़ दें; इसे px में 16px पर कठोर-सेट न करें */
  font-size: 100%;
}

p {
  font-size: 1rem;             /* 1rem = पाठक का रूट आकार, इसके साथ स्केल करता है */
}

.lead {
  font-size: 1.125rem;         /* 16px रूट पर 18px, अभी भी स्केल करता है */
}

em के बजाय font-size के लिए rem को प्राथमिकता दें क्योंकि em मूल फ़ॉन्ट आकार के सापेक्ष है, इसलिए जब वे नेस्ट होते हैं तो em गुणा करते हैं: एक em-आकार वाला तत्व दूसरे em-आकार वाले तत्व के अंदर गुणा करता है, और तीन स्तर गहरी सूची अप्रत्याशित रूप से सिकुड़ सकती है या बढ़ सकती है। rem हमेशा एकल रूट मान को संदर्भित करता है, इसलिए यह भले ही तत्व कितना गहरा बैठता है रहता है अनुमानित। ध्यान दें कि यह पृष्ठ ज़ूम से अलग है, जो सब कुछ स्केल करता है जिसमें px भी शामिल है; rem जो मामले की सुरक्षा करता है वह पाठक डिफ़ॉल्ट फ़ॉन्ट आकार बढ़ा रहा है विशेष रूप से, जो कई लोग करते हैं और जिसे px टेक्स्ट अनदेखा करता है।

Junoटेक्स्ट का आकारfont-size यह निर्धारित करता है कि टेक्स्ट कितना बड़ा है, और rem पहुँचने के लिए इकाई है। एक rem ब्राउज़र का सामान्य टेक्स्ट आकार है, इसलिए 1rem नियमित है और 2rem दोगुना बड़ा है। बॉडी टेक्स्ट को px में साइज़ करने से बचें, जो अगले स्तर खोदते हैं।

Junoटेक्स्ट का आकार बॉडी टेक्स्ट को rem में साइज़ करें, px नहीं। एक rem पाठक का रूट फ़ॉन्ट आकार है, इसलिए rem में टेक्स्ट स्केल होता है जब वे अपना डिफ़ॉल्ट बदलते हैं और px में टेक्स्ट अटका रहता है। साइज़िंग इकाइयाँ अध्याय गणित को कवर करता है, लेकिन प्रकार के लिए नियम छोटा है: rem किसी ऐसी चीज़ के लिए जो एक व्यक्ति पढ़ता है।

Junoटेक्स्ट का आकारrem पाठक नियंत्रण करता है रूट फ़ॉन्ट आकार को ट्रैक करता है, इसलिए px बॉडी टेक्स्ट चुप्पी से एक पहुँचनीयता पसंद को ओवरराइड करता है जिसे वे उद्देश्य से बनाते हैं। em के बजाय rem के लिए भी पहुँचें, क्योंकि em माता-पिता के सापेक्ष है और जब तत्व नेस्ट होते हैं तो गुणा करते हैं। यह पाठक के डिफ़ॉल्ट टेक्स्ट आकार के बारे में है, जो पृष्ठ ज़ूम से एक अलग बात है।

वजन और शैली

दो गुण आपके अक्षरों के आकार को बदलते हैं। font-weight यह नियंत्रित करता है कि टेक्स्ट कितना बोल्ड है, और font-style इटैलिक्स को चालू करता है।

strong {
  font-weight: bold;           /* भारी, मोटे स्ट्रोक */
}
em {
  font-style: italic;          /* झुका हुआ */
}

bold और normal रोजमर्रा के वजन के कीवर्ड हैं। इटैलिक्स के लिए, italic टेक्स्ट को झुकाता है और normal इसे सीधा रखता है।

font-weight यह निर्धारित करता है कि टेक्स्ट कितना भारी है, और जबकि normal और bold परिचित कीवर्ड हैं, संपत्ति वास्तव में 100 से 900 तक 100 के चरणों में संख्यात्मक वजन लेती है। 400 वह है जो normal से मेल खाता है, और 700 वह है जो bold से मेल खाता है। संख्याएँ महत्वपूर्ण हैं क्योंकि कई फ़ॉन्ट अतिरिक्त वजन के साथ आते हैं जिन तक कीवर्ड नहीं पहुँच सकते।

h1 {
  font-weight: 700;            /* bold के समान */
}
.caption {
  font-weight: 300;            /* एक हल्का वजन, कोई कीवर्ड नहीं */
}

font-style: italic आपको फ़ॉन्ट का सच्चा इटैलिक डिज़ाइन देता है जहाँ एक मौजूद है, एक अलग-अलग खींचा गया झुका हुआ चेहरा बजाय एक यांत्रिक झुकाव के। इसे असली जोर या सम्मेलन जैसे किताब के शीर्षक के लिए आरक्षित करें, बड़े ब्लॉक को स्टाइल करने के लिए नहीं, जो इटैलिक्स पढ़ना मुश्किल बनाते हैं।

font-weight 100 से 900 तक संख्यात्मक वजन लेता है; normal 400 के लिए एक उपनाम है और bold 700 के लिए है। संख्या केवल एक अलग मोटाई में हल होती है यदि फ़ॉन्ट वास्तव में उस वजन को रखता है। एक फ़ॉन्ट से 600 माँगें जो केवल 400 और 700 के साथ आता है, और ब्राउज़र या तो एक असली वजन में गोल करता है या स्ट्रोक को मोटा करके एक नकली बोल्ड संश्लेषण करता है, जो डिज़ाइन किए गए वजन से बदतर दिखता है। तो उपलब्ध वजन इस पर निर्भर करता है कि आपने क्या लोड किया है: एक वेब फ़ॉन्ट केवल दो वजन पर लिंक किया गया केवल दो देता है, आप जो भी संख्याएँ लिखते हैं।

h1 {
  font-weight: 800;            /* केवल अलग यदि फ़ॉन्ट 800 चेहरा के साथ आता है */
}
p {
  font-weight: 400;
}

font-style: italic फ़ॉन्ट के खींचे गए इटैलिक चेहरे को चुनता है, जो एक अलग डिज़ाइन है जिसमें एक यांत्रिक झुकाव के बजाय भिन्न लेटरफॉर्म हैं। जहाँ कोई इटैलिक चेहरा नहीं है ब्राउज़र इसे सीधे को शीयर करके नकली करता है, जिसे सिंथेटिक इटैलिक कहा जाता है, और यह सस्ता पढ़ता है। वहाँ भी oblique है, सीधे डिज़ाइन का एक सच्चा झुकाव, लेकिन italic वह है जो आप गद्य के लिए चाहते हैं क्योंकि यह सही तरीके से खींचा गया चेहरा चुनता है जब फ़ॉन्ट के पास एक है।

Junoवजन और शैलीfont-weight टेक्स्ट को बोल्ड या हल्का बनाता है, और font-style: italic इसे झुकाता है। कीवर्ड bold और normal अधिकांश को कवर करते हैं जिसकी आपको दिन में आवश्यकता है। इटैलिक्स का उपयोग जोर के लिए करें, पूरे अनुच्छेदों के लिए नहीं, जो पढ़ने में मुश्किल हो जाते हैं।

Junoवजन और शैलीfont-weight वास्तव में 100 से 900 तक चलता है, 400 सामान्य और 700 बोल्ड के साथ, और संख्याएँ कीवर्ड नहीं पहुँच सकते के वजन को अनलॉक करते हैं। केवल वजन जिन्हें आपका फ़ॉन्ट वास्तव में शिप करता है दिखाई देंगे; बाकी नकली या गोल हो जाते हैं। जोर और शीर्षकों के लिए italic रखें लंबे खिंचाव के बजाय।

Junoवजन और शैली संख्यात्मक वजन 100 से 900 तक चलते हैं, लेकिन एक संख्या केवल अगर फ़ॉन्ट उस चेहरा को रखता है तो अवतरित होती है; अन्यथा ब्राउज़र गोल या एक नकली बोल्ड संश्लेषण करता है जो बदतर दिखता है। इसलिए दो वजन पर लोड किया गया एक वेब फ़ॉन्ट दो देता है, आप जो भी टाइप करते हैं। italic खींचे गए इटैलिक चेहरे को चुनता है जब यह अस्तित्व में है और एक सिंथेटिक झुकाव तक गिरता है जब यह नहीं करता है।

पठनीयता को बनाने वाली स्पेसिंग

आरामदायक टेक्स्ट अधिकांशतः स्पेस के बारे में है। line-height लाइनों के बीच के अंतराल को नियंत्रित करता है, और इसे थोड़ा कमरा देने से एक अनुच्छेद को पढ़ने में बहुत आसान हो जाता है।

p {
  line-height: 1.5;            /* फ़ॉन्ट आकार का डेढ़ गुना */
}

1.5 जैसे कोई इकाई के बिना एक साधारण संख्या का उपयोग करें। इसका मतलब है "फ़ॉन्ट आकार का डेढ़ गुना", इसलिए स्पेसिंग टेक्स्ट के साथ कदम में बढ़ता है। सँकरी लाइनें एक पृष्ठ को पढ़ने में कठिन लगने का सबसे आम कारण हैं, और यह एक मान अधिकांश को ठीक करता है।

तीन गुण पठनीय टेक्स्ट के अधिकांश काम करते हैं। line-height लाइनों के बीच ऊर्ध्वाधर स्पेस निर्धारित करता है, और आपको इसे इकाईहीन मान देना चाहिए जैसे 1.5, जिसका अर्थ है तत्व के फ़ॉन्ट आकार का 1.5 गुना। letter-spacing वर्णों के बीच के अंतराल को समायोजित करता है, छोटी मात्रा में अपरकेस हेडिंग के लिए उपयोगी है। और एक लाइन की लंबाई दोनों के रूप में महत्वपूर्ण है: बहुत लंबी लाइनें पढ़ने में थकाऊ हैं, इसलिए आप लाइन को max-width के साथ सीमित करते हैं।

p {
  line-height: 1.5;            /* इकाईहीन: फ़ॉन्ट आकार के साथ स्केल होता है */
  max-width: 65ch;             /* लगभग 65 वर्णों पर माप को सीमित करें */
}
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.05em;      /* छोटी ट्रैकिंग ताकि कैप भीड़ न लगें */
}

वह ch इकाई "0" वर्ण की चौड़ाई है, इसलिए 65ch लगभग 65 वर्ण चौड़ा है। आरामदायक माप, एक लाइन प्रति वर्णों की संख्या, लगभग 45 से 75 के आसपास बैठता है, और इसे सीमित करना आप कर सकते हैं सर्वोच्च-प्रभाव टाइपोग्राफी चलों में से एक है।

पठनीयता तीन नियंत्रणों तक आती है: लाइन ऊँचाई, अक्षर स्पेसिंग, और लाइन की लंबाई। line-height इकाईहीन होना चाहिए (1.5, 24px नहीं), और कारण विरासत है। एक इकाईहीन लाइन ऊँचाई विरासत में आती है कारक के रूप में, इसलिए प्रत्येक वंशज इसे अपने स्वयं के फ़ॉन्ट आकार से गुणा करता है और हर तत्व को आनुपातिक स्पेसिंग मिलता है। एक इकाई के साथ लाइन ऊँचाई विरासत में आती है गणना की गई लंबाई के रूप में, इसलिए एक बड़े फ़ॉन्ट आकार वाला बच्चा माता-पिता की निश्चित लाइन बॉक्स विरासत में लेता है और इसकी लाइनें ओवरलैप होती हैं।

body {
  line-height: 1.5;            /* विरासत में कारक के रूप में: हर तत्व इसे स्केल करता है */
}

h1 {
  font-size: 2.5rem;
  /* 1.5 विरासत में, 1.5 x 2.5rem में गणना करता है; एक निश्चित 24px लाइन ऊँचाई यहाँ क्लिप करेगी */
}

.article {
  max-width: 65ch;             /* ~65 वर्णों का माप */
  text-wrap: balance;          /* वैकल्पिक: हेडिंग पर भिन्न लाइनें भी करें */
}

letter-spacing (ट्रैकिंग) बॉडी टेक्स्ट के लिए फ़ॉन्ट के डिफ़ॉल्ट पर छोड़ना सबसे अच्छा है, जहाँ डिज़ाइनर पहले से ही इसे ट्यून कर चुका है; छोटे सकारात्मक मान सभी-कैप और छोटे-कैप रन में मदद करते हैं जो अन्यथा भीड़ होते, और छोटे नकारात्मक मान बड़े प्रदर्शन हेडिंग को तंग कर सकते हैं। लाइन की लंबाई माप है, वर्ण गणना प्रति लाइन, और आरामदायक बैंड लगभग 45 से 75 वर्ण है। इसे max-width के साथ ch में सेट करें ("0" ग्लिफ की अग्रिम चौड़ाई) ताकि कैप फ़ॉन्ट ट्रैक करे, और पठन आराम पर प्रभाव लगभग किसी भी फ़ॉन्ट पसंद को ऊपर निकाल देता है।

Junoपठनीयता को बनाने वाली स्पेसिंगline-height लाइनों के बीच स्पेस निर्धारित करता है, और 1.5 के आसपास एक मान टेक्स्ट को पढ़ने में बहुत आसान बनाता है। इसे बिना इकाई के एक सादी संख्या के रूप में लिखें ताकि स्पेसिंग टेक्स्ट के साथ बढ़े। सँकरी लाइनें एक पृष्ठ को पढ़ने में कठिन लगने का शीर्ष कारण हैं, और यह अधिकांश को ठीक करता है।

Junoपठनीयता को बनाने वाली स्पेसिंगline-height को एक इकाईहीन मान दें जैसे 1.5 ताकि यह हर तत्व के फ़ॉन्ट आकार के साथ स्केल हो। max-width को ch में के साथ लाइन की लंबाई सीमित करें ताकि माप लगभग 45 से 75 वर्णों के आसपास रहे, जो वहाँ सबसे बड़ी पठनीयता जीत है। letter-spacing को बचाव से उपयोग करें, मुख्यतः अपरकेस हेडिंग को खोलने के लिए।

Junoपठनीयता को बनाने वाली स्पेसिंगline-height को इकाईहीन रखें ताकि यह एक कारक के रूप में विरासत में आए और प्रति तत्व स्केल हो; एक इकाई गणना की गई लंबाई को विरासत में देती है और बड़े हेडिंग ओवरलैप बनाती है। बॉडी टेक्स्ट के लिए letter-spacing को अकेला छोड़ दें और केवल कैप के लिए या बड़े प्रदर्शन प्रकार के लिए इसे नज़दीक से लगाएँ। माप को max-width के साथ ch में 45 से 75 वर्णों के पास सीमित करें, और यह अधिकांश फ़ॉन्ट निर्णयों को पठनीयता के लिए हराता है।

संरेखण और सजावट

तीन गुण संरेखण और समाप्त करने वाली स्पर्श को संभालते हैं। text-align टेक्स्ट को बाएँ, दाएँ, या केंद्र में ले जाता है। text-transform मामले को बदलता है, जैसे टेक्स्ट को सभी अपरकेस बनाना। और text-decoration लाइनें जोड़ता या हटाता है जैसे अंडरलाइन।

h1 {
  text-align: center;          /* हेडिंग को केंद्र करें */
}
.button {
  text-transform: uppercase;   /* सभी कैप के रूप में दिखाएँ */
  text-decoration: none;       /* लिंक अंडरलाइन हटाएँ */
}

text-transform: uppercase बिना आपको इसे फिर से टाइप किए बिना टेक्स्ट को कैपिटल में दिखाता है, इसलिए मूल सामग्री सामान्य शब्दों के रूप में रहती है। अंडरलाइन को text-decoration के साथ जोड़ा या हटाया जाता है।

text-align इसके बॉक्स के भीतर इनलाइन टेक्स्ट को स्थान देता है (left, right, center, justify)। text-transform प्रदर्शन के लिए मामले को बदलता है (uppercase, lowercase, capitalize) अंतर्निहित टेक्स्ट को बदले बिना, इसलिए एक स्क्रीन रीडर अभी भी असली शब्दों को पढ़ता है और आपका HTML साफ रहता है। text-decoration अंडरलाइन, ओवरलाइन, और स्ट्राइकथ्रू को नियंत्रित करता है।

.card-title {
  text-align: center;
}
.nav-link {
  text-decoration: none;              /* डिफ़ॉल्ट अंडरलाइन हटाएँ */
}
.price--old {
  text-decoration: line-through;      /* हटाई गई पुरानी कीमत */
}

दो आदतें रखने के लायक हैं। वेब बॉडी टेक्स्ट के लिए text-align: justify से बचें, क्योंकि बेहतर हाइफ़नेशन नियंत्रण के बिना यह शब्दों के बीच सफेद स्पेस की भिन्न नदियाँ खोलता है। और जब आप एक लिंक से अंडरलाइन हटाते हैं, तो सुनिश्चित करें कि रंग जैसी एक और सुराग अभी भी इसे लिंक के रूप में चिह्नित करती है, या आपने छिपा दिया है कि यह क्लिक करने योग्य है। रंग और पृष्ठभूमि अध्याय लिंक को एक अलग, सुलभ रंग देने को कवर करता है।

text-align इसके निहित बॉक्स के भीतर सामग्री के इनलाइन संरेखण को निर्धारित करता है। वेब बॉडी टेक्स्ट के लिए justify को छोड़ दें: ब्राउज़र शब्द स्पेसिंग को स्ट्रेच करके संरेखित करते हैं, और मुद्रक प्रकारकर्ताओं के पास हाइफ़नेशन और लाइन-ब्रेकिंग नियंत्रण के बिना, यह सफेद स्पेस की नदियाँ खोलता है और पठनीयता को अधिक नुकसान पहुँचाता है साफ किनारे से मदद मिलती है।

text-transform (uppercase, lowercase, capitalize) केवल प्रदान किए गए मामले को बदलता है, स्रोत टेक्स्ट नहीं, इसलिए पहुँचनीयता पेड़ और आपके मार्कअप असली मामले को रखते हैं। यह सभी-कैप को करने का सही तरीका है: HTML में कैपिटल टाइप करने के बजाय CSS में परिवर्तन करें, इसलिए सहायक प्रौद्योगिकी शब्द को अक्षर दर अक्षर नहीं पढ़ता है और सामग्री सामान्य गद्य के रूप में संपादन योग्य रहती है। उप्पर-केसिंग को एक छोटे सकारात्मक letter-spacing के साथ जोड़ी करें, क्योंकि कैप बॉडी के डिफ़ॉल्ट ट्रैकिंग पर सेट तंग पढ़ते हैं।

text-decoration लाइन, शैली, रंग, और मोटाई के लिए एक शॉर्टहैंड है (text-decoration: underline wavy crimson 2px), text-decoration-color और text-underline-offset जैसे लॉंगहैंड के साथ बेहतर नियंत्रण के लिए। सामान्य मामला लिंक पर text-decoration: none है, और इसके साथ आने वाला नियम यह है कि एक और दृश्य सामर्थ्य रखें, क्योंकि अंडरलाइन को हटाने से मुख्य सिग्नल को हटा देता है कि टेक्स्ट एक लिंक है।

.headline {
  text-transform: uppercase;
  letter-spacing: 0.04em;             /* कैप को सांस की जगह चाहिए */
}

a {
  text-decoration-color: currentColor;
  text-underline-offset: 0.15em;      /* अंडरलाइन को आधार रेखा से दूर धकेलें */
}

text-align, text-transform, और line-height विरासत में आते हैं, इसलिए एक कंटेनर पर सेट करने से वे अंदर टेक्स्ट में बहते हैं; चयनकर्ता अध्याय उन्हें सेट करने के लिए सही कंटेनर को लक्ष्य करने को कवर करता है।

Junoसंरेखण और सजावटtext-align टेक्स्ट को बाएँ, दाएँ, या केंद्र में ले जाता है, text-transform: uppercase इसे कैपिटल में दिखाता है, और text-decoration लाइनें जोड़ता या हटाता है जैसे अंडरलाइन। CSS में अपरकेस करने से आपका वास्तविक टेक्स्ट सामान्य शब्दों के रूप में रहता है, इसलिए आप इसे कभी कैप में फिर से टाइप नहीं करते। जब आप लिंक की अंडरलाइन छोड़ना चाहते हैं तो text-decoration: none के लिए पहुँचें।

Junoसंरेखण और सजावटtext-align इनलाइन टेक्स्ट को रखता है, text-transform मामले को केवल प्रदर्शन के लिए बदलता है, और text-decoration अंडरलाइन और स्ट्राइकथ्रू को संभालता है। वेब पर justify को छोड़ दें, जहाँ यह शब्दों के बीच भिन्न अंतराल खोलता है। यदि आप लिंक की अंडरलाइन को हटाते हैं, तो रंग जैसी एक और सुराग रखें ताकि लोग अभी भी देखें कि यह क्लिक करने योग्य है।

Junoसंरेखण और सजावट वेब बॉडी टेक्स्ट के लिए justify से बचें; ब्राउज़र शब्द स्पेसिंग को स्ट्रेच करते हैं और सफेद स्पेस की नदियाँ खोलते हैं। text-transform के साथ सभी-कैप्स करें, न कि टाइप करके कैपिटल, ताकि सहायक प्रौद्योगिकी असली शब्दों को पढ़े और स्रोत साफ रहे, और कैप में एक छोटे letter-spacing जोड़ें। जब आप लिंक पर text-decoration: none सेट करते हैं, तो एक और सामर्थ्य रखें ताकि यह अभी भी एक लिंक के रूप में पढ़े।

फ़ॉन्ट शॉर्टहैंड और विरासत

फ़ॉन्ट गुणों में एक सुविधाजनक विशेषता है: वे नीचे की ओर जाते हैं। font-family को <body> पर सेट करें और हर अनुच्छेद, हेडिंग, और लिंक अंदर इसे विरासत में लेता है, इसलिए आप कभी-कभार खुद को दोहराते हैं।

body {
  font-family: system-ui, sans-serif;  /* अंदर सब कुछ इसे विरासत में लेता है */
  line-height: 1.5;
}

इसके कारण, आपके टाइपोग्राफी का अधिकांश आपकी स्टाइलशीट के शीर्ष के पास एक जगह में रहता है, और व्यक्तिगत तत्व केवल उन्हें अलग होने की आवश्यकता है।

फ़ॉन्ट गुण विरासत में आते हैं: font-family, font-size, font-weight, font-style, line-height, और रंग सभी एक तत्व से इसके वंशजों तक जाते हैं जब तक कि ओवरराइड नहीं किया जाता है। इसलिए आप body पर बेस प्रकार एक बार सेट करते हैं और इसे नीचे की ओर जाने देते हैं, एक बिंदु जो कैसे CSS काम करता है अध्याय गहराई में कवर करता है।

वहाँ भी एक font शॉर्टहैंड है जो कई गुणों को एक घोषणा में पैक करता है, लेकिन यह एक पकड़ के साथ आता है जो आप इसका उपयोग करने से पहले जानने लायक है।

body {
  font: 1rem/1.5 system-ui, sans-serif;   /* आकार/लाइन-ऊँचाई परिवार */
}

क्रम निश्चित है और font-size और font-family दोनों आवश्यक हैं। line-height आकार के बाद एक स्लैश के साथ जाता है। क्योंकि यह एक शॉर्टहैंड है, कोई भी फ़ॉन्ट संपत्ति जिसे आप छोड़ देते हैं उसे इसके प्रारंभिक मान पर रीसेट किया जाता है, जो एक font-weight को मिटा सकता है जिसे आपने अन्यत्र सेट किया था।

फ़ॉन्ट गुण विरासत में पेड़ के नीचे आते हैं, इसलिए font-family, font-size, font-weight, font-style, और line-height एक कंटेनर पर सेट अंदर सब कुछ पर लागू होते हैं जब तक कि एक तत्व ओवरराइड न करे। body पर एक बार बेस प्रकार सेट करना और चुनिंदा रूप से ओवरराइड करना इडियोमेटिक पैटर्न है; कैसे CSS काम करता है अध्याय विवरण देता है कि विरासत और कैस्केड अंतिम मान को कैसे तय करते हैं।

font शॉर्टहैंड इन में से कई को एक साथ सेट करता है, और इसकी गोथा असली है: यह एक शॉर्टहैंड है, इसलिए हर लॉंगहैंड जिसे यह सेट कर सकता है लेकिन आप छोड़ते हैं इसके प्रारंभिक मान पर रीसेट है। font: 1rem/1.5 system-ui लिखें और कोई भी font-weight, font-style, या font-variant पहले सेट चुप्पी से सामान्य वापस मिटा दिए जाते हैं। सिंटैक्स का भी एक निश्चित क्रम है और दो आवश्यक भाग, font-size और font-family, एक वैकल्पिक line-height के साथ स्लैश द्वारा आकार से जुड़ा हुआ है।

.callout {
  font: italic 700 1rem/1.5 system-ui, sans-serif;  /* शैली वजन आकार/लाइन-ऊँचाई परिवार */
}

दो और उन्नत नोट। आधुनिक चर फ़ॉन्ट वजन की एक सतत श्रेणी (और कभी-कभी चौड़ाई और झुकाव) को एक फ़ाइल में पैक करते हैं, इसलिए font-weight: 550 एक असली, खींचा गया मान हो सकता है बजाय एक गोल के जब फ़ॉन्ट उस अक्ष को उजागर करता है। और साइज़िंग अनुभाग से पहुँचनीयता नियम इस सभी में रहता है: आकार को rem में रखें और लाइन ऊँचाई इकाईहीन रखें ताकि पूरा प्रकार प्रणाली स्केल हो जब पाठक अपने डिफ़ॉल्ट फ़ॉन्ट आकार को समायोजित करता है या पृष्ठ ज़ूम करता है, बजाय टेक्स्ट को एक निश्चित पिक्सल ग्रिड से पिन करने के।

Junoफ़ॉन्ट शॉर्टहैंड और विरासत फ़ॉन्ट सेटिंग अंदर तत्वों तक पास होती हैं, इसलिए font-family को body पर एक बार सेट करें और सब कुछ इसे विरासत में लेता है। यह आपके टाइपोग्राफी को स्टाइलशीट के शीर्ष के पास एक जगह में रखता है। व्यक्तिगत तत्व केवल उन्हें बदलने की आवश्यकता होने वाले बिट्स को ओवरराइड करते हैं।

Junoफ़ॉन्ट शॉर्टहैंड और विरासत फ़ॉन्ट गुण विरासत में आते हैं, इसलिए body पर बेस प्रकार सेट बहता है और आप केवल वह बदलते हैं जो भिन्न होता है। font शॉर्टहैंड आकार, लाइन ऊँचाई, और परिवार को एक साथ पैक करता है, लेकिन पकड़ को देखें: कुछ भी जो आप छोड़ते हैं इसके प्रारंभिक मान पर रीसेट किया जाता है, जो एक वजन को मिटा सकता है जिसे आपने अन्यत्र सेट किया था। इसका क्रम निश्चित है, आकार और परिवार आवश्यक हैं।

Junoफ़ॉन्ट शॉर्टहैंड और विरासत फ़ॉन्ट गुण विरासत में आते हैं, इसलिए body पर बेस प्रकार सेट करें और चुनिंदा रूप से ओवरराइड करें। font शॉर्टहैंड हर लॉंगहैंड को इसके प्रारंभिक मान पर रीसेट करता है जिसे आप छोड़ते हैं, इसलिए यह चुप्पी से एक वजन या शैली को मिटा सकता है जिसे पहले सेट किया गया था; इसे जानते हुए इसके लिए पहुँचें। आकार को rem में रखें और लाइन ऊँचाई इकाईहीन रखें ताकि प्रकार पाठक के डिफ़ॉल्ट आकार और ज़ूम के साथ स्केल हो, और जब आपको एक फ़ाइल से एक सतत वजन श्रेणी की आवश्यकता हो तो चर फ़ॉन्ट पर झुकें।