A Sass Type Toolkit

Download Latest GitHub Project Example Code

A Sass Type Toolkit

Set your type in Ems with modular scale, vertical rhythm, and responsive ratio based headlines using Sass. Why create another type toolkit in Sass? I wanted to and I couldn’t find exactly what I was looking for. Typesettings uses techniques from many different amazing tools while trying to keep it simple.

  • Its only dependency is Sass
  • It uses Ems for type not REMs or pixels
  • It handles all the math for Ems including the compounding
  • It maintains vertical rhythm with pixel based borders using padding set in Ems
  • It comes with a default 6px baseline to maintain rhythm on all block elements
  • It relies more on using Sass functions combined with vanilla CSS rules rather than mixins to style
  • It uses modular scale values to set font-size
  • It has optional default type styles that includes settings for adjusting headlines based on screen width

How to setup

There are three ways you can download Typesettings.

To start using Typesettings @import the _typesettings.scss partial into your Sass project after your CSS reset.

How to use

After Typesettings is setup in your project the default type styles should be looking good. However I bet you want to use modular scale and vertical rhythm in the rest of your project. Here is an example of how to do that:

The Scss:

The outputted CSS:

You can also look at the source code of this site to see how it was made using Typesettings.

Requirements

Sass, that’s it.

Precision

Typesettings uses relative units and many of the values outputted are a result of dividing and multiplying. So a computed pixel value like 17.999999px will sometimes happen.

Thanks and Resources

License

The MIT License (MIT)

Back to Top