Responsive typography made easy

Edit July 20th 2015: If you want your typography to scale differently (e.g.: Your headings and your paragraphs don't need to just scale up by 20% on a different resolution, you want them both to have a different size), there’s a great article on Smashing Magazine about that: Responsive Typography with Sass Maps

Font sizes should differ on different devices (smartphone/tablet/desktop) because people read from these devices at different distances: you hold your phone closer to your face than your desktop screen. For more information on this, check responsive typography, the basics.

But what’s the most practical approach to do this? (according to me)

• Use rem’s (and a Sass mixin for a px fallback)
• Switch the html’s default font-size at different resolutions (since we're using rem’s all font sizes will decrease/increase with it)

Note: We’re using rem’s because em’s can be tricky:

One of the problems with using "em" as font sizes is that they cascade, so you are forever writing rules that select nested elements to reset them back to 1em; CSS3 now has rem ("root em") to prevent that issue. Just declare a px fallback and you can use it today. Snook shows us they way.
— css-tricks

Learn more about rem’s at snook.ca

Defining font-sizes with rem's

I put my font sizes in variables to ensure consistency through the whole website:

$font-size-xs: 11px;
$font-size-s: 14px;
$font-size-m: 16px;
$font-size-l: 18px;
$font-size-xl: 24px;
$font-size-xxl: 36px;

This mixin converts the pixel font size to a rem format, with a px fallback

@mixin font-size($px, $base: 16px) { // 16px is the browser default
   font-size: $px; // px fallback
   font-size: ($px / $base) * 1rem; // calculate rem font-size
}

Mixin usage:

h1{
    @include font-size($font-size-xl);
}

Mixin output:

h1{
    font-size: 24px; // overwritten by rem declaration below, IF rem's are supported
    font-size: 1.5rem;
}

Resizing font sizes at different resolutions (mobile first):

html{ // Smallest resolutions
    font-size: .8rem;
}

@media only screen and (min-width: 480px) { // 480px and up
    html{
        font-size: .9rem;
    }
}

@media only screen and (min-width: 768px) {
    html{
        font-size: 1rem;
    }
}

That’s all Folks!

Yup, that’s how easy it is, desktop screens will now have the sizes defined in your variables. Smaller screens will have smaller font sizes, creating a better reading experience. Try to reach a line lenght of ~50–60 characters for body copy on each device.