Typography Fundamentals: Lessons from DesignSpo

A deep read of DesignSpo's The ULTIMATE Guide To Typography For Beginners (13:30).

Why this analysis exists

This is one of the source layers behind the BuildOS ui-ux-quality-review skill. The skill condenses these rules into agent-runnable checks (line-height proportions, letter-spacing rules, role limits, contrast floors). This post is the long form: how DesignSpo teaches the same material to a human designer.

Core thesis

Text commands the most visual attention in any design, so typography is foundational — not decoration. A typeface is a tone of voice; pick the wrong one and the entire design lies about what the brand is. Beyond font choice, ten controllable variables (size, weight, baseline / cap line / x-height, line-height, letter spacing, kerning, contrast, alignment) determine whether the text is legible and beautiful. A real typography system replaces ad-hoc decisions with a hierarchy (H1–H6, paragraph, button, label) and a grid so new sections can be assembled like Lego.

TL;DR rules

#	Rule	Concrete guideline
1	Typeface = tone of voice	Match font personality to project. "A silly font is great for a clown but not a lawyer."
2	Serif = tradition	Use serifs for banks, jewelers, lawyers, anything signaling timelessness/stability. Avoid for modern/playful.
3	Sans-serif = modern + versatile	Default choice. More legible than serifs. ~90% of consumer products. Many weights → one typeface can carry the whole brand.
4	Display ≠ body	Display fonts are for logos/headings/titles only. Never use for paragraphs, buttons, or labels.
5	Script vs handwritten	Script = calligraphic, classy, timeless. Handwritten = playful, less elegant. Don't confuse them.
6	Monospace = code	Use monospace only where row alignment matters (code, terminal, spreadsheets).
7	Use rem on the web	~90% of websites use the em/rem model. Default browser size = 16px = 1rem. Set sizes in rem so users can zoom.
8	Weight follows role	Bolder = titles/buttons (commands attention). Thinner = paragraphs/labels (better at small sizes). Bold paragraphs cause visual strain.
9	Line-height is inversely proportional to size	Biggest headline ≈ 1.0× line-height. Smallest paragraph ≈ 1.5× line-height. Default 125% "doesn't look very good."
10	Letter-spacing is inversely proportional to size	Tighten large text (1–2px closer). Loosen small text so characters don't bleed together.
11	Buttons need extra letter-spacing	Buttons are bolder than paragraphs to attract clicks; bump letter-spacing to compensate for squish.
12	Contrast ratio ≥ 7:1	Per W3C accessibility guidelines. Use webaim.org contrast calculator.
13	Hierarchy = 4 roles	Headings (H1–H6, often 2–3 are enough), paragraphs, buttons, labels. Define each once, reuse everywhere.
14	Design on a grid	Web = 12 columns. Print = 2. Newspaper = 6. Magazine = 3. Posters = golden ratio. Consistency > cleverness.

Operating lessons

1. Why typography matters

"We commit most of our visual attention in any design to text."

Typography is not a decoration pass at the end of design — it is the substrate. Every other choice (color, layout, imagery) modifies how the text is received, but the text is what people actually read and remember. A "tiny change can have huge effects."

The operational consequence: typography decisions deserve the same rigor as information architecture. A logo, billboard, or website lives or dies on its type choices.

2. Different kinds of fonts (and when to use each)

The video walks five categories, each with a clear "use when / avoid when":

Serif — Decorative strokes ("serifs") on the ends of letters. Invented by Nicholas Jenson in 1470 as a more legible, less ornamental alternative to calligraphy.

• Use when: signaling tradition, stability, enduring value. Banks, jewelers, lawyers, classic editorial.
• Avoid when: the brand is contemporary or playful.
• Limitation: typically only 2 weights (normal, bold).

Sans-serif — "Sans" = without. Older than serifs (simple writing predates fancy calligraphy), but reads as modern because modernism strips ornamentation.

