How to make Compass Vertical Rhythm output Rems instead of Ems with px fallback?

Question

I want to do this: http://www.youtube.com/watch?v=ls3Clk-kz3s but output rems (with px fallback) instead of ems.

Apparently this https://github.com/chriseppstein/compass/pull/896 is added to compass and should somehow work, but I don't quite get what do I need from http://compass-style.org/reference/compass/typography/vertical_rhythm/ to my .scss -file to make it.

If I were to just take the code from https://gist.github.com/ry5n/2026666 as a mixin (even without Compass at all) and use:

@include set-font-size()

instead of:

@include adjust-font-size-to()

It works beautifully with rem values and px fallback.

But if I just try to use Compass and go with

$font-unit: 1rem;
$relative-font-sizing: false;

It works but without px fallback.

If someone could put the full .scss code needed for Vertical Rhythm to work with Rems, I'd appreciate it very much.

And why do I need $relative-font-sizing: false if I'm using Rems? Also, are there some competing philosophies on vertical rhythm other than getting the text to a grid like this? Which one do you prefer and what is your workflow?

Thank you very much in advance.

ry5n ry5n · Accepted Answer · 2013-08-26T00:37:51

For the moment, these updates to Compass remain in the pre-release gem, and the matching documentation isn’t yet available on compass-style.org (not even beta.compass-style.org). To use the new features, install the latest gem (0.13.alpha.4):

gem install compass --pre

With the new gem, the vertical rhythm API is slightly different, mostly in its configurable variables, as per https://github.com/chriseppstein/compass/pull/896. In short, set your base font size and line height, and set the new $rhythm-unit variable to rem:

$base-font-size: 16px;
$base-line-height: 24px;
$rhythm-unit: 'rem';

The $rhythm-unit variable replaces $font-unit, and $relative-font-sizing is now a private, internal thing you don’t need to worry about.

After this, all the normal vertical rhythm mixins will output rems with fallbacks (unless you explicitly set $rem-with-px-fallback to false). Note that the rest of the API remains nearly identical, with the exception of the rhythm mixin, which now has more sensible default arguments. There are a few additions which are detailed in the original pull request.

One thing to keep in mind that the rhythm functions can’t provide pixel fallbacks, since they simply return a value.

How to make Compass Vertical Rhythm output Rems instead of Ems with px fallback?

1 Answers