Chapter 19: Typography
Typography in web design — the single most important visual element after layout itself.
Typography is not just “choosing a nice font”. Typography is the art and technique of arranging type (letters, words, lines, paragraphs) to make text:
- legible (easy to read)
- readable (pleasant & comfortable for long reading)
- hierarchical (shows what’s important first)
- emotionally appropriate (feels modern, friendly, serious, playful, etc.)
- technically performant (loads fast, looks good on every screen)
In 2026, good typography is one of the biggest differences between amateur-looking sites and professional, trustworthy ones.
Let’s break it down like we’re sitting together with a notebook — very detailed, practical, with real code examples you can copy-paste right now.
1. Core Pillars of Web Typography (The 6 Things You Must Control)
| Pillar | What it means | Main CSS Properties | Quick Rule of Thumb (2026) |
|---|---|---|---|
| Font Family | Which typeface(s) to use | font-family | Use system fonts or Google Fonts — max 2–3 families |
| Font Size Scale | Sizes for headings, body, small text | font-size, rem, em, clamp() | Use relative units + modular scale |
| Line Height | Vertical spacing between lines | line-height | 1.5–1.8 for body text |
| Font Weight | Thickness (light, regular, bold…) | font-weight | 300–400 body, 500–700 headings |
| Letter & Word Spacing | Micro-adjustments for rhythm | letter-spacing, word-spacing | Very subtle — usually 0–0.05em |
| Hierarchy & Contrast | Visual importance & readability | font-size, color, margin, text-transform | Big → bold → dark → lots of space = important |
2. Modern Typography Setup (What Pros Use in 2026)
Put this at the top of every project — it’s a solid starting point:
CSS
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
/* 1. Reset & base typography */ * { margin: 0; padding: 0; box-sizing: border-box; } html { /* 62.5% = 1rem = 10px — easy math */ font-size: 62.5%; } body { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif; font-size: 1.6rem; /* 16px */ line-height: 1.65; /* golden range */ color: #1e293b; /* cool dark gray */ background: #f8fafc; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* 2. Modular scale for headings (common 1.25 or 1.333 ratio) */ h1 { font-size: 4.8rem; line-height: 1.1; font-weight: 700; margin-bottom: 1.6rem; } h2 { font-size: 3.6rem; line-height: 1.15; font-weight: 700; margin-bottom: 1.4rem; } h3 { font-size: 2.8rem; line-height: 1.2; font-weight: 600; margin-bottom: 1.2rem; } h4 { font-size: 2.2rem; line-height: 1.25; font-weight: 600; margin-bottom: 1rem; } h5 { font-size: 1.8rem; line-height: 1.3; font-weight: 600; margin-bottom: 0.8rem; } h6 { font-size: 1.6rem; line-height: 1.35; font-weight: 600; margin-bottom: 0.6rem; } p { margin-bottom: 1.6rem; max-width: 75ch; /* ideal reading length ~60–80 characters */ } small, .small { font-size: 1.4rem; color: #64748b; } |
3. Real Typography-Focused Demo Page
index.html – copy-paste & open with Live Server
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Typography Essentials – Webliance 2026</title> <link rel="stylesheet" href="style.css"> <!-- Optional: nice Google Font (remove system-ui if you want this) --> <!-- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> --> </head> <body> <header class="hero"> <div class="container"> <h1>Typography Matters</h1> <p class="lead">Good type makes people stay. Bad type makes them leave.</p> </div> </header> <main class="container"> <section class="article"> <h2>A Short Article About Chai & Code</h2> <p>Learning web development in Hyderabad is best done with a cup of <strong>Irani chai</strong> in one hand and VS Code in the other. The combination is unbeatable.</p> <p>Today we’re focusing on <em>typography</em> — the silent designer that decides whether your website feels premium or cheap.</p> <blockquote> “The best websites are the ones where you don’t notice the typography… until you see a bad one.” <cite>— Every frustrated user ever</cite> </blockquote> <h3>Why Line Height Matters</h3> <p>Tight line height = crowded text = headache after 30 seconds.<br> Generous line height = calm reading = user stays longer.</p> <h4>Quick Tips from 2026</h4> <ul> <li>Use <code>rem</code> or <code>clamp()</code> for responsive sizing</li> <li>Keep body text 16–18px (1.0–1.125rem)</li> <li>Line height 1.5–1.8 for body</li> <li>Contrast ratio ≥ 4.5:1 for text (WCAG AA)</li> </ul> </section> <section class="comparison"> <h2>Bad vs Good Typography (Same Content)</h2> <div class="bad"> <h3>Bad Example</h3> <p>This text is too small, lines are crushed, font is generic, no hierarchy, zero breathing room.</p> </div> <div class="good"> <h3>Good Example</h3> <p>This paragraph has proper size, generous line height, clear hierarchy, subtle contrast, and feels comfortable to read for minutes.</p> </div> </section> </main> <footer> <div class="container"> <p>Hyderabad • February 2026 • Chai + Typography = Best Combo</p> </div> </footer> </body> </html> |
style.css – focused only on typography essentials
CSS
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 |
/* Reset & base */ * { margin:0; padding:0; box-sizing:border-box; } html { font-size: 62.5%; } body { font-family: system-ui, sans-serif; font-size: 1.6rem; line-height: 1.65; color: #1e293b; background: #f8fafc; } .container { max-width: 800px; margin: 0 auto; padding: 0 20px; } /* Hero – large display type */ .hero { background: linear-gradient(135deg, #1e40af, #3b82f6); color: white; text-align: center; padding: 10rem 0 6rem; } .hero h1 { font-size: clamp(4rem, 8vw, 9.6rem); line-height: 1.05; font-weight: 800; letter-spacing: -0.02em; } .lead { font-size: 2.4rem; line-height: 1.4; opacity: 0.95; max-width: 60ch; margin: 1.6rem auto 0; } /* Article typography */ .article h2 { font-size: 3.6rem; line-height: 1.15; margin: 4rem 0 1.6rem; font-weight: 700; color: #1d4ed8; } .article h3 { font-size: 2.6rem; line-height: 1.2; margin: 3.2rem 0 1.2rem; font-weight: 600; } .article h4 { font-size: 2rem; line-height: 1.3; margin: 2.4rem 0 1rem; font-weight: 600; } .article p { margin-bottom: 1.8rem; max-width: 70ch; } strong { font-weight: 700; color: #1e293b; } em { font-style: italic; } blockquote { font-size: 2.2rem; line-height: 1.45; font-style: italic; color: #4b5563; padding: 0 0 0 3rem; margin: 3.2rem 0; border-left: 5px solid #6366f1; position: relative; } blockquote::before { content: '“'; font-size: 12rem; line-height: 0.6; color: #c4b5fd; position: absolute; left: -1rem; top: -2rem; opacity: 0.25; } cite { display: block; font-size: 1.5rem; color: #64748b; margin-top: 1.2rem; font-style: normal; } code { font-family: 'Consolas', 'Courier New', monospace; background: #f1f5f9; padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.95em; } /* Comparison boxes */ .comparison { margin: 6rem 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; } .bad, .good { padding: 2.5rem; border-radius: 12px; } .bad { background: #fef2f2; border: 2px solid #fecaca; } .bad h3 { color: #991b1b; } .good { background: #f0fdf4; border: 2px solid #bbf7d0; } .good h3 { color: #166534; } /* Footer */ footer { text-align: center; padding: 4rem 0 2rem; color: #64748b; font-size: 1.4rem; } |
4. Quick Typography Mastery Checklist (2026)
- Use rem or clamp() for sizes
- Line-height never below 1.4 for body text
- Max line length ~65–80 characters (max-width: 65ch or 75ch)
- Font-weight contrast: light body (400), bold headings (600–800)
- Always test contrast (use Stark plugin or webaim.org contrast checker)
- Prefer system fonts or well-subset Google Fonts (Inter, Roboto, Manrope are very popular in 2026)
How does the demo page feel when you open it? Try changing line-height on body to 1.2 vs 1.8 — see how dramatically reading comfort changes?
Next possible lessons (tell me!):
- “Google Fonts + variable fonts”
- “responsive typography with clamp() and fluid scaling”
- “perfect heading scale & vertical rhythm”
- “dark mode typography adjustments”
- “pairing fonts like a pro”
You’re now controlling the mood of your websites through type — huge step forward! Chai khatam? Fresh cup leke aao, phir code karte hain 🚀😄
