Working on a project with many designers and engineers can make it difficult to manage type styles. I find that we often end up with different sizes or weight definitions littered throughout the project with a lot of repetition as styles are redefined within media queries.
On a recent large project at Friday we took the time to thoroughly plan our approach. The result is a simple set of Sass maps and mixins for defining and exposing and consuming typographic rules.
I started by assigning short names to the font families being exposed from our @font-face declarations. This is neatly enumerated into a map as follows:
We had already agreed on the type size hierarchy (12–72px) so these are also stored in a map with short names along with specific leading rules for each size.
I then access these maps through some simple mixins, for example:
Conversations with our designers quickly revealed that Avenir needed tweaking at certain sizes. At large sizes the light and black weights need tighter kerning. No problem. Another map to the rescue where we can define properties to tweak at specific size/weight combinations:
The full mixin source for your delectation:
By enumerating these decisions with short names we have established a common vocabulary for chatting about our chosen type styles. Happy designers, happy engineers, happy days.