What is a type scale?
A type scale is a fixed set of font sizes, related by a ratio, used throughout a design.
Definition
Instead of choosing sizes one at a time, a type scale multiplies a base size by a ratio (such as 1.25 or 1.5) to produce a family of sizes for body text, subheadings and headings.
Why it matters
Consistent, clearly different sizes make hierarchy obvious and give a site a coherent, designed feel.
How to get it right
- Pick a base size of 16 to 18 pixels.
- Use a ratio large enough that steps look different.
- Limit yourself to five or six sizes.
- Make the largest heading dramatically larger than body text.
Mistakes to avoid
- Sizes that differ by one or two pixels
- Too many sizes
- Timid headings barely bigger than body text
Related terms
Orlume, the design-first AI website builder, gets the details on this page right for you: describe your site in one prompt and it decides the layout, type, colour and structure, builds it in React and Next.js and puts it live in one click.
Free to start · No card required · Live in one click
More design terms
Questions, answered.
The things people ask before they start building.
What is a type scale?
A type scale is a fixed set of font sizes, related by a ratio, used throughout a design. Instead of choosing sizes one at a time, a type scale multiplies a base size by a ratio (such as 1.25 or 1.5) to produce a family of sizes for body text, subheadings and headings.
Why does Type scale matter?
Consistent, clearly different sizes make hierarchy obvious and give a site a coherent, designed feel.
How do you get type scale right?
Pick a base size of 16 to 18 pixels. Use a ratio large enough that steps look different. Limit yourself to five or six sizes. Make the largest heading dramatically larger than body text.
Still stuck? Email usBuild something that doesn't look AI-made.
Describe the site you want. Watch it get designed, not just generated. Then publish it to its own orlume.site address.
- Free to start
- No card required
- Publish to a live URL
- You own the code