• Use when: modern brand; need versatility; optimizing for legibility (packaging, road signs, license plates, billboards, ~90% of consumer products).
• Avoid when: the brand needs distinct personality — sans-serifs can read as "boring and homogeneous." The video calls out fashion brands ditching distinctive typography for "sterile and similar typefaces" so they all look the same.
• Advantage: variable fonts. Often 9+ weights. One typeface can carry an entire brand.

Display — Designed specifically for logos, headings, titles. Can be serif, sans-serif, or built from weird symbols.

• Use when: a small chunk of text needs to stand out.
• Never use for: paragraphs, buttons, labels.

Script — Designed to look like calligraphy. Beautiful, classy, timeless.

• Use when: refined, subtle elegance (weddings, luxury, formal invitations).
• Don't confuse with: handwritten typefaces, which are designer's actual handwriting — playful, less elegant.

Monospace — Every character takes the same width.

• Use when: code, terminals, anywhere row alignment matters more than reading flow.
• Why: "It's a lot easier to navigate through thousands of lines of code arranged more like rows in a spreadsheet."

3. The 10 controllable variables

Size

• Print: points. 12pt = 1 inch.
• Screen: pixels (a sizing convention, not literal device pixels — 16px = 1in = 12pt).
• Web (most important): em and rem. Default browser font size = 16px = 1rem. A 32px heading = 2rem.
• Why rem matters: users can zoom by changing their root em. If you hard-code px, you break that. ~90% of websites use the em/rem model.

Weight

• Bolder = more visual attention → titles, buttons.
• Thinner = easier at small sizes → paragraphs, labels.
• "A large and extremely thin headline is usually harder to read than a bolder one." Bold paragraphs cause "visual strain."
• Sans-serif fonts often ship 9+ weights (thin → black). Serif/script/handwritten usually only 2 (normal, bold).

Baseline, cap line, x-height

• Baseline: invisible line letters rest on.
• Cap line: ceiling for uppercase letters.
• X-height: ceiling for lowercase letters (named for the height of "x").
• Large gap between baseline and cap line → fancy/luxurious feel (fashion magazines, high-end clothing).
• Some typefaces let you manipulate x-height for additional variability.

Line-height (digital) / leading (print)

• Measured baseline-to-baseline.
• Default ~125% of font size — "doesn't look very good. It's the default... to look okay at a lot of different sizes but it doesn't fit one size perfectly."
• Rule of thumb: line-height is inversely proportional to font size.
  • Biggest headline → line-height ≈ 1.0× font size.
  • Smallest paragraph → line-height ≈ 1.5× font size.

Letter-spacing (digital) / tracking (print)

• Also inversely proportional to size.
• Big text → tighten by 1–2 px. The eye has to travel further between letters; tightening reduces visual strain.
• Small text → loosen so letters don't "bleed into each other."

Kerning

