We've been styling fonts for years using em
s with this technique: http://www.alistapart.com/articles/howtosizetextincss
But I think its time to change to this method: http://snook.ca/archives/html_and_css/font-size-with-rem
That method uses rem
s with a px
fallback. The browser support is ok; see http://caniuse.com/#search=rem
Sizing with em
is hard, especially when you want to change font sizes. Since the font size cascades and all font sizes are relative to the parent, you end up having to recalculate a lot of em values. :-p And there's no easy way to automate that math with Sass since Sass doesn't automatically know what the parent elements font size is.
But with a px fallback, we can easily create a Sass mixin to write px fallback and then rem.
Comments
Comment #1
JohnAlbinRough draft of a sass mixin
Comment #2
JohnAlbinPostponing until after #1372040: Use normalize.css as a basis for a new and improved html-reset.css
Comment #3
JohnAlbinHere's a more recent draft:
In addition, I'm going to see what might be useful in this Compass plugin https://github.com/JohnAlbin/rem and see about adding proper rem support to Compass' vertical rhythm mixins.
Comment #4
JohnAlbinOne complication is Compass' vertical rhythm mixins don't provide px backups when using rem. We may have to fork some of those mixins and put them in a custom partial.
I'm working on some stuff with another Compass developer over here: https://github.com/JohnAlbin/rem
This is a release blocker.
Comment #5
JohnAlbinBAh. I realized I'd have to fork Compass' vertical rhythm mixin to get this into 7.x-5.0 at this point, because it lacks the "px as fallback" support that any good rem solution would need.
I'll keep working on this, because it's awesome!
Comment #6
MustangGB CreditAttribution: MustangGB commentedWow not heard of rem's until now, this would be a fantastic addition.
However as we are currently using em's throughout wouldn't it be better to fallback to them instead of px's?
Comment #7
gmclelland CreditAttribution: gmclelland commentedFYI... I think this has been committed to compass and should be in the next release, see https://github.com/chriseppstein/compass/pull/896.
Comment #8
JohnAlbinNot sure when this new version of Compass will land. But I'm moving this to 7.x-6.x in the meantime.
Comment #9
KrisBulman CreditAttribution: KrisBulman commentedrem support is currently in 0.13.alpha.4, the following vars just need to be set, and all vertical rhythm mixins will automatically output rem with pixel fallbacks.
The following rem mixin from https://github.com/nex3/sass/issues/472 works quite well. With Sass changes in future releases, it'll slim up a bit. I don't think there is a current rem mixin like this in the next release of Compass though, so we'll definitely need some sort of iteration on it. (which i see John is already on)
Comment #10
gmclelland CreditAttribution: gmclelland commentedHmm... This really has me thinking http://css-tricks.com/rems-ems/
I think more and more sites will start to want responsive typography at different breakpoints and the technique shown in the article might be a good way of doing that?
Comment #11
JohnAlbinThis is implemented in 7.x-6.x.