Set up typographic defaults using Sass & Compass Vertical Rhythm — volume 2

This article is an updated version of my previous article “Using Sass & Compass Vertical Rhythm to set up typography defaults in a project”. This time the new Sass 3.3 Maps was used to build the typographic system.

Meet Typomatic — a Sass & Compass based typographic kit

Since my last article got a lot of great comments and recommendations, I decided to round up everything in a GitHub repo — Typomatic to get better community feedbacks and keep the code up to date. The repo is under construction, feel free to contribute!

Typomatic demo

The prerequisites — Compass Vertical Rhythm + Sass Maps

Since we’ll be setting our font-sizes in REM units with pixel fallbacks, we have to use the prerelease version of Compass 1.0 (until a stable version is available) and it’s Vertical Rhythm module with the new Sass 3.3+ with Sass Maps support.

Typographic scale

A typographic scale of a web project is a scale of different font sizes used for various purposes like body text, buttons, labels, input fields etc.

The whole idea of this approach is to have an unified and connected typographic scale across our whole site or app. I needed a really practical way of utilising the superb Compass Vertical Rhythm module without repeating myself (keepin’ the whole thing DRY).

For this example, we’ll use the 1:1250 typographic scale (Major Third). You can use a scale of your choice, or make up a new scale — it’s all up to you.

A 1:1250 typographic scale (source: http://type-scale.com/)

The base font size of my choice is 20px (1rem). Multiplying the base font size with the 1:1250 ratio gives us a nicely contrasted but subtle scale. Rounding it all up we get a list of proportional sizes: 13px, 16px, 20px, 25px, 31px, 39px, 49px.

Setting up Compass Vertical Rhythm

A quick setup is needed for the Compass Vertical Rhythm. The base-font-size is the desired 20px, while the base-line-height is 32px for a cosy reading experience. The units in this case are rems without pixel fallbacks.

$base-font-size: 20px;
$base-line-height: 32px;
$rhythm-unit: "rem";
$rem-with-px-fallback: false;

Setting up the environment using Sass Maps instead of variables

In the first article I wrote Sass variables were used to set up different font sizes. With the release of Sass Maps in the Sass 3.3 version we can now group our variables in a map as values.

Let’s define all of the font size variations in our scale — tiny, small, base, medium, large, xlarge and xxlarge in a Sass Map. We can even extend the maps with more parameters like letter-spacing etc, but that’s another story.

In the config.scss file font size variations are kept as a nested map with multiple values (font-size and base-lines).

$type-scale: (
  tiny: (
    font-size: 13px,
    base-lines: 0.5
  ),
  small: (
    font-size: 16px,
    base-lines: 0.75
   ),
  base: (
   font-size: $base-font-size,
   base-lines: 1
  ),
  medium: (
    font-size: 25px,
    base-lines: 1
  ),
  large: (
    font-size: 31px,
    base-lines: 1
  ),
  xlarge: (
    font-size: 39px,
    base-lines: 1.5
  ),
  xxlarge: (
    font-size: 49px,
    base-lines: 2 
  )
);

Getting the data from the nested map and feeding it in a type-scale mixin

The whole point of the project is to achieve a modular typographic scaling system, we need to utilise the Sass goodness to get the type scaling functionality running in a mixin.

Since there is no native Sass way (at least not to my knowledge) of getting a deep value from a multi level map, I’ve used a nice little function from J.W.Long that does the trick. The function is implemented in the functions.scss file in the project.

The typomatic.scss file is where all the magic happens with a super simple type-scale mixin. The mixin takes two argumens, $scale and $map. The scale is the defined scale of the type (small, big etc.). The map is the name of the Sass map that holds the data — you can feed it with as many maps as you wish and generate different scales.

@mixin type-scale($scale, $map: $type-scale) {
  $font-size: map-fetch($map, $scale font-size);
  $base-lines: map-fetch($map, $scale base-lines);
  @include adjust-font-size-to($font-size, $base-lines);
}

Styling the elements

A basic website or web app usually has several levels of headings (h1, h2, h3…), paragraphs, various lists and other typographic elements that have a font-size and a line-height that need attention.

All we now have to do is @include the type-scale mixin to an element of our choice!

h1 {
  @include type-scale(xxlarge);
}
h2 {
  @include type-scale(xlarge);
}
small {
  @include type-scale(small);
}

Have an idea how to make Typomatic better? Contribute on GitHub!

The Typomatic offical GitHub repository is ready and running. I would love to see your contributions & comments.

Cheers,

Andrej
@amlinarev