Responsive typography with Sass and Foundation

Tags: , , , , , &


A common problem in web design is getting text to look good on all the myriad platforms that are available for accessing websites and apps these days. Having your text clear and readable on mobile, tablet, desktop, Google Glass, Apple Watch and a 60-inch LED TV seems like a bit of a pipe-dream.

There are few tools and techniques available to designers and developers to make this easier:

CSS3 rem units

A relative measurement which improves on the em unit due to the fact that it calculates size based on the root font-size value, rather than the font-size of the parent element. Rem units have proved to be very helpful in design as they can be calculated a lot easier. Relative units are important for accessibility as they allow text to be resized by the browser.

CSS3 Media queries

Media queries have been around for a good long while now and are the cornerstone of responsive design and progressive enhancement. We can detect the width and height of the viewport and adjust the design accordingly.

CSS pre-processors

E.g. Sass, Less and Stylus – these “languages” continue to evolve, making CSS less stressful and more fun. The libraries which developers have built (e.g. Compass, Bourbon) have made these pre-processors a whole lot more powerful and helpful.

Front-end frameworks

E.g. Bootstrap, Foundation and Gumby – these include their own opinionated defaults for typography which are easy to configure and can look pretty good with minimal time and effort.

Let’s look at two ways in which we can combine these tools to achieve responsive typography.

Quick and easy typography in Foundation

First let’s look at how Foundation deals with responsive typography:

Step 1: Import “_type.scss” into your main stylesheet

// File: main.scss
@import "settings";
@import "foundation/components/type";

Step 2: Set your base font size in _settings.scss

// File: _settings.scss
$rem-base: 14px;

Step 3: Tinker with values in your settings file. For example:

// File: _settings.scss
// Example configuration:
$header-line-height: 1.6;
$h1-font-size: rem-calc(38);
$h2-font-size: rem-calc(30);
$h3-font-size: rem-calc(24);
$h4-font-size: rem-calc(20);
$h5-font-size: rem-calc(18);
$h6-font-size: rem-calc(17);
$paragraph-line-height: 1.8;

Foundation makes it pretty easy to achieve simple responsive typography. Head on over to the Foundation Docs and resize your browser down to roughly mobile-width. You’ll see the font-sizes jump down a bit as the viewport width decreases. That’s all Foundation does, and for good reason – it keeps their already huge framework from getting even bigger, and 60 percent of the time, it works every time.

Fully responsive typography using Sass

I’ve written a Sass mixin which lets us define a base font size, and then use that to generate multiple base font sizes for each of the project’s target devices. This would produce a set of dynamic, responsive style defaults, independent of frameworks or libraries.

For this example, I’m using Sassy CSS (.scss), which is purely out of personal preference – you could just as easily implement this with Less or Stylus. If you’re unfamiliar with pre-processors, check out our tutorial on how to get started with Sass.

I’ve borrowed the modular-scale function from Bourbon to calculate the sub-heading and main heading sizes. This is a handy method which utilises mathemagical ratios to make things aesthetically pleasing. In this case I’m using the Golden ratio, see this great article by Chris Pearson which explains some of the maths behind it.

It also utilises a simple, customisable media-query mixin I created for standardised, human-friendly media queries.

Check out the Gist here

Play around with this working example on CodePen.

How to implement

You’ll need to import a few things in your main Sass stylesheet:

// File main.scss
@import "settings";
@import "mixins";
@import "rem-font";
@import "typography";

Essentially, what the set-up involves is setting the base font-size and the default scale. I’ve actually made it desktop-first (bad practice, I know), but I find it’s an easier place to start. In theory, it would be fairly easy to adjust this to mobile-first.

I like to create a “settings” file (like Foundation), as a common place to store all the values to be configured. I do this for practicality; so other members of the team know where to tinker with the project-wide values.

// File: _settings.scss

// Font size we want to use as our base (for desktop)
// Default is 16px
$my-base-font-size: 14px;
// Set a scale to calculate base values
// Default is 0.9
$default-scale: 0.95;

Or you can use the mixin from anywhere:

// Call the mixin
@include generate-typography($base:24px, $scale:0.75);


  • All elements will have to be relatively sized for this to work effectively (which they should be!) – so might not be such a good idea to introduce mid-project
  • On browsers which don’t support rem values, the text will render in static pixel values
  • It would be handy for the end-user to be able to control the base font-size, so it would be great to combine this with some kind of interactive user interface

Well it’s a start, we’ll keep working on it and improving the mixins. Keep checking out the CodePen and sending us your own Gists and Pens.

People who have viewed this post also viewed


Leave a comment

* Required fields


Please enter the CAPTCHA text