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
This commit is contained in:
Volker E 2019-01-17 00:46:26 -08:00 committed by jdlrobson
parent a809420f8d
commit a738f25c05
5 changed files with 18 additions and 5 deletions

View File

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

View File

@ -51,7 +51,7 @@ h4 {
}
h3, h4, h5, h6 {
font-family: @fontFamily;
font-family: @fontFamilyBase;
}
.pre-content h1,

View File

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

View File

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

View File

@ -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 {