Use rem
for Global Sizing; Use em
for Local Sizing -> YES!
But… html { font-size: 16px; }
-> pleaaaase noooo! :-/
@nhoizey thanks for the feedback. Your post is interesting. Are you advocating more for just html { font-size: 1em; }
to let the default value be interited per browser?
@AllThingsSmitty thanks for reading it! ;-)
html { font-size: 1em; }
is useless, as it is the default value. So I would advocate for nothing at all.
To be honest, I now use something a little more complex on the body
to add some fluid responsiveness to my font-size
, but I don't touch the html
font-size
at all and the value on body
is meant to be equal to 1em
or more, depending on viewport sizes.
@nhoizey That's a very interesting way of defining font size. Congrats on that. But can you please elaborate how you got to this specific value .8em+.3vw+.3vh
? What reasoning did you use?
But in general I think your font size settings are the way to go in the typographic world of things. It's just that you should also include/incorporate some sort of content width/content grid and font family into this expression. If we look at typographers' text block width table this should become the _golden standard_ of setting readable font size based on text block width and font used. Viewport size may even be obsolete unless it's content uses 100% its width.
The usual _typographer's bible_ (Elements of Typographic Style — _Robert Bringhurst_) has this table with width/font size/character count values
If I have to create a website for readability I try to base sizes according to my grid/text block size and this table or at least approximate on it.
Most helpful comment
@nhoizey That's a very interesting way of defining font size. Congrats on that. But can you please elaborate how you got to this specific value
.8em+.3vw+.3vh
? What reasoning did you use?But in general I think your font size settings are the way to go in the typographic world of things. It's just that you should also include/incorporate some sort of content width/content grid and font family into this expression. If we look at typographers' text block width table this should become the _golden standard_ of setting readable font size based on text block width and font used. Viewport size may even be obsolete unless it's content uses 100% its width.
The usual _typographer's bible_ (Elements of Typographic Style — _Robert Bringhurst_) has this table with width/font size/character count values

If I have to create a website for readability I try to base sizes according to my grid/text block size and this table or at least approximate on it.