[Todo: Some kind of introduction about our approach to typography in general, maybe some basic principles.]
Zilla Slab and Open Sans are the standard typefaces on Mozilla branded websites. As a general rule, type set in Zilla Slab should stand out. Avoid stacking 2 sizes of Zilla one on top of the other. Pair headings in Zilla Slab with subheadings in Open Sans.
Zilla Slab is our custom typeface for the Mozilla brand. We use it for our wordmark and as a display font for headlines on Mozilla branded sites. It’s a contemporary slab serif based on Typotheque’s Tesla. Zilla Slab is a free, open source font available for download.
Zilla Slab can be applied to headings by adding the class `mzp-t-mozilla` to the component or included with the mixin `@include zilla-slab;`.
Open Sans is our standard typeface for body copy, labels, captions, links, navigation, etc. because it’s more legible at smaller sizes than Zilla Slab, which is primarily a display font. Open Sans is also used as a heading/display font when the Firefox brand needs to be expressed more than the Mozilla brand. This open source font was designed by Steve Matteson.
We limit the number of type styles to a set that works well across the website and fits our layout grid. This scale is based on a root size of 16 pixels and a 4 pixel baseline grid to determine line height.
The display sizes are XXS through XXL. Of these, the most commonly used are SM, MD, LG, and XL. Use the XS and XXS display sizes sparingly for labels and UI elements, and the XXL display size sparingly to make an especially bold statement.
We use two sizes of regular body copy: MD and LG. Use MD for normal, default body text and LG when you need slightly larger text to stand out, like a tagline or the introduction to an article. There are two sizes of smaller body text: SM and XS, used sparingly for supporting text like footnotes or disclaimers, never for main body copy.
We also have a special CTA style used in buttons and navigation. It's a medium font-size size but with a tigher line-height than ordinary body text.
We use Sass mixins to declare these font sizes:
Those mixins include media queries to adjust the sizes at key breakpoints. Text gets bigger as the viewport gets bigger. You can resize your window to see this in action on the sample above or on the demo page.
For example, here’s the 4XL mixin:
The funky line-heights are calculated to fit the 4-pixel baseline grid, give or take a pixel with rounding. Also note that these mixins only declare the size and line-height, not the font-family or weight.
The sizing mixins in turn use another Sass mixin to convert a pixel size to
rem for output, assuming a 16px root size (the default in graphical browsers). Because we use
rem for font sizing all of our declared sizes are really just suggestions and the end user can resize as they see fit. Text sizes are flexible so design accordingly.