Skip to content
This repository was archived by the owner on Jun 5, 2025. It is now read-only.

Commit c758524

Browse files
Volker-EVolker-E
committed
Add font-family-system-sans font stack
This font stack is providing system specific fonts for improved readability, especially on mobile devices. It is meant to be used more widely and possibly replace `font-family-sans` var in the mid-future. We already use it in places like Design Style Guide. Bug: T175877 Change-Id: I868e30ec3445f1226fa11a23f6d853b4acd0a728
1 parent 9b9eaef commit c758524

2 files changed

Lines changed: 8 additions & 0 deletions

File tree

‎wikimedia-ui-base.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -185,7 +185,11 @@
185185
/* Font Families */
186186
--font-family-base: var( --font-family-sans );
187187
--font-family-heading-main: var( --font-family-serif );
188+
/* To be deprecated */
188189
--font-family-sans: 'Helvetica Neue', 'Helvetica', 'Nimbus Sans L', 'Arial', 'Liberation Sans', sans-serif;
190+
/* Provide better system-specific readability */
191+
/* `system-ui` is currently not an option due to OS/language combination issues, see T175877#4776576 */
192+
--font-family-system-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif; /* stylelint-disable-line value-keyword-case */
189193
--font-family-sans--fallback: sans-serif;
190194
--font-family-serif: 'Linux Libertine', 'Georgia', 'Times', serif;
191195
--font-family-serif--fallback: serif;

‎wikimedia-ui-base.less‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -179,8 +179,12 @@
179179
// Font Families
180180
@font-family-base: @font-family-sans;
181181
@font-family-heading-main: @font-family-serif;
182+
// To be deprecated
182183
@font-family-sans: 'Helvetica Neue', 'Helvetica', 'Nimbus Sans L', 'Arial', 'Liberation Sans', sans-serif;
183184
@font-family-sans--fallback: sans-serif;
185+
// Provide better system-specific readability
186+
// `system-ui` is currently not an option due to OS/language combination issues, see T175877#4776576
187+
@font-family-system-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif; // stylelint-disable-line value-keyword-case
184188
@font-family-serif: 'Linux Libertine', 'Georgia', 'Times', serif;
185189
@font-family-serif--fallback: serif;
186190
@font-family-monospace: monospace, monospace; // See T176636

0 commit comments

Comments
 (0)