A type scale for websites, from 12 to 72
Eleven sizes from 12 to 72 pixels, each with a line height and a job. Enough for any website, few enough to keep it consistent.
Cheat sheet
A type scale that just works
Aa72
Aa60
Aa48
Aa36
Aa30
Aa24
Aa20
Aa18
Aa16
Aa14
Aa12
Sundry Millsundrymill.com/library
The eleven sizes
-
Sundry
-
Sundry
-
Sundry
-
Sundry
-
Sundry
-
Sundry
-
Sundry
-
Sundry
-
Sundry
-
Sundry
-
Sundry
Copy the scale
The scale as CSS variables
:root {
--text-xs: 0.75rem; /* 12px */
--leading-xs: 1rem;
--text-sm: 0.875rem; /* 14px */
--leading-sm: 1.25rem;
--text-base: 1rem; /* 16px */
--leading-base: 1.5rem;
--text-lg: 1.125rem; /* 18px */
--leading-lg: 1.75rem;
--text-xl: 1.25rem; /* 20px */
--leading-xl: 1.75rem;
--text-2xl: 1.5rem; /* 24px */
--leading-2xl: 2rem;
--text-3xl: 1.875rem; /* 30px */
--leading-3xl: 2.25rem;
--text-4xl: 2.25rem; /* 36px */
--leading-4xl: 2.5rem;
--text-5xl: 3rem; /* 48px */
--leading-5xl: 3.25rem;
--text-6xl: 3.75rem; /* 60px */
--leading-6xl: 3.875rem;
--text-7xl: 4.5rem; /* 72px */
--leading-7xl: 4.5rem;
}Headings that grow with the screen
h1 { font-size: clamp(2.25rem, 1.5rem + 3vw, 4.5rem); line-height: 1.05; } /* 36 to 72 */
h2 { font-size: clamp(1.875rem, 1.4rem + 1.8vw, 3rem); line-height: 1.1; } /* 30 to 48 */
h3 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); line-height: 1.25; } /* 20 to 24 */
body { font-size: 1rem; line-height: 1.5; }The font
The samples are set in Satoshi, free from Fontshare.
How to use it
- Body text at 16 px with a 24 px line height is the safe default. Go to 18 for long reads.
- Headings get tighter line heights as they grow: 1.5 for body, about 1.2 for 24 to 36, about 1 for 60 and up.
- These are the same steps Tailwind uses, so the names match if you ever move to it.
Free to use in personal and commercial work. No credit needed, though a link back is always nice.
