px is a useful format when you're writing a document in Word, for example. As long as no one has zoomed in or out, then you know that if you make your font size 10px then it's going to be small and 20px will be big. 12px is pretty nice to read and it's not complicated.
It is on the web, though.
The default font size on browsers on computers tends to be 16px. So in theory you could set your font size to be 16px, and if you want small text 12px is fine and for big text 20px is fine. Except it's not.
16px is merely the default font size. It's possible for users to change that and make it smaller or bigger. So if someone finds that 16px text is too small to read is not going to be able to read 12px. And someone who finds that 16px is just too big will find 20px absolutely huge.
Which is why relative units are a better idea (em or rem). So on most browsers, 1em = 16px. But for our users above, 1em could = 20px or 12px. You just don't know who is looking at your website and what setup they have - you want it to be readable by everyone. So set your font sizes using em or rem, rather than px.
This rule also applies to line-height. A line height of 18px might sound like there's plenty of space between the lines of text, but our users could find that it's all squished up or too spaced out, both of which make it hard to read. line-height is best used as a fraction. So a line-height of 1 means same as the font size. A line-height of 1.5 is 1.5 * font-size.
(This post brought to you by me seeing too many sites hard coded to be 12px and since I am the user who finds 16px too small, 12px is tiny in my browser)
Top comments (0)