What Fonts Go With Zilla Slab?

This is the pairing Mozilla wrote down as a rule. Mozilla’s Protocol design system named Zilla Slab and Inter as the standard typefaces on Mozilla branded websites.

Its instruction was plain: pair headings in Zilla Slab with subheadings in Inter. The same guide called Zilla Slab primarily a display font for large text like headings. Inter is an open source sans serif designed by Rasmus Andersson.

Its tall x-height and even, neutral strokes keep body text and interface labels out of the slab’s way. Zilla Slab gives the page its voice, and Inter does the reading work. Use it for product sites, documentation and any brand that wants one warm accent over a clean interface.

Fonts In Use documents the TriMet transit website, where Source Sans is paired with Zilla Slab for headings. TriMet’s slogan and much of its branding use Source Sans as well.

Source Sans Pro is the same family under its longer name. It is a clear, slightly narrow humanist sans built for long reading. Zilla Slab adds weight and character to the headings without slowing down the timetables and service notes below.

This is a good model for public service sites, where clarity matters more than style.

Let Source Sans Pro carry everything functional and save Zilla Slab for the headings.

On the Humly Room Display website, Lato carries the body text and Zilla Slab handles menus and a few text blocks. SlidesCarnival’s font guide also suggests Zilla Slab for headings and Lato for body on editorial and brand pages. Lato is a warm humanist sans with semi-rounded details.

Those details soften the page, while Zilla Slab’s flat slab serifs add a firm edge. The two never compete, because one is clearly a serif and the other clearly is not. Use Zilla Slab for headings, menus and short callouts, and give Lato the paragraphs.

Fonts In Use documents the identity of Mathilde Marteau Atelier, a Marseille-based jewelry studio. That identity pairs its serif logotype face with Adrian Frutiger’s Avenir and Zilla Slab.

Avenir is a geometric sans with humanist corrections, so its circles feel calm and its text stays readable. Next to it, Zilla Slab looks crafted and a little handmade.

The result is refined but not cold.

Give Zilla Slab the headings and short statements, and let Avenir set captions, prices and contact details. It suits studios, shops and small craft brands.

This pairing reverses the usual roles.

In a direct-mail campaign for Theater Morgenstern, Stencil is used for titles and accents. Zilla Slab was chosen for its industrial but friendly appearance.

Stencil is a heavy, broken-stroke display face, so it shouts the title. Zilla Slab then carries the text below with sturdy but readable slabs. The shared industrial mood holds the two together, and the size jump keeps the order clear.

Set Stencil big and short, and never use it for paragraphs. It suits posters, theater, events and anything with a rough, handmade message.

MaxiBestOf records Mozilla’s design site using Inter, Metropolis and Zilla Slab together. Mozilla’s Protocol system later named Metropolis and Inter as the standard typefaces on Firefox branded websites.

So on that site, Zilla Slab speaks for Mozilla and Metropolis speaks for Firefox. Metropolis is a geometric sans with round bowls and a crisp, modern tone.

That geometry is the opposite of Zilla Slab’s quirky slabs, so the contrast is easy to see. Use Zilla Slab for the main headline and Metropolis for short sans headings, labels and buttons.

If you need long text too, add a neutral body face, as Mozilla did with Inter.

SlidesCarnival’s Aediles presentation template is set in Montserrat and Zilla Slab. Montserrat is a wide geometric sans with broad capitals. Its width gives slides a bold, modern frame.

Zilla Slab adds a sturdy serif voice, so the deck does not feel like one long sans serif. Use Montserrat in caps for titles or labels and Zilla Slab for the slide text, or reverse the roles for a quieter look. Keep the sizes clearly different so the two do not fight.

SlidesCarnival’s font guide suggests Zilla Slab for headings and Roboto for body on tech and blog pages. Roboto has a mechanical skeleton with open curves.

It is familiar, neutral and easy to read on screens. Against it, Zilla Slab’s slab serifs stand out at once. The pair suits blogs, tech articles and simple product pages.

Use a bold Zilla Slab for headings and a regular weight of Roboto for the text.

SlidesCarnival’s font guide also suggests Zilla Slab headings with Open Sans body on reports and documentation. Open Sans is a humanist sans with open forms and a tall x-height.

It reads well in long passages and small sizes. Zilla Slab gives the headings weight and a bit of personality.

This is a safe, readable choice for reports, manuals and help pages.

Keep Zilla Slab for headings only, so the text stays calm.

SlidesCarnival’s Whitmore presentation template is set in Oxygen and Zilla Slab.

Oxygen is a simple sans serif with a slightly rounded, screen-friendly feel. Its plain shapes leave all the personality to the slab. Zilla Slab brings the contrast: square slabs and a little quirk against Oxygen’s soft, even strokes.

Use Zilla Slab for slide titles and Oxygen for bullet text and captions.

The pair suits presentations, school material and simple web pages.