📘 Lesson · Lesson 10

Fonts and font-family

Fonts और font-family

font-family and Font Stacks

body {
    font-family: Arial, Helvetica, sans-serif;
}
             │      │          │
             1st    fallback   generic fallback
             choice

font-family sets the typeface — and you always give a LIST, not one font. This list is called a "font stack." The browser tries the first font; if it's not installed on the user's device, it tries the next, and so on. The last item should always be a generic family (like sans-serif) as a guaranteed fallback. Why the list? Because you can't control which fonts a visitor has installed — the stack ensures something reasonable always shows.

Generic Families — the safety net

Generic	Look	Example fonts
serif	Little "feet" on letters, traditional	Times, Georgia
sans-serif	Clean, no feet, modern	Arial, Helvetica
monospace	Every character same width	Courier, Consolas (code)
cursive	Handwriting style	Comic Sans

The five generic families are built into every browser, so one always works. serif (with little strokes at letter ends) feels traditional/formal — think newspapers and books. sans-serif (clean, no strokes) feels modern and is the default choice for most websites and screens. monospace gives every character equal width — essential for code (which is why code blocks in this tutorial use it). Ending your font stack with the right generic ensures a sensible fallback in the right style.

font-size — how big

h1 { font-size: 2rem; }      /* 32px if root is 16px */
p  { font-size: 1rem; }      /* 16px - a good body default */
small { font-size: 0.875rem; }

Sets the text size, using any unit from the units chapter. rem is the recommended unit here (respects user preferences and scales consistently). A body font-size around 16px/1rem is the comfortable reading standard — going much smaller strains eyes on mobile. Headings scale up from there. Keeping sizes on a consistent scale (e.g. 1rem, 1.25rem, 1.5rem, 2rem) makes a design feel harmonious.

font-weight — thickness

p { font-weight: normal; }     /* = 400 */
h1 { font-weight: bold; }      /* = 700 */
.light { font-weight: 300; }   /* thin */
.heavy { font-weight: 800; }   /* extra bold */

Light 300

Normal 400

Bold 700

Controls how thick or thin the letters are. You can use keywords (normal, bold) or numbers from 100 to 900 in steps of 100 (400 = normal, 700 = bold). Numbers give finer control — a heading at 600 (semi-bold) often looks more refined than a heavy 700. Note: the font must actually include that weight, or the browser approximates it. This is how you create visual hierarchy — heavier for important, lighter for secondary.

font-style — italic

em { font-style: italic; }
.normal { font-style: normal; }   /* removes italic */

Mostly used for italic (slanted text) — for emphasis, quotes, or captions. You can also set it back to normal to un-italicize something a browser italicizes by default (like <em> or <i>). A small, simple property, but worth knowing for fine typographic control.

The font Shorthand

/* Instead of separate lines: */
font-style: italic;
font-weight: bold;
font-size: 18px;
line-height: 1.5;
font-family: Arial, sans-serif;

/* Combine (order matters): */
font: italic bold 18px/1.5 Arial, sans-serif;
      │      │    │    │   │
      style  weight size line-height family

The font shorthand packs several font properties into one line. The order is fixed: style, weight, size, then /line-height, then family — and size and family are required (the rest optional). It's compact but the strict order trips people up, so many developers use the separate properties for clarity. Good to recognise in others' code; use whichever feels clearer to you.

font-family और Font Stacks

body {
    font-family: Arial, Helvetica, sans-serif;
}
             │      │          │
             pehli  fallback   generic fallback
             choice

font-family typeface set करता है — और आप हमेशा एक LIST देते हैं, एक font नहीं. इस list को "font stack" कहते हैं. Browser पहला font आज़माता है; अगर user के device पर install नहीं, तो अगला, और ऐसे ही. आखिरी item हमेशा generic family (जैसे sans-serif) होनी चाहिए pakke fallback के रूप में. List क्यों? क्योंकि आप control नहीं कर सकते visitor के पास कौन-से fonts installed हैं — stack पक्का करता है कुछ ठीक-ठाक हमेशा दिखे.

