A Sass and Stylus Toolkit for Setting Type
Set your type in Ems with modular scale, vertical rhythm, and responsive ratio based headlines using Sass or Stylus. Why create another type toolkit? 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 or Stylus
- 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 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
You can either use the Sass versison or the Stylus version. There are three ways you can download both versions of Typesettings.
- Download the latest release
- Clone the repo:
git clone https://github.com/ianrose/typesettings.git - Install with Bower:
bower install typesettings --save-dev
Setup Sass
To start using Typesettings @import the
_typesettings.scss partial into your Sass project after your
CSS reset.
| @import "path/your-reset"; | |
| // Your settings for Typesettings :) | |
| $font-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif; | |
| $font-serif: Georgia, 'Times New Roman', serif; | |
| $font-mono: 'Lucida Console', Monaco, monospace; | |
| $text-color: #000; | |
| $base-vertical-unit: 6px; | |
| $base-line-multi: 4; | |
| $base-font-size: 16px; | |
| $ms-ratio: 1.414; | |
| $paragraph-indent: true; | |
| $paragraph-justify: true; | |
| $load-typesetted: true; | |
| // Here is the _typesettings.scss partial | |
| @import "path/typesettings"; | |
| @import "path/your-styles"; |
Setup Stylus
To start using Typesettings @import the
_typesettings.styl partial into your Stylus project after
your CSS reset.
| @import "path/your-reset.styl" | |
| /* Your settings for Typesettings :) */ | |
| $font-sans:= 'Helvetica Neue', Helvetica, Arial, sans-serif; | |
| $font-serif:= Georgia, 'Times New Roman', serif; | |
| $font-mono:= 'Lucida Console', Monaco, monospace; | |
| $text-color:= #000; | |
| $base-vertical-unit:= 6px; | |
| $base-line-multi:= 4; | |
| $base-font-size:= 16px; | |
| $ms-ratio:= 1.414; | |
| $paragraph-indent:= true; | |
| $paragraph-justify:= true; | |
| $load-typesetted:= true; | |
| /* Here is the _typesettings.styl partial */ | |
| @import "path/_typesettings.styl" | |
| @import "path/your-styles" |
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:
| // This example is using Typesettings' default settings | |
| // [1] 3 times the baseline grid value for margin-bottom. | |
| // The second argument is the context font-size. In this case it is 1 step down in | |
| // the modular scale. | |
| // | |
| // [2] Using an optional mixin, a 2px border bottom is set with padding bottom | |
| // set to 3 times the baseline grid with 2px subtracted. By subtracting the 2px from | |
| // the padding bottom, vertical rhythm is maintained. | |
| // | |
| // [3] Using an optional mixin, the line-height is set to 3 * baseline grid. Then | |
| // the font-size is passed using our modular scale value. | |
| .your-module { | |
| margin-bottom: emRhythm(3, $ms-down1); //[1] | |
| border-color: #000; | |
| border-style: solid; | |
| @include rhythmBorderBottom(2px, 3, $ms-down1); //[2] | |
| @include setType(3, $ms-down1); //[3] | |
| } |
The Stylus:
| // This example is using Typesettings' default settings | |
| // [1] 3 times the baseline grid value for margin-bottom. | |
| // The second argument is the context font-size. In this case it is 1 step down in | |
| // the modular scale. | |
| // | |
| // [2] Using an optional mixin, a 2px border bottom is set with padding bottom | |
| // set to 3 times the baseline grid with 2px subtracted. By subtracting the 2px from | |
| // the padding bottom, vertical rhythm is maintained. | |
| // | |
| // [3] Using an optional mixin, the line-height is set to 3 * baseline grid. Then | |
| // the font-size is passed using our modular scale value. | |
| .your-module { | |
| margin-bottom: emRhythm(3, $ms-down1); //[1] | |
| border-color: #000; | |
| border-style: solid; | |
| rhythmBorderBottom(2px, 3, $ms-down1); //[2] | |
| setType(3, $ms-down1); //[3] | |
| } |
The generated CSS:
| .your-module { | |
| margin-bottom: 1.59075em; /* 18px */ | |
| border-color: #000; | |
| border-style: solid; | |
| border-bottom-width: 2px; | |
| padding-bottom: 1.414em; /* 16px */ | |
| font-size: 0.70721em; | |
| line-height: 1.59075; /* 18px (Okay, not pixel perfect, 17.9999999999px) */ | |
| } |
You can also look at the source code of this site to see how it was made using Typesettings.
Requirements
Sass or Stylus, that’s it.
Functions
Internally Typesettings uses some utility functions, which if you have a need use them. It also contains functions that can and should be used for setting type. Typesettings will warn you if a value will not result in a rhythm friendly value. If you would like to silence the warning you can pass the argument $silent: true.
The Sass function emRhythm returns an EM value that is a multiple of our defined base vertical unit. For example 3 becomes 1.125em
| .your-selector { | |
| font-size: $ms-down1; | |
| margin-bottom: emRhythm(3, $ms-down1); | |
| } |
The Sass function unitlessRhythm returns a unitless number that is a multiple of our defined base vertical unit. For example 3 becomes 1.125
| .your-selector { | |
| font-size: $ms-down1; | |
| line-height: unitlessRhythm(3, $ms-down1); | |
| } |
Mixins
Typesettings provides a number of helpful typesetting and vertical spacing mixins. Typesettings will warn you if a value will not result in a rhythm friendly value. If you would like to “silent” the warning you can pass the argument $silent: true
The mixin setType sets the type in EMs and makes a vertical rhythm unitless line-height that is based on context.
| .your-selector { | |
| @include setType(3, $ms-down1); | |
| } |
The mixin setLeading creates a vertical rhythm unitless line-height that is based on context.
| .your-selector { | |
| @include setLeading(3, $ms-down1); | |
| } |
The mixin rhythmBorderTop creates a pixel width border top with padding that is a multiple of the base vertical grid unit. You will need to set border style and color rules.
| .your-selector { | |
| @include rhythmBorderTop(3px, 3, $ms-down1); | |
| } |
The mixin rhythmBorderBottom creates a pixel width border bottom with padding that is a multiple of the base vertical grid unit. You will need to set border style and color rules.
| .your-selector { | |
| @include rhythmBorderBottom(3px, 3, $ms-down1); | |
| } |
The mixin rhythmBorder creates a pixel width border with padding that is a multiple of the base vertical grid unit. You will need to set border style and color rules
| .your-selector { | |
| @include rhythmBorder(3px, 3, $ms-down1); | |
| } |
The mixin debug-vertical-alignment creates base type baseline overlay and vertical unit overlay. To use on the body tag for example: body { @include debug-vertical-alignment(); } and add class va-debug to the body tag
| <html> | |
| <head><title>Debug Vertical Alignment Example</title></head> | |
| <body class="va-debug"> | |
| <p>I want to debug the baseline of this graf</p> | |
| </body> | |
| </html> |
| body { | |
| @include debug-vertical-alignment(); | |
| } |
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.