diff --git a/_includes/design/typography.html b/_includes/design/typography.html
index fbaf0b3..2f48c9f 100644
--- a/_includes/design/typography.html
+++ b/_includes/design/typography.html
@@ -1,32 +1,118 @@
 <div id="typography" class="page-header mb-4 mt-5">
     <h2>Typography</h2>
-    <p class="text-muted">Our main fonts are Source Sans Pro and Source Code Pro, made by Adobe.</p>
+    <p class="text-muted">I2P's main fonts are Source Sans Pro and Source Code Pro, made by Adobe.</p>
 </div>
 <div class="row">
-    <div class="col-12 typography__headers">
-			<div class="typography__headers__item">
-        <p class="text-black small text-muted">H1</p>
-				<h1>Protect communications from monitoring</h1>
+    <div class="col-xs-10 col-sm-10 mb-4">
+        <div class="border p-4 bg-white">
+            <div>
+            <div class="typo-text mr-2 mb-2">A</div>
+            <div class="typo-text mr-2 mb-2">B</div>
+            <div class="typo-text mr-2 mb-2">C</div>
+            <div class="typo-text mr-2 mb-2">D</div>
+            <div class="typo-text mr-2 mb-2">E</div>
+            <div class="typo-text mr-2 mb-2">F</div>
+            <div class="typo-text mr-2 mb-2">G</div>
+            <div class="typo-text mr-2 mb-2">H</div>
+            <div class="typo-text mr-2 mb-2">I</div>
+            <div class="typo-text mr-2 mb-2">J</div>
+            <div class="typo-text mr-2 mb-2">K</div>
+            <div class="typo-text mr-2 mb-2">L</div>
+            <div class="typo-text mr-2 mb-2">M</div>
+            <div class="typo-text mr-2 mb-2">N</div>
+            <div class="typo-text mr-2 mb-2">O</div>
+            <div class="typo-text mr-2 mb-2">P</div>
+            <div class="typo-text mr-2 mb-2">Q</div>
+            <div class="typo-text mr-2 mb-2">R</div>
+            <div class="typo-text mr-2 mb-2">S</div>
+            <div class="typo-text mr-2 mb-2">T</div>
+            <div class="typo-text mr-2 mb-2">U</div>
+            <div class="typo-text mr-2 mb-2">V</div>
+            <div class="typo-text mr-2 mb-2">X</div>
+            <div class="typo-text mr-2 mb-2">Y</div>
+            <div class="typo-text mr-2 mb-2">Z</div>
+            </div>
+            <div>
+            <div class="typo-text mr-2 mb-2">a</div>
+            <div class="typo-text mr-2 mb-2">b</div>
+            <div class="typo-text mr-2 mb-2">c</div>
+            <div class="typo-text mr-2 mb-2">d</div>
+            <div class="typo-text mr-2 mb-2">e</div>
+            <div class="typo-text mr-2 mb-2">f</div>
+            <div class="typo-text mr-2 mb-2">g</div>
+            <div class="typo-text mr-2 mb-2">h</div>
+            <div class="typo-text mr-2 mb-2">i</div>
+            <div class="typo-text mr-2 mb-2">j</div>
+            <div class="typo-text mr-2 mb-2">k</div>
+            <div class="typo-text mr-2 mb-2">l</div>
+            <div class="typo-text mr-2 mb-2">m</div>
+            <div class="typo-text mr-2 mb-2">n</div>
+            <div class="typo-text mr-2 mb-2">o</div>
+            <div class="typo-text mr-2 mb-2">p</div>
+            <div class="typo-text mr-2 mb-2">q</div>
+            <div class="typo-text mr-2 mb-2">r</div>
+            <div class="typo-text mr-2 mb-2">s</div>
+            <div class="typo-text mr-2 mb-2">t</div>
+            <div class="typo-text mr-2 mb-2">u</div>
+            <div class="typo-text mr-2 mb-2">v</div>
+            <div class="typo-text mr-2 mb-2">x</div>
+            <div class="typo-text mr-2 mb-2">y</div>
+            <div class="typo-text mr-2 mb-2">z</div>
+            </div>
+                        <div>
+            <div class="typo-text mr-2">0</div>
+            <div class="typo-text mr-2">1</div>
+            <div class="typo-text mr-2">2</div>
+            <div class="typo-text mr-2">3</div>
+            <div class="typo-text mr-2">4</div>
+            <div class="typo-text mr-2">5</div>
+            <div class="typo-text mr-2">6</div>
+            <div class="typo-text mr-2">7</div>
+            <div class="typo-text mr-2">8</div>
+            <div class="typo-text mr-2">9</div>
+            </div>
+        </div>
+    </div>
+</div>
+<div class=row">
+            <h4>Font sizes</h4>
+            <p class="text-muted">There are 6 different font sizes for headers, ranging from H1 to H6</p>
+    <div class="col-10 typography__headers">
+			<div class="typography__headers__item mb-3">
+                <div class="border p-4 bg-white">
+				    <h1>Protect communications from monitoring</h1>
+                    <p class="text-muted">40 px - H1</p>
+                </div>
 			</div>
