Mozilla Headline

Try Mozilla Headline

Weights and styles

• ExtraLight 200Mozilla Headline ExtraLight
• Light 300Mozilla Headline Light
• Regular 400Mozilla Headline Regular
• Medium 500Mozilla Headline Medium
• SemiBold 600Mozilla Headline SemiBold
• Bold 700Mozilla Headline Bold

Mozilla Headline is a variable font: the download holds the whole weight range in one file, and the named weights above are positions on that range.

About Mozilla Headline

Mozilla Headline is a sans serif family for titles in which a handful of letters borrow slab serifs. In the specimen the capital I and J, and the lowercase f, i, j, l and r, carry flat horizontal serifs, the capital A has a short flag at its apex, and the zero is slashed, while the remaining letters are plain grotesque shapes with even strokes. Mozilla Headline is a variable font with two axes: weight from 200 to 700 and width from 75 to 125, where 100 is the normal width. Six named instances run from ExtraLight to Bold; there are no italics. The file holds 491 glyphs covering Latin and Latin Extended. The family is credited to Studio DRAMA, and the copyright notice names The Mozilla Headline Project Authors. The license is the SIL Open Font License 1.1.

Where Mozilla Headline works

Web page hero titles

The width axis narrows the type to 75 for a long headline or widens it to 125 for a few large words.

Product and campaign branding

Slab details on I, J, f and r and the flagged A make a short name recognisable in a plain sans setting.

Technical and developer content

A slashed zero keeps 0 apart from the letter O in version numbers and identifiers within titles.

Section headers in six weights

ExtraLight to Bold cover quiet subheads as well as dark main titles.

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 Mozilla Headline

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 Mozilla Headline 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: "Mozilla Headline";
  src: url("/assets/fonts/MozillaHeadline-VariableFont_wdth%2Cwght.ttf") format("truetype");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "Mozilla Headline", sans-serif;
}

Or load it from the official source. Google Fonts serves Mozilla Headline 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=Mozilla+Headline:wght@200..700&display=swap" rel="stylesheet">

Things to know

Two axes in one file

Weight runs from 200 to 700 and width from 75 to 125, with 100 as the default width. Both can be set independently.

The file opens at ExtraLight

The default weight of the variable file is 200, so set the weight explicitly in CSS or in the application.

No italics

Mozilla Headline has upright styles only.

Latin only

The 491 glyphs cover Latin and Latin Extended. Cyrillic and Greek are not included.

FAQs

Collections with Mozilla Headline

• Variable fonts with a width axis

  Variable families in which letter width is adjustable as well as weight, from slight narrowing for copy-fitting to a full condensed-to-wide range.

Similar fonts

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