Skip to content
A series of mixins and functions to set font-size, line-height and font-family values from a typographic scale.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Font scale tool

Mixins for accessing a typographic scale from a Sass map. For more information check the original post on the subject.

Here’s an example of how you might use this tool in a real project:

h1 {
	@include font-scale(base, helvetica);

    @media screen and (min-device-width : 320px) {
        @include font-scale(large, helvetica);

//css output
h1 {
	font-size: 16px;
	line-height: 20px;

    @media screen and (min-device-width : 320px) {
        font-size: 35px;
        line-height: 40px;


This module can be installed as a bower package like so:

bower install ult-font-scale

In your main .scss file you’ll need to add a base font size which will be used to calculate the output rem values. After that you’ll want to add a supports map to convert all of the units to rems:

$font-base-size: 16;
$supports: (rem: true);

Then you have to import the font-scale and rem-calc tool which also happens to be a dependency if you want rem values:

@import "bower_components/ult-font-scale/font-scale";
@import "bower_components/ult-rem-calc/rem-calc";

Once that’s done we’ll need to set our typographic scale as a Sass map. Usually I’d do this in another partial like font-scale.scss and import it back into the main Sass file:

$fonts: (
	helvetica: (
		base: (
            font-size: 16,
            line-height: 20

        large: (
        	font-size: 35,
        	line-height: 40
	georgia: (
		small: (
			font-size: 13,
			line-height: 16
		base: (
			font-size: 15,
			line-height: 19

With all that data in place we can finally use the mixins like so:

h1 {
	@include font-scale(large, helvetica);

And that should export to something like this in CSS:

h1 {
	font-size: 2.1875rem;
	line-height: 2.5rem;

Optional configuration settings

Setting fonts with separate font files for each weight

Some typefaces require specific fonts for certain weights in which case we can set the family-per-weight value to true:

$font-sans-fallback-stack: Helvetica, sans-serif;

$fonts: (
    Apercu: (
        family-per-weight: true,
        normal: ('Apercu Regular', #{$font-sans-fallback-stack}),
        semi-bold: ('Apercu Medium', #{$font-sans-fallback-stack}),
        bold: ('Apercu Bold', #{$font-sans-fallback-stack}),


You can’t perform that action at this time.