Typography

[Todo: Some kind of introduction about our approach to typography in general, maybe some basic principles.]

Typefaces

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

Zilla Slab is our custom typeface for the Mozilla brand. We use it for our wordmark and as a display font for headlines. It’s a contemporary slab serif based on Typotheque’s Tesla. Zilla Slab is a free, open source font available for download.

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

Open Sans

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.

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 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-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 4XL mixin:

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

    @media #{$mq-md} {
        @include font-size(60px);
        line-height: 1.066;
    }
}

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.