font-family से एक फ़ॉन्ट चुनें, फिर पढ़ने में सुखद पाठ के लिए आकार, मोटाई और पंक्ति अंतराल समायोजित करें।
इस पाठ को Kodokon में खोलेंएक फ़ॉन्ट अक्षरों की बनावट है: Arial, Georgia या Times New Roman फ़ॉन्ट हैं। CSS में, font-family property पाठ के किसी हिस्से का फ़ॉन्ट चुनती है। आप इसे अल्पविरामों से अलग किए गए फ़ॉन्टों की एक सूची देते हैं: ब्राउज़र पहले वाले को आज़माता है; अगर वह आगंतुक के उपकरण पर स्थापित नहीं है, तो वह अगले पर बढ़ता है, और इसी तरह आगे। यह एक प्लान A है, एक प्लान B, एक प्लान C।
body {
font-family: Georgia, "Times New Roman", serif;
}सूची का अंतिम शब्द एक सामान्य परिवार है: serif का मतलब सेरिफ़ वाले फ़ॉन्ट (अक्षरों के सिरों पर छोटे पैर, जैसे किसी छपे अखबार में), sans-serif का मतलब बिना सेरिफ़ वाले फ़ॉन्ट (अधिक आधुनिक दिखने वाले, जैसे Arial), और monospace का मतलब स्थिर-चौड़ाई वाले फ़ॉन्ट जहाँ हर अक्षर की चौड़ाई एक जैसी होती है (कोड के लिए आदर्श)। "Times New Roman" के इर्द-गिर्द उद्धरण चिह्नों पर ध्यान दें: जब भी किसी फ़ॉन्ट नाम में रिक्त स्थान हों, ये ज़रूरी होते हैं।
पाठ का आकार font-size से तय होता है। आप पिक्सेल पहले से जानते हैं (16px ब्राउज़रों का डिफ़ॉल्ट आकार है)। एक rem इकाई भी है: 1rem पेज के मूल आकार के बराबर होता है, तो 1.5rem उस आकार का डेढ़ गुना है। मोटाई, यानी अक्षरों के स्ट्रोक कितने मोटे हैं, font-weight से तय होती है: सामान्य पाठ के लिए normal, गाढ़े के लिए bold, या 100 (बहुत पतला) से 900 (बहुत मोटा) तक की एक संख्या, जहाँ 400 normal के बराबर है और 700 bold के।
h1 {
font-size: 2rem;
font-weight: 700;
}
p {
font-size: 16px;
font-weight: normal;
}एक आखिरी सेटिंग, जिसे अक्सर अनदेखा किया जाता है फिर भी आरामदायक पढ़ने के लिए यह अनिवार्य है: line-height, यानी पंक्ति की ऊँचाई। यह किसी अनुच्छेद की पंक्तियों के बीच की ऊर्ध्वाधर जगह को नियंत्रित करती है। बहुत कम हो, तो पंक्तियाँ दम घुटती हुई लगती हैं; बहुत अधिक हो, तो नज़र भटक जाती है। सबसे अच्छी प्रथा है एक बिना-इकाई मान, जो पाठ के आकार का गुणा करता है: line-height: 1.5; हर पंक्ति को फ़ॉन्ट आकार का डेढ़ गुना ऊँचा बनाता है।
p {
font-size: 16px;
line-height: 1.5;
}font-family को अल्पविरामों से अलग किए गए कई फ़ॉन्ट क्यों देते हैं?font-weight मान क्लासिक गाढ़े (bold) के अनुरूप है?font-size: 20px और line-height: 1.5 के साथ, हर पंक्ति कितनी ऊँची है?