The Case for Defining Base Font-size
The general web accessibility best practice for handling base font-size on a website is to not define it and let the browser do its thing, which means:
/* NEVER DO THIS */
html {
font-size: 16px; /* or any value for that matter */
}The benefit of not defining base font-size is that it will respect the user’s browser settings and system preferences — I also touched on other user preferences in a previous post. I won’t go into too much details about this since many people have written about it.
However, you should define base font-size … sometimes.
Fonts are not created equal
If you are a graphic designer or a typography snob enthusiast, you would know that there are many classifications of typefaces — serif, sans serif, script, monospace, to name a few. Not only each typeface has its own aesthetics but they can also appear dramatically different in size due to typographic traits like x-height, ascender, descender, etc.
Comparing two popular fonts
System UI Font:
Emily Elizabeth Dickinson was an American poet. Little-known during her life, she has since been regarded as one of the most important figures in American poetry. Dickinson was born in Amherst, Massachusetts, into a prominent family with strong ties to its community.
IBM Plex Mono:
Emily Elizabeth Dickinson was an American poet. Little-known during her life, she has since been regarded as one of the most important figures in American poetry. Dickinson was born in Amherst, Massachusetts, into a prominent family with strong ties to its community.
As you can see in this comparison, IBM Plex Mono — a monospace font — takes up so much more space than the System UI Font — a sans serif font, and its letters optically look larger too, even though both paragraphs are set in 16px font-size.
Pick the best base font-size for your font
Unless you are designing every single website with the exact same font, your base font-size is going to vary. The browser default 16px is not going to work for every font if you care about typography at all.
Uh, accessibility is more important than typography
, you might say. But who says we can’t have both?
The correct way to define base font-size
:root {
font-size: 100%; /* change to your desired percent */
}Follow two simple rules:
- Use % unit.
- Define it on the root level.
Why use % unit?
Keep in mind that the browser default is 100%, if you define it to be some other % value, it is still a relative number, and it would still be compatible with the user’s browser settings and system preferences. Obviously, don’t use a ridiculous value like 1%, you are not building a website for ants. In the example of IBM Plex Mono, 87.5% — which means 14px — seems to be a pretty good size.
Why the :root?
When styling HTML, the :root is the <html> element, which is the parent container of any given HTML file. Base font-size starts with the parent, and all its children inherit it. Choosing the :root selector over the html selector has one advantage: higher specificity. This is useful if you are concerned with running into conflicts with CSS frameworks that mess with the html selector.
…Yeah, about frameworks
You could always do this as a nuclear option to fight CSS frameworks, thanks to Mayank for the tip:
@layer {
:root {
font-size: 100% !important; /* fuck off, inaccessible frameworks! */
}
body {
font-size: 1rem !important; /* double fuck off */
}
}TEEHEE!