Add refresh fonts by maureenlholland · Pull Request #1030 · mozilla/protocol

maureenlholland · 2025-03-12T12:41:40Z

Description

This approach is the breaking change. It removes Zilla Slab token, font files, and mixin.

Fallback font adjustments used this tool: https://highperformancewebfonts.com/tools/fafofal/

Mozilla heading styles need

    font-variant-ligatures: none;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.1;

Mozilla body styles need

    font-variant-ligatures: none;
    line-height: 1.2;

I have documented this change in the design system.
I have recorded this change in CHANGELOG.md.

Related PR

Needs new Protocol Tokens package: mozilla/protocol-tokens#114 [WIP]

Issue

#1029

Testing

Run locally and check font updates in http://localhost:3000/docs/fundamentals/typography

Build package locally and update local package in Bedrock: mozilla/bedrock#16083
(After local install on Bedrock, I was manually moving the mozilla-protocol/core/package/protocol folder up to be directly inside core folder, there's probably a better way to do that)

Check Mozilla branded pages have correct font styling

(rebrand) http://localhost:8000/en-US/
(non-rebrand) http://localhost:8000/en-US/about/manifesto/

Check Firefox branded pages have correct font styling

maureenlholland · 2025-03-12T12:45:54Z

CI will be broken until the new tokens are available from protocol-tokens package

CHANGELOG.md

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

docs/01-fundamentals/03-typography.md

maureenlholland · 2025-03-18T18:51:39Z

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

    @supports (--css: variables) {
        font-family: var(--title-font-family);
+        font-variant-ligatures: var(--title-font-ligatures);
+        font-weight: var(--title-font-weight);


This is problematic, it overrides the 700 font weight and makes the inherited 500 weight take effect. Needs a default fallback value or a Firefox-themed variable value

(pr)

(prod)

default fallback value works as expected

- [breaking] Zilla Slab font is removed for Mozilla rebrand fonts - [breaking] the font-mozilla mixin is removed in favor of more explicit font-mozilla-text and font-mozilla-headline

This approach ensures we have a common default (bold) across all themes that don't choose to set a custom font-weight

maureenlholland · 2025-03-19T10:46:23Z

This is ready for local code review and can be merged when updated with new tokens from Protocol Tokens PR: mozilla/protocol-tokens#114

DO NOT MERGE until tokens package is released and updated

maureenlholland · 2025-03-19T15:44:59Z

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


    @supports (--css: variables) {
        font-family: var(--title-font-family);
+        font-variant-ligatures: var(--title-font-ligatures);


mozilla/bedrock#15790 (comment)

just noticed this comment on another PR, maybe best to use none as default here as well

docs/01-fundamentals/02-themes.md

janbrasna · 2025-03-19T20:58:26Z

docs/01-fundamentals/03-typography.md

-this font.
+#### Mozilla Headline

-* [Download from Github](https://github.com/mozilla/zilla-slab/releases/latest)


There's a repo https://github.com/mozilla/mozilla-type-family — however it still only houses pre-release versions.

Q: Is there any chance a prod-level asset will be provided at some point, perhaps adding more i18n support et al.?

We are not expecting expanded character support 🙁

I will check and see if there is a more recent version.

Updated with the final* versions.

as much as anything on the web is ever final.

Co-authored-by: Jan Brasna <1784648+janbrasna@users.noreply.github.com>

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

stephaniehobson · 2025-03-25T17:30:39Z

@maureenlholland An update to the tokens package has been published.

maureenlholland · 2025-03-26T15:36:17Z

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

+}
+
+@font-face {
+    font-family: text-fallback;


Unadjusted

Adjusted

maureenlholland · 2025-03-26T15:39:06Z

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

+}
+
+@font-face {
+    font-family: headline-fallback;


Unadjusted

Adjusted

Helvetica Neue a tougher fallback font to adjust for. Defaults from https://highperformancewebfonts.com/tools/fafofal/ seemed equally off and manual adjustment on top of that hasn't been a huge improvement

I don't think we need to stick with Helvetica Neue if we can get a better result with something else. Since this is a serif maybe Georgia? It seems to have good support across OSs.

@font-face { font-family: fallback; src: local("Georgia"); ascent-override: 90%; descent-override: 25.5%; line-gap-override: 0%; size-adjust: 105.99%; }

Definitely worth a try!

Suggested adjustment

Suggested + Manual adjustments

font-family: headline-fallback; src: local("Georgia"); ascent-override: 89.2%; descent-override: 30.8%; line-gap-override: 0%; size-adjust: 99%;

This would mean our Headline stack becomes "'Mozilla Headline', 'Georgia', Arial, X-LocaleSpecific, sans-serif" in protocol-tokens package. I like the idea of having a serif fallback in this case, but I'm still on the fence about whether there's a meaningful improvement in fallback sizing compared to Helvetica Neue.

Slight preference is leaving Helvetica Neue for now, getting everything hooked into bedrock and doing a follow up refinement update if needed.

👍

Okay, thanks for looking at it.

- Remove unused Bold MozillaHeadline

stephaniehobson

One thought after looking at the code: I'm curious for your thoughts on changing the fallback font for the headlines.

I'll test it on moz.org tomorrow.

stephaniehobson · 2025-03-27T23:07:55Z

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

    @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});


stephaniehobson · 2025-03-27T23:14:30Z

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

+}
+
+@font-face {
+    font-family: headline-fallback;


I don't think we need to stick with Helvetica Neue if we can get a better result with something else. Since this is a serif maybe Georgia? It seems to have good support across OSs.

@font-face { font-family: fallback; src: local("Georgia"); ascent-override: 90%; descent-override: 25.5%; line-gap-override: 0%; size-adjust: 105.99%; }

stephaniehobson

Spot checks in bedrock are good. Let's goooooooooo!

R+ 🖊️

janbrasna · 2025-04-03T11:06:15Z

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

+    $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"


I missed this one:

Suggested change

$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"

$font-stack-mozilla-text: "'Mozilla Text', 'Helvetica Neue', Arial, X-LocaleSpecific, sans-serif"

$font-stack-mozilla-headline: "'Mozilla Headline', 'Helvetica Neue', Arial, X-LocaleSpecific, sans-serif"

removed in protocol-tokens#116

(I'm preparing a tokens.config doc update and a changelog entry for tokens version bump so I'll include this fix with it…)

maureenlholland linked an issue Mar 13, 2025 that may be closed by this pull request

Add Refresh fonts #1029

Closed

maureenlholland mentioned this pull request Mar 13, 2025

Remove bedrock rebrand fonts in favor of protocol fonts mozilla/bedrock#16083

Closed

maureenlholland force-pushed the add-refresh-fonts branch from 1c22c80 to 1196cf9 Compare March 13, 2025 13:25

stephaniehobson reviewed Mar 13, 2025

View reviewed changes

CHANGELOG.md Outdated Show resolved Hide resolved

stephaniehobson reviewed Mar 13, 2025

View reviewed changes

assets/sass/protocol/base/elements/_titles.scss Show resolved Hide resolved

stephaniehobson reviewed Mar 13, 2025

View reviewed changes

docs/01-fundamentals/03-typography.md Outdated Show resolved Hide resolved

maureenlholland mentioned this pull request Mar 18, 2025

Add Mozilla Headline and Text font stack tokens mozilla/protocol-tokens#114

Merged

1 task

maureenlholland commented Mar 18, 2025

View reviewed changes

maureenlholland added 6 commits March 19, 2025 10:37

Add font files for Mozilla Headline and Text

542e685

Add new fonts to stylesheets, replacing Zilla Slab

707ac8f

- [breaking] Zilla Slab font is removed for Mozilla rebrand fonts - [breaking] the font-mozilla mixin is removed in favor of more explicit font-mozilla-text and font-mozilla-headline

Add adjusted fallback font styles

4831c54

Update changelog with migration tips

7c541fa

Add note about use of Mozilla Headline

95ab4c4

Add default fallback for title font weight

e993c57

This approach ensures we have a common default (bold) across all themes that don't choose to set a custom font-weight

maureenlholland force-pushed the add-refresh-fonts branch from 5289589 to e993c57 Compare March 19, 2025 10:41

maureenlholland marked this pull request as ready for review March 19, 2025 10:44

maureenlholland added Do Not Merge ⚠️ Do Not Merge Review: XS Code review time: 30 mins or less Needs:Review 👋 Ready for Developer Review labels Mar 19, 2025

maureenlholland commented Mar 19, 2025

View reviewed changes

janbrasna reviewed Mar 19, 2025

View reviewed changes

docs/01-fundamentals/02-themes.md Outdated Show resolved Hide resolved

janbrasna reviewed Mar 19, 2025

View reviewed changes

Update docs/01-fundamentals/02-themes.md

f04f1e5

Co-authored-by: Jan Brasna <1784648+janbrasna@users.noreply.github.com>

maureenlholland commented Mar 24, 2025

View reviewed changes

assets/sass/protocol/includes/fonts/_mozilla-headline.scss Outdated Show resolved Hide resolved

maureenlholland added 3 commits March 26, 2025 14:35

Merge with main, update CHANGELOG

98cd8d2

Fix merge conflict

0e4ca0e

Install new protocol-tokens package

873922c

maureenlholland added 2 commits March 26, 2025 14:56

Remove woff support for Mozilla typefaces

a552315

Add adjustments for Helvetica Neue fallback

67f9e12

maureenlholland commented Mar 26, 2025

View reviewed changes

maureenlholland removed the Do Not Merge ⚠️ Do Not Merge label Mar 26, 2025

Update fonts

cdea8f5

- Remove unused Bold MozillaHeadline

stephaniehobson reviewed Mar 28, 2025

View reviewed changes

Merge branch 'main' into add-refresh-fonts

957fa82

stephaniehobson approved these changes Apr 2, 2025

View reviewed changes

stephaniehobson merged commit c62cba4 into mozilla:main Apr 2, 2025
1 check passed

janbrasna reviewed Apr 3, 2025

View reviewed changes

		$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"

Conversation

maureenlholland commented Mar 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related PR

Issue

Testing

Uh oh!

maureenlholland commented Mar 12, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

maureenlholland Mar 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

maureenlholland commented Mar 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

stephaniehobson commented Mar 25, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

maureenlholland Mar 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

stephaniehobson left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

stephaniehobson left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

maureenlholland commented Mar 12, 2025 •

edited

Loading

maureenlholland Mar 18, 2025 •

edited

Loading

maureenlholland commented Mar 19, 2025 •

edited

Loading

maureenlholland Mar 31, 2025 •

edited

Loading