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.
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:
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:
- Don’t set
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
1em on just the
body while Foundation sets a font-size of
100% on both
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
- Does it matter if I set a
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
I guess that the question of setting font-size on
body might cause some confusion around the use of the
rem since any
rem value is calculated from
No definitive answers, just things I’ve been thinking about.
Font Weight and Font Size
I’m not nearly as conflicted about
It seems to me that there is no reason to set
font-weight on either
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-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.
My current working takeaways are:
- Don’t set a
- Don’t set a
- Do set a
I’d love to hear you thoughts on the matter and how you handle setting up the baseline font CSS.