diff --git a/example/android/app/src/main/assets/fonts/ReadexPro-SemiBold.ttf b/example/android/app/src/main/assets/fonts/ReadexPro-SemiBold.ttf
new file mode 100644
index 00000000..5ca73122
Binary files /dev/null and b/example/android/app/src/main/assets/fonts/ReadexPro-SemiBold.ttf differ
diff --git a/example/android/link-assets-manifest.json b/example/android/link-assets-manifest.json
index 88ef8333..cdfdefbc 100644
--- a/example/android/link-assets-manifest.json
+++ b/example/android/link-assets-manifest.json
@@ -101,6 +101,10 @@
       "path": "assets/fonts/ReadexPro/ReadexPro-Regular.ttf",
       "sha1": "93e4080794b725f216a94b57ed62a51bc77bce91"
     },
+    {
+      "path": "assets/fonts/ReadexPro/ReadexPro-SemiBold.ttf",
+      "sha1": "b4ec28a6b1ba6ed730beb37f06b1b81c5e2163a3"
+    },
     {
       "path": "assets/fonts/DMMono/DMMono-Medium.ttf",
       "sha1": "0ceec76262c08cec6c956e1ffe2bfc60321e8f58"
diff --git a/example/assets/fonts/ReadexPro/ReadexPro-SemiBold.ttf b/example/assets/fonts/ReadexPro/ReadexPro-SemiBold.ttf
new file mode 100644
index 00000000..5ca73122
Binary files /dev/null and b/example/assets/fonts/ReadexPro/ReadexPro-SemiBold.ttf differ
diff --git a/example/ios/ExampleApp.xcodeproj/project.pbxproj b/example/ios/ExampleApp.xcodeproj/project.pbxproj
index 8f25af66..547e7d6f 100644
--- a/example/ios/ExampleApp.xcodeproj/project.pbxproj
+++ b/example/ios/ExampleApp.xcodeproj/project.pbxproj
@@ -17,6 +17,7 @@
 		1496A8B0A02F4D198C6837DB /* TitilliumSansPro-Bold-Italic.otf in Resources */ = {isa = PBXBuildFile; fileRef = 6D875C01023D4429A74DBB0A /* TitilliumSansPro-Bold-Italic.otf */; };
 		18D8B5E73B2B4973B758990E /* TitilliumSansPro-Black-Italic.otf in Resources */ = {isa = PBXBuildFile; fileRef = D5C8F0FAB4AC4DE99E947795 /* TitilliumSansPro-Black-Italic.otf */; };
 		1BC0A570344341E6987FD8D9 /* TitilliumWeb-Italic.ttf in Resources */ = {isa = PBXBuildFile; fileRef = DE7209C9D8E04B9A9E908DC6 /* TitilliumWeb-Italic.ttf */; };
+		2097F76B68D349EFBD2A8A4C /* ReadexPro-SemiBold.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 2473ADE2FEB04232B7E24471 /* ReadexPro-SemiBold.ttf */; };
 		2A76089ABE4E4D1E8E88ECFE /* TitilliumWeb-BoldItalic.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 9AB3748E146C445A8EDEBF6B /* TitilliumWeb-BoldItalic.ttf */; };
 		3347048F785740F8889D46E8 /* TitilliumWeb-SemiBoldItalic.ttf in Resources */ = {isa = PBXBuildFile; fileRef = A0DECA6E14564D48A132C4F2 /* TitilliumWeb-SemiBoldItalic.ttf */; };
 		346BED8DBF064AC6A83A1DE8 /* TitilliumSansPro-Semibold.otf in Resources */ = {isa = PBXBuildFile; fileRef = 828AB8F6DBFA4CE19BF7EA31 /* TitilliumSansPro-Semibold.otf */; };
