Question

So I’ve recently moved to sizing fonts in rems to avoid descendancy issues that you get from using ems, in things like nested li’s.

So I’ve sized my html font-size to 62.5% so I can just do p {font-size 2.5rem} /* 25px */

The problem arises when I want to change the font-size of a certain element, normally I’d just give the parent of say a block of text the size 0.8em to make things a little smaller.
But since rems are relative to the html element, I can’t just write say .parent {font-size 0.8rem}, because it won’t affect anything within it.

I’m also confused as to how to resize with media-queries.
Do I write out all my selectors again or do I just give my html a font-size of something smaller than 62.5% to make fonts smaller at smaller screen sizes?

I’ve been reading about font-sizing for days now and I’d love to get a definitive answer on what’s the best practice for this.

Answer 1

To be honest, I think that using 62.5% leads to bad practice, which is why you’re experiencing the confusion you are now (have a read of this: http://csswizardry.com/2011/05/font-sizing-with-rem-could-be-avoided/). I would recommend learning how to do the maths when working with a font-size of 100%. And then you would simply do exactly what you stated, simply decrease the root font-size for smaller screens (it would make a bit more sense that way).

As an example, if you were working with a root font-size of 100% (16px), and you wanted a font-size of 20px, use this formula:

font-size = target / context

So in this case, you would do 20 / 16 which gives you 1.25rem.

Also, when you want to change the font-size of a specific element, you are almost always better off changing that element directly, instead of a parent. That way, when you, or someone else, are looking for the font-size, it is in a place that makes sense!

Also, you can still mix rem and em if you want font-sizes to nest.