I’ve been in the habit of declaring a 62.5% font-size in the body for quite a while and then using EM’s throughout my CSS. It makes it super easy as 1em is then 10px and so forth.
I was thinking about it earlier today but this is probably wrong isn’t it? I use a standard CSS reset beforehand but I’m thinking there’s got to be a better way of going about it and I’m not sure of potential ramifications.
I don’t think it’s wrong as such, and I’ve done it myself as well for a long time. However, I started to run into problems when I gave a font size of, say, 1.2em to a div (so all text would be 12px), and then I had a specific child div in there that needed to be 10px. In that case, I couldn’t apply 1em, because that would be 100% of its container font = 12px anyway.
I mean, it wasn’t an issue to set the text to 10px, it was just messing up the rule “1em = 10px”. Or rather, it because “1em = 10px but only if any parent doesn’t have a font size setting“, and so I didn’t see much advantage to that anymore.
I always thought em’s were handy since they were relative to their container font size — change it somewhere and all it’s children would change with it. I just never really found actual use for it.
the whole point of ems was to not use pixels – since pixel density is getting higher, “10px” is getting smaller. ems allow the user/browser to choose the best default size.
resetting the font-size to 62.5%, or using rems with a set pixel value for the base size (and/or a pixel-based fallback), is completely counter-productive. You’re using px anyway; you’re just going to some length to hide that fact.
(rems will be much more useful once there’s wider browser support, but not for pixel-related reasons.)
basically, I agree with @karlpcrowley: if you want to use px, use px!
Cheers for the input everyone – it’s one of those habits I got into way back but I think if it’s not necessarily damaging to the end users then I’ll keep using it.
Sure I’m effectively using pixels but eyeing it at a baseline 1em=10px – but I want it to be more scalable and relative to containers etc so it’s probably the best choice for me and I do alot with responsive design.
@joshuanhibbert – I wasn’t referring directly to your article, but I stand by my position: if you want to use pixels to size your fonts, then you should simply do so. There’s no need to convert your pixel sizes to ems at all.
I do like the way you set up your baseline (I do something similar) — not because it equates pixels sizes with ems, but because it sets up the proportions you want without forcing a particular font-size upon the user. You define your default font size as “100%” – in other words, the browser’s default size. (It’s almost -but not always- 16px.)
As for ems vs. rems, ems are only “harder” because they cascade. They’re identical units of measure in all other respects. I agree that you wouldn’t use them interchangeably, but it wouldn’t be automatically “wrong” to use both in the same stylesheet. Which one you use would depend on context – i.e., whether you want the cascading effect or not:
Normal-sized text, here.
(16px, or whatever the browser default is.)
This text will be 1.5 times the size of the text in the div above.
It's inheriting the bigger font-size from the "featured" article.
In browsers that support rems,
this text will be the same size as the text in the div above -
even though it's inside the "featured" article.
@traq Sorry for the late reply; I forgot about this thread. You are missing one pretty big benefit of using ems: you can change the font-size for the entire site by simply changing the root font-size. This is incredibly handy when designing responsively.