@@ -67,6 +68,7 @@
 		1A640F5E715149C2821B1867 /* TitilliumSansPro-Light.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "TitilliumSansPro-Light.otf"; path = "../assets/fonts/TitilliumSansPro/TitilliumSansPro-Light.otf"; sourceTree = "<group>"; };
 		1CFF1D50D36F43F2BC0D124F /* LICENSE.txt */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = LICENSE.txt; path = ../assets/fonts/TitilliumSansPro/LICENSE.txt; sourceTree = "<group>"; };
 		1E50F38389644583B83DCCCA /* DMMono-Medium.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "DMMono-Medium.ttf"; path = "../assets/fonts/DMMono/DMMono-Medium.ttf"; sourceTree = "<group>"; };
+		2473ADE2FEB04232B7E24471 /* ReadexPro-SemiBold.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "ReadexPro-SemiBold.ttf"; path = "../assets/fonts/ReadexPro/ReadexPro-SemiBold.ttf"; sourceTree = "<group>"; };
 		2AC7977FFCF2471A93B6E66B /* TitilliumWeb-Light.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "TitilliumWeb-Light.ttf"; path = "../assets/fonts/TitilliumWeb/TitilliumWeb-Light.ttf"; sourceTree = "<group>"; };
 		2D62B8E69F8B41E6B8432E86 /* TitilliumWeb-Bold.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = undefined; includeInIndex = 0; lastKnownFileType = unknown; name = "TitilliumWeb-Bold.ttf"; path = "../assets/fonts/TitilliumWeb/TitilliumWeb-Bold.ttf"; sourceTree = "<group>"; };
 		3B4392A12AC88292D35C810B /* Pods-ExampleApp.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-ExampleApp.debug.xcconfig"; path = "Target Support Files/Pods-ExampleApp/Pods-ExampleApp.debug.xcconfig"; sourceTree = "<group>"; };
@@ -219,6 +221,7 @@
 				3DE40C756739486AA1D51FCE /* TitilliumSansPro-Thin-Italic.otf */,
 				4FC6145EC4A14796982CAE22 /* TitilliumSansPro-Thin.otf */,
 				1CFF1D50D36F43F2BC0D124F /* LICENSE.txt */,
+				2473ADE2FEB04232B7E24471 /* ReadexPro-SemiBold.ttf */,
 			);
 			name = Resources;
 			path = "";
@@ -357,6 +360,7 @@
 				EC846EA2DBCB4719B953F423 /* TitilliumSansPro-Thin-Italic.otf in Resources */,
 				116E6480B9914941A6254F71 /* TitilliumSansPro-Thin.otf in Resources */,
 				493FA456AB57478891021E84 /* LICENSE.txt in Resources */,
