I’ve come across a wee problem with the following CSS….
….namely if the user has their default browser font size set to anything other than the one your testing with it can totally &^%$ up the look of your site layout.
I came across this as I was testing something on Safari (which I never normally use on my laptop). My whole layout text was really small just in Safari. After some rumaging around I noticed the default text size in ‘preferences’ was set to 12px ( probably why I never use it! ).
After declaring this….
…before the <body> tag CSS it all looked as it should in all browsers.
Has anyone ever considered the default size of their users browsers ( especially if thier ‘optically’ in their twilight years? ) when using em’s for text size based on the 62.5% rule?
The problem your encountering is the exact reason you should use ems/rems rather than a pixel size.
So that if the browser explicitly sets a default size it gets respected (to some degree)
If you wanted 100% definitive control over font-sizes you should use px. If you want it to look how you want for everyone who hasn’t purposefully changed their default font-size you should use em’s or rems with a px fallback
There are many mixins out there but I use this for rems with px fallback