diff --git a/CHANGELOG.md b/CHANGELOG.md index 3e68ef8b..8a163da9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,9 @@ +# HEAD + +# Features + +* **css:** (breaking) Implement Updated Font Stacks (#342) + # 6.0.1 # Bug Fixes diff --git a/src/assets/fonts/Inter-Bold.woff b/src/assets/fonts/Inter-Bold.woff new file mode 100644 index 00000000..8520475a Binary files /dev/null and b/src/assets/fonts/Inter-Bold.woff differ diff --git a/src/assets/fonts/Inter-Bold.woff2 b/src/assets/fonts/Inter-Bold.woff2 new file mode 100644 index 00000000..78807d48 Binary files /dev/null and b/src/assets/fonts/Inter-Bold.woff2 differ diff --git a/src/assets/fonts/Inter-BoldItalic.woff b/src/assets/fonts/Inter-BoldItalic.woff new file mode 100644 index 00000000..be4b41a5 Binary files /dev/null and b/src/assets/fonts/Inter-BoldItalic.woff differ diff --git a/src/assets/fonts/Inter-BoldItalic.woff2 b/src/assets/fonts/Inter-BoldItalic.woff2 new file mode 100644 index 00000000..9e2dd580 Binary files /dev/null and b/src/assets/fonts/Inter-BoldItalic.woff2 differ diff --git a/src/assets/fonts/Inter-Italic.woff b/src/assets/fonts/Inter-Italic.woff new file mode 100644 index 00000000..ffed5e57 Binary files /dev/null and b/src/assets/fonts/Inter-Italic.woff differ diff --git a/src/assets/fonts/Inter-Italic.woff2 b/src/assets/fonts/Inter-Italic.woff2 new file mode 100644 index 00000000..1aece2a0 Binary files /dev/null and b/src/assets/fonts/Inter-Italic.woff2 differ diff --git a/src/assets/fonts/Inter-Regular.woff b/src/assets/fonts/Inter-Regular.woff new file mode 100644 index 00000000..8b0a1c52 Binary files /dev/null and b/src/assets/fonts/Inter-Regular.woff differ diff --git a/src/assets/fonts/Inter-Regular.woff2 b/src/assets/fonts/Inter-Regular.woff2 new file mode 100644 index 00000000..01bee834 Binary files /dev/null and b/src/assets/fonts/Inter-Regular.woff2 differ diff --git a/src/assets/fonts/opensans-bold.woff b/src/assets/fonts/opensans-bold.woff deleted file mode 100755 index fcbd6c13..00000000 Binary files a/src/assets/fonts/opensans-bold.woff and /dev/null differ diff --git a/src/assets/fonts/opensans-bold.woff2 b/src/assets/fonts/opensans-bold.woff2 deleted file mode 100755 index 4ed695bc..00000000 Binary files a/src/assets/fonts/opensans-bold.woff2 and /dev/null differ diff --git a/src/assets/fonts/opensans-bolditalic.woff b/src/assets/fonts/opensans-bolditalic.woff deleted file mode 100755 index 7782f9e4..00000000 Binary files a/src/assets/fonts/opensans-bolditalic.woff and /dev/null differ diff --git a/src/assets/fonts/opensans-bolditalic.woff2 b/src/assets/fonts/opensans-bolditalic.woff2 deleted file mode 100755 index 73604a92..00000000 Binary files a/src/assets/fonts/opensans-bolditalic.woff2 and /dev/null differ diff --git a/src/assets/fonts/opensans-italic.woff b/src/assets/fonts/opensans-italic.woff deleted file mode 100755 index b5a587a1..00000000 Binary files a/src/assets/fonts/opensans-italic.woff and /dev/null differ diff --git a/src/assets/fonts/opensans-italic.woff2 b/src/assets/fonts/opensans-italic.woff2 deleted file mode 100755 index 2bd13664..00000000 Binary files a/src/assets/fonts/opensans-italic.woff2 and /dev/null differ diff --git a/src/assets/fonts/opensans-regular.woff b/src/assets/fonts/opensans-regular.woff deleted file mode 100755 index 1a8391cc..00000000 Binary files a/src/assets/fonts/opensans-regular.woff and /dev/null differ diff --git a/src/assets/fonts/opensans-regular.woff2 b/src/assets/fonts/opensans-regular.woff2 deleted file mode 100755 index 845dc733..00000000 Binary files a/src/assets/fonts/opensans-regular.woff2 and /dev/null differ diff --git a/src/assets/sass/demos/type-scale.scss b/src/assets/sass/demos/type-scale.scss index afdef686..485d115e 100644 --- a/src/assets/sass/demos/type-scale.scss +++ b/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,7 +55,7 @@ hr { content: '(60px/64px)'; @media #{$mq-md} { - content: '(72px/72px)'; + content: '(64px/70px)'; } } @@ -63,7 +63,7 @@ hr { content: '(48px/52px)'; @media #{$mq-md} { - content: '(60px/64px)'; + content: '(56px/62px)'; } } @@ -71,7 +71,7 @@ hr { content: '(36px/40px)'; @media #{$mq-md} { - content: '(48px/52px)'; + content: '(48px/53px)'; } } @@ -79,7 +79,7 @@ hr { content: '(24px/28px)'; @media #{$mq-md} { - content: '(36px/40px)'; + content: '(40px/44px)'; } } @@ -87,16 +87,16 @@ hr { 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 { diff --git a/src/assets/sass/docs/site.scss b/src/assets/sass/docs/site.scss index 9f8b4193..502c4d15 100644 --- a/src/assets/sass/docs/site.scss +++ b/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 { diff --git a/src/assets/sass/protocol/base/elements/_document.scss b/src/assets/sass/protocol/base/elements/_document.scss index 3fc5b84d..be5b9ca7 100644 --- a/src/assets/sass/protocol/base/elements/_document.scss +++ b/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; } diff --git a/src/assets/sass/protocol/base/elements/_forms.scss b/src/assets/sass/protocol/base/elements/_forms.scss index 97608442..c2e31122 100644 --- a/src/assets/sass/protocol/base/elements/_forms.scss +++ b/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; } diff --git a/src/assets/sass/protocol/base/elements/_quotes.scss b/src/assets/sass/protocol/base/elements/_quotes.scss index ec7be6d1..60bdafe2 100644 --- a/src/assets/sass/protocol/base/elements/_quotes.scss +++ b/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; } } diff --git a/src/assets/sass/protocol/base/elements/_typography.scss b/src/assets/sass/protocol/base/elements/_typography.scss index aa13ca45..3379bbd1 100644 --- a/src/assets/sass/protocol/base/elements/_typography.scss +++ b/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 diff --git a/src/assets/sass/protocol/components/_button.scss b/src/assets/sass/protocol/components/_button.scss index 1161db26..73697fa0 100644 --- a/src/assets/sass/protocol/components/_button.scss +++ b/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; diff --git a/src/assets/sass/protocol/components/_card.scss b/src/assets/sass/protocol/components/_card.scss index 5d25f6f5..014633d0 100644 --- a/src/assets/sass/protocol/components/_card.scss +++ b/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 { diff --git a/src/assets/sass/protocol/components/_footer.scss b/src/assets/sass/protocol/components/_footer.scss index f12fd325..c964c5d6 100644 --- a/src/assets/sass/protocol/components/_footer.scss +++ b/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; diff --git a/src/assets/sass/protocol/components/_hero.scss b/src/assets/sass/protocol/components/_hero.scss index b0dd4370..05db7968 100644 --- a/src/assets/sass/protocol/components/_hero.scss +++ b/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 { diff --git a/src/assets/sass/protocol/components/_menu-item.scss b/src/assets/sass/protocol/components/_menu-item.scss index 2e127d81..77127c79 100644 --- a/src/assets/sass/protocol/components/_menu-item.scss +++ b/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; } diff --git a/src/assets/sass/protocol/components/_menu.scss b/src/assets/sass/protocol/components/_menu.scss index a7f58e85..2df96a03 100644 --- a/src/assets/sass/protocol/components/_menu.scss +++ b/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; diff --git a/src/assets/sass/protocol/components/_modal.scss b/src/assets/sass/protocol/components/_modal.scss index d239a8d5..da5ad419 100644 --- a/src/assets/sass/protocol/components/_modal.scss +++ b/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; } } diff --git a/src/assets/sass/protocol/components/_sidebar-menu.scss b/src/assets/sass/protocol/components/_sidebar-menu.scss index 869bcac3..fd3668eb 100644 --- a/src/assets/sass/protocol/components/_sidebar-menu.scss +++ b/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; diff --git a/src/assets/sass/protocol/includes/_variables.scss b/src/assets/sass/protocol/includes/_variables.scss index 451d3bef..3d394dfb 100644 --- a/src/assets/sass/protocol/includes/_variables.scss +++ b/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; diff --git a/src/assets/sass/protocol/includes/fonts/_inter.scss b/src/assets/sass/protocol/includes/fonts/_inter.scss new file mode 100644 index 00000000..6a77846b --- /dev/null +++ b/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'); +} diff --git a/src/assets/sass/protocol/includes/fonts/_open-sans.scss b/src/assets/sass/protocol/includes/fonts/_open-sans.scss deleted file mode 100644 index 21d68fcb..00000000 --- a/src/assets/sass/protocol/includes/fonts/_open-sans.scss +++ /dev/null @@ -1,40 +0,0 @@ -// 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: 'Open Sans'; - font-style: normal; - font-weight: normal; - src: url('#{$font-path}/opensans-regular.woff2') format('woff2'), - url('#{$font-path}/opensans-regular.woff') format('woff'); -} - -@font-face { - font-display: swap; - font-family: 'Open Sans'; - font-style: normal; - font-weight: bold; - src: url('#{$font-path}/opensans-bold.woff2') format('woff2'), - url('#{$font-path}/opensans-bold.woff') format('woff'); -} - -@font-face { - font-display: swap; - font-family: 'Open Sans'; - font-style: italic; - font-weight: normal; - src: url('#{$font-path}/opensans-italic.woff2') format('woff2'), - url('#{$font-path}/opensans-italic.woff') format('woff'); -} - -@font-face { - font-display: swap; - font-family: 'Open Sans'; - font-style: italic; - font-weight: bold; - src: url('#{$font-path}/opensans-bolditalic.woff2') format('woff2'), - url('#{$font-path}/opensans-bolditalic.woff') format('woff'); -} diff --git a/src/assets/sass/protocol/includes/mixins/_typography.scss b/src/assets/sass/protocol/includes/mixins/_typography.scss index fb066062..802276dd 100644 --- a/src/assets/sass/protocol/includes/mixins/_typography.scss +++ b/src/assets/sass/protocol/includes/mixins/_typography.scss @@ -4,14 +4,17 @@ // Font families -@mixin open-sans { - font-family: $font-open-sans; +@mixin font-base { + font-family: $font-base-family; } -@mixin zilla-slab { +@mixin font-mozilla { font-family: $font-zilla-slab; } +@mixin font-firefox { + font-family: $font-firefox-sans; +} // A mixin to output font-size in rems with a px fallback for old browsers. // Declare sizes in pixels for ease and clarity, the mixin does the math. @@ -42,87 +45,93 @@ // .subtitle { @include text-display-lg; } // .intro { @include text-body-lg; } +$text-body-line-height: $font-base-line-height; +$text-display-line-height: 1.1; + +// display copy: headings, blockquotes, other fancy stuff @mixin text-display-xxl { // Use this one sparingly. @include font-size(48px); - line-height: 1.083; + line-height: $text-display-line-height; @media #{$mq-md} { - @include font-size(72px); - line-height: 1; + @include font-size(64px); } } @mixin text-display-xl { @include font-size(40px); - line-height: 1.111; + line-height: $text-display-line-height; @media #{$mq-md} { - @include font-size(60px); - line-height: 1.066; + @include font-size(56px); } } @mixin text-display-lg { @include font-size(32px); - line-height: 1.125; + line-height: $text-display-line-height; @media #{$mq-md} { @include font-size(48px); - line-height: 1.083; } } @mixin text-display-md { @include font-size(24px); - line-height: 1.166; + line-height: $text-display-line-height; @media #{$mq-lg} { - @include font-size(36px); - line-height: 1.1111; + @include font-size(40px); } } @mixin text-display-sm { @include font-size(21px); - line-height: 1.143; + line-height: $text-display-line-height; @media #{$mq-md} { - @include font-size(24px); - line-height: 1.166; + @include font-size(32px); } } @mixin text-display-xs { @include font-size(18px); - line-height: 1.333; + line-height: $text-display-line-height; + + @media #{$mq-md} { + @include font-size(24px); + } } @mixin text-display-xxs { - @include font-size(14px); - line-height: 1.285; + @include font-size(16px); + line-height: $text-display-line-height; } +// body copy @mixin text-body-lg { @include font-size(18px); - line-height: 1.5; + line-height: $text-body-line-height; } @mixin text-body-md { @include font-size(16px); - line-height: 1.5; + line-height: $text-body-line-height; } @mixin text-body-sm { @include font-size(14px); - line-height: 1.285; + line-height: $text-body-line-height; } @mixin text-body-xs { @include font-size(12px); - line-height: 1.333; + line-height: $text-body-line-height; } -@mixin text-cta { +@mixin text-body-cta { @include font-size(16px); - line-height: 1.5; + line-height: $text-body-line-height; } + + diff --git a/src/assets/sass/protocol/protocol.scss b/src/assets/sass/protocol/protocol.scss index 80449b04..6e365ed1 100644 --- a/src/assets/sass/protocol/protocol.scss +++ b/src/assets/sass/protocol/protocol.scss @@ -13,7 +13,7 @@ $image-path: '../img' !default; // Fonts @import 'includes/fonts/zilla-slab'; -@import 'includes/fonts/open-sans'; +@import 'includes/fonts/inter'; // Base elements - general HTML elements @import 'base/elements'; diff --git a/src/pages/fundamentals/themes.hbs b/src/pages/fundamentals/themes.hbs new file mode 100644 index 00000000..2e75a2d9 --- /dev/null +++ b/src/pages/fundamentals/themes.hbs @@ -0,0 +1,20 @@ +--- +title: Themes +name: Themes +order: 2 +--- + +

