Fucking arround with fonts

src/styles/main.scss

@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+
 /* Colorscheme */
 :root {
   --white: hsl(0, 0%, 99%);
@@ -12,17 +14,23 @@
 
 /* Modificación básica de elementos*/
 body {
-  max-width: 75rem;
+  max-width: 75em;
   margin: 0 auto;
-  padding: 0 1rem 4rem 1rem;
+  padding: 0 1rem 4rem 1em;
-  font-family: sans-serif;
+  font-family: "Work Sans", sans-serif;
   color: var(--black);
   overflow-y: scroll;
+  line-height: 1.65;
+  font-size: 100%;
+}
+
+p {
+  margin-bottom: 1.15em;
 }
 
 input {
   border: 1px var(--gray-2) solid;
-  padding: .3rem;
+  padding: .3em;
 }
 
 button {
@@ -46,28 +54,43 @@ a, button.link {
   }
 }
 
-h1, h2, h3, h4 {
+h1, h2, h3, h4, h5 {
-  margin-top: 1rem;
+  line-height: 1.15;
-  margin-bottom: 1rem;
 }
 
+h1 {
+  margin-top: 0;
+  font-size: 4.209em;
+}
+
+h2 {font-size: 3.157em;}
+
+h3 {font-size: 2.369em;}
+
+h4 {font-size: 1.777em;}
+
+h5 {font-size: 1.333em;}
+
+small, .text_small {font-size: 0.75em;}
+
 /* Navbar */
 .nav {
   display: flex;
-  min-height: 3.25rem;
+  min-height: 3.25em;
   position: relative;
   justify-content: space-between;
   align-items: center;
 
   .branding {
     margin: 0;
+    font-size: 1.777em;
   }
 
   .nav-links {
     display: flex;
 
     .link {
-      margin-left: 1rem;
+      margin-left: 1em;
     }
   }
 }
@@ -83,19 +106,19 @@ ul.pagination {
   }
 
   .page-item {
-    height: 2.5rem;
+    height: 2.5em;
     text-align: center;
 
     &.left, &.right {
-      width: 7rem;
+      width: 7em;
     }
 
     .page-link {
       display: inline-block;
       height: 100%;
 
-      margin-right: .4rem;
+      margin-right: .4em;
-      padding: .75rem 1rem;
+      padding: .75rem 1em;
 
       color: var(--black);
       text-decoration: none;
@@ -118,7 +141,7 @@ ul.pagination {
   }
 
   .spacing {
-    margin: auto 1rem;
+    margin: auto 1em;
     font-weight: normal;
   }
 }
@@ -144,7 +167,7 @@ ul.entity_list {
 
   li.artist, li.disc, li.song {
     border-bottom: 2px var(--gray-1) solid;
-    margin-bottom: 1rem;
+    margin-bottom: 1em;
 
     &:last-child {
       margin-bottom: auto;
@@ -166,11 +189,11 @@ ul.entity_list {
         display: flex;
         flex-direction: column;
         justify-content: center;
-        padding-left: 1rem;
+        padding-left: 1em;
 
         .small {
           color: var(--gray-4);
-          font-size: .8rem;
+          font-size: .8em;
         }
       }
 
@@ -178,18 +201,18 @@ ul.entity_list {
   }
 
   li.artist {
-    height: 4rem;
+    height: 4em;
   }
 
   li.disc {
-    height: 14rem;
+    height: 14em;
 
     a {
       .coverart {
         object-fit: cover;
         width: 200px;
         height: 200px;
-        margin: 1rem;
+        margin: 1em;
         border: 1px solid var(--gray-2);
 
         &.loading {
@@ -199,11 +222,11 @@ ul.entity_list {
 
       .release-date {
         display: inline-block;
-        font-size: .7rem;
+        font-size: .7em;
         background-color: var(--gray-4);;
         color: var(--white);
-        padding: .1rem .5rem;
+        padding: .1rem .5em;
-        border-radius: .25rem;
+        border-radius: .25em;
         text-align: center;
         line-height: 1;
       }
@@ -211,7 +234,7 @@ ul.entity_list {
   }
 
   li.song {
-    height: 4rem;
+    height: 4em;
   }
 }
 
@@ -223,7 +246,7 @@ ul.tabs {
   margin: 1rem 0;
 
   li.tab {
-    padding: .5rem 1rem;
+    padding: .5rem 1em;
     margin-bottom: -2px;
     cursor: pointer;
 

src/styles/reset.css

@@ -33,7 +33,7 @@ dd {
 body {
     min-height: 100vh;
     scroll-behavior: smooth;
-    text-rendering: optimizeSpeed;
+    text-rendering: optimizeLegibility;
     line-height: 1.5;
 }