Inter is the standard typeface for Protocol sites.
Zilla Slab and Inter are the standard typefaces on Mozilla branded websites.
Some Firefox branded websites are also licensed to use Firefox Sharp Sans.
This open source, sans-serif font was designed by Rasmus Andersson.
Inter is our standard type face for both headings and body copy. If you do not apply any themes by default your Protocol site will be entirely in Inter.
Everything is Inter by default. If you need to declare it specifically you can use the mixin
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, is primarily a display font and should only be used on large text like headings. As a general rule, type set in Zilla Slab should stand out. Avoid stacking two sizes of Zilla one on top of the other. Pair headings in Zilla Slab with subheadings in Inter.
Zilla Slab can be applied to headings by adding the class
mzp-t-mozilla to the component or included with the mixin
Firefox Sharp Sans
Sharp Sans is a closed license font licensed for use on some Firefox Marketing sites.
Contact the websites team for more information on how to use this font with Protocol if you believe your use is covered by the license. If you can't find us in the phonebook you can [open an issue on the Protocol repo](https://github.com/mozilla/protocol/issues/new).
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 XL mixin:
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.