diff --git a/app/Footer.tsx b/app/Footer.tsx
index a1414c4..d883f82 100644
--- a/app/Footer.tsx
+++ b/app/Footer.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import styles from "../styles/Footer.module.scss";
+import styles from "../styles/modules/Footer.module.scss";
 import Image from "next/image";
 export default function Footer() {
 	return (
diff --git a/app/Nav.tsx b/app/Nav.tsx
index 63dc1ca..7693da8 100644
--- a/app/Nav.tsx
+++ b/app/Nav.tsx
@@ -1,5 +1,5 @@
 "use client";
-import styles from "../styles/Nav.module.scss";
+import styles from "../styles/modules/Nav.module.scss";
 import Image from "next/image";
 import Link from "next/link";
 import { useEffect } from "react";
diff --git a/app/articles/[categoryName]/[articleName]/ContentTable.tsx b/app/articles/[categoryName]/[articleName]/ContentTable.tsx
index 8c0c33b..9b8db5f 100644
--- a/app/articles/[categoryName]/[articleName]/ContentTable.tsx
+++ b/app/articles/[categoryName]/[articleName]/ContentTable.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import prisma from "../../../../lib/prisma";
-import styles from "../../../../styles/TutorialContentTable.module.scss";
+import styles from "../../../../styles/modules/TutorialContentTable.module.scss";
 import { Article, ContentTableEntry } from "@prisma/client";
 
 export default function ContentTable({
diff --git a/app/articles/[categoryName]/[articleName]/Sidebar.tsx b/app/articles/[categoryName]/[articleName]/Sidebar.tsx
index 62d18c1..bedbd60 100644
--- a/app/articles/[categoryName]/[articleName]/Sidebar.tsx
+++ b/app/articles/[categoryName]/[articleName]/Sidebar.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import styles from "../../../../styles/Sidebar.module.scss";
+import styles from "../../../../styles/modules/Sidebar.module.scss";
 export default function Sidebar() {
 	return (
 		<div className={styles.sidebar}>
diff --git a/app/articles/[categoryName]/[articleName]/page.tsx b/app/articles/[categoryName]/[articleName]/page.tsx
index fa8d6e2..094efb9 100644
--- a/app/articles/[categoryName]/[articleName]/page.tsx
+++ b/app/articles/[categoryName]/[articleName]/page.tsx
@@ -1,7 +1,7 @@
 import { marked } from "marked";
 import ContentTable from "./ContentTable";
 import Sidebar from "./Sidebar";
-import styles from "../../../../styles/Tutorial.module.scss";
+import styles from "../../../../styles/modules/Tutorial.module.scss";
 import LoadMarkdown from "./LoadMarkdown";
 import prisma from "../../../../lib/prisma";
 import { Article, Category, ContentTableEntry } from "@prisma/client";
diff --git a/app/articles/[categoryName]/page.tsx b/app/articles/[categoryName]/page.tsx
index 71df7e8..1a26f8b 100644
--- a/app/articles/[categoryName]/page.tsx
+++ b/app/articles/[categoryName]/page.tsx
@@ -1,4 +1,4 @@
-import styles from "../../../styles/Category.module.scss";
+import styles from "../../../styles/modules/Category.module.scss";
 import Link from "next/link";
 import prisma from "../../../lib/prisma";
 import { Article, Category } from "@prisma/client";
diff --git a/app/articles/page.tsx b/app/articles/page.tsx
index 6ab00cd..1bd6654 100644
--- a/app/articles/page.tsx
+++ b/app/articles/page.tsx
@@ -1,4 +1,4 @@
-import styles from "../../styles/CategoryList.module.scss";
+import styles from "../../styles/modules/CategoryList.module.scss";
 import Link from "next/link";
 import prisma from "../../lib/prisma";
 import { Category, Svg, Prisma } from "@prisma/client";
diff --git a/app/layout.tsx b/app/layout.tsx
index e1f9d7a..edea00e 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,5 +1,5 @@
 import "../styles/globals.scss";
-import "../styles/colorVariables.scss";
+import "../styles/variables_colors.scss";
 import "../styles/variables.scss";
 import Nav from "./Nav";
 import Footer from "./Footer";
diff --git a/app/testing/typography/page.tsx b/app/testing/typography/page.tsx
new file mode 100644
index 0000000..e0176f8
--- /dev/null
+++ b/app/testing/typography/page.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+
+export default function Typograhy() {
+	return (
+		<div>
+			<h1>Testing this headline</h1>
+			<h2>Testing this headline</h2>
+			<h3>Testing this headline</h3>
+			<h4>Testing this headline</h4>
+			<h5>Testing this headline</h5>
+			<h6>Testing this headline</h6>
+			<br />
+			<p>
+				This is a paragraph Lorem ipsum dolor sit, amet consectetur adipisicing
+				elit. Dolores enim unde obcaecati ea harum voluptate, nisi quia. Quod,
+				et autem! Aperiam mollitia ullam ab eaque quidem facilis est ducimus
+				delectus.
+			</p>
+			<br />
+			<a href="#">This is a link</a>
+		</div>
+	);
+}
diff --git a/styles/globals.scss b/styles/globals.scss
index 1dbf9ab..ee12ec8 100644
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -1,5 +1,7 @@
-@import "colorVariables.scss";
+@import "variables_colors.scss";
 @import "variables.scss";
+@import "typography.scss";
+
 * {
 	box-sizing: border-box;
 	padding: 0;
@@ -15,13 +17,7 @@
 html,
 body {
 	max-width: 100vw;
-	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-		"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-		sans-serif;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
 	background-color: var(--color-background-body);
-	color: var(--color-font);
 	min-height: 100vh;
 	display: flex;
 	flex-direction: column;
@@ -30,28 +26,3 @@ body {
 		flex: 1;
 	}
 }
-
-p,
-a {
-	letter-spacing: 1px;
-	&:visited {
-		color: var(--color-font);
-	}
-}
-
-a {
-	font-weight: bold;
-	text-decoration: none;
-	color: var(--color-font-link);
-	transition: color 50ms linear;
-
-	&:hover {
-		text-decoration: underline;
-		color: var(--color-font-link-hover) !important;
-	}
-
-	&:visited {
-		text-decoration: none;
-		color: var(--color-font-link);
-	}
-}
diff --git a/styles/Category.module.scss b/styles/modules/Category.module.scss
similarity index 97%
rename from styles/Category.module.scss
rename to styles/modules/Category.module.scss
index f4bbd44..e5eff6a 100644
--- a/styles/Category.module.scss
+++ b/styles/modules/Category.module.scss
@@ -1,4 +1,4 @@
-@import "variables.scss";
+@import "../variables.scss";
 .category {
 	h1 {
 		text-align: center;
diff --git a/styles/CategoryList.module.scss b/styles/modules/CategoryList.module.scss
similarity index 96%
rename from styles/CategoryList.module.scss
rename to styles/modules/CategoryList.module.scss
index f4138b0..7df209f 100644
--- a/styles/CategoryList.module.scss
+++ b/styles/modules/CategoryList.module.scss
@@ -1,9 +1,6 @@
-@import "variables.scss";
+@import "../variables.scss";
 .categoryList {
-	h1 {
-		text-align: center;
-		font-size: 1.5em;
-	}
+	text-align: center;
 
 	.content {
 		margin-top: 30px;
diff --git a/styles/Footer.module.scss b/styles/modules/Footer.module.scss
similarity index 97%
rename from styles/Footer.module.scss
rename to styles/modules/Footer.module.scss
index 8144e99..3087c83 100644
--- a/styles/Footer.module.scss
+++ b/styles/modules/Footer.module.scss
@@ -1,4 +1,4 @@
-@import "variables.scss";
+@import "../variables.scss";
 .footer {
 	padding: 200px 15px 30px 15px;
 	display: flex;
diff --git a/styles/Nav.module.scss b/styles/modules/Nav.module.scss
similarity index 99%
rename from styles/Nav.module.scss
rename to styles/modules/Nav.module.scss
index 19e9451..770743c 100644
--- a/styles/Nav.module.scss
+++ b/styles/modules/Nav.module.scss
@@ -1,4 +1,4 @@
-@import "variables.scss";
+@import "../variables.scss";
 .nav {
 	background-color: var(--color-background-nav);
 	height: $nav-height-inital;
diff --git a/styles/Sidebar.module.scss b/styles/modules/Sidebar.module.scss
similarity index 95%
rename from styles/Sidebar.module.scss
rename to styles/modules/Sidebar.module.scss
index 5067c48..337e731 100644
--- a/styles/Sidebar.module.scss
+++ b/styles/modules/Sidebar.module.scss
@@ -1,4 +1,4 @@
-@import "variables.scss";
+@import "../variables.scss";
 
 .sidebar {
 	.stickyContainer {
diff --git a/styles/Tutorial.module.scss b/styles/modules/Tutorial.module.scss
similarity index 93%
rename from styles/Tutorial.module.scss
rename to styles/modules/Tutorial.module.scss
index 516c30c..6a80690 100644
--- a/styles/Tutorial.module.scss
+++ b/styles/modules/Tutorial.module.scss
@@ -1,4 +1,4 @@
-@import "variables.scss";
+@import "../variables.scss";
 .tutorial {
 	display: grid;
 	gap: 70px;
diff --git a/styles/TutorialContentTable.module.scss b/styles/modules/TutorialContentTable.module.scss
similarity index 94%
rename from styles/TutorialContentTable.module.scss
rename to styles/modules/TutorialContentTable.module.scss
index daf6c65..401c083 100644
--- a/styles/TutorialContentTable.module.scss
+++ b/styles/modules/TutorialContentTable.module.scss
@@ -1,4 +1,5 @@
-@import "variables.scss";
+@import "../variables.scss";
+
 .tutorialContentTable {
 	@media (max-width: $tutorial-breakpoint-2) {
 		display: none;
diff --git a/styles/typography.scss b/styles/typography.scss
new file mode 100644
index 0000000..593c057
--- /dev/null
+++ b/styles/typography.scss
@@ -0,0 +1,72 @@
+// This file includes styles for text and font styles in the project.
+// It does not include color styles, which are defined in the 'variables_colors.scss' and 'global.scss' files.
+
+@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
+@import "variables_colors.scss";
+@import "variables.scss";
+
+html,
+body {
+	font-family: "Roboto", sans-serif;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	color: var(--color-font);
+	font-size: $font-size-default;
+	letter-spacing: $font-letter-spacing-default;
+}
+
+/* Headings */
+h1 {
+	font-size: calc($font-size-default + $font-size-headline-step * 6);
+	font-weight: bold;
+	letter-spacing: $font-letter-spacing-headline-large;
+}
+
+h2 {
+	// 5 skipped on purpose
+	font-size: calc($font-size-default + $font-size-headline-step * 4);
+	font-weight: bold;
+	letter-spacing: $font-letter-spacing-headline-medium;
+}
+
+h3 {
+	font-size: calc($font-size-default + $font-size-headline-step * 3);
+	font-weight: bold;
+	letter-spacing: $font-letter-spacing-headline-small;
+}
+
+h4 {
+	font-size: calc($font-size-default + $font-size-headline-step * 2);
+	font-weight: bold;
+	letter-spacing: $font-letter-spacing-headline-small;
+}
+
+h5 {
+	font-size: calc($font-size-default + $font-size-headline-step * 1);
+	font-weight: bold;
+	letter-spacing: $font-letter-spacing-headline-small;
+}
+
+h6 {
+	font-size: $font-size-default;
+	font-weight: bold;
+	letter-spacing: 1.25px;
+}
+
+/* General Texts */
+a {
+	font-weight: bold;
+	text-decoration: none;
+	color: var(--color-font-link);
+	transition: color 50ms linear;
+
+	&:hover {
+		text-decoration: underline;
+		color: var(--color-font-link-hover) !important;
+	}
+
+	&:visited {
+		text-decoration: none;
+		color: var(--color-font-link);
+	}
+}
diff --git a/styles/variables.scss b/styles/variables.scss
index 385e28d..0592e52 100644
--- a/styles/variables.scss
+++ b/styles/variables.scss
@@ -1,3 +1,13 @@
+// This file stores all SCSS variables in one place to simplify the use of variables throughout the project.
+
+/* Typography */
+$font-size-default: 1em;
+$font-size-headline-step: 0.12em;
+$font-letter-spacing-default: 1px;
+$font-letter-spacing-headline-large: 2px;
+$font-letter-spacing-headline-medium: 1.5px;
+$font-letter-spacing-headline-small: 1.25px;
+
 /* Tutorial Page */
 $tutorial-grid-sticky-top: 60px;
 $tutorial-content-table-width: 200px;
@@ -28,6 +38,5 @@ $categoryList-breakpoint-1: 850px;
 $categoryList-breakpoint-2: 600px;
 
 /* Category */
-
 $category-breakpoint-1: 800px;
 $category-breakpoint-2: 550px;
diff --git a/styles/colorVariables.scss b/styles/variables_colors.scss
similarity index 89%
rename from styles/colorVariables.scss
rename to styles/variables_colors.scss
index ebdcba2..91f7294 100644
--- a/styles/colorVariables.scss
+++ b/styles/variables_colors.scss
@@ -1,3 +1,7 @@
+// We use pure CSS variables in this file because SCSS variables get hardcoded after compiling,
+// which means the dynamic changing effect is lost.
+// Using CSS variables allows us to change the values at runtime
+
 :root {
 	/*! By default colors are in DARK mode */
 	/* Colors: General */