Implement Transitional Modern Font Stacks

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

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

diff --git a/stylesheet.css b/stylesheet.css
index 3610f904a2df921b5117cc44bf2d308dc67f0b65..a319ba2ba3321779f000ecfc51d69286810bc247 100644 (file)
--- 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;
 body {
        background-color: #f1e9df;
        width: 960px;


@@ -6,6 +11,8 @@ body {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 60px;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 60px;

+       font-family: var(--system-ui);
+       font-weight: normal; /* 400 */

        font-size: 1.1rem;
 }
 header {
        font-size: 1.1rem;
 }
 header {


@@ -29,8 +36,8 @@ header nav menu li {
 }
 header nav menu a {
        color: #555;
 }
 header nav menu a {
        color: #555;

+       font-weight: bold; /* 700 */

        font-size: 0.95rem;
        font-size: 0.95rem;

-       font-weight: bold;

        text-decoration: none;
 }
 main {
        text-decoration: none;
 }
 main {


@@ -40,7 +47,7 @@ main {
 main h2, main a {
        color: #333;
        margin-bottom: 30px;
 main h2, main a {
        color: #333;
        margin-bottom: 30px;

-       font-weight: bold;
+       font-weight: bold; /* 700 */

 }
 main p {
        margin-bottom: 20px;
 }
 main p {
        margin-bottom: 20px;