Created: 2017-04-08 21:08 CEST
Published: 2017-04-08 21:08 CEST

Stop setting font-size

How many times have you created a site design from scratch? What’s the first thing you add to your CSS? Probably a style reset. If not, the first thing you do is probably set the font-size.

1html { font-size: 10px; }

or for that matters,

1html { font-size: 62.5%; }

DON’T, stop, stop now! If you are setting it yourself, remove it. If you are using a CSS reset that does that, use another one. If you just copy-pasted that CSS from somewhere on the internet, question the choices you made that was influenced by that source.

Not many people seem to realize this, but browsers allow you to choose a font size you’re comfortable with and there is a good reason for that.

Too small, can’t read

All internet users do not come equal. Some have low vision, some are on phone with a really tiny screen, some have a small screen with a high resolution… There are a lot of reasons why choosing a size that “works for you” is wrong when creating a website.

You do not and you cannot know which font size your readers will be comfortable with. By setting the font-size to an arbitrary value, what you are actively doing is, “I don’t care about my readers, that size looks alright to me, deal with it”.

If you find that the font size of your site is too big or too small, the fix is to go to your browser settings and choose a better size there. It is not to hardcode it on every website you make.

For reference, here is the difference between my own settings (left) and font-size: 10px; (right):

Difference between forced and default

NOTE: For those wondering why 62.5%. The default font size for most browsers is 16px and 16 * .625 = 10.