From a38c40933b0a2bf034bf110c4d39ce135a1e57ed Mon Sep 17 00:00:00 2001
From: Felix Mattick <felix.mattick@gmail.com>
Date: Thu, 20 Jan 2022 15:28:03 -0600
Subject: [PATCH] Improve font stacks

---
 .changeset/rude-penguins-lie.md | 5 +++++
 src/parts/_base.css             | 2 +-
 src/parts/_code.css             | 8 +++++++-
 3 files changed, 13 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/rude-penguins-lie.md

diff --git a/.changeset/rude-penguins-lie.md b/.changeset/rude-penguins-lie.md
new file mode 100644
index 0000000..df3e1cd
--- /dev/null
+++ b/.changeset/rude-penguins-lie.md
@@ -0,0 +1,5 @@
+---
+"water.css": minor
+---
+
+Change font stacks for better compatibility and appearance
diff --git a/src/parts/_base.css b/src/parts/_base.css
index a00ee6e..336e749 100644
--- a/src/parts/_base.css
+++ b/src/parts/_base.css
@@ -4,7 +4,7 @@ html {
 }
 
 body {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
   line-height: 1.4;
   max-width: 800px;
   margin: 20px auto;
diff --git a/src/parts/_code.css b/src/parts/_code.css
index 166fe1d..20ebd62 100644
--- a/src/parts/_code.css
+++ b/src/parts/_code.css
@@ -8,6 +8,13 @@ time {
   font-size: 1em;
 }
 
+code,
+samp,
+pre,
+var {
+  font-family: ui-monospace, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
+}
+
 pre > code {
   padding: 10px;
   display: block;
@@ -17,7 +24,6 @@ pre > code {
 var {
   color: var(--variable);
   font-style: normal;
-  font-family: monospace;
 }
 
 kbd {