Design · Framework
Typography Sizes for Websites
Practical rules and scale guidelines for web typography and responsive sizing
A concise typography cheat-sheet and framework created by designer Marina Budarina. It provides specific sizing, weight, line-height, letter-spacing, and responsive scaling values illustrated with real website examples.
The framework
Slides visible:
- Cover: "Typography Sizes for Websites". Example: H1 80px, body 16px; a font-size control (S/M/XL/XXL) shown over a landing page.
- Landing hero: H1 - 80px, body - 18px. Example (seestem.agency): "World-class design for SaaS & Tech companies" — H1 80px, body-lg 18px.
- Section heading: H2 - 56px, H3 - 32px, body-s - 16px. Example: pricing section — "What's the price?" H2 56px, body-s 16px; card title "Landing Page" H3 32px.
- Responsiveness (seestem.agency, desktop-tablet-mobile): H1: 80→64→44; H2: 56→56→32; H3: 32→32→28; H4: 20→20→18; body-large: 18→18→16; smaller sizes stay the same.
- Weight: body text (16-20px): regular, medium; body accent (16-20px): semibold, bold; headings (24+px): semibold, bold. Example: display 64px semibold, body 18px regular, CTA 16px medium, body-data 18px semibold, subheading 16px regular+bold.
- Line-height: 140%-175% for body text (16-20px); 100%-120% for headings (24+px).
- Line-length: 50-60 characters per line.
- Tracking (uniform spacing): body text -2%; heading -6%; ALL CAPS 1%. Example: body 18px tracking -2% is correct, 0% is not.
What it's for
- Set up a typographic scale for a website or landing page
- Calculate responsive heading and body size reductions across breakpoints
- Determine balanced line-height, letter-spacing (tracking), and line lengths
Key points
- Recommended base sizes for hero H1 (80px), section H2 (56px), and body text (16-18px)
- Desktop to mobile responsive scale reduction guidelines across H1-H4 and body text
- Font weight rules distinguishing body text, accents, and heading displays
- Line-height guidelines (140-175% for body, 100-120% for large headings)
- Optimal line-length rule targeting 50-60 characters per line
- Tracking adjustments for body (-2%), headings (-6%), and all-caps text (1%)
Pricing
Free
Details
- Type
- Framework
- Category
- Design
- Topic
- Typography
- Open source
- No
- Platforms
- Web
- For
- UI/UX designers, web designers, and frontend developers
- Tags
- typography, web design, ui design, cheat sheet, guidelines
Why it was saved
- @marina_uiux: A ready reference for choosing font sizes, responsive scaling, weights, line-height, line-length and tracking when designing websites.
Related
Type foundry offering modern display fonts and free typography assets
Free, professional fonts from the Indian Type Foundry for personal and commercial use.
Curated gallery of free and open-source typefaces organized by style
Web-based interactive typography tools for distorting and styling text
Browser-based kinetic typography tool for generating animated 2D and 3D text
Browser tool to generate aligned type specimens using equal-width words
Updated