+				2097F76B68D349EFBD2A8A4C /* ReadexPro-SemiBold.ttf in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
diff --git a/example/ios/ExampleApp/Info.plist b/example/ios/ExampleApp/Info.plist
index 310cbaa9..c29b3205 100644
--- a/example/ios/ExampleApp/Info.plist
+++ b/example/ios/ExampleApp/Info.plist
@@ -80,6 +80,7 @@
 		<string>TitilliumSansPro-Semibold.otf</string>
 		<string>TitilliumSansPro-Thin-Italic.otf</string>
 		<string>TitilliumSansPro-Thin.otf</string>
+		<string>ReadexPro-SemiBold.ttf</string>
 	</array>
 </dict>
 </plist>
diff --git a/example/ios/link-assets-manifest.json b/example/ios/link-assets-manifest.json
index 88ef8333..cdfdefbc 100644
--- a/example/ios/link-assets-manifest.json
+++ b/example/ios/link-assets-manifest.json
@@ -101,6 +101,10 @@
       "path": "assets/fonts/ReadexPro/ReadexPro-Regular.ttf",
       "sha1": "93e4080794b725f216a94b57ed62a51bc77bce91"
     },
+    {
+      "path": "assets/fonts/ReadexPro/ReadexPro-SemiBold.ttf",
+      "sha1": "b4ec28a6b1ba6ed730beb37f06b1b81c5e2163a3"
+    },
     {
       "path": "assets/fonts/DMMono/DMMono-Medium.ttf",
       "sha1": "0ceec76262c08cec6c956e1ffe2bfc60321e8f58"
diff --git a/example/src/pages/Typography.tsx b/example/src/pages/Typography.tsx
index 83e13ca9..8a30f585 100644
--- a/example/src/pages/Typography.tsx
+++ b/example/src/pages/Typography.tsx
@@ -4,6 +4,7 @@ import {
   ButtonText,
   Caption,
   Chip,
+  Divider,
   H1,
   H2,
   H3,
@@ -17,7 +18,14 @@ import {
   LabelLink,
   LabelSmall,
   LabelSmallAlt,
-  VSpacer
+  MdH1,
+  MdH2,
+  MdH3,
+  MdH4,
+  MdH5,
+  MdH6,
+  VSpacer,
+  VStack
 } from "@pagopa/io-app-design-system";
 import * as React from "react";
 import { Alert, StyleSheet, View } from "react-native";
@@ -35,36 +43,53 @@ const styles = StyleSheet.create({
 
 export const Typography = () => (
   <Screen>
-    <HeroRow />
-    <H1Row />
-    <H2Row />
-    <H3Row />
-    <H4Row />
-    <H5Row />
-    <H6Row />
-
-    <ButtonTextRow />
-    <CaptionRow />
-    <ChipRow />
-
-    <Body>Body</Body>
-    <Body>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a felis
-      congue, congue leo sit amet, semper ex. Nulla consectetur non quam vel
-      porttitor. Vivamus ac ex non nunc pellentesque molestie. Aliquam id lorem
-      aliquam, aliquam massa eget, commodo erat. Maecenas finibus dui massa,
-      eget pharetra mauris posuere semper.
-    </Body>
-    <VSpacer size={40} />
-    <BodyMonospace>BodyMonoSpace</BodyMonospace>
-    <VSpacer size={40} />
+    <VStack space={40}>
+      <HeroRow />
+      <H1Row />
+      <H2Row />
+      <H3Row />
+      <H4Row />
+      <H5Row />
+      <H6Row />
+
+      <ButtonTextRow />
+      <CaptionRow />
+      <ChipRow />
+
+      <VStack space={16}>
+        <Body>Body</Body>
+        <Body>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a felis
+          congue, congue leo sit amet, semper ex. Nulla consectetur non quam vel
+          porttitor. Vivamus ac ex non nunc pellentesque molestie. Aliquam id
+          lorem aliquam, aliquam massa eget, commodo erat. Maecenas finibus dui
+          massa, eget pharetra mauris posuere semper.
+        </Body>
+        <BodyMonospace>BodyMonoSpace</BodyMonospace>
+      </VStack>
+      <VStack space={16}>
+        <LabelSmallRow />
+        <LabelSmallAltRow />
+        <LabelRow />
+        <LabelLink onPress={() => Alert.alert("onPress LabelLink!")}>
+          LabelLink
+        </LabelLink>
+      </VStack>
+    </VStack>
+
+    <VSpacer size={48} />
+
+    <Divider />
+    <VSpacer size={24} />
+    <VStack space={32}>
+      <MdH1Row />
+      <MdH2Row />
+      <MdH3Row />
+      <MdH4Row />
+      <MdH5Row />
+      <MdH6Row />
+    </VStack>
 
-    <LabelSmallRow />
-    <LabelSmallAltRow />
-    <LabelRow />
-    <LabelLink onPress={() => Alert.alert("onPress LabelLink!")}>
-      LabelLink
-    </LabelLink>
     <VSpacer size={40} />
   </Screen>
 );
@@ -81,174 +106,177 @@ export const DarkBackgroundTypographicScale = () => (
 );
 
 export const HeroRow = () => (
-  <>
-    <View>
-      <Hero>{getTitle("Hero")}</Hero>
-      <Hero>{getLongerTitle("Hero")}</Hero>
-    </View>
-    <VSpacer size={40} />
-  </>
+  <VStack space={4}>
+    <Hero>{getTitle("Hero")}</Hero>
+    <Hero>{getLongerTitle("Hero")}</Hero>
+  </VStack>
 );
 
 export const H1Row = () => (
-  <>
-    <View>
-      <H1>{getTitle("H1")}</H1>
-      <H1 style={styles.distancedTitle}>{getLongerTitle("H1")}</H1>
-    </View>
-    <VSpacer size={40} />
-  </>
+  <VStack space={4}>
+    <H1>{getTitle("H1")}</H1>
+    <H1 style={styles.distancedTitle}>{getLongerTitle("H1")}</H1>
+  </VStack>
 );
 
 export const H2Row = () => (
-  <>
-    <View>
-      <H2>{getTitle("H2")}</H2>
-      <H2 style={styles.distancedTitle}>{getLongerTitle("H2")}</H2>
-    </View>
-    <VSpacer size={40} />
-  </>
+  <VStack space={4}>
+    <H2>{getTitle("H2")}</H2>
+    <H2 style={styles.distancedTitle}>{getLongerTitle("H2")}</H2>
+  </VStack>
 );
 
 export const H3Row = () => (
-  <>
-    <View style={styles.row}>
-      <H3>Header H3</H3>
-      <HSpacer size={16} />
-      <H3 color="grey-650">Header H3</H3>
-      <HSpacer size={16} />
-      <View style={{ backgroundColor: IOColors["grey-700"] }}>
-        <H3 color={"white"}>Header H3</H3>
-      </View>
+  <View style={styles.row}>
+    <H3>Header H3</H3>
+    <HSpacer size={16} />
+    <H3 color="grey-650">Header H3</H3>
+    <HSpacer size={16} />
+    <View style={{ backgroundColor: IOColors["grey-700"] }}>
+      <H3 color={"white"}>Header H3</H3>
     </View>
-    <VSpacer size={40} />
-  </>
+  </View>
 );
 
 export const H4Row = () => (
-  <>
-    <View style={styles.row}>
-      {/* Bold */}
-      <H4>Header H4</H4>
-      <HSpacer size={16} />
-      <H4 color="blueIO-500">Header H4</H4>
-      <HSpacer size={16} />
-      <View style={{ backgroundColor: IOColors["grey-700"] }}>
-        <H4 color={"white"}>Header H4</H4>
-      </View>
+  <View style={styles.row}>
+    {/* Bold */}
+    <H4>Header H4</H4>
+    <HSpacer size={16} />
+    <H4 color="blueIO-500">Header H4</H4>
+    <HSpacer size={16} />
+    <View style={{ backgroundColor: IOColors["grey-700"] }}>
+      <H4 color={"white"}>Header H4</H4>
     </View>
