Default to system-ui font stack. Set colour on heading and code. Set font weight on headings.

assets/sass/_variables.scss

@@ -56,6 +56,7 @@ $font-size: $font-size-fixed;
 // Font weights.
 // Use like this: var(--fw-normal)
 $font-weight: (
+  headings:   700,
   bolder:     900,
   bold:       700,
   medium:     500,
@@ -71,34 +72,31 @@ $font-weight: (
 // monospace) hints at what type of font to use if the web browser doesn't
 // find any of the fonts in the list.
 
+// System-ui font stack.
+$system-ui:       system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', 'Liberation Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+
 // Serif font stacks.
-$times-new-roman: 'Times New Roman', Times, Georgia, 'DejaVu Serif', serif;
-$times:           Times, 'Times New Roman', Georgia, 'DejaVu Serif', serif;
-$georgia:         Georgia, 'Times New Roman', 'DejaVu Serif', serif;
-$garamond:        Garamond, Charter, 'Times New Roman', serif;
+$ui-serif:        ui-serif, Constantia, 'Noto Serif', Georgia, serif;
+$times:           'Times New Roman', 'Liberation Serif', 'Nimbus Roman No9 L', serif;
+$georgia:         Georgia, 'Noto Serif', ui-serif, serif;
+$garamond:        Garamond, Charter, Cambria, 'Noto Serif', ui-serif, serif;
 
 // Sans-serif font stacks.
-$verdana:         Verdana, Tahoma, 'DejaVu Sans', sans-serif;
-$tahoma:          Tahoma, Verdana, 'DejaVu Sans', sans-serif;
-$helvetica:       Helvetica, Arial, 'Nimbus Sans L', sans-serif;
-$lucida:          'Lucida Grande', 'Lucida Sans Unicode', Lucida, Verdana, sans-serif;
-$futura:          Futura, 'Century Gothic', AppleGothic, sans-serif;
-
-// System-ui font stack.
-$system-ui:       system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+$ui-sans-serif:   ui-sans-serif, $system-ui;
+$helvetica:       'Helvetica Neue', Helvetica, 'Liberation Sans', 'Nimbus Sans L', Arial, sans-serif;
+$futura:          Futura, 'Century Gothic', Montserrat, Calibri, ui-sans-serif, sans-serif;
 
 // Monospace font stacks.
-// For an explanation of why "sans-serif" is at the end of this list, see
-// http://meyerweb.com/eric/thoughts/2010/02/12/fixed-monospace-sizing/
-$menlo:           Menlo, 'Ubuntu Mono', 'DejaVu Sans Mono', 'Courier New', Courier, monospace, sans-serif;
+$ui-monospace:    ui-monospace, Menlo, 'Cascadia Mono', 'Segoe UI Mono', 'Noto Sans Mono', 'Liberation Mono', Monaco, Consolas, monospace;
+
 
 // Font family.
 // Use like this: var(--ff-body)
 $font-family: (
-  body:       $garamond,
-  headings:   $futura,
+  body:       $ui-serif,
+  headings:   $ui-sans-serif,
   alt:        $system-ui,
-  monospace:  $menlo,
+  monospace:  $ui-monospace,
 );
 
 // Breakpoints

assets/sass/_zen.scss

@@ -41,11 +41,8 @@ article > header,
   font-size: var(--fs-xs);
 }
 
-// Apply heading font stack to heading, labels etc.
+// Apply heading font stack and colour to labels etc.
 
-h1,
-h2,
-h3,
 th,
 nav,
 label,
@@ -54,9 +51,9 @@ article > header,
 .content-dates,
 .header,
 .footer {
-  font-family: var(--ff-headings);
-  font-weight: var(--fw-normal);
   color: var(--color-headings);
+  font-family: var(--ff-headings);
+  font-weight: var(--fw-headings);
 }
 
 // Article and content.
@@ -111,7 +108,6 @@ article {
   }
 
   pre {
-    color: var(--color-code);
     border-radius: var(--radius-s);
     padding: 5px;
     border: 1px solid var(--color-border-light);

assets/sass/reset/document/_document.scss

@@ -3,12 +3,14 @@
 // Document
 
 html {
-  // Change the default font family in all browsers (opinionated).
+  // Change the default font family in all browsers.
   font-family: var(--ff-body);
   // Set base font size in percent.
   font-size: calc(#{$base-font-size} / 16 * 100%);
   // Correct the line height in all browsers.
   line-height: $base-line-height;
+  // Set text colour.
+  color: var(--color-text);
   // Prevent adjustments of font size.
   -webkit-text-size-adjust: none;
   text-size-adjust: none;

assets/sass/reset/sections/_sections.scss

@@ -1,7 +1,7 @@
 // Sections
 
 body {
-  // Remove the margin in all browsers (opinionated).
+  // Remove the margin in all browsers.
   margin: 0;
   padding: 0;
 }
@@ -10,47 +10,54 @@ body {
 //
 // All HTML headings, `<h1>` through `<h6>`, are available. `%h1` through `%h6`
 // classes are also available, for when you want to match the font styling of a
-// heading but still want your text to be displayed inline.
+// heading but not be a heading.
+h1,
+%h1,
+h2,
+%h2,
+h3,
+%h3,
+h4,
+%h4,
+h5,
+%h5,
+h6,
+%h6 {
+  @include margin-block(1);
+  color: var(--color-headings);
+  font-family: var(--ff-headings);
+  font-weight: var(--fw-headings);
+  line-height: var(--heading-line-height);
+}
+
 h1,
 %h1 {
-  @include margin-block(1);
   font-size: var(--fs-xxl);
-  line-height: var(--heading-line-height);
 }
 
 h2,
 %h2 {
-  @include margin-block(1);
   font-size: var(--fs-xl);
-  line-height: var(--heading-line-height);
 }
 
 h3,
 %h3 {
-  @include margin-block(1);
   font-size: var(--fs-l);
-  line-height: var(--heading-line-height);
 }
 
 h4,
 %h4 {
-  @include margin-block(1);
   font-size: var(--fs-m);
-  line-height: var(--heading-line-height);
 }
 
 h5,
 %h5 {
-  @include margin-block(1);
   font-size: var(--fs-s);
-  line-height: var(--heading-line-height);
 }
 
 h6,
 %h6 {
-  @include margin-block(1);
   font-size: var(--fs-xs);
-  line-height: var(--heading-line-height);
 }
 
 // Set max text line width for readability.

assets/sass/reset/text/_text.scss

@@ -7,6 +7,7 @@
 code,
 kbd,
 samp {
+  color: var(--color-code);
   font-family: var(--ff-monospace);
 }