Embrace system fonts

I want to live in a world without website bloat. I also want websites to
be readable with descent typography.

<https://modernfontstacks.com> has some ideas for striking that balance.
I translated their [GitHub
README](https://github.com/system-fonts/modern-font-stacks) into some
CSS custom properties, and now I can play with the ideas more rapidly.

site/stylesheets/style.css

@@ -95,16 +95,57 @@ textarea:not([rows]) {
 /* Begin my styles */
 
 :root {
-  --color-background: rgb(251, 249, 239);
-  --color-text: rgb(43, 40, 27);
-  --color-link: var(--color-text);
   font-size: 100%;
+
+  /* Modern Font Stacks https://github.com/system-fonts/modern-font-stacks */
+  --font-system: system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji";
+  --font-transitional: Charter, "Bitstream Charter", "Sitka Text", Cambria,
+    serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+    "Noto Color Emoji";
+  --font-old-style: "Iowan Old Style", "Palatino Linotype", "URW Palladio L",
+    P052, serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+    "Noto Color Emoji";
+  --font-humanist: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans",
+    source-sans-pro, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji";
+  --font-geometric-humanist: Avenir, Montserrat, Corbel, "URW Gothic",
+    source-sans-pro, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji";
+  --font-classical-humanist: Optima, Candara, "Noto Sans", source-sans-pro,
+    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+    "Noto Color Emoji";
+  --font-neo-grotesque: Inter, Roboto, "Helvetica Neue", "Arial Nova",
+    "Nimbus Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji";
+  --font-monospace-slab-serif: "Nimbus Mono PS", "Courier New", monospace,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-monospace-code: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo,
+    Consolas, "DejaVu Sans Mono", monospace, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-industrial: Bahnschrift, "DIN Alternate", "Franklin Gothic Medium",
+    "Nimbus Sans Narrow", sans-serif-condensed, sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-rounded-sans: ui-rounded, "Hiragino Maru Gothic ProN", Quicksand,
+    Comfortaa, Manjari, "Arial Rounded MT", "Arial Rounded MT Bold", Calibri,
+    source-sans-pro, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji";
+  --font-slab-serif: Rockwell, "Rockwell Nova", "Roboto Slab", "DejaVu Serif",
+    "Sitka Small", serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji";
+  --font-antique: Superclarendon, "Bookman Old Style", "URW Bookman",
+    "URW Bookman L", "Georgia Pro", Georgia, serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-didone: Didot, "Bodoni MT", "Noto Serif Display", "URW Palladio L",
+    P052, Sylfaen, serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji";
+  --font-handwritten: "Segoe Print", "Bradley Hand", Chilanka, TSCu_Comic,
+    casual, cursive, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+    "Noto Color Emoji";
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --color-background: rgb(37, 36, 31);
-    --color-text: rgb(242, 240, 234);
   }
 }
 
@@ -115,9 +156,8 @@ textarea:not([rows]) {
 }
 
 html {
-  background-color: var(--color-background);
   color-scheme: light dark;
-  color: var(--color-text);
+  font-family: var(--font-rounded-sans);
   font-size: var(--font-size);
   scroll-behavior: smooth;
 }
@@ -127,14 +167,8 @@ body {
   margin: 0 auto;
   max-width: 40rem;
   padding: 4rem 1rem;
-  /* -webkit-font-smoothing: antialiased; */
-}
-
-a {
-  color: var(--color-link);
-  text-decoration: underline;
-  text-underline-offset: 0.15em;
-  text-decoration-thickness: 0.05em;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 h1 {
@@ -144,7 +178,7 @@ h1 {
 hr {
   margin: 2rem 0;
   border: none;
-  border-top: 0.1rem solid var(--color-text);
+  border-top: 1px solid currentColor;
 }
 
 h1,
@@ -153,6 +187,11 @@ h3 {
   line-height: 1.3;
 }
 
+code,
+pre {
+  font-family: var(--font-monospace-code);
+}
+
 pre.highlight {
   overflow-x: scroll;
 }