Implement Transitional Modern Font Stacks

More information: https://github.com/system-fonts/modern-font-stacks#transitional

Signed-off-by: Max Charrier <max@puffer.fish>

1 files changed, 9 insertions, 2 deletions

diff --git a/stylesheet.css b/stylesheet.css
index 3610f90..a319ba2 100644
--- a/stylesheet.css
+++ b/stylesheet.css
@@ -1,3 +1,8 @@
+:root {
+	--system-ui: ui-serif, Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;; 
+	-webkit-font-smoothing: antialiased;
+ 	-moz-osx-font-smoothing: grayscale;
+}
 body {
 	background-color: #f1e9df;
 	width: 960px;
@@ -6,6 +11,8 @@ body {
 	display: grid;
 	grid-template-columns: repeat(5, 1fr);
 	gap: 60px;
+	font-family: var(--system-ui);
+	font-weight: normal; /* 400 */
 	font-size: 1.1rem;
 }
 header {
@@ -29,8 +36,8 @@ header nav menu li {
 }
 header nav menu a {
 	color: #555;
+	font-weight: bold; /* 700 */
 	font-size: 0.95rem;
-	font-weight: bold;
 	text-decoration: none;
 }
 main {
@@ -40,7 +47,7 @@ main {
 main h2, main a {
 	color: #333;
 	margin-bottom: 30px;
-	font-weight: bold;
+	font-weight: bold; /* 700 */
 }
 main p {
 	margin-bottom: 20px;