Merge pull request #269 from codecoolture/typography

Slightly adjust the font scale

Author: sergioalvz

components/Blockquote/style.css

@@ -1,5 +1,5 @@
 .Blockquote {
-  font-size: 1.2em;
+  font-size: var(--fs-l);
   margin-bottom: 1em;
   padding: 0 0.5em;
 

components/Code/style.css

@@ -1,5 +1,4 @@
 .Code {
-  font-size: 85%;
   padding: 0.15em 0.25em;
 
   background-color: var(--c-yellow-2);

components/Heading/style.css

@@ -7,17 +7,17 @@
 }
 
 .Heading--Jumbo {
-  font-size: var(--fs-xl);
+  font-size: var(--fs-2xl);
   margin-bottom: 0.5em;
 }
 
 .Heading--Xl {
-  font-size: var(--fs-l);
+  font-size: var(--fs-xl);
   margin-bottom: 0.5em;
 }
 
 .Heading--L {
-  font-size: calc(var(--fs-m) * 1.25);
+  font-size: var(--fs-l);
   margin-bottom: 0.5em;
 }
 

styles/index.css

@@ -28,12 +28,13 @@
   --ff-sans-serif: var(--font-ibm-plex-sans);
   --ff-monospace: var(--font-ibm-plex-mono);
 
-  --fs-xl: 2.5rem;
-  --fs-l: 1.5rem;
-  --fs-m: 18px;
-  --fs-s: 0.8rem;
-  --fs-xs: 0.6rem;
-  --fs-xxs: 0.5rem;
+  /* Typographic scale based on Perfect Fourth ratio (1.333) */
+  --fs-2xl: 2.369rem;
+  --fs-xl: 1.777rem;
+  --fs-l: 1.333rem;
+  --fs-m: 1rem;
+  --fs-s: 0.75rem;
+  --fs-xs: 0.563rem;
 
   --c-white: #fff;
 }