ui: tweak modular scale, move from oxygen to inter

gatsby-config.js

@@ -13,7 +13,7 @@ module.exports = {
       options: {
         fonts: [
           {
-            family: `Oxygen`,
+            family: `Inter`,
             variants: [`400`, `700`],
           },
           {

src/components/DiscordButton/styles.tsx

@@ -5,7 +5,7 @@ export const DiscordButtonWrapper = styled.a`
   margin-top: 32px;
   display: flex;
   align-items: center;
-  font-family: "Oxygen", sans-serif;
+  font-family: "Montserrat", sans-serif;
   font-size: 24px;
   font-weight: 700;
   text-decoration: none;

src/components/Home/styles.tsx

@@ -1,6 +1,7 @@
 import { Link } from "gatsby"
 import Particles from "react-particles-js"
 import styled, { css } from "styled-components"
+import { fontFamily } from "../../design/typography"
 import TPHLogo from "../../images/tph-logo.svg"
 
 export const HomeWrapper = styled.header`
@@ -24,6 +25,7 @@ export const TitleWrapper = styled.div`
 
 export const Title = styled.h1`
   margin: 0;
+  font-family: ${fontFamily.header};
   font-weight: 700;
   font-size: 88px;
   text-transform: uppercase;

src/components/Markdown/styles.tsx

@@ -44,29 +44,31 @@ export const MarkdownWrapper = styled.div`
   }
 
   h1 {
-    ${modularScaleCSS(6)};
-  }
-
-  h2 {
-    ${modularScaleCSS(5)};
-  }
-
-  h3 {
     ${modularScaleCSS(4)};
   }
 
-  h4 {
+  h2 {
     ${modularScaleCSS(3)};
+
+    @media screen and (min-width: 1440px) {
+      margin-left: -27px;
+    }
   }
 
-  h5 {
+  h3 {
     ${modularScaleCSS(2)};
   }
 
-  h6 {
+  h4 {
     ${modularScaleCSS(1)};
   }
 
+  h5,
+  h6 {
+    font-size: ${BASE_FONT_SIZE}px;
+    line-height: ${BASE_LINE_HEIGHT}px;
+  }
+
   h1 .anchor svg,
   h2 .anchor svg,
   h3 .anchor svg,

src/components/Sidebar/styles.tsx

@@ -1,6 +1,7 @@
 import { Link } from "gatsby"
 import styled, { css } from "styled-components"
 import { transparentize } from "polished"
+import { fontFamily } from "../../design/typography"
 
 export const SidebarWrapper = styled.div`
   box-sizing: border-box;
@@ -36,6 +37,7 @@ export const Title = styled(Link)`
   font-weight: 700;
   padding: 20px 0 0 20px;
   text-decoration: none;
+  font-family: ${fontFamily.header};
 
   &:hover {
     opacity: 0.85;

src/design/typography.ts

@@ -1,9 +1,9 @@
-const FONT_OXYGEN = "Oxygen, sans-serif"
+const FONT_INTER = "Inter, sans-serif"
 const FONT_MONTSERRAT = "Montserrat, sans-serif"
 
-export const BASE_FONT_SIZE = 18
-export const BASE_LINE_HEIGHT = 25
-export const MODULAR_SCALE = 1.1487
+export const BASE_FONT_SIZE = 20
+export const BASE_LINE_HEIGHT = 26
+export const MODULAR_SCALE = 1.2
 
 function modularFontSize(power: number) {
   return BASE_FONT_SIZE * Math.pow(MODULAR_SCALE, power)
@@ -25,7 +25,7 @@ export function modularScale(power: number) {
 
 export const fontFamily = {
   header: FONT_MONTSERRAT,
-  body: FONT_OXYGEN,
+  body: FONT_INTER,
 }
 
 export default fontFamily