By default the site will render using the Inter typeface. For a more brand-specific experience some theme classes and mixins are available

+ +
+

Mozilla

+

The `.mzp-t-mozilla` class can be applied to the page body and to some organisms to use Zilla Slab for the display font.

+

You can declare Zilla Slab as the display font explicitly in the CSS using @include font-mozilla;

+
+ +
+

Firefox

+

The `.mzp-t-firefox` class can be applied to the page body and to some organisms to change the text color to $color-off-black and use Firefox Sharp Sans for the display font.

+

You can declare Firefox Sharp Sans as the display font explicitly in the CSS using `@include font-firefox`; +

These will only work if you have taken other steps to enable Firefox Sharp Sans on your site. If your site is covered by the terms of the lisence please contact the websites team for instructions on how to use it.

+
diff --git a/src/pages/fundamentals/typography.hbs b/src/pages/fundamentals/typography.hbs index 1de6a805..93821a2e 100644 --- a/src/pages/fundamentals/typography.hbs +++ b/src/pages/fundamentals/typography.hbs @@ -6,21 +6,22 @@ styles: - type-scale --- -

[Todo: Some kind of introduction about our approach to typography in general, maybe some basic principles.]

-

Typefaces

-

Zilla Slab and Open Sans are the standard typefaces on Mozilla branded websites. As a general rule, type set in Zilla Slab should stand out. Avoid stacking 2 sizes of Zilla one on top of the other. Pair headings in Zilla Slab with subheadings in Open Sans.

