From a738f25c05b1d4d8d131ae58206b706891ed4540 Mon Sep 17 00:00:00 2001 From: Volker E Date: Thu, 17 Jan 2019 00:46:26 -0800 Subject: [PATCH] Use system font stack as sans-serif choice Using system font stack provides better reading experience on wider range of operating systems and languages combinations. Adding `fontFamilyBase` variable to easier update and clarify usage. Bug: T175877 Change-Id: Id00fbe7ca90a3b31524c618de4441c413fe4afbe --- minerva.less/minerva.variables.less | 15 ++++++++++++++- .../skins.minerva.content.styles/headings.less | 2 +- resources/skins.minerva.content.styles/main.less | 2 +- .../tablet/common.less | 2 +- skinStyles/mobile.special.styles/minerva.less | 2 +- 5 files changed, 18 insertions(+), 5 deletions(-) diff --git a/minerva.less/minerva.variables.less b/minerva.less/minerva.variables.less index 4e4e63a..6d78936 100644 --- a/minerva.less/minerva.variables.less +++ b/minerva.less/minerva.variables.less @@ -3,7 +3,20 @@ @z-indexBase: 0; @z-indexOverOverlay: 2; -@fontFamily: 'Helvetica Neue', 'Helvetica', 'Nimbus Sans L', 'Arial', 'Liberation Sans', sans-serif; +/** + * System font stack for sans-serif fonts + * + * `-apple-system` – Support: Safari for macOS and iOS ('San Francisco') + * `BlinkMacSystemFont` – Chrome < 56 for macOS ('San Francisco') + * `Segoe UI` – Windows Vista & newer + * `Roboto` – Android + * `Lato` – Wikimedia Design choice + * `Helvetica, Arial, sans-serif` – (Generic) Web fallback + * Note that CSS Fonts Module Level 4's `system-ui` value has resulted in unresolved + * side-effects in certain OS/language combinations as of now and is therefore not included. + */ +@fontFamilySans: -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Lato', 'Helvetica', 'Arial', sans-serif; +@fontFamilyBase: @fontFamilySans; @tocFontSize: 0.8em; @indicatorFontSize: 0.4em; diff --git a/resources/skins.minerva.content.styles/headings.less b/resources/skins.minerva.content.styles/headings.less index a33f8e2..98e0ae6 100644 --- a/resources/skins.minerva.content.styles/headings.less +++ b/resources/skins.minerva.content.styles/headings.less @@ -51,7 +51,7 @@ h4 { } h3, h4, h5, h6 { - font-family: @fontFamily; + font-family: @fontFamilyBase; } .pre-content h1, diff --git a/resources/skins.minerva.content.styles/main.less b/resources/skins.minerva.content.styles/main.less index 6bd37a0..7ba8d13 100644 --- a/resources/skins.minerva.content.styles/main.less +++ b/resources/skins.minerva.content.styles/main.less @@ -10,7 +10,7 @@ @font-size-body: 100% * @fontScalingFactor; body { - font-family: @fontFamily; + font-family: @fontFamilyBase; font-size: @font-size-body; line-height: 1.4; -webkit-tap-highlight-color: rgba( 0, 0, 0, 0.2 ); diff --git a/resources/skins.minerva.content.styles/tablet/common.less b/resources/skins.minerva.content.styles/tablet/common.less index 7309fd0..112a43e 100644 --- a/resources/skins.minerva.content.styles/tablet/common.less +++ b/resources/skins.minerva.content.styles/tablet/common.less @@ -39,7 +39,7 @@ A file for css that optimises the Minerva skin on larger devices. > h2 { visibility: hidden; - font-family: @fontFamily; + font-family: @fontFamilyBase; font-size: @tocFontSize; font-weight: bold; border-bottom: 0; diff --git a/skinStyles/mobile.special.styles/minerva.less b/skinStyles/mobile.special.styles/minerva.less index 4c3ab90..550d8e9 100644 --- a/skinStyles/mobile.special.styles/minerva.less +++ b/skinStyles/mobile.special.styles/minerva.less @@ -33,7 +33,7 @@ h1, h2 { // Important given we have no idea which rules special pages are enforcing - font-family: @fontFamily !important; + font-family: @fontFamilyBase !important; } .content-header {