Add refresh fonts

CHANGELOG.md

@@ -1,17 +1,16 @@
 # HEAD
 
 ## Features
-
+* **fonts:** (breaking) Adds rebrand fonts, Mozilla Headline and Mozilla Text. Removes outdated Mozilla Brand font, Zilla Slab. New fonts will only support `woff2` format to simplify maintenance.
 * **fonts:** Upgrade Inter font to version 4.1, drop WOFF 1.0 format (#1026)
 * **css:** Add `text-wrap: balance` to all headings (#910)
 * **css:** Apply hover cursor from Details component to Details element (#948)
 
 ## Bug Fixes
-
 * **assets:** Update @mozilla-protocol/assets to 5.4.0
 
 ## Migration Tips
-
+* **fonts:** Any use of `font-mozilla` mixin should be replaced with `font-mozilla-headline`. NOTE: we recommend `font-mozilla-headline` only for text over 24px (below should be `font-mozilla-text`)
 * Headings are now [balanced](https://developer.mozilla.org/docs/Web/CSS/text-wrap-style#balanced_text), which can impact other wrapping rules. Make sure any changes to `h1`–`h6` rendering end up styled as expected, especially if you apply any `white-space`, `word-break` or `hyphens` customizations.
 * See notes for [Protocol Assets 5.4.0](https://github.com/mozilla/protocol-assets/blob/main/CHANGELOG.md#540)
 

assets/sass/protocol/base/elements/_titles.scss

@@ -12,9 +12,10 @@ h3,
 h4,
 h5,
 h6 {
+    $default-font-weight: bold;
     font-family: $title-font-family;
     color: $title-text-color;
-    font-weight: bold;
+    font-weight: $default-font-weight;
     text-wrap: balance;
     margin: 0 0 0.5em;
 
@@ -24,6 +25,9 @@ h6 {
 
     @supports (--css: variables) {
         font-family: var(--title-font-family);
+        font-variant-ligatures: var(--title-font-ligatures);
+        font-weight: var(--title-font-weight, #{$default-font-weight});
+        letter-spacing: var(--title-letter-spacing);
         color: var(--title-text-color);
 
         .mzp-t-dark & {

assets/sass/protocol/includes/_themes-sass.scss

@@ -25,9 +25,9 @@ $v-grid-xl: tokens.$layout-xl;
 $h-grid-xl: 80px;
 
 // fonts
-$body-font-family: tokens.$font-stack-base;
-$button-font-family: tokens.$font-stack-base;
-$title-font-family: tokens.$font-stack-mozilla;
+$body-font-family: tokens.$font-stack-mozilla-text;
+$button-font-family: tokens.$font-stack-mozilla-text;
+$title-font-family: tokens.$font-stack-mozilla-headline;
 
 // colors
 $background-color-tertiary-inverse: tokens.$color-dark-gray-40;
@@ -105,9 +105,9 @@ $theme-fonts-firefox: (
     title-font-family: tokens.$font-stack-firefox,
 );
 $theme-fonts-mozilla: (
-    body-font-family: tokens.$font-stack-base,
-    button-font-family: tokens.$font-stack-base,
-    title-font-family: tokens.$font-stack-mozilla,
+    body-font-family: tokens.$font-stack-mozilla-text,
+    button-font-family: tokens.$font-stack-mozilla-text,
+    title-font-family: tokens.$font-stack-mozilla-headline,
 );
 
 // * -------------------------------------------------------------------------- */

assets/sass/protocol/includes/fonts/_mozilla-headline.scss

@@ -0,0 +1,32 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+@use '../config';
+
+@font-face {
+    font-display: swap;
+    font-family: 'Mozilla Headline';
+    font-style: normal;
+    font-weight: normal;
+    src:
+        url('#{config.$font-path}/mozilla-headline/MozillaHeadline-Regular.woff2') format('woff2');
+}
+
+@font-face {
+    font-display: swap;
+    font-family: 'Mozilla Headline';
+    font-style: normal;
+    font-weight: 600;
+    src:
+        url('#{config.$font-path}/mozilla-headline/MozillaHeadline-SemiBold.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: headline-fallback;
+    src: local("Helvetica Neue");
+    ascent-override: 84%;
+    descent-override: 36%;
+    line-gap-override: 0%;
+    size-adjust: 98%;
+  }

assets/sass/protocol/includes/fonts/_mozilla-text.scss

@@ -0,0 +1,68 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+@use '../config';
+
+@font-face {
+    font-display: swap;
+    font-family: 'Mozilla Text';
+    font-style: normal;
+    font-weight: normal;
+    src:
+        url('#{config.$font-path}/mozilla-text/MozillaText-Regular.woff2') format('woff2');
+}
+
+@font-face {
+    font-display: swap;
+    font-family: 'Mozilla Text';
+    font-style: normal;
+    font-weight: 600;
+    src:
+        url('#{config.$font-path}/mozilla-text/MozillaText-SemiBold.woff2') format('woff2');
+}
+
+@font-face {
+    font-display: swap;
+    font-family: 'Mozilla Text';
+    font-style: italic;
+    font-weight: 600;
+    src:
+        url('#{config.$font-path}/mozilla-text/MozillaText-SemiBoldItalic.woff2') format('woff2');
+}
+
+@font-face {
+    font-display: swap;
+    font-family: 'Mozilla Text';
+    font-style: normal;
+    font-weight: bold;
+    src:
+        url('#{config.$font-path}/mozilla-text/MozillaText-Bold.woff2') format('woff2');
+}
+
+@font-face {
+    font-display: swap;
+    font-family: 'Mozilla Text';
+    font-style: italic;
+    font-weight: normal;
+    src:
+        url('#{config.$font-path}/mozilla-text/MozillaText-Italic.woff2') format('woff2');
+}
+
+@font-face {
+    font-display: swap;
+    font-family: 'Mozilla Text';
+    font-style: italic;
+    font-weight: bold;
+    src:
+        url('#{config.$font-path}/mozilla-text/MozillaText-BoldItalic.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: text-fallback;
+    src: local("Helvetica Neue");
+    ascent-override: 84%;
+    descent-override: 36%;
+    line-gap-override: 0%;
+    size-adjust: 98%;
+  }

assets/sass/protocol/includes/mixins/_typography.scss

@@ -14,8 +14,12 @@
     font-family: tokens.$font-stack-base;
 }
 
-@mixin font-mozilla {
-    font-family: tokens.$font-stack-mozilla;
+@mixin font-mozilla-text {
+    font-family: tokens.$font-stack-mozilla-text;
+}
+
+@mixin font-mozilla-headline {
+    font-family: tokens.$font-stack-mozilla-headline;
 }
 
 @mixin font-firefox {

assets/sass/protocol/includes/themes/_mozilla.scss

@@ -7,9 +7,13 @@
 
 %mozilla-theme {
     // fonts
-    --body-font-family: #{tokens.$font-stack-base};
-    --button-font-family: #{tokens.$font-stack-base};
-    --title-font-family: #{tokens.$font-stack-mozilla};
+    --body-font-family: #{tokens.$font-stack-mozilla-text};
+    --button-font-family: #{tokens.$font-stack-mozilla-text};
+    --title-font-family: #{tokens.$font-stack-mozilla-headline};
+    --title-font-ligatures: none;
+    --body-font-ligatures: none;
+    --title-font-weight: 600;
+    --title-letter-spacing: -0.01em;
 
     // colors
     --background-color-tertiary-inverse: #{tokens.$color-dark-gray-40};
@@ -37,27 +41,27 @@
 %mozilla-type-scale {
     // type scale
     --title-2xl-size: 4.75rem;
-    --title-2xl-line-height: 1;
+    --title-2xl-line-height: 1.1;
     --title-xl-size: 4.125rem;
-    --title-xl-line-height: 1;
+    --title-xl-line-height: 1.1;
     --title-lg-size: 3.5rem;
-    --title-lg-line-height: 1;
+    --title-lg-line-height: 1.1;
     --title-md-size: 3rem;
-    --title-md-line-height: 1;
+    --title-md-line-height: 1.1;
     --title-sm-size: 2.375rem;
-    --title-sm-line-height: 1.05;
+    --title-sm-line-height: 1.1;
     --title-xs-size: 1.75rem;
-    --title-xs-line-height: 1.07;
+    --title-xs-line-height: 1.1;
     --title-2xs-size: 1.5rem;
-    --title-2xs-line-height: 1.08;
+    --title-2xs-line-height: 1.1;
     --title-3xs-size: 1.125rem;
-    --title-3xs-line-height: 1.11;
+    --title-3xs-line-height: 1.1;
     --body-xl-size: 1.313rem;
     --body-lg-size: 1.125rem;
     --body-md-size: 1rem;
     --body-sm-size: 0.875rem;
     --body-xs-size: 0.75rem;
-    --body-line-height: 1.5;
+    --body-line-height: 1.2;
 }
 
 %mozilla-type-scale-condensed {
@@ -82,5 +86,5 @@
     --body-md-size: 0.875rem;
     --body-sm-size: 0.75rem;
     --body-xs-size: 0.688rem;
-    --body-line-height: 1.5;
+    --body-line-height: 1.2;
 }

assets/sass/protocol/protocol.scss

@@ -8,13 +8,14 @@
 // the fonts, includes, and global components you actually need.
 // Individual style sheets can import additional components as needed.
 
-// Inter is our general-purpose font for body text in both Firefox and
-// Mozilla brands.
+// Inter is our general-purpose fallback font for body text in Mozilla brand
+// It is also general-purpose font for body text in Firefox
 @use 'includes/fonts/inter';
 
-// Zilla Slab is used with the Mozilla brand. Remove this import if
+// Fonts exclusive to Mozilla brand. Remove these imports if
 // your site uses the Firefox brand exclusively.
-@use 'includes/fonts/zilla-slab';
+@use 'includes/fonts/mozilla-text';
+@use 'includes/fonts/mozilla-headline';
 
 // Base elements - general HTML elements
 @use 'base/elements';

docs/01-fundamentals/02-themes.md

@@ -5,7 +5,7 @@ name: Brand Themes
 
 Protocol supports two distinct brands: Mozilla and Firefox.
 
-The Mozilla brand is distinguished by the Zilla Slab typeface and a limited color
+The Mozilla brand is distinguished by the Mozilla Headline and Mozilla Text typefaces and a limited color
 palette, mostly black and white. The Firefox brand uses the Metropolis typeface
 and is generally more colorful overall.
 

docs/01-fundamentals/03-typography.md

@@ -3,18 +3,17 @@ title: Typography
 ---
 
 ## Typefaces
-Protocol comes with three fonts: Zilla Slab, Metropolis, and Inter.
+Protocol comes with four fonts: Mozilla Headline, Mozilla Text, Metropolis, and Inter.
 
-Mozilla branded websites use Zilla Slab for titles and Inter for body text. Don’t
-use Zilla Slab for body text.
+Mozilla branded websites use Mozilla Headline for titles and Mozilla Text for body text. We recommend Mozilla Headline only for text over 24px (below should be Mozilla Text).
 
 Firefox branded websites use Metropolis for titles and Inter for body text. Don’t
 use Metropolis for body text.
 
 ### Inter
 
 Inter is an open source, sans-serif font designed by [Rasmus Andersson](https://rsms.me/inter/).
-This is our standard type face for body copy in both Firefox and Mozilla brands.
+This is our standard type face for body copy in Firefox and is used as fallback font in Mozilla brands.
 If you need to declare it specifically (such as to override some other inherited
 font) you can use the mixin `@include font-base;`.
 
@@ -30,28 +29,29 @@ font) you can use the mixin `@include font-base;`.
   {{ specimens.math }}
 </figure>
 
-### Zilla Slab</h3>
+### Mozilla
 
-Zilla Slab is our custom typeface for the Mozilla brand. We use it for our wordmark
-and as a display font for headlines on Mozilla branded sites. It’s a contemporary
-slab serif based on Typotheque’s Tesla. Zilla Slab is a free, open source font
-available for download.
+Mozilla Headline and Mozilla Text are our custom typefaces for the Mozilla brand. This typeface font family features a unique uniwidth design. It maintains standardized spacing and kerning across all weights and styles, eliminating risk of text reflow to preserve the integrity of the layout and enhance the user's experience. [Read more about Mozilla's rebrand here](https://blog.mozilla.org/en/mozilla/mozilla-brand-next-era-of-tech/)
 
-Zilla Slab is primarily a display font and should only be used on large text like
-headings. As a general rule, type set in Zilla Slab should stand out. Avoid
-stacking two sizes of Zilla Slab one on top of the other. Pair headings in Zilla
-Slab with subheadings in Inter.
+You can declare Mozilla Headline explicitly with the mixin `@include font-mozilla-headline;`.
 
-You can declare Zilla Slab explicitly with the mixin `@include font-mozilla;`.
+You can declare Mozilla Text explicitly with the mixin `@include font-mozilla-headline;`.
 
-Don’t italicize Zilla Slab. Protocol only includes regular and bold versions of
-this font.
+#### Mozilla Headline
 
-* [Download from Github](https://github.com/mozilla/zilla-slab/releases/latest)
-* [Use on Google Fonts](https://fonts.google.com/specimen/Zilla+Slab)
+<figure id="specimen-mozilla-headline" class="docs-specimen docs-specimen-font">
+  <strong>{{ specimens.alphabet }}</strong>
+  {{ specimens.alphabet }}
+  {{ specimens.characters }}
+  {{ specimens.digits }}
+  {{ specimens.punctuation }}
+  {{ specimens.special }}
+  {{ specimens.math }}
+</figure>
 
+#### Mozilla Text
 
-<figure id="specimen-zilla-slab" class="docs-specimen docs-specimen-font">
+<figure id="specimen-mozilla-text" class="docs-specimen docs-specimen-font">
   <strong>{{ specimens.alphabet }}</strong>
   {{ specimens.alphabet }}
   {{ specimens.characters }}
@@ -124,9 +124,9 @@ for main body copy.
 ### Themes
 
 Protocol includes different branded themes for Mozilla and Firefox, and each theme
-uses different fonts with a slightly altered scale. Titles set in Zilla Slab for
+uses different fonts with a slightly altered scale. Titles set in Mozilla Headline for
 the Mozilla brand are slightly larger than their Firefox equivalents, adjusting
-for Zilla Slab being overall a smaller display font.
+for Mozilla Headline being overall a smaller display font.
 
 ### Condensed Type Scale
 

docs/01-fundamentals/design-tokens.config.yml

@@ -48,4 +48,5 @@ context:
     $font-stack-base: "Inter, X-LocaleSpecific, sans-serif"
     $font-stack-firefox: "Metropolis, Inter, X-LocaleSpecific, sans-serif"
     $font-stack-mono: "Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace"
-    $font-stack-mozilla: "'Zilla Slab', Inter, X-LocaleSpecific, sans-serif"
+    $font-stack-mozilla-text: "'Mozilla Text', Inter, 'Helvetica Neue', Arial, X-LocaleSpecific, sans-serif"
+    $font-stack-mozilla-headline: "'Mozilla Headline', Inter, 'Helvetica Neue', Arial, X-LocaleSpecific, sans-serif"