• Default per-letter-pair spacing baked into the font (e.g., "W" + "A" gets extra room so the slants don't collide).
• Manipulate individually in design tools (e.g., Illustrator) for logos and wordmarks.
• Example cited: Jessica Hische's Southern Living redesign — tiny kerning tweaks improved legibility without changing brand feel.

Accessible contrast

• Color difference between text and background.
• W3C published guidelines in 1999.
• Rule: contrast ratio ≥ 7:1 for accessibility.
• Tool: webaim.org contrast calculator. Test at small AND large sizes.

4. Building a typography system

A system replaces case-by-case decisions with reusable rules. "Putting together Lego pieces."

Step 1: Hierarchy — define four roles.

1. Headings (H1–H6 in web). Pick 2–3, not all 6.
2. Paragraphs.
3. Buttons.
4. Labels.

Step 2: Set the largest heading first, then derive downward.

• Define size, weight, line-height, letter-spacing for the biggest heading.
• Each smaller heading: smaller size, thinner weight, more letter-spacing.

Step 3: Style paragraphs, buttons, labels.

• Same downward rules apply (smaller = thinner = more spaced).
• Button exception: bolder than paragraph (so users see where to click). Compensate with extra letter-spacing to avoid squish.
• Label rule: smaller than paragraphs, less color contrast (annotations, captions, in-paragraph popups).

Step 4: Spacing on a grid.

• Web: 12 columns (highly divisible).
  • Headline = 12 cols. Paragraph = 6 cols. Button = 1 col.
• Print: 2 columns.
• Newspaper: 6.
• Magazine: 3.
• Poster: golden ratio.
• "Whatever spacing system you use, it's important to maintain consistency for a clean and professional design."

Failure modes

The video implicitly or explicitly calls out:

• Tone mismatch: silly font for a lawyer; fancy font for an eye doctor. Personality of the typeface fights the brand.
• Sterile sans-serif sameness: fashion brands abandoning distinctive type for homogeneous sans-serifs and becoming visually interchangeable.
• Display fonts in body copy: display typefaces are designed for short bursts; using them for paragraphs, buttons, or labels destroys legibility.
• Confusing script with handwritten: picking a playful handwritten font when you needed elegant calligraphy (or vice versa).
• Hard-coded px instead of rem: breaks user zoom; fails ~90% of modern web convention.
• Bold paragraph text / hairline headlines: weight inverted from role → visual strain.
• Default 125% line-height everywhere: "doesn't look very good" because it's calibrated to be okay at every size and great at none.
• Letter-spacing left at default for both display and body: large text feels loose; small text bleeds together.
• Skipping kerning on logos: wordmarks with collision pairs (W/A, T/y) look amateurish.
• Insufficient contrast: below the 7:1 ratio threshold; text becomes inaccessible at small sizes.
• All six H levels used: more hierarchy than the page needs, weakens differentiation. Use 2–3.
• Buttons styled like paragraphs: users miss them. Bold + extra letter-spacing.
• No grid: column widths drift, paragraphs and headlines fight each other.

How BuildOS uses this

This source informs how the ui-ux-quality-review skill audits typography. Specific applications:

1. In-app product UI — codify the hierarchy in Inkprint tokens. BuildOS has many text roles (project titles, task titles, brain-dump body, daily-brief headings, chat messages, labels, button copy). Audit Inkprint to confirm we have a defined H1/H2/H3 + paragraph + button + label scale with fixed size/weight/line-height/letter-spacing per role — and no ad-hoc one-off styles in components. The "design like Lego" rule means new screens should never invent new text styles.
2. Marketing site — pick a typeface that signals "thinking environment," not "AI tool." Per the anti-AI strategy, the public category is "thinking environment for people making complex things." A versatile sans-serif (modern, legible, many weights) likely fits the body copy, but resist the "sterile sameness" failure mode — consider a display or serif for hero headlines to give the brand a distinct voice. Don't blend into the homogeneous AI-product visual market.
3. Blog typography — line-height and measure for long-form. The blog cluster (anti-feed, philosophy, advanced guides) is built for sustained reading. Apply: paragraph line-height ~1.5×, paragraph weight on the thinner end, letter-spacing loosened slightly at body sizes, contrast ratio ≥ 7:1 in both light and dark modes (the design system requires both). Headings should follow the inverse-proportional line-height rule (closer to 1.0× as they get bigger).
4. Buttons need explicit treatment. BuildOS buttons should be bolder than paragraph copy with extra letter-spacing — not the same weight as body text. Audit primary CTAs ("Add to Brain Dump," "Generate Brief," "Start Trial") for visibility against their containers.
5. Use rem, not px, in CSS. Confirm Tailwind/Inkprint tokens are emitting rem-based sizing so users can zoom without breaking layouts. Pixel-locked typography is a classic accessibility regression and the video explicitly calls it out as the reason ~90% of the web uses rem.

Related

• Skill: ui-ux-quality-review — uses these rules as agent checks for typography.
• Companion source analysis: Visual Hierarchy: Lessons from DesignSpo — typography is one of the contrast levers in the hierarchy framework.
• Source channel: DesignSpo on YouTube.