Generic Families — safety net

Generic	दिखावट	Example fonts
serif	Letters पर छोटे "पैर", पारंपरिक	Times, Georgia
sans-serif	साफ, बिना पैर, modern	Arial, Helvetica
monospace	हर character same width	Courier, Consolas (code)
cursive	हस्तलेख शैली	Comic Sans

पांच generic families हर browser में built-in हैं, इसलिए एक हमेशा चलती है. serif (letter सिरों पर छोटे strokes) पारंपरिक/औपचारिक लगती है — अखबार और किताबें सोचिए. sans-serif (साफ, बिना strokes) modern लगती है और ज़्यादातर websites और screens की default choice है. monospace हर character को बराबर width देती है — code के लिए ज़रूरी (इसीलिए इस tutorial के code blocks इसे use करते हैं). अपने font stack को सही generic से खत्म करना सही शैली में समझदार fallback पक्का करता है.

font-size — कितना बड़ा

h1 { font-size: 2rem; }      /* 32px agar root 16px hai */
p  { font-size: 1rem; }      /* 16px - accha body default */
small { font-size: 0.875rem; }

Text size set करता है, units chapter के किसी भी unit से. rem यहां recommended unit है (user preferences का सम्मान और consistent scale). लगभग 16px/1rem body font-size आरामदायक पढ़ने का standard है — इससे बहुत छोटा mobile पर आंखों पर ज़ोर डालता है. Headings वहां से बड़े होते हैं. Sizes को consistent scale पर रखना (जैसे 1rem, 1.25rem, 1.5rem, 2rem) design को सुरीला बनाता है.

font-weight — मोटाई

p { font-weight: normal; }     /* = 400 */
h1 { font-weight: bold; }      /* = 700 */
.light { font-weight: 300; }   /* patla */
.heavy { font-weight: 800; }   /* extra bold */

Light 300

Normal 400

Bold 700

Letters कितने मोटे या पतले हैं control करता है. Keywords (normal, bold) या 100 से 900 तक 100 के steps में numbers use कर सकते हैं (400 = normal, 700 = bold). Numbers बारीक control देते हैं — 600 (semi-bold) पर heading अक्सर भारी 700 से ज़्यादा refined दिखती है. Note: font में वह weight असल में होना चाहिए, वरना browser अंदाज़ा लगाता है. ऐसे ही visual hierarchy बनाते हैं — ज़रूरी के लिए भारी, secondary के लिए हल्का.

font-style — italic

em { font-style: italic; }
.normal { font-style: normal; }   /* italic hatata hai */

ज़्यादातर italic (तिरछा text) के लिए — emphasis, quotes, या captions के लिए. आप इसे वापस normal भी कर सकते हैं किसी चीज़ को un-italicize करने को जिसे browser default रूप से italic करता है (जैसे <em> या <i>). छोटी, सरल property, पर बारीक typographic control के लिए जानने लायक.

font Shorthand

/* Alag lines ke bajaye: */
font-style: italic;
font-weight: bold;
font-size: 18px;
line-height: 1.5;
font-family: Arial, sans-serif;

/* Jodo (order maayne rakhta hai): */
font: italic bold 18px/1.5 Arial, sans-serif;
      │      │    │    │   │
      style  weight size line-height family

font shorthand कई font properties एक line में समेटता है. Order तय है: style, weight, size, फिर /line-height, फिर family — और size तथा family ज़रूरी हैं (बाकी optional). यह compact है पर सख्त order लोगों को उलझाता है, इसलिए कई developers स्पष्टता के लिए separate properties use करते हैं. दूसरों के code में पहचानने लायक; जो आपको साफ लगे वह use कीजिए.

← Back to CSS Tutorial

💻 Live Code Editor

इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.

👁 Live Preview

सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का console.log देखने के लिए F12 दबाइए.