Typography

Typefaces

Inter is the standard typeface for Protocol sites.

Zilla Slab and Inter are the standard typefaces on Mozilla branded websites.

Metropolis and Inter are the standard typefaces on Firefox branded websites.

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

Don't italicize Zilla Slab. Protocol only includes normal and bold versions of this font.

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

Metropolis

Metropolis is a free, open source font used for headlines on marketing and product web experiences. It's a geometric sans-serif font by Chris Simpson, very similar in style and character to Firefox Sharp Sans, the proprietary font used to create logo lockups for Firefox products (do not use Firefox Sharp Sans as a webfont).

Use Metropolis for large text like headings. As a general rule, type set in Metroplis should stand out. Avoid stacking two sizes of Metropolis one on top of the other. Pair headings in Metropolis with subheadings in Inter.

You can apply Metropolis to headings by adding the class mzp-t-firefox to the component or included with the mixin @include font-firefox;.

Don't italicize Metropolis. Protocol only includes normal and bold versions of this font.

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

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, with a 110% line height for display text and a 150% line height for body text.

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.