-    <VSpacer size={40} />
-  </>
+  </View>
 );
 
 export const H5Row = () => (
-  <>
-    <View style={styles.row}>
-      <H5>Header H5</H5>
-      <HSpacer size={16} />
-      <H5 color="grey-650">Header H5</H5>
-      <HSpacer size={16} />
-      <H5 color={"blueIO-500"}>Header H5</H5>
-    </View>
-    <VSpacer size={40} />
-  </>
+  <View style={styles.row}>
+    <H5>Header H5</H5>
+    <HSpacer size={16} />
+    <H5 color="grey-650">Header H5</H5>
+    <HSpacer size={16} />
+    <H5 color={"blueIO-500"}>Header H5</H5>
+  </View>
 );
 
 export const H6Row = () => (
-  <>
-    <View style={styles.row}>
-      <H6>Header H6</H6>
-      <HSpacer size={16} />
-      <H6 color="grey-650">Header H6</H6>
-      <HSpacer size={16} />
-      <H6 color={"blueIO-500"}>Header H6</H6>
-    </View>
-    <VSpacer size={40} />
-  </>
+  <View style={styles.row}>
+    <H6>Header H6</H6>
+    <HSpacer size={16} />
+    <H6 color="grey-650">Header H6</H6>
+    <HSpacer size={16} />
+    <H6 color={"blueIO-500"}>Header H6</H6>
+  </View>
 );
 
 export const ButtonTextRow = () => (
-  <>
-    <View style={styles.row}>
-      <View style={{ backgroundColor: IOColors["grey-700"] }}>
-        <ButtonText>ButtonText</ButtonText>
-      </View>
-      <HSpacer size={16} />
-      <ButtonText color="grey-700">ButtonText</ButtonText>
-      <HSpacer size={16} />
-      <ButtonText color="blueIO-500">ButtonText</ButtonText>
+  <View style={styles.row}>
+    <View style={{ backgroundColor: IOColors["grey-700"] }}>
+      <ButtonText>ButtonText</ButtonText>
     </View>
-    <VSpacer size={40} />
-  </>
+    <HSpacer size={16} />
+    <ButtonText color="grey-700">ButtonText</ButtonText>
+    <HSpacer size={16} />
+    <ButtonText color="blueIO-500">ButtonText</ButtonText>
+  </View>
 );
 
 export const CaptionRow = () => (
-  <>
-    <View style={styles.row}>
-      <Caption>Caption</Caption>
-      <HSpacer size={16} />
-      <Caption color="grey-650">Caption</Caption>
-      <HSpacer size={16} />
-      <Caption color={"blueIO-500"}>Caption</Caption>
-    </View>
-    <VSpacer size={40} />
-  </>
+  <View style={styles.row}>
+    <Caption>Caption</Caption>
+    <HSpacer size={16} />
+    <Caption color="grey-650">Caption</Caption>
+    <HSpacer size={16} />
+    <Caption color={"blueIO-500"}>Caption</Caption>
+  </View>
 );
 
 export const ChipRow = () => (
-  <>
-    <View style={styles.row}>
-      <Chip>Chip</Chip>
-      <HSpacer size={16} />
-      <Chip color="grey-650">Chip</Chip>
-      <HSpacer size={16} />
-      <Chip color={"blueIO-500"}>Chip</Chip>
-    </View>
-    <VSpacer size={40} />
-  </>
+  <View style={styles.row}>
+    <Chip>Chip</Chip>
+    <HSpacer size={16} />
+    <Chip color="grey-650">Chip</Chip>
+    <HSpacer size={16} />
+    <Chip color={"blueIO-500"}>Chip</Chip>
+  </View>
 );
 
 export const LabelSmallRow = () => (
-  <>
-    <View style={styles.row}>
-      <LabelSmall>Label small</LabelSmall>
-      <HSpacer size={16} />
-      <LabelSmall color={"bluegrey"}>Label small</LabelSmall>
-      <HSpacer size={16} />
-      <LabelSmall color={"red"}>Label small</LabelSmall>
-      <HSpacer size={16} />
-      <View style={{ backgroundColor: IOColors.bluegrey }}>
-        <LabelSmall color={"white"}>Label small</LabelSmall>
-      </View>
+  <View style={styles.row}>
+    <LabelSmall>Label small</LabelSmall>
+    <HSpacer size={16} />
+    <LabelSmall color={"bluegrey"}>Label small</LabelSmall>
+    <HSpacer size={16} />
+    <LabelSmall color={"red"}>Label small</LabelSmall>
+    <HSpacer size={16} />
+    <View style={{ backgroundColor: IOColors.bluegrey }}>
+      <LabelSmall color={"white"}>Label small</LabelSmall>
     </View>
-    <VSpacer size={40} />
-  </>
+  </View>
 );
 
 export const LabelSmallAltRow = () => (
-  <>
-    <View style={styles.row}>
-      <LabelSmallAlt>Label small alt</LabelSmallAlt>
-      <HSpacer size={16} />
-      <LabelSmallAlt color={"bluegrey"}>Label small alt</LabelSmallAlt>
-      <HSpacer size={16} />
-      <View style={{ backgroundColor: IOColors.bluegrey }}>
-        <LabelSmallAlt color={"white"}>Label small alt</LabelSmallAlt>
-      </View>
+  <View style={styles.row}>
+    <LabelSmallAlt>Label small alt</LabelSmallAlt>
+    <HSpacer size={16} />
+    <LabelSmallAlt color={"bluegrey"}>Label small alt</LabelSmallAlt>
+    <HSpacer size={16} />
+    <View style={{ backgroundColor: IOColors.bluegrey }}>
+      <LabelSmallAlt color={"white"}>Label small alt</LabelSmallAlt>
     </View>
-    <VSpacer size={40} />
-  </>
+  </View>
 );
 
 export const LabelRow = () => (
-  <>
-    <View style={styles.row}>
-      <Label>Label</Label>
-      <HSpacer size={16} />
-      <View style={{ backgroundColor: IOColors.bluegrey }}>
-        <Label color={"white"}>Label</Label>
-      </View>
+  <View style={styles.row}>
+    <Label>Label</Label>
+    <HSpacer size={16} />
+    <View style={{ backgroundColor: IOColors.bluegrey }}>
+      <Label color={"white"}>Label</Label>
     </View>
-    <VSpacer size={40} />
-  </>
+  </View>
+);
+
+export const MdH1Row = () => (
+  <VStack space={4}>
+    <MdH1>{getTitle("Markdown H1")}</MdH1>
+    <MdH1 style={styles.distancedTitle}>{getLongerTitle("Markdown H1")}</MdH1>
+  </VStack>
+);
+
+export const MdH2Row = () => (
+  <VStack space={4}>
+    <MdH2>{getTitle("Markdown H2")}</MdH2>
+    <MdH2 style={styles.distancedTitle}>{getLongerTitle("Markdown H2")}</MdH2>
+  </VStack>
+);
+
+export const MdH3Row = () => (
+  <VStack space={4}>
+    <MdH3>{getTitle("Markdown H3")}</MdH3>
+    <MdH3 style={styles.distancedTitle}>{getLongerTitle("Markdown H3")}</MdH3>
+  </VStack>
+);
+
+export const MdH4Row = () => (
+  <VStack space={4}>
+    <MdH4>{getTitle("Markdown H4")}</MdH4>
+    <MdH4 style={styles.distancedTitle}>{getLongerTitle("Markdown H4")}</MdH4>
+  </VStack>
+);
+
+export const MdH5Row = () => (
+  <VStack space={4}>
+    <MdH5>{getTitle("Markdown H5")}</MdH5>
+    <MdH5 style={styles.distancedTitle}>{getLongerTitle("Markdown H5")}</MdH5>
+  </VStack>
+);
+
+export const MdH6Row = () => (
+  <VStack space={4}>
+    <MdH6>{getTitle("Markdown H6")}</MdH6>
+    <MdH6 style={styles.distancedTitle}>{getLongerTitle("Markdown H6")}</MdH6>
+  </VStack>
 );
