Jump to:
| Project: | Zen |
| Version: | 7.x-5.x-dev |
| Component: | CSS/SASS/HTML markup |
| Category: | feature request |
| Priority: | major |
| Assigned: | Unassigned |
| Status: | active |
Issue Summary
We've been styling fonts for years using ems 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 rems 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
#1
Rough draft of a sass mixin
// All browsers use a 16px default font size, but let it be overridden.$rem-base-font: 16px !default;
// Add font-size and line-height with rem units, using px as a fallback value.
@mixin font-rem($font-size, $line-height: 0) {
font-size: $font-size;
font-size: ($font-size / $rem-base-font) * 1rem;
@if ($line-height > 0) {
line-height: $line-height;
line-height: ($line-height / $rem-base-font) * 1rem;
}
}
#2
Postponing until after #1372040: Use normalize.css as a basis for a new and improved html-reset.css
#3
Here's a more recent draft:
$base-font-size: 16px !default;
$base-line-height: 24px !default;
// For the given property, use rem units with px as a fallback value.
@mixin rem(
$property,
$size,
$root-font-size: $base-font-size
) {
#{$property}: $size;
#{$property}: ($size / $root-font-size) * 1rem;
}
// Add font-size and line-height with rem units, using px as a fallback value.
@mixin rem-font-size(
$font-size,
$line-height: false,
$root-font-size: $base-font-size
) {
@include rem(font-size, $font-size, $root-font-size);
@if ($line-height != false) {
@include rem(line-height, $line-height, $root-font-size);
}
}
@function rem(
$size,
$root-font-size: $base-font-size
) {
@return ($size / $root-font-size) * 1rem;
}
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.
#4
One 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.
#5
BAh. 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!
#6
Wow 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?
#7
FYI... I think this has been committed to compass and should be in the next release, see https://github.com/chriseppstein/compass/pull/896.