Earlier this week, I listened to the first episode of “Happier with Gretchen Rubin”. One of the things they talked about was if a person was a “satisficer or maximizer” – and I’m definitely out there towards maximizer on the spectrum. This definitely made me “know myself better” and helps me understand my own behaviors (neurotic tendencies?) more.
Recently I’ve been reconsidering all of the assumptions I have had around CSS and setting up the baseline for new projects. My latest search is for the “best” way to setup fonts (size, weight, family) in CSS. In what follows, I talk about my findings and thoughts on how to setup baseline fonts CSS for an effective project. I’ll revisit this topic in a few months to talk about how it went on my latest project and what I learned from the experience.
Font Size
Most browsers set a default font-size of 16px. Given this, it could be assumed that assigning a font-size of 16px on your html element would set a baseline that would be honored by all browsers, but this breaks accessibility. If someone has a default font size set in their browser to something other than 16px (say, 20px) then setting a font-size of 16px on the html tag overrides the user’s setting. Terrill Thompson talks about this in Use font-size: 100% !important.
I setup a simple CodePen that you can play with to see this behavior:
See the Pen dovzxX by Matt Vanderpol (@bookwyrm) on CodePen.
If you set your browser’s default font-size to 20px and play with commenting/uncommenting the font-size: 16px; line you can observe the behavior.
I’ve looked at a few different frameworks and sites which I consider luminary in the field (CSS Wizardry, Filament Group, Cloud Four, adactio, Bourbon Bitters, Zurb Foundation) and they all do one of 3 things:
- Set
font-sizeonhtmland/orbodyto100% - Set
font-sizeonhtmland/orbodyto1em - Don’t set
font-sizeonhtmlorbody(Filament Group)
Filament Group talks about not setting a font-size in How we learned to leave default font-size alone and embrace the em.
Bitters sets a font-size of 1em on just the body while Foundation sets a font-size of 100% on both html and body.
This leads me to wonder several things:
- Does it matter if I use 100% vs 1em?
- Do I even need to set anything for a
font-sizeonhtml? - Does it matter if I set a
font-sizeonhtmlorbody?
According to Filament Group, I don’t and everything will just work out – but if that is the case then why do other people set a default font-size?
I guess that the question of setting font-size on html vs body might cause some confusion around the use of the rem since any rem value is calculated from html not body.
No definitive answers, just things I’ve been thinking about.
Font Weight and Font Size
I’m not nearly as conflicted about font-weight or font-size.
It seems to me that there is no reason to set font-weight on either body or html since the browser will simply default to normal. (This seems to be an argument in favor of Filament Group’s position that you don’t need to set font-size…)
For font-family I prefer to use web fonts with family grouping so I can just set a base font for body and use font-weight throughout to manage which variants are used. It makes more sense to me to set the font-family on the body element because there is no special behavior (as we have for rem units) and the body is where the “content” is.
In Conclusion
My current working takeaways are:
- Don’t set a
font-sizeonhtmlorbody - Don’t set a
font-weightonhtmlorbody - Do set a
font-familyonbody
I’d love to hear you thoughts on the matter and how you handle setting up the baseline font CSS.