diff --git a/src/components/typography/index.tsx b/src/components/typography/index.tsx
index 9fd7b1c0..9fc0bb78 100644
--- a/src/components/typography/index.tsx
+++ b/src/components/typography/index.tsx
@@ -17,3 +17,9 @@ export * from "./LabelSmallAlt";
 export * from "./LabelLink";
 export * from "./BodyMonospace";
 export * from "./common";
+export * from "./markdown/MdH1";
+export * from "./markdown/MdH2";
+export * from "./markdown/MdH3";
+export * from "./markdown/MdH4";
+export * from "./markdown/MdH5";
+export * from "./markdown/MdH6";
diff --git a/src/components/typography/markdown/MdH1.tsx b/src/components/typography/markdown/MdH1.tsx
new file mode 100644
index 00000000..03a86626
--- /dev/null
+++ b/src/components/typography/markdown/MdH1.tsx
@@ -0,0 +1,32 @@
+import { IOColors, IOTheme } from "../../../core";
+import { FontFamily, IOFontWeight } from "../../../utils/fonts";
+import { ExternalTypographyProps, TypographyProps } from "../common";
+import { useTypographyFactory } from "../Factory";
+
+type AllowedColors = Extract<IOTheme, "textHeading-default"> | IOColors;
+type AllowedWeight = Extract<IOFontWeight, "Regular">;
+
+type MdH1Props = ExternalTypographyProps<
+  TypographyProps<AllowedWeight, AllowedColors>
+>;
+
+const fontSize = 20;
+const lineHeight = 24;
+const font: FontFamily = "ReadexPro";
+const defaultColor: AllowedColors = "black";
+const defaultWeight: AllowedWeight = "Regular";
+
+/**
+ * `MdH1` typographic style
+ */
+export const MdH1 = (props: MdH1Props) =>
+  useTypographyFactory<AllowedWeight, AllowedColors>({
+    ...props,
+    defaultWeight,
+    defaultColor,
+    font,
+    fontStyle: {
+      fontSize,
+      lineHeight
+    }
+  });
diff --git a/src/components/typography/markdown/MdH2.tsx b/src/components/typography/markdown/MdH2.tsx
new file mode 100644
index 00000000..f73fa377
--- /dev/null
+++ b/src/components/typography/markdown/MdH2.tsx
@@ -0,0 +1,32 @@
+import { IOColors, IOTheme } from "../../../core";
+import { FontFamily, IOFontWeight } from "../../../utils/fonts";
+import { ExternalTypographyProps, TypographyProps } from "../common";
+import { useTypographyFactory } from "../Factory";
+
+type AllowedColors = Extract<IOTheme, "textHeading-default"> | IOColors;
+type AllowedWeight = Extract<IOFontWeight, "SemiBold">;
+
+type MdH2Props = ExternalTypographyProps<
+  TypographyProps<AllowedWeight, AllowedColors>
+>;
+
+const fontSize = 16;
+const lineHeight = 24;
+const font: FontFamily = "ReadexPro";
+const defaultColor: AllowedColors = "black";
+const defaultWeight: AllowedWeight = "SemiBold";
+
+/**
+ * `MdH2` typographic style
+ */
+export const MdH2 = (props: MdH2Props) =>
+  useTypographyFactory<AllowedWeight, AllowedColors>({
+    ...props,
+    defaultWeight,
+    defaultColor,
+    font,
+    fontStyle: {
+      fontSize,
+      lineHeight
+    }
+  });
diff --git a/src/components/typography/markdown/MdH3.tsx b/src/components/typography/markdown/MdH3.tsx
new file mode 100644
index 00000000..a72ea3e2
--- /dev/null
+++ b/src/components/typography/markdown/MdH3.tsx
@@ -0,0 +1,32 @@
+import { IOColors, IOTheme } from "../../../core";
+import { FontFamily, IOFontWeight } from "../../../utils/fonts";
+import { ExternalTypographyProps, TypographyProps } from "../common";
+import { useTypographyFactory } from "../Factory";
+
+type AllowedColors = Extract<IOTheme, "textHeading-default"> | IOColors;
+type AllowedWeight = Extract<IOFontWeight, "Regular">;
+
+type MdH3Props = ExternalTypographyProps<
+  TypographyProps<AllowedWeight, AllowedColors>
+>;
+
+const fontSize = 16;
+const lineHeight = 24;
+const font: FontFamily = "ReadexPro";
+const defaultColor: AllowedColors = "black";
+const defaultWeight: AllowedWeight = "Regular";
+
+/**
+ * `MdH3` typographic style
+ */
+export const MdH3 = (props: MdH3Props) =>
+  useTypographyFactory<AllowedWeight, AllowedColors>({
+    ...props,
+    defaultWeight,
+    defaultColor,
+    font,
+    fontStyle: {
+      fontSize,
+      lineHeight
+    }
+  });
diff --git a/src/components/typography/markdown/MdH4.tsx b/src/components/typography/markdown/MdH4.tsx
new file mode 100644
index 00000000..ee6f8cc8
--- /dev/null
+++ b/src/components/typography/markdown/MdH4.tsx
@@ -0,0 +1,34 @@
+import { IOColors, IOTheme } from "../../../core";
+import { FontFamily, IOFontWeight } from "../../../utils/fonts";
+import { ExternalTypographyProps, TypographyProps } from "../common";
+import { useTypographyFactory } from "../Factory";
+
+type AllowedColors = Extract<IOTheme, "textHeading-default"> | IOColors;
+type AllowedWeight = Extract<IOFontWeight, "SemiBold">;
+
+type MdH4Props = ExternalTypographyProps<
+  TypographyProps<AllowedWeight, AllowedColors>
+>;
+
+const fontSize = 14;
+const lineHeight = 24;
+const font: FontFamily = "TitilliumSansPro";
+const defaultColor: AllowedColors = "grey-700";
+const defaultWeight: AllowedWeight = "SemiBold";
+
+/**
+ * `MdH4` typographic style
+ */
+export const MdH4 = (props: MdH4Props) =>
+  useTypographyFactory<AllowedWeight, AllowedColors>({
+    ...props,
+    defaultWeight,
+    defaultColor,
+    font,
+    fontStyle: {
+      fontSize,
+      textTransform: "uppercase",
+      letterSpacing: 0.5,
+      lineHeight
+    }
+  });
diff --git a/src/components/typography/markdown/MdH5.tsx b/src/components/typography/markdown/MdH5.tsx
new file mode 100644
index 00000000..c127a621
--- /dev/null
+++ b/src/components/typography/markdown/MdH5.tsx
@@ -0,0 +1,32 @@
+import { IOColors, IOTheme } from "../../../core";
+import { FontFamily, IOFontWeight } from "../../../utils/fonts";
+import { ExternalTypographyProps, TypographyProps } from "../common";
+import { useTypographyFactory } from "../Factory";
+
+type AllowedColors = Extract<IOTheme, "textHeading-default"> | IOColors;
+type AllowedWeight = Extract<IOFontWeight, "Regular">;
+
+type MdH5Props = ExternalTypographyProps<
+  TypographyProps<AllowedWeight, AllowedColors>
+>;
+
+const fontSize = 12;
+const lineHeight = 16;
+const font: FontFamily = "ReadexPro";
+const defaultColor: AllowedColors = "grey-850";
+const defaultWeight: AllowedWeight = "Regular";
+
+/**
+ * `MdH5` typographic style
+ */
+export const MdH5 = (props: MdH5Props) =>
+  useTypographyFactory<AllowedWeight, AllowedColors>({
+    ...props,
+    defaultWeight,
+    defaultColor,
+    font,
+    fontStyle: {
+      fontSize,
+      lineHeight
+    }
+  });
diff --git a/src/components/typography/markdown/MdH6.tsx b/src/components/typography/markdown/MdH6.tsx
new file mode 100644
index 00000000..30f23e29
--- /dev/null
+++ b/src/components/typography/markdown/MdH6.tsx
@@ -0,0 +1,33 @@
+import { IOColors, IOTheme } from "../../../core";
+import { FontFamily, IOFontWeight } from "../../../utils/fonts";
+import { ExternalTypographyProps, TypographyProps } from "../common";
+import { useTypographyFactory } from "../Factory";
+
+type AllowedColors = Extract<IOTheme, "textHeading-default"> | IOColors;
+type AllowedWeight = Extract<IOFontWeight, "Regular">;
+
+type MdH6Props = ExternalTypographyProps<
+  TypographyProps<AllowedWeight, AllowedColors>
+>;
+
+const fontSize = 10;
+const lineHeight = 14;
+const font: FontFamily = "ReadexPro";
+const defaultColor: AllowedColors = "grey-700";
+const defaultWeight: AllowedWeight = "Regular";
+
+/**
+ * `MdH5` typographic style
+ */
+export const MdH6 = (props: MdH6Props) =>
+  useTypographyFactory<AllowedWeight, AllowedColors>({
+    ...props,
+    defaultWeight,
+    defaultColor,
+    font,
+    fontStyle: {
+      fontSize,
+      lineHeight,
+      letterSpacing: 0.5
+    }
+  });