Typography

Typefaces

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.

Inter

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 @include font-base;.

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz ÅåÂâÀàÁáÄäÃãĄąẢảĆćÇçĈĉĐđÉéÏïÎÑñØøÖöÕõÜüÛû 0123456789 . … , · • : ; ¡ ! ¿ ? { } [ ] ( ) / — – - _ * ‹ › « » ‚ ‘ ’ „ “ ” ' | ¦ @ & † ‡ ❡ ¶ § ◊ ^ ~ © ® ℗ ™ 1¤ $18 ¢29 €75 ƒ32 ₹572 £68 ¥998’000

Zilla Slab

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 @include font-mozilla;.

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz ÅåÂâÀàÁáÄäÃãĄąẢảĆćÇçĈĉĐđÉéÏïÎÑñØøÖöÕõÜüÛû 0123456789 . … , · • : ; ¡ ! ¿ ? { } [ ] ( ) / — – - _ * ‹ › « » ‚ ‘ ’ „ “ ” ' | ¦ @ & † ‡ ❡ ¶ § ◊ ^ ~ © ® ℗ ™ 1¤ $18 ¢29 €75 ƒ32 ₹572 £68 ¥998’000

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).

Styles

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.

Display XXL

Display XL

Display LG

Display MD

Display SM

Display XS
Display XXS

Body LG

Body MD

Body SM

Body XS

CTA

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.

See a demo

Code

We use Sass mixins to declare these font sizes:

@include text-display-xxl;
@include text-display-xl;
@include text-display-lg;
@include text-display-md;
@include text-display-sm;
@include text-display-xs;
@include text-display-xxs;
@include text-body-lg;
@include text-body-md;
@include text-body-sm;
@include text-body-xs;
@include text-body-cta;

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:


  @mixin text-display-xl {
      @include font-size(40px);
      line-height: $text-display-line-height;

      @media #{$mq-md} {
          @include font-size(56px);
      }
  }
}

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.