1) Start with Hierarchy (Make the important thing obvious)

Before you pick fonts, decide what your reader should notice first, second, and third. That order—hierarchy—is everything.

How I do it

• H1 (page title): largest size + boldest weight
• H2 (section title): smaller than H1, bold or semibold
• H3 (subhead): smaller again, often semibold or medium
• Body text: the workhorse, 15–18 px on web (I like 16–18 px)
• Captions/notes: 12–14 px, lighter weight

Quick check: Squint your eyes. Can you tell what’s most important? If not, your hierarchy needs stronger contrast (size/weight/spacing/color).

2) Use a Type Scale (Consistency beats guessing)

I stopped eyeballing sizes once I adopted a type scale. It keeps rhythm across pages.

My go-to scale (Major Third-ish, adjust to your brand):

• H1: 40–48 px
• H2: 32–36 px
• H3: 24–28 px
• Body: 16–18 px
• Small: 12–14 px

Tip: On mobile, shrink headings 2–4 px to keep line breaks clean.

3) Choose Fonts with Roles (One for voice, one for work)

You don’t need five fonts. Most of my projects use one or two:

• Display/Headings font: personality and brand voice
• Body font: super readable for long paragraphs

Safe pairings

• Serif heading + Sans body (classic, editorial)
• Sans heading + Sans body (modern, minimal—use weight contrast)
• Serif for both (refined—watch legibility on small sizes)

Keep it tight: 1–2 families, 3–5 weights max. Too many styles = visual noise.

4) Line Length & Line Height (Make reading feel effortless)

The fastest way to improve readability is fixing line length and line height.

• Line length: Aim for 45–75 characters per line (including spaces). For blogs, I live around 60–70.
• Line height (leading): Body at 1.4–1.7; headings tighter at 1.1–1.3.

Why: Short lines feel choppy; long lines feel like a marathon. Comfortable lines help readers keep their place.

5) Spacing & White Space (Let your type breathe)

Great typography is 50% what you add and 50% what you don’t.

• Paragraph spacing: Use consistent spacing between paragraphs—usually more than your line height.
• Lists: Add a little extra spacing before and after lists to separate them from body text.
• Section spacing: Create a rhythm (e.g., 32 px above H2, 16 px below). Reuse it everywhere.

Pro tip: If a layout feels “heavy,” increase white space before adding decoration.

6) Alignment & Rag (Keep edges tidy)

• Left align long reading text. It’s more comfortable in most languages written LTR.
• Center align only short bits: quotes, headings, UI labels.
• Rag: The uneven right edge in left-aligned text should look soft and natural, not stair-stepped. Adjust line breaks if needed.

7) Contrast (Not only color—weight, size, and style too)

Contrast tells readers where to look.

• Size contrast: Bigger headings, smaller captions.
• Weight contrast: Bold headings vs. regular body.
• Color contrast: Dark body text on light backgrounds (and vice versa). Aim for WCAG AA contrast as a baseline.
• Style contrast: Sans + serif, caps vs. sentence case (use sparingly).

Don’t rely on color alone for meaning—pair it with icons, labels, or weight changes.

8) Kerning, Tracking & Letter Case (Tiny adjustments, big polish)

• Kerning: Space between pairs of letters. Use it sparingly to fix awkward gaps in big headlines.
• Tracking: Overall letter spacing. Slight positive tracking can help all-caps headings breathe.
• Case:
  • Sentence case is friendliest for body and long headings.
  • Title Case works for formal headings (be consistent with rules).
  • ALL CAPS = short labels only; increase letter spacing a bit.

9) Numbers, Quotes & Dashes (Professional punctuation)

These details separate “okay” from “pro.”

• Smart quotes (“ ” ‘ ’) instead of straight quotes (” ‘ ) for body copy.
• Dashes:
  • Hyphen (-) for word joins (color-aware).
  • En dash (–) for ranges (2019–2025).
  • Em dash (—) for breaks in thought—like this.
• Figures:
  • Lining figures for UI, tables, and headlines (uniform height).
  • Oldstyle figures for body text in classic serifs (blend with lowercase).
• Small caps: Great for acronyms or subheads—use true small caps (OpenType), not scaled caps.

10) OpenType Features (Use the goodies your font ships with)

Many modern fonts include features that make your typography feel custom:

• Ligatures (fi, fl), discretionary ligatures for display
• Stylistic alternates for letters with personality
• Tabular figures for perfectly aligned numbers in tables
• Fractions and superscripts/subscripts for pricing, footnotes

Turn these on where they help; don’t overdo it.

11) Web Performance (Fast text > fancy everything)

• Limit font files: 1–2 families, only the weights you need.
• Subsets: Use language subsets to cut file size when possible.
• System fonts are fine for UI-heavy products. Reserve custom fonts for brand voice.
• font-display: swap or optional to avoid invisible text during load.

12) Accessibility (Good type is inclusive type)

• Contrast: Meet WCAG AA at least (AAA if possible for body).
• Size: Keep body at 16–18 px on web; allow users to zoom.
• Line height & spacing: Adequate leading and paragraph spacing help dyslexic readers and everyone else.
• Links: Don’t rely on color alone—use underline or weight change.
• Motion/Decor: Avoid text effects that reduce legibility (busy shadows, extreme gradients).

13) Pairing Recipes (Use these when you’re in a hurry)

Here are three combos I reach for when deadlines are tight:

Modern Minimal

• Headings: geometric or neo-grotesque sans (e.g., “Inter” or “Poppins”)
• Body: humanist sans (e.g., “Source Sans 3”)
• Why: clean, accessible, neutral

Editorial Classic

• Headings: elegant serif (e.g., “Playfair Display”)
• Body: workhorse sans (e.g., “Roboto” or “Inter”)
• Why: contrast in texture, easy reading

Warm & Friendly

• Headings: rounded sans (e.g., “Nunito”)
• Body: humanist sans (e.g., “Open Sans”)
• Why: approachable, great for lifestyle/consumer brands

14) Microcopy Rules (The tiny lines people actually read)

• Headlines: Promise a benefit or set clear context.
• Subheads: Clarify what’s inside the section.
• Body: Short sentences, plain language, strong verbs.
• Lists: Start bullets with a consistent part of speech (all verbs or all nouns).
• CTAs: Action + outcome (e.g., “Download the Guide”).

15) Grids & Baselines (Make everything snap)

I like to align type to a 4-point or 8-point spacing system. It keeps margins, line heights, and components consistent.

Simple setup

• Base unit: 8 px
• Line height: multiples of 8
• Spacing above/below headings: also multiples of 8

Result: layouts feel “clicked together” without overthinking.

Quick Reference Table

Common Mistakes I Still See (and how to fix them fast)

1. Everything looks the same weight/size
   Fix: Increase size contrast in headings; use bold sparingly but clearly.
2. Lines feel too long
   Fix: Reduce container width; aim for ~65 characters per line.
3. Cramped paragraphs
   Fix: Increase line height to ~1.5 and add paragraph spacing.
4. Too many fonts/weights
   Fix: Cut to 1–2 families, 3–5 styles total.
5. Low contrast on light backgrounds
   Fix: Darken body text, lighten background, or both; test contrast.

Final Thoughts

Typography isn’t about fancy tricks—it’s a handful of habits you repeat until they feel natural. Set hierarchy with confidence, pick fonts with a purpose, keep lines comfortable, and give your text room to breathe. If you follow the rules in this typography rules beginner guide, your layouts will feel clearer, calmer, and more professional overnight.