Zilla Slab

Try Zilla Slab

Weights and styles

• Light 300Zilla Slab Light Light Italic
• Regular 400Zilla Slab Regular Italic
• Medium 500Zilla Slab Medium Medium Italic
• SemiBold 600Zilla Slab SemiBold SemiBold Italic
• Bold 700Zilla Slab Bold Bold Italic

About Zilla Slab

Zilla Slab is a slab serif family made as the core typeface of Mozilla, where it sets the wordmark, headlines and other design work. Typotheque designed it on the basis of one of the foundry's earlier slab serifs, and Mozilla leads the project; the copyright notice names The Mozilla Foundation. The letters carry flat, rectangular serifs, strokes of nearly even thickness and round, smooth bowls, with a two-storey a. In the specimen several numerals, among them 3, 4, 5, 7 and 9, drop below the baseline. The family has five weights, Light 300, Regular 400, Medium 500, SemiBold 600 and Bold 700, and every weight has an italic that the official notes describe as a true italic, for 10 styles delivered as static files. The fonts hold 976 glyphs in the Latin and Latin Extended character sets and are published under the SIL Open Font License 1.1.

Where Zilla Slab works

Headlines and wordmarks

Mozilla sets its own wordmark and headlines in Zilla Slab; SemiBold and Bold give the flat serifs enough mass for large titles.

Articles and long pages

Regular with its italic handles running text and emphasis, and the nearly even stroke thickness keeps letters solid at reading sizes.

Hierarchy inside one family

Five weights between 300 and 700 separate titles, subheads, body copy and captions without bringing in a second typeface.

Quotes and captions in italic

Each of the five weights has its own drawn italic, so a quotation can be set in Light Italic or Bold Italic and not only in the regular weight.

Sites in several European languages

The Latin Extended set includes the letters needed for Turkish, Polish, Czech, Hungarian and Romanian alongside English, French and German.

Glyphs

Language support

The family contains the core letters these languages are written with:

• English
• French
• German
• Spanish
• Portuguese
• Italian
• Dutch
• Swedish
• Norwegian
• Danish
• Finnish
• Icelandic
• Catalan
• Turkish
• Polish
• Czech
• Slovak
• Hungarian
• Romanian
• Croatian
• Slovenian
• Lithuanian
• Latvian
• Estonian

Character sets found in the files: latin, latin-ext. The language list is a check of required letters against the font, not a promise of typographic quality in each language.

License

Fonts that pair with Zilla Slab

Suggestions come from simple rules on the records: a contrasting classification and enough weights to carry body text. They are a starting point, not a verdict.

Use Zilla Slab on the web

Download the family and host the files on your own site, then declare them in CSS. Please do not link to the files on trendhub.net: preview files here are subsets and their addresses change.

@font-face {
  font-family: "Zilla Slab";
  src: url("/assets/fonts/ZillaSlab-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Zilla Slab";
  src: url("/assets/fonts/ZillaSlab-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Zilla Slab";
  src: url("/assets/fonts/ZillaSlab-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Zilla Slab";
  src: url("/assets/fonts/ZillaSlab-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
/* …and 6 more files in the package, declared the same way */

body {
  font-family: "Zilla Slab", serif;
}

Or load it from the official source. Google Fonts serves Zilla Slab with this markup:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Zilla+Slab:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">

Things to know

Static files, no variable version

The package holds 10 separate TTF files, one per style. Zilla Slab has no variable axes, so only the five named weights can be set.

The range runs from 300 to 700

Light is the lightest cut and Bold the heaviest; the family has nothing thinner than 300 or heavier than 700.

Numerals drop below the line

In the specimen the default figures are not all one height: digits such as 3, 4, 5, 7 and 9 descend below the baseline.

Designer and copyright holder differ

The font's name table credits Typotheque as designer and manufacturer, while the copyright belongs to The Mozilla Foundation.

FAQs

Collections with Zilla Slab

• Fonts that support Turkish

  Open-license families that contain every letter of the Turkish alphabet, including dotted and dotless i, across text, display and script styles.

Similar fonts

Other families in the same classification, ordered by shared use tags. All slab serif fonts