Using typey: a framework for working with typography on the web

With typey I set out to write an easy to use typography framework that didn’t try to reinvent the wheel of web typography - a viable replacement for Compass's Vertical Rhythm to help the move from ruby to node-sass. I wanted a clean and simple way to layout type and combine various css properties for consistent use. So often in front end development we are disecting various design files to interpret font sizes and line heights so we can then replicate them inside our sass as variables. Often we'll add to that our own custom maths to convert the values into relative units, or use something like Vertical Rhythm instead. typey does all that for you, and it's beautifully simple.

Define some defaults

You will start defining your various sizes as pixels (which are a joy to work with), and then typey will go ahead and convert them to relative units (either rems or ems). At its simplest you can define a base-font-size, a base-line-height-ratio, and then create a SASS map of font sizes, and typey will do the rest for you.

In the example below we’ve defined our defaults and started laying out type. The font-size map uses t-shirt sizes as best practice (but you can use any keys you like), and it makes keeping track and retrieving a large number of sizes a breeze. Typey will use ratio based unitless line-height, and spit out rem px fallbacks as needed (you can toggle them on and off). If you want to specify your own ratio for line-height you can do so too.

$line-height-method: ratio;

$base-font-size: 16px;
$base-line-height-ratio: 1.5;

$font-size: (
  xl: 32px,
  l:  24px,
  m: 16px,
  s: 12px,
);

html {
  @include define-type-sizing;
}

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

h2 {
  @include font-size(l);
}

Working with typefaces

New in typey 1.0 is the ability to define and recall typefaces. This is particularly handy when you have a few common properties you want to use consistently with a particular font family.

$sans-serif: "Helvetica Neue", Helvetica, sans-serif;

$typefaces: (
  sans-serif: (
    font-family: $sans-serif,
    letter-spacing: -.5px,
    weight: bold,
    case: uppercase
  );
);

h1 {
  @include typeface(serif);
}

Currently the typefaces map lets us set common font-family, letter-spacing, weight (font-weight) and case (text-transform) for an entire typeface. Of course the only required property is font-family, everything else can be skipped if it's not needed. Letter spacing is always outputted as an em value (calculated from the base-font-size) so it will be relative to your font-size.

Advanced typesetting

Another new feature in typey 1.0 are typestyles, which let us set a font-size, line-height, weight and case for elements. Think of a typestyle as a really convenient way to pair these properties so they are always expressed consistently.

$typestyles: (
  h1: (
    font-size: xl,
    line-height: 1.25,
    weight: bold
  ),
  h2: (
    font-size: l,
    line-height: 1.35,
  ),
  h3: (
    font-size: m,
    line-height: 1.5,
    case: uppercase  
  )
);

h1 {
  @include typeset(h1);
}

You can define any keys you like, with font-size being the only required property. The typeset mixin lets you recall any typestyle easily. In the above example I’ve used keys from the font-size map to define font-sizes however you can just as easily input pixel values instead.

Ratio vs Rhythm

You might notice at the top of the very first example is a variable where you can set a line height method. There are two options here: ratio and rhythm. This is where typey completely takes over from Compass’s Vertical Rhythm and lets you define a common unit of measurement (the base-line-height) and then set line-height, margins and padding as a multiple of that unit. And it’s really easy to use.

$line-height-method: rhythm;

$base-font-size: 16px;
$base-line-height: 24px;

h1 {
  @include line-height(2);
  @include margin(0 0 1);
}

Keep on using px

There is no reason you need to use multiples of base-line-height for spacing as typey’s font-size, line-height, margin, and padding mixins can all take px values and then do the conversions to relative units.

h1 {
  @include margin(4px 0 8px 25px);
}

Of course it’s not really best practice but handy none the less.

Debugging

To make things a little easier you can spit out debug grid lines that will give you a pixel perfect overlay to get things lined up exactly as you need to.

$typey-debug: true;
$typey-debug-color: red;

Just use the typeset (or type-layout) mixin and the grid code gets added automatically. When you’re done just turn off typey-debug. If you want to add debug lines to any element that isn’t using type-layout or typeset, you can do it manually as so:

h1 {
  @include typey-debug-grid(1);
}

The argument takes either a ratio or rhythm value depending on how you are working.

Pro tip: Use shorthand

The typefaces and typestyles maps accept shorthand so these can be even quicker to express. typey’s shorthand is very forgiving and you need only remember to include the font-family and font-size as the first values in each map.

$typefaces: (
  sans-serif: $sans-serif -.5px,
  serif: $serif
);

$typestyles: (
  h1: xl 1.25 bold,
  h2: l 1.35,
  h3: m 1.5 uppercase
);

Where to now

Although the typey website (typey.io) is not up and running yet, there is comprehensive documentation included in the repo inside each scss partial. So to get an in depth look at each mixin, variable and function typey uses take a look inside the stylesheets directory.

It’s on npm, ruby-gems and bower and it works great with either ruby-sass or node-sass (and eyeglass). Try it out now, you won’t turn back.

Checkout typey on github. typey is also included in Zen 6, so now is a great time to take a look.