Add refresh fonts #1030
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -12,9 +12,10 @@ h3, | |
| h4, | ||
| h5, | ||
| h6 { | ||
| $default-font-weight: bold; | ||
| font-family: $title-font-family; | ||
| color: $title-text-color; | ||
| 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); | ||
|
Collaborator
Author
There was a problem hiding this comment. mozilla/bedrock#15790 (comment) just noticed this comment on another PR, maybe best to use |
||
| font-weight: var(--title-font-weight, #{$default-font-weight}); | ||
|
|
||
| letter-spacing: var(--title-letter-spacing); | ||
| color: var(--title-text-color); | ||
|
|
||
| .mzp-t-dark & { | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
|
Collaborator
Author
There was a problem hiding this comment. 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
Contributor
There was a problem hiding this comment. 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.
Collaborator
Author
There was a problem hiding this comment. Definitely worth a try!
Collaborator
Author
There was a problem hiding this comment. Suggested adjustment Suggested + Manual adjustments 
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.
Contributor
There was a problem hiding this comment. 👍 Okay, thanks for looking at it. |
||
| src: local("Helvetica Neue"); | ||
| ascent-override: 84%; | ||
| descent-override: 36%; | ||
| line-gap-override: 0%; | ||
| size-adjust: 98%; | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
|
Collaborator
Author
There was a problem hiding this comment. Unadjusted Adjusted |
||
| src: local("Helvetica Neue"); | ||
| ascent-override: 84%; | ||
| descent-override: 36%; | ||
| line-gap-override: 0%; | ||
| size-adjust: 98%; | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -3,18 +3,17 @@ title: Typography | |
| --- | ||
|
|
||
| ## Typefaces | ||
| Protocol comes with four fonts: Mozilla Headline, Mozilla Text, Metropolis, and Inter. | ||
|
|
||
| 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 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> | ||
|
|
||
| ### Mozilla | ||
|
|
||
| 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/) | ||
|
|
||
| You can declare Mozilla Headline explicitly with the mixin `@include font-mozilla-headline;`. | ||
|
|
||
| You can declare Mozilla Text explicitly with the mixin `@include font-mozilla-headline;`. | ||
|
|
||
| #### Mozilla Headline | ||
|
|
||
|
Contributor
There was a problem hiding this comment. 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.?
Contributor
There was a problem hiding this comment. We are not expecting expanded character support 🙁 I will check and see if there is a more recent version.
Contributor
There was a problem hiding this comment. Updated with the final* versions.
|
||
| <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-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 Mozilla Headline for | ||
| the Mozilla brand are slightly larger than their Firefox equivalents, adjusting | ||
| for Mozilla Headline being overall a smaller display font. | ||
|
|
||
| ### Condensed Type Scale | ||
|
|
||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
|
|
@@ -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-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" | ||||||||||
|
Comment on lines
+51
to
+52
Contributor
There was a problem hiding this comment. I missed this one:
Suggested change
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…) |
||||||||||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.