The Ultimate Ideal Bestest Base Font Size That Everyone Is Keeping a Secret, Especially Chet — Adrian Roselli
--><br>--><br>-->
-->
Adrian Roselli
Viral Distrbuted Ledger Token ISO
The Ultimate Ideal Bestest Base Font Size That Everyone Is Keeping a Secret, Especially Chet
Updated February 6, 2026, originally posted March 13, 2024; 28 Comments
It’s none.
Clarification
Let me clarify: don’t set a base font size.
body {<br>/* font-size: yeah, no */
Got a linter or code checker or boss-man hassling you that you need to set something? Ok, use something like this:
html {<br>font-size: 100%;
Because
This approach has the advantage of always inheriting the user’s preferred font size. The one they choose in their browser or on their system. Even if they did not explicitly choose one (because the default was maybe good enough). advice I gave in 1999.-->
All other font sizes (headings, navigation, footer, etc.) should then use relative units. Ideally without being smaller than the default size (with very specific exceptions).
Because you avoid calculation witchcraft, any smaller sizes could be easier for authors to spot — .9rem and 90% are clearly smaller.
Alternatively, font sizes based on viewport units bring risk-->bring risk, not least of which is preventing the user from scaling it large enough to read. Then you need yet more calculation sorcery to prevent it.
Forms
While you’re tearing out an unnecessary base font size declaration, maybe add this to your CSS to honor the user’s preferences in forms as well:
select, textarea, input, button {<br>font: inherit;
I explain this in more detail in my posts Under-Engineered Text Boxen and Under-Engineered Select Menus.
When it comes to print styles, the text may be too large for your audience (regardless of if or how you set it). If so, you can set the base font in the appropriate point size and all your other relative font sizes will work from that.
@media print {<br>body {<br>font-size: 8pt;
Recap
That’s it. That’s the secret. Don’t set a base font size.
But…
Sure, your case is special. Your case is more important than respecting user choice. I’m not your dad. I can’t stop you. Legally.
Update: 3 April 2024
With Mike Mai’s feedback (linked above) and Scott Kellum’s comments below, I amended the example for when you have to but some style in there. Now it uses html as the selector instead of body.
While this post is about not setting anything, I made the mistake of including something if you were forced to. Folks fixated on that, so that’s on me.
Update: 22 April 2024
Mike Mai wrote The Case for Defining Base Font-size. His argument is that a typeface can warrant setting a base font size. I don’t necessarily disagree. You are imposing a font on users that is potentially too small (or too large), so if you imposed one decision, stacking another is not a stretch.
This assumes the user can download the font (it’s not blocked or interrupted) and the user is ok with the font (and hasn’t blocked it via preferences).
Update: 1 May 2024
My 300 word throwaway post got featured in a video, which I found out about via Spencer Wohlerson the A11y Slack. Also, I had that shirt.
body{background-image:url(https://i3.ytimg.com/vi/rg3zgQ3xBRc/hqdefault.jpg);background-repeat:no-repeat;background-size:cover;background-position:center center;display:grid;place-items:center;min-height:97dvh;overflow:hidden;}a{display:block;width:96px;height:96px;overflow:hidden;}a:focus{outline:none;}a:focus circle,a:hover circle{fill:#000;}a:focus circle:first-child + circle,a:hover circle:first-child + circle{stroke-dasharray:.4,.4;}a:focus polygon,a:hover polygon{stroke:#fff;stroke-width:.75;}Play"><br>-->
YouTube: Pretty much every website uses the wrong font size…, Theo – t3․gg, 15:33
Update: 16 February 2025
Miriam Suzanne penned Reimagining Fluid Typography, partly as a response to this post, partly as the outcome of her live stream in January, and partly to address issues I have raised about common techniques that preventing the user from scaling the text on a site.
I embedded the video and start it where Miriam mentions this post. Because my ego demanded it.
YouTube: Winging It: Relative Units & Typography, 57:30, streamed 24 January 2025, with Miriam Suzanne, Stacy Kvernmo, and Alan Stearns.
Update: 1 April 2025
Another reference from another OddBird video, this time with Richard Rutter and accompanying post that provides all the links. Again, my ego demands I embed the video at the point where I am mentioned (it is brief).
YouTube: Winging It: Revisiting Fluid Type , 57:31, streamed 20 March 2025, with Miriam Suzanne, Stacy Kvernmo, and Richard Rutter.
Richard mentions a comment that points out my own site does not follow the thing I advocate above. I appreciate they all get a chuckle out of the logic in my response.
Update: 6 February 2026
The method I outline in this post is now the best way to support the CSSWG proposed browser support for text scaling from...