+

Inter is the standard typeface for Protocol sites.

+

Zilla Slab and Inter are the standard typefaces on Mozilla branded websites.

+

Some Firefox branded websites are also licensed to use Firefox Sharp Sans.

+ +

Inter

+

This open source, sans-serif font was designed by Rasmus Andersson.

+

Inter is our standard type face for both headings and body copy. If you do not apply any themes by default your Protocol site will be entirely in Inter.

+

Everything is Inter by default. If you need to declare it specifically you can use the mixin @include font-base;.

-

Zilla Slab

-

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.

-

Zilla Slab can be applied to headings by adding the class `mzp-t-mozilla` to the component or included with the mixin `@include zilla-slab;`.

-
+
{{#with (data "specimens")}} {{this.alphabet}} {{this.characters}} @@ -31,15 +32,18 @@ styles: {{/with}}
-

Open Sans

-

Open Sans is our standard typeface for body copy, labels, captions, links, navigation, etc. because it’s more legible at smaller sizes than Zilla Slab, which is primarily a display font. Open Sans is also used as a heading/display font when the Firefox brand needs to be expressed more than the Mozilla brand. This open source font was designed by Steve Matteson.

+

Zilla Slab

+

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.

+

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 one on top of the other. Pair headings in Zilla Slab with subheadings in Inter.

+

Zilla Slab can be applied to headings by adding the class mzp-t-mozilla to the component or included with the mixin @include font-mozilla;.

+ -
+
{{#with (data "specimens")}} {{this.alphabet}} {{this.characters}} @@ -50,6 +54,10 @@ styles: {{/with}}
+

Firefox Sharp Sans

+

Sharp Sans is a closed license font licensed for use on some Firefox Marketing sites.

+

Contact the websites team for more information on how to use this font with Protocol if you believe your use is covered by the license. If you can't find us in the phonebook you can [open an issue on the Protocol repo](https://github.com/mozilla/protocol/issues/new).

+

Styles

We limit the number of type styles to a set that works well across the website and fits our layout grid. This scale is based on a root size of 16 pixels and a 4 pixel baseline grid to determine line height.

@@ -93,26 +101,27 @@ styles: @include text-body-md; @include text-body-sm; @include text-body-xs; -@include text-cta; +@include text-body-cta;

Those mixins include media queries to adjust the sizes at key breakpoints. Text gets bigger as the viewport gets bigger. You can resize your window to see this in action on the sample above or on the demo page.

-

For example, here’s the 4XL mixin:

+

For example, here’s the XL mixin:

-
@mixin text-display-xl {
-    @include font-size(40px);
-    line-height: 1.111;
-
-    @media #{$mq-md} {
-        @include font-size(60px);
-        line-height: 1.066;
-    }
+

+  @mixin text-display-xl {
+      @include font-size(40px);
+      line-height: $text-display-line-height;
+
+      @media #{$mq-md} {
+          @include font-size(56px);
+      }
+  }
 }
-

The funky line-heights are calculated to fit the 4-pixel baseline grid, give or take a pixel with rounding. Also note that these mixins only declare the size and line-height, not the font-family or weight.

+

Note that these mixins only declare the size and line-height, not the font-family or weight.

The sizing mixins in turn use another Sass mixin to convert a pixel size to rem for output, assuming a 16px root size (the default in graphical browsers). Because we use rem for font sizing all of our declared sizes are really just suggestions and the end user can resize as they see fit. Text sizes are flexible so design accordingly.

diff --git a/src/patterns/organisms/call-out/call-out-compact.hbs b/src/patterns/organisms/call-out/call-out-compact.hbs index 99a71653..1d8b6348 100644 --- a/src/patterns/organisms/call-out/call-out-compact.hbs +++ b/src/patterns/organisms/call-out/call-out-compact.hbs @@ -3,7 +3,7 @@ name: Call Out (compact) order: 2 description: A more compact version of a call out section, with smaller copy and a horizontal layout. notes: | - - Adding a theme class of `mzp-t-firefox` will render the title font using Open Sans. + - Adding a theme class of `mzp-t-mozilla` will render the title font using Zilla Slab. - For RTL languages, the content and call-to-action will swap positions. links: Compact Call Out Demo: /demos/call-out-compact.html diff --git a/src/patterns/organisms/call-out/call-out.hbs b/src/patterns/organisms/call-out/call-out.hbs index 6f170e74..696166a0 100644 --- a/src/patterns/organisms/call-out/call-out.hbs +++ b/src/patterns/organisms/call-out/call-out.hbs @@ -9,7 +9,7 @@ notes: | - `mzp-t-product-developer`. - `mzp-t-product-nightly`. - `mzp-t-product-focus`. - - Adding a theme class of `mzp-t-firefox` will render the title font using Open Sans. + - Adding a theme class of `mzp-t-mozilla` will render the title font using Zilla Slab. - A dark theme is also available using the theme class `mzp-t-dark`. links: Call Out Demo: /demos/call-out.html diff --git a/src/patterns/organisms/hero/hero-branded.hbs b/src/patterns/organisms/hero/hero-branded.hbs index 07da8578..081684c9 100644 --- a/src/patterns/organisms/hero/hero-branded.hbs +++ b/src/patterns/organisms/hero/hero-branded.hbs @@ -4,13 +4,13 @@ order: 3 description: | A hero section with Firefox product branding. This example also features a tagline. notes: | - - Adding a theme class of `mzp-t-firefox` will change the title font to Open Sans. - Product icons can be displayed using an additional theme class: - `mzp-t-product-firefox`. - `mzp-t-product-beta`. - `mzp-t-product-developer`. - `mzp-t-product-nightly`. - `mzp-t-product-focus`. + - Adding a theme class of `mzp-t-mozilla` will render the title font using Zilla Slab. - This example shows a mock download button. Actual download buttons on mozilla.org are much more complex with a lot of hidden markup so the CTA wrapper here is a `div` where other examples use a `p` element (a paragraph can only contain text and phrasing elements; a `p` wouldn’t be correct for a real download button). - [See the demo page](/demos/hero.html) for more examples in a full window context. --- diff --git a/src/patterns/organisms/hero/hero.hbs b/src/patterns/organisms/hero/hero.hbs index 270ece21..29d7a050 100644 --- a/src/patterns/organisms/hero/hero.hbs +++ b/src/patterns/organisms/hero/hero.hbs @@ -6,7 +6,7 @@ description: | notes: | - The content is centered by default without a hero image. - The description can feature a larger tagline with the `mzp-c-hero-tagline` class. - - Add the `mzp-t-firefox` class for Firefox branding (changing font to Open Sans). + - Adding a theme class of `mzp-t-mozilla` will render the title font using Zilla Slab. - Add the `mzp-t-dark` class to invert text colors for dark backgrounds. - [See the demo page](/demos/hero.html) for more examples in a full window context. links: