A Sass micro-library for web-safe font stacks

Sass Font Stacker is a small library of web-safe font stacks bundled with some utility functions and a simple mixin to make font-family declarations a breeze. The syntax is similar to what you’d be writing anyway. For example:

@include k-font-family("Open Sans", helvetica);

This will output:

font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, "Nimbus Sans L", "Liberation Sans", Arimo, sans-serif;

The mixin (and related utility function k-font-stack() accepts an arbitrary list of fonts but requires the last (or only) argument to match one of the pre-defined font stacks. This way you can specify naming variations or even entirely different fonts at the head of a custom font stack.

I won’t list all the font stacks included in this project (as this information is likely to change) but will cite a few of the more commonly used fonts in web design:

  • Andale Mono
  • Arial
  • Baskerville
  • Book Antiqua
  • Calibri
  • Cambria
  • Century Gothic
  • Constantia
  • Courier
  • Garamond
  • Helvetica
  • Helvetica Neue Light
  • Hoefler Text
  • Lucida Grande
  • Palatino
  • Segoe
  • Times New Roman
  • Trebuchet MS
  • Verdana

All of these stacks contain a liberal sprinkling of Croscore, DejaVu, Liberation, and URW++ fonts for those viewers who lack the proprietary fonts common on the big two operating systems.

Crafting web-safe font stacks is more an art than a science these days. Usage data is neither current nor of a sufficient quality to make anything better than an educated guess in my estimation. But hey, a good guess is better than nothing—and the use of a Sass library allows for those good guesses to be formalized and consistent across projects. If anyone out there has expect knowledge to contribute please consider opening an issue or sending a pull request. Here’s that GitHub link again: Sass Font Stacker.

Related posts


Markdown and HTML enabled in comments.
Your email address will not be published. Required fields are marked *