Update font stacks and type scale. (#375)

- Fix #342
- Replace Open Sans with Inter
- Change font variable names
  - open-sans → font-base
  - zilla-slab → font-mozilla
- Add Firefox Sharp Sans font stack and font-firefox mixin
- Update typography scale
  - Decrease the font-size of one or two component titles
- Add off-black typeography to mzp-t-firefox themes

CHANGELOG.md

@@ -1,3 +1,9 @@
+# HEAD
+
+# Features
+
+* **css:** (breaking) Implement Updated Font Stacks (#342)
+
 # 6.0.1
 
 # Bug Fixes

src/assets/sass/demos/type-scale.scss

@@ -29,7 +29,7 @@ hr {
 .scale-sample-body-md { @include text-body-md; }
 .scale-sample-body-sm { @include text-body-sm; }
 .scale-sample-body-xs { @include text-body-xs; }
-.scale-sample-cta { @include text-cta; }
+.scale-sample-cta { @include text-body-cta; }
 
 .label {
     @include text-body-sm;
@@ -44,7 +44,7 @@ hr {
     }
 
     .scale-sample:after {
-        @include open-sans;
+        @include font-base;
         @include text-body-sm;
         color: $color-gray-80;
         font-weight: normal;
@@ -55,48 +55,48 @@ hr {
         content: '(60px/64px)';
 
         @media #{$mq-md} {
-            content: '(72px/72px)';
+            content: '(64px/70px)';
         }
     }
 
     .scale-sample-display-xl:after {
         content: '(48px/52px)';
 
         @media #{$mq-md} {
-            content: '(60px/64px)';
+            content: '(56px/62px)';
         }
     }
 
     .scale-sample-display-lg:after {
         content: '(36px/40px)';
 
         @media #{$mq-md} {
-            content: '(48px/52px)';
+            content: '(48px/53px)';
         }
     }
 
     .scale-sample-display-md:after {
         content: '(24px/28px)';
 
         @media #{$mq-md} {
-            content: '(36px/40px)';
+            content: '(40px/44px)';
         }
     }
 
     .scale-sample-display-sm:after {
         content: '(21px/24px)';
 
         @media #{$mq-md} {
-            content: '(24px/28px)';
+            content: '(32px/35px)';
         }
     }
 
     .scale-sample-display-xs:after {
-        content: '(18px/24px)';
+        content: '(24px/26px)';
     }
 
     .scale-sample-display-xxs:after {
-        content: '(14px/18px)';
+        content: '(16px/18px)';
     }
 
     .scale-sample-body-lg:after {

src/assets/sass/docs/site.scss

@@ -74,7 +74,7 @@
 }
 
 .protosite-nav-menu-title {
-    @include text-display-sm;
+    @include text-display-xs;
 }
 
 .protosite-nav-main-item {
@@ -123,7 +123,7 @@
     }
 
     .protosite-swatch-name {
-        @include open-sans;
+        @include font-base;
         @include text-display-sm;
     }
 
@@ -176,11 +176,11 @@
 }
 
 #specimen-zilla-slab {
-    @include zilla-slab;
+    @include font-mozilla;
 }
 
