Improve fonts stacks

axel-springer-kugawana · Jan 27, 2022 · cf55585 · cf55585
1 parent b1925e0
commit cf55585
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 9 deletions.
diff --git a/docs/css/bases/typography.md b/docs/css/bases/typography.md
@@ -1,12 +1,17 @@
 # Typography
 
-## Font-family:
+## Fonts
 
-By default, the font-family for titles is [Montserrat](https://fonts.google.com/specimen/Montserrat) and [PT Sans](https://fonts.google.com/specimen/PT+Sans) for other text.
+By default, the `font-family` for titles is [Montserrat](https://fonts.google.com/specimen/Montserrat) while any other text gets [PT Sans](https://fonts.google.com/specimen/PT+Sans).
 
-If these fonts are not available it will fall back on the generic *sans-serif* family for both.
+If these fonts are not available, they will fall back on other fonts, depending on which ones are available on your system. The font stacks are:
 
-These two fonts are not loaded inside the CSS, you have to include them in the `<head>` tag of your page.
+- `"Montserrat", "Verdana", system-ui, -apple-system, sans-serif !default;`
+- `"PT Sans", "Trebuchet MS", system-ui, -apple-system, sans-serif !default;`
+
+These two fonts are not loaded by Serenity. You can include them either by using Google Fonts CDN either by (preferably) self-hosting the fonts and writing your own `@font-face` declarations.
+
+Using Google Fonts, link these stylesheets in the `<head>` tag of your page.
 
 ```html
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700,700i">
@@ -33,7 +38,6 @@ All HTML headings, `<h1>` through `<h6>`, are available,
 <h4>Title Level 4</h4>
 <h5>Title Level 5</h5>
 <h6>Title Level 6</h6>
-
 ```
 
 `.title--1` through `.title--6` classes are also available if you need to match a heading style on another type of element.
@@ -146,4 +150,4 @@ Serenity provides some text utility to help you easily change the alignment, the
 <p class="text-center">Centered aligned text</p>
 <p class="text-right">Right aligned text</p>
 <p class="text-bold">Bold text</p>
-```
+```
diff --git a/src/scss/utils/_variables.scss b/src/scss/utils/_variables.scss
@@ -1,6 +1,9 @@
-// fonts
-$font-title: "Montserrat", sans-serif !default;
-$font-body: "PT Sans", sans-serif !default;
+/**
+ * Fonts stacks selected with the help of https://meowni.ca/font-style-matcher
+ * and https://www.cssfontstack.com
+ */
+$font-title: "Montserrat", "Verdana", system-ui, -apple-system, sans-serif !default;
+$font-body: "PT Sans", "Trebuchet MS", system-ui, -apple-system, sans-serif !default;
 
 // sizes
 $base-size: 100% !default;