refact: extract typography constants

src/components/Markdown/styles.tsx

@@ -1,8 +1,10 @@
 import styled, { css } from "styled-components"
-
-const BASE_FONT_SIZE = 18
-const BASE_LINE_HEIGHT = 26
-const MODULAR_SCALE = 1.1487
+import {
+  BASE_FONT_SIZE,
+  BASE_LINE_HEIGHT,
+  MODULAR_SCALE,
+  fontFamily,
+} from "../../design/typography"
 
 function modularFontSize(power: number) {
   return BASE_FONT_SIZE * Math.pow(MODULAR_SCALE, power)
@@ -36,7 +38,7 @@ export const MarkdownWrapper = styled.div`
   h4,
   h5,
   h6 {
-    font-family: "Montserrat";
+    font-family: ${fontFamily.header};
     letter-spacing: -1.75px;
     margin-top: ${BASE_LINE_HEIGHT * 2}px;
     margin-bottom: ${BASE_LINE_HEIGHT}px;

src/design/typography.ts

@@ -0,0 +1,13 @@
+const FONT_OXYGEN = "Oxygen, 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 fontFamily = {
+  header: FONT_MONTSERRAT,
+  body: FONT_OXYGEN,
+}
+
+export default fontFamily

src/globalStyles.tsx

@@ -1,12 +1,17 @@
 import { createGlobalStyle } from "styled-components"
+import {
+  BASE_FONT_SIZE,
+  BASE_LINE_HEIGHT,
+  fontFamily,
+} from "./design/typography"
 
 export const GlobalStyles = createGlobalStyle`
   html {
-    font-family: Oxygen;
+    font-family: ${fontFamily.body};
   }
 
   body {
-    font-size: 18px;
-    line-height: 25px;
+    font-size: ${BASE_FONT_SIZE}px;
+    line-height: ${BASE_LINE_HEIGHT}px;
   }
 `