-#specimen-open-sans {
-    @include open-sans;
+#specimen-inter {
+    @include font-base;
 }
 
 .protosite-section {

src/assets/sass/protocol/base/elements/_document.scss

@@ -14,7 +14,7 @@ body {
     @include text-body-md;
     background: #fff;
     color: $color-black;
-    font-family: $base-font-stack;
+    font-family: $font-base-family;
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
 }

src/assets/sass/protocol/base/elements/_forms.scss

@@ -20,7 +20,7 @@ button,
 input,
 select,
 textarea {
-    @include open-sans;
+    @include font-base;
     @include text-body-md;
 }
 

src/assets/sass/protocol/base/elements/_quotes.scss

@@ -20,11 +20,12 @@ blockquote {
 
     .mzp-t-firefox &,
     &.mzp-t-firefox {
-        @include open-sans;
+        @include font-firefox;
+        color: $color-off-black;
     }
 
     &.mzp-t-mozilla,
     .mzp-t-mozilla & {
-        @include zilla-slab;
+        @include font-mozilla;
     }
 }

src/assets/sass/protocol/base/elements/_typography.scss

@@ -13,15 +13,18 @@ h1, h2, h3, h4, h5, h6, legend {
 // Mozilla theme class for headlines using Zilla.
 .mzp-t-mozilla {
     h1, h2, h3, h4 {
-        @include zilla-slab;
+        @include font-mozilla;
     }
 }
 
-// Firefox theme class for headlines using Open Sans.
 .mzp-t-firefox {
+    // Firefox theme class for headlines.
     h1, h2, h3, h4 {
-        @include open-sans;
+        @include font-firefox;
     }
+
+    // type in Firefox themes is off-black
+    color: $color-off-black;
 }
 
 // Type scale defined in includes/mixins/_typography.scss

src/assets/sass/protocol/components/_button.scss

@@ -10,7 +10,7 @@
 .mzp-c-button,
 a.mzp-c-button {
     @include border-box;
-    @include text-cta;
+    @include text-body-cta;
     @include transition(background-color 100ms, box-shadow 100ms, color 100ms, transform 100ms);
     background-color: $color-black;
     border-radius: 2px;

src/assets/sass/protocol/components/_card.scss

@@ -45,7 +45,7 @@
     }
 
     .mzp-c-card-tag {
-        @include open-sans;
+        @include font-base;
         @include text-body-sm;
         color: $color-gray-80;
         font-weight: normal;
@@ -72,7 +72,7 @@
     }
 
     .mzp-c-card-title {
-        @include text-display-sm;
+        @include text-display-xs;
         display: inline;
     }
 
@@ -172,7 +172,7 @@
     }
 
     .mzp-c-card-title {
-        @include text-display-xs;
+        @include text-display-xxs;
     }
 
     .mzp-c-card-desc {

src/assets/sass/protocol/components/_footer.scss

@@ -8,7 +8,7 @@
 // Footer section styles
 
 .mzp-c-footer {
-    @include open-sans;
+    @include font-base;
     background: $color-black;
     clear: both;
     color: $color-white;

src/assets/sass/protocol/components/_hero.scss

@@ -10,7 +10,8 @@
 // - Add the 'mzp-has-image' class to adjust the layout for a hero image (body left, image right).
 // - Add the 'mzp-l-reverse' class to reverse the layout (image left, body right).
 // - With an image, content is still centered in small viewports, with the image below the body.
-// - Add the 'mzp-t-firefox' class for Firefox branding (changing font to Open Sans).
+// - Add the 'mzp-t-firefox' class for Firefox branding (changing font to Sharp Sans if it is available, falling back to Inter).
+// - Add the 'mzp-t-mozilla' class for Mozilla branding (changing font to Zilla Slab).
 // - Add the 'mzp-t-dark' class to invert text colors for dark backgrounds.
 
 .mzp-c-hero {

src/assets/sass/protocol/components/_menu-item.scss

@@ -60,7 +60,7 @@ $icon-size: 24px;
     }
 
     .mzp-c-menu-item-title {
-        @include text-display-xs;
+        @include text-display-xxs;
         display: inline;
     }
 

src/assets/sass/protocol/components/_menu.scss

@@ -22,7 +22,7 @@
 .mzp-c-menu {
 
     h1, h2, h3, h4, h5, h6 {
-        @include open-sans;
+        @include font-base;
     }
 
     @media #{$mq-md} {
@@ -43,7 +43,7 @@
 .mzp-c-menu-category {
 
     .mzp-c-menu-title {
-        @include open-sans;
+        @include font-base;
         @include text-body-md;
         border-bottom: 1px solid $color-gray-30;
         color: $color-black;

src/assets/sass/protocol/components/_modal.scss

@@ -60,8 +60,8 @@ html.mzp-is-noscroll {
         @include bidi(((padding-right, $spacing-xl * 2, padding-left, 0),));
 
         h2 {
-            @include text-display-sm;
-            @include open-sans;
+            @include text-display-xs;
+            @include font-base;
             color: #fff;
         }
     }

src/assets/sass/protocol/components/_sidebar-menu.scss

@@ -78,7 +78,7 @@
 }
 
 .mzp-c-sidemenu-label {
-    @include open-sans;
+    @include font-base;
     @include text-body-sm;
     @include bidi((
         (padding-right, $spacing-lg, padding-left, 0),
@@ -99,7 +99,7 @@
 }
 
 .mzp-c-sidemenu-title {
-    @include open-sans;
+    @include font-base;
     @include text-body-lg;
     line-height: 1.5;
     margin-bottom: .25em;

src/assets/sass/protocol/includes/_variables.scss

@@ -6,9 +6,10 @@
 // The custom X-LocaleSpecific font family is defined with a @font-face rule in
 // locale-specific stylesheets which can be found at /media/css/l10n/. See
 // /docs/l10n.rst for details.
-$font-open-sans: 'Open Sans', X-LocaleSpecific, sans-serif;
-$font-zilla-slab: 'Zilla Slab', 'Open Sans', X-LocaleSpecific, sans-serif;
+$font-inter: Inter, X-LocaleSpecific, sans-serif;
+$font-firefox-sans: 'Firefox Sans', Inter, X-LocaleSpecific, sans-serif;
+$font-zilla-slab: 'Zilla Slab', Inter, X-LocaleSpecific, sans-serif;
 
-$base-font-stack: $font-open-sans;
-$base-font-size: 100%;
-$base-line-height: 1.5;
+$font-base-family: $font-inter;
+$font-base-size: 100%;
+$font-base-line-height: 1.5;

src/assets/sass/protocol/includes/fonts/_inter.scss

@@ -0,0 +1,40 @@
+// 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/.
+
+
+@font-face {
+    font-display: swap;
+    font-family: Inter;
+    font-style: normal;
+    font-weight: normal;
+    src: url('#{$font-path}/Inter-Regular.woff2') format('woff2'),
+         url('#{$font-path}/Inter-Regular.woff') format('woff');
+}
+
+@font-face {
+    font-display: swap;
+    font-family: Inter;
+    font-style: normal;
+    font-weight: bold;
+    src: url('#{$font-path}/Inter-Bold.woff2') format('woff2'),
+         url('#{$font-path}/Inter-Bold.woff') format('woff');
+}
+
+@font-face {
+    font-display: swap;
+    font-family: Inter;
+    font-style: italic;
+    font-weight: normal;
+    src: url('#{$font-path}/Inter-Italic.woff2') format('woff2'),
+         url('#{$font-path}/Inter-Italic.woff') format('woff');
+}
+
+@font-face {
+    font-display: swap;
+    font-family: Inter;
+    font-style: italic;
+    font-weight: bold;
+    src: url('#{$font-path}/Inter-BoldItalic.woff2') format('woff2'),
+         url('#{$font-path}/Inter-BoldItalic.woff') format('woff');
+}