Choosing the right text size for your website can quickly become a headache. Fortunately, there are simple methods for maintaining consistency and improving text legibility.
Here you'll find a quick, practical guide based on my experience and research.
Choosing the right font measurement unit :
To begin with, you'll need to choose a unit of measurement. There are several, but all have their own specific features.
Here are the most common units of measurement:
- Pixel (px)
- Percentage (%)
- Emphemeral Unit (em)
- Root Emphemeral Unit (rem)
- Point (pt)
- Viewport width (vw)
I won't go into the technical details of each of these units, but the preferred unit of measurement for web font sizes is the Root Emphemeral Unit (rem).
This unit adapts to users' preferences (in their browser settings), making it more accessible to a wider audience.
What font sizes should I use?
Now that you've chosen the right unit of measurement, you'll need to use the right sizes.
I used to choose font sizes by eye before I knew the recommended sizes... this is clearly not the right way to go about it.
Here are some commonly used sizes, which will guarantee good legibility:
- Grand titre: 2.25 rem to 3 rem
- Average titer: 1.75rem to 2.25rem
- Small title: 1.25rem to 1.75rem
- Paragraph: 0.8 and 1.2 rem
You now know the right unit and recommended sizes, but there's one thing that will make all the difference between you and the others.
Using a font scale :
That's what really made the difference for me and helped make my websites professional.
Font scaling consists of listing all the types of text you will be using on your website, then defining the precise parameters for each type of text (size, typeface, weight, decoration, line spacing, lettering, etc.).
Font scaling allows you to maintain real consistency throughout your site. It's an invaluable tool, easy to implement, yet often overlooked.
Here is an example of a font scale for a website:
| Element | Size (rem) | Grease | Line spacing (em) |
|---|---|---|---|
| H1 | 3.75 | 700 | 1.1 |
| H2 | 2.25 | 700 | 1.25 |
| H3 | 1.5 | 700 | 1.2 |
| H4 | 1.25 | 600 | 1.2 |
| H5 | 1.125 | 600 | 1.2 |
| H6 | 1.125 | 400 | 1.2 |
| Paragraph | 1 | 400 | 1.5 |
| Small text | 0.874 | 400 | 1.5 |
| Button | 1 | 500 | 1.5 |
You can use this "Type Scale Calculator" tool to compose your font scales.
My final tip for managing your font sizes
As you'd expect, you'll need to define your unit of measurement, then choose your font size, and finally do the same for each type of text that will appear on your website.
But the most important thing is to stick to it.
For a long time, I made the mistake of putting different sizes all over my sites... You soon find yourself in an unreadable space.
Correctly managing your font sizes will greatly enhance your users' experience and make them want to stay and read the content on your website.
Further information, useful links :
- Google Fonts for royalty-free, web-compatible fonts
- TypeScale, a tool to help you define ideal font sizes
- Further blog article on: The best font size for a website and its impact on UX and conversions
