# 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:

1. Cover: "Typography Sizes for Websites". Example: H1 80px, body 16px; a font-size control (S/M/XL/XXL) shown over a landing page.
2. Landing hero: H1 - 80px, body - 18px. Example (seestem.agency): "World-class design for SaaS & Tech companies" — H1 80px, body-lg 18px.
3. 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.
4. 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.
5. 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.
6. Line-height: 140%-175% for body text (16-20px); 100%-120% for headings (24+px).
7. Line-length: 50-60 characters per line.
8. Tracking (uniform spacing): body text -2%; heading -6%; ALL CAPS 1%. Example: body 18px tracking -2% is correct, 0% is not.

## What it is 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](https://xiry.app/topics/design.md)
- Topic: [Typography](https://xiry.app/topics/design/typography.md)
- 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, 5 October 2025](https://x.com/marina_uiux/status/1974857258820649338): A ready reference for choosing font sizes, responsive scaling, weights, line-height, line-length and tracking when designing websites.

## Related

- [Dirtyline Studio](https://xiry.app/resources/dirtyline-studio): Type foundry offering modern display fonts and free typography assets (Website, Freemium)
- [Fontshare](https://xiry.app/resources/fontshare): Free, professional fonts from the Indian Type Foundry for personal and commercial use. (Website, Free)
- [Free Faces](https://xiry.app/resources/free-faces): Curated gallery of free and open-source typefaces organized by style (Website, Free)
- [No Design Foundry](https://xiry.app/resources/no-design-foundry): Web-based interactive typography tools for distorting and styling text (Web app, Free)
- [Space Type Generator](https://xiry.app/resources/space-type-generator): Browser-based kinetic typography tool for generating animated 2D and 3D text (Web app, Free)
- [Stack & Justify](https://xiry.app/resources/stack-and-justify): Browser tool to generate aligned type specimens using equal-width words (Web app, Open source)

Updated 11 October 2026. Page: https://xiry.app/resources/typography-sizes-for-websites

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.