Zilla Slab Highlight

Try Zilla Slab Highlight

Weights and styles

• Regular 400Zilla Slab Highlight Regular
• Bold 700Zilla Slab Highlight Bold

About Zilla Slab Highlight

Zilla Slab Highlight is a slab serif in which the letter is the empty space: every glyph is a filled rectangle with the character cut out of it. In the specimen neighbouring letters join into one continuous bar and a word space interrupts it, so each word becomes its own block. The shapes inside the blocks are slab serif letters with flat, unbracketed serifs and smooth curves, and the figures are old-style, rising and dipping like lowercase. The family has 2 styles, Regular 400 and Bold 700, without italics, and is not a variable font. Its 982 glyphs cover Western and Central European Latin. Typotheque designed the typeface in a project led by Mozilla, whose core typeface Zilla Slab is, and the copyright notice names The Mozilla Foundation. It is published under the SIL Open Font License 1.1.

Where Zilla Slab Highlight works

Marked words in a headline

Setting one word in Zilla Slab Highlight puts a solid bar behind it without drawing a box in the layout.

Labels, tags and badges

A short word becomes a self-contained block whose height and padding are fixed by the font.

Titles over photographs

Because the bar is part of each glyph, a caption keeps its own background on top of a busy image.

Pull quotes and callouts

Regular and Bold allow two levels of emphasis inside the highlighted style.

Central European labels

Letters for Polish, Czech, Hungarian, Romanian and Turkish come with the same block treatment.

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 Highlight

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 Highlight 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 Highlight";
  src: url("/assets/fonts/ZillaSlabHighlight-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Zilla Slab Highlight";
  src: url("/assets/fonts/ZillaSlabHighlight-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

Or load it from the official source. Google Fonts serves Zilla Slab Highlight 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+Highlight:wght@400;700&display=swap" rel="stylesheet">

Things to know

The box is the glyph

The text colour colours the rectangle, and the letter shows whatever lies behind the text.

Spaces break the bar

In the specimen each word forms a separate block, with a gap wherever a space is typed.

No italics

Zilla Slab Highlight has Regular and Bold only; the italics belong to the main Zilla Slab family.

FAQs

Similar fonts

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