-			<div class="typography__headers__item">
-        <p class="text-black small text-muted">H2</p>
-				<h2>Protect communications from monitoring</h2>
+			<div class="typography__headers__item mb-3">
+                <div class="border p-4 bg-white">
+                    <h2>Protect communications from monitoring</h2>
+                    <p class="text-muted">32 px - H2</p>
+                </div>
 			</div>
-			<div class="typography__headers__item">
-        <p class="text-black small text-muted">H3</p>
-				<h3>Protect communications from monitoring</h3>
+			<div class="typography__headers__item mb-3">
+                <div class="border p-4 bg-white">
+                    <h3>Protect communications from monitoring</h3>
+                    <p class="text-muted">28 px - H3</p>
+                </div>
 			</div>
-			<div class="typography__headers__item">
-        <p class="text-black small text-muted">H4</p>
-				<h4>Protect communications from monitoring</h4>
+			<div class="typography__headers__item mb-3">
+                <div class="border p-4 bg-white">
+                    <h4>Protect communications from monitoring</h4>
+                    <p class="text-muted">24 px - H4</p>
+                </div>
 			</div>
-			<div class="typography__headers__item">
-        <p class="text-black small text-muted">H5</p>
-				<h5>Protect communications from monitoring</h5>
+			<div class="typography__headers__item mb-3">
+                <div class="border p-4 bg-white">
+                    <h5>Protect communications from monitoring</h5>
+                    <p class="text-muted">20 px - H5</p>
+                </div>
 			</div>
-			<div class="typography__headers__item">
-        <p class="text-black small text-muted">H6</p>
-				<h6>Protect communications from monitoring</h6>
+			<div class="typography__headers__item mb-3">
+                <div class="border p-4 bg-white">
+                    <h6>Protect communications from monitoring</h6>
+                    <p class="text-muted">16 px - H6</p>
+                </div>
 			</div>
 
 			<div class="typography__headers__item">
diff --git a/_site/assets/styles/layout.scss b/_site/assets/styles/layout.scss
index f47bfce..018d3d7 100644
--- a/_site/assets/styles/layout.scss
+++ b/_site/assets/styles/layout.scss
@@ -161,3 +161,7 @@
 .b-border {
   border-bottom: 2px solid lightgrey !important;
 }
+
+.typo-text {
+  display: inline-block;
+}
diff --git a/_site/assets/styles/main.css b/_site/assets/styles/main.css
index 1f24bfc..6735ec4 100644
--- a/_site/assets/styles/main.css
+++ b/_site/assets/styles/main.css
@@ -55,6 +55,8 @@
 
 .b-border { border-bottom: 2px solid lightgrey !important; }
 
+.typo-text { display: inline-block; }
+
 .color { height: 100px; }
 
 .grid { height: 100px; background-color: #4661A9; border-radius: 7px; }
diff --git a/_site/components/index.html b/_site/components/index.html
index 1555902..b60df72 100644
--- a/_site/components/index.html
+++ b/_site/components/index.html
@@ -340,7 +340,7 @@
 					<li><a href="#">data policy</a></li>
 					<li><a href="#">legal</a></li>
 					<li><a href="#">sitemap</a></li>
-					<li><a href="#">ipressum</a></li>
+					<li><a href="#">impressum</a></li>
 				</ul>
 			</div>
 		</div>
diff --git a/assets/styles/layout.scss b/assets/styles/layout.scss
index f47bfce..018d3d7 100644
--- a/assets/styles/layout.scss
+++ b/assets/styles/layout.scss
@@ -161,3 +161,7 @@
 .b-border {
   border-bottom: 2px solid lightgrey !important;
 }
+
+.typo-text {
+  display: inline-block;
+}