Typography Best Practices

Best Practices will vary from one designer or developer to another. That includes which units of measurement you choose for typography. Keep in mind

If you don’t like Math and want a quick and easy way to understand what the font size is, then stick to Pixels.

If you like Math and Typescales, then use REMs: https://type-scale.com

By default, ALL browsers have a default REM value. In all Modern Browsers, that is generally 16px. In the type scale site, it’s referred to as the Base Size.

In GeneratePress Customizer > Typography, you can change its value using the HTML Element in Add Typography.

So here’s why you may want to use REMs.
Let’s Add Typography > HTML Element and set the font sizes in Pixels as such:

18px (D), 17px (Tablet), 16px (Mobile)

Now when we add Typography > Body, we can just set the Desktop size to 1 REM
It will now respond to the various rem sizes on each screen size, 18px > 17px > 16px.
Repeat that for your headings 

The advantage is that you don’t have to individually set each Tablet and Mobile font size for every element.
The disadvantage can be – it’s not easy to tell what font size is at a glance….

Leave a Comment