diff --git a/hugo.yml b/hugo.yml
index 68e404cb66..0d9bf723ea 100644
--- a/hugo.yml
+++ b/hugo.yml
@@ -1,4 +1,5 @@
 languageCode:                       "en"
+timeout:                            600000
 title:                              "OUDS Web"
 baseURL:                            "https://web.unified-design-system.orange.com"
 
diff --git a/scss/_maps.scss b/scss/_maps.scss
index 55ea36c995..ada1c96dff 100644
--- a/scss/_maps.scss
+++ b/scss/_maps.scss
@@ -83,6 +83,144 @@ $ouds-elevations: (
 ) !default;
 // scss-docs-end ouds-maps-elevations
 
+// scss-docs-start ouds-maps-fonts
+%display-large {
+  font-size: var(--#{$prefix}font-size-display-large);
+  line-height: var(--#{$prefix}font-line-height-display-large);
+
+  /* rtl:remove */
+  letter-spacing: var(--#{$prefix}font-letter-spacing-display-large);
+}
+
+%display-medium {
+  font-size: var(--#{$prefix}font-size-display-medium);
+  line-height: var(--#{$prefix}font-line-height-display-medium);
+
+  /* rtl:remove */
+  letter-spacing: var(--#{$prefix}font-letter-spacing-display-medium);
+}
+
+%display-small {
+  font-size: var(--#{$prefix}font-size-display-small);
+  line-height: var(--#{$prefix}font-line-height-display-small);
+
+  /* rtl:remove */
+  letter-spacing: var(--#{$prefix}font-letter-spacing-display-small);
+}
+
+%heading-xlarge {
+  font-size: var(--#{$prefix}font-size-heading-xlarge);
+  line-height: var(--#{$prefix}font-line-height-heading-xlarge);
+
+  /* rtl:remove */
+  letter-spacing: var(--#{$prefix}font-letter-spacing-heading-xlarge);
+}
+
+%heading-large {
+  font-size: var(--#{$prefix}font-size-heading-large);
+  line-height: var(--#{$prefix}font-line-height-heading-large);
+
+  /* rtl:remove */
+  letter-spacing: var(--#{$prefix}font-letter-spacing-heading-large);
+}
+
+%heading-medium {
+  font-size: var(--#{$prefix}font-size-heading-medium);
+  line-height: var(--#{$prefix}font-line-height-heading-medium);
+
+  /* rtl:remove */
+  letter-spacing: var(--#{$prefix}font-letter-spacing-heading-medium);
+}
+
+%heading-small {
+  font-size: var(--#{$prefix}font-size-heading-small);
+  line-height: var(--#{$prefix}font-line-height-heading-small);
+
+  /* rtl:remove */
+  letter-spacing: var(--#{$prefix}font-letter-spacing-heading-small);
+}
+
+%heading-xsmall {
+  font-size: var(--#{$prefix}font-size-heading-xsmall);
+  line-height: var(--#{$prefix}font-line-height-heading-xsmall);
+
+  /* rtl:remove */
+  letter-spacing: var(--#{$prefix}font-letter-spacing-heading-xsmall);
+}
+
+%body-large {
+  font-size: var(--#{$prefix}font-size-body-large);
+  line-height: var(--#{$prefix}font-line-height-body-large);
+
+  /* rtl:remove */
+  letter-spacing: var(--#{$prefix}font-letter-spacing-body-large);
+}
+
+%body-medium {
+  font-size: var(--#{$prefix}font-size-body-medium);
+  line-height: var(--#{$prefix}font-line-height-body-medium);
+
+  /* rtl:remove */
+  letter-spacing: var(--#{$prefix}font-letter-spacing-body-medium);
+}
+
+%body-small {
+  font-size: var(--#{$prefix}font-size-body-small);
+  line-height: var(--#{$prefix}font-line-height-body-small);
+
+  /* rtl:remove */
+  letter-spacing: var(--#{$prefix}font-letter-spacing-body-small);
+}
+
+%label-xlarge {
+  font-size: $ouds-font-size-label-xlarge;
+  line-height: $ouds-font-line-height-label-xlarge;
+
+  /* rtl:remove */
+  letter-spacing: $ouds-font-letter-spacing-label-xlarge;
+}
+
+%label-large {
+  font-size: $ouds-font-size-label-large;
+  line-height: $ouds-font-line-height-label-large;
+
+  /* rtl:remove */
+  letter-spacing: $ouds-font-letter-spacing-label-large;
+}
+
+%label-medium {
+  font-size: $ouds-font-size-label-medium;
+  line-height: $ouds-font-line-height-label-medium;
+
+  /* rtl:remove */
+  letter-spacing: $ouds-font-letter-spacing-label-medium;
+}
+
+%label-small {
+  font-size: $ouds-font-size-label-small;
+  line-height: $ouds-font-line-height-label-small;
+
+  /* rtl:remove */
+  letter-spacing: $ouds-font-letter-spacing-label-small;
+}
+
+%code-medium {
+  font-size: $ouds-font-size-code-medium;
+  line-height: $ouds-font-line-height-code-medium;
+
+  /* rtl:remove */
+  letter-spacing: $ouds-font-letter-spacing-code-medium;
+}
+
+%code-small {
+  font-size: $ouds-font-size-code-small;
+  line-height: $ouds-font-line-height-code-small;
+
+  /* rtl:remove */
+  letter-spacing: $ouds-font-letter-spacing-code-small;
+}
+// scss-docs-end ouds-maps-fonts
+
 // scss-docs-start ouds-maps-opacities
 $ouds-opacities: (
   "transparent": $ouds-opacity-transparent,
diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index b1fdf59e4e..52c218c0c9 100644
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -57,7 +57,7 @@
 // 2. As a best practice, apply a default `background-color`.
 // 3. Prevent adjustments of font size after orientation changes in iOS.
 // 4. Change the default tap highlight to be completely transparent in iOS.
-// 5. Prevent faux-bold/italic
+// 5. Prevent faux-bold/italic maybe for some RTL fonts
 //    See https://developer.mozilla.org/fr/docs/Web/CSS/font-synthesis
 
 // scss-docs-start reboot-body-rules
@@ -69,11 +69,11 @@ body {
   @include font-size(var(--#{$prefix}body-font-size));
   font-weight: var(--#{$prefix}body-font-weight);
   line-height: var(--#{$prefix}body-line-height);
-  // OUDS mod: no color
+  color: var(--#{$prefix}body-color);
   text-align: var(--#{$prefix}body-text-align);
 
   /* rtl:remove */
-  letter-spacing: $letter-spacing-base; // OUDS mod
+  letter-spacing: var(--#{$prefix}body-letter-spacing); // OUDS mod
   background-color: var(--#{$prefix}body-bg); // 2
   -webkit-text-size-adjust: 100%; // 3
   -webkit-tap-highlight-color: rgba($black, 0); // 4
@@ -134,7 +134,6 @@ hr {
 %heading {
   margin-top: 0; // 1
   margin-bottom: $headings-margin-bottom;
-  @include font-size($font-size-base);  // OUDS mod
   font-family: $headings-font-family;
   font-style: $headings-font-style;
   font-weight: $headings-font-weight;
@@ -142,7 +141,6 @@ hr {
   color: var(--#{$prefix}heading-color);
 
   /* rtl:remove */
-  letter-spacing: $letter-spacing-base; // OUDS mod
   -webkit-font-smoothing: antialiased;  // OUDS mod
   -moz-osx-font-smoothing: grayscale;   // OUDS mod
   text-rendering: optimizelegibility;   // OUDS mod
@@ -150,27 +148,32 @@ hr {
 
 h1 {
   @extend %heading;
-  @include font-size($h4-font-size);
-  line-height: $h4-line-height;
+  @extend %heading-xlarge; // OUDS mod: instead of `@include font-size($h1-font-size)`
+}
 
-  /* rtl:remove */
-  letter-spacing: $h4-spacing;
+h2 {
+  @extend %heading;
+  @extend %heading-large; // OUDS mod: instead of `@include font-size($h2-font-size)`
 }
 
-h2,
 h3 {
   @extend %heading;
-  @include font-size($h5-font-size);
-  line-height: $h5-line-height;
+  @extend %heading-medium; // OUDS mod: instead of `@include font-size($h3-font-size)`
+}
 
-  /* rtl:remove */
-  letter-spacing: $h5-spacing;
+h4 {
+  @extend %heading;
+  @extend %heading-small; // OUDS mod: instead of `@include font-size($h4-font-size)`
+}
+
+h5 {
+  @extend %heading;
+  @extend %heading-xsmall; // OUDS mod: instead of `@include font-size($h5-font-size)`
 }
 
-h4,
-h5,
 h6 {
   @extend %heading;
+  @extend %body-large; // OUDS mod: instead of `@include font-size($h6-font-size)` // Makes sense for me to have the smallest title the same font-size as the largest body since it's Bold and spaced correctly
 }
 
 
@@ -303,11 +306,8 @@ strong {
 // Add the correct font size in all browsers
 
 small {
-  @include font-size($small-font-size);
-  // OUDS mod
-  font-weight: $font-weight-normal;
-  line-height: $line-height-sm;
-  // End mod
+  @extend %body-small; // OUDS mod: instead of `@include font-size($small-font-size)`
+  font-weight: $small-font-weight; // OUDS mod
 }
 
 
@@ -383,8 +383,7 @@ pre {
   margin-top: 0; // 1
   margin-bottom: 1rem; // 2
   overflow: auto; // 3
-  @include font-size($code-font-size);
-  line-height: $pre-line-height; // OUDS mod
+  @extend %code-medium; // OUDS mod: instead of `@include font-size($code-font-size)`
   color: $pre-color;
 
   // Account for some code outputs that place code tags in pre tags
@@ -397,9 +396,8 @@ pre {
 
 var, // OUDS mod
 code {
-  @include font-size($code-font-size);
+  @extend %code-medium; // OUDS mod: instead of `@include font-size($code-font-size)`
   font-style: normal; // OUDS mod: <var> is italic in all browsers
-  line-height: $line-height-sm; // OUDS mod
   color: var(--#{$prefix}code-color);
   word-wrap: break-word;
 
@@ -409,9 +407,9 @@ code {
   }
 }
 
-kbd {
+kbd { // TODO LM: Check the rendering
   padding: $kbd-padding-y $kbd-padding-x;
-  @include font-size($kbd-font-size);
+  @extend %code-medium; // OUDS mod: instead of `@include font-size($code-font-size)`
   color: $kbd-color;
   background-color: $kbd-bg;
   @include border-radius($border-radius-sm);
@@ -460,13 +458,10 @@ table {
 caption {
   padding-top: $table-caption-padding-y;
   padding-bottom: $table-caption-padding-y;
-  @include font-size($h1-font-size);    // OUDS mod
-  font-weight: $font-weight-bold;       // OUDS mod
+  @extend %heading-xlarge; // OUDS mod
+  font-weight: $font-weight-bold; // OUDS mod
   color: $table-caption-color;
   text-align: left;
-
-  /* rtl:remove */
-  letter-spacing: $h1-spacing;          // OUDS mod
   -webkit-font-smoothing: antialiased;  // OUDS mod
   -moz-osx-font-smoothing: grayscale;   // OUDS mod
   text-rendering: optimizelegibility;   // OUDS mod
@@ -500,7 +495,6 @@ th {
 
 label {
   display: inline-block; // 1
-  font-weight: $form-label-font-weight; // OUDS mod
 }
 
 // Remove the default `border-radius` that macOS Chrome adds.
@@ -626,9 +620,8 @@ legend {
   width: 100%;
   padding: 0;
   margin-bottom: $legend-margin-bottom;
-  @include font-size($legend-font-size);
+  @extend %body-large; // OUDS mod: instead of `@include font-size($legend-font-size)`
   font-weight: $legend-font-weight;
-  line-height: inherit;
 
   + * {
     clear: left; // 2
diff --git a/scss/_root.scss b/scss/_root.scss
index a8338a2d04..0dcbb67bc9 100644
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -63,8 +63,115 @@
   --#{$prefix}font-monospace: #{inspect($font-family-monospace)};
   --#{$prefix}gradient: #{$gradient};
 
+  --#{$prefix}font-size-display-small: #{px-to-rem($ouds-font-size-display-small-mobile)};
+  --#{$prefix}font-size-display-medium: #{px-to-rem($ouds-font-size-display-medium-mobile)};
+  --#{$prefix}font-size-display-large: #{px-to-rem($ouds-font-size-display-large-mobile)};
+  --#{$prefix}font-line-height-display-small: #{divide($ouds-font-line-height-display-small-mobile, $ouds-font-size-display-small-mobile)};
+  --#{$prefix}font-line-height-display-medium: #{divide($ouds-font-line-height-display-medium-mobile, $ouds-font-size-display-medium-mobile)};
+  --#{$prefix}font-line-height-display-large: #{divide($ouds-font-line-height-display-large-mobile, $ouds-font-size-display-large-mobile)};
+  --#{$prefix}font-letter-spacing-display-small: #{px-to-rem($ouds-font-letter-spacing-display-small-mobile)};
+  --#{$prefix}font-letter-spacing-display-medium: #{px-to-rem($ouds-font-letter-spacing-display-medium-mobile)};
+  --#{$prefix}font-letter-spacing-display-large: #{px-to-rem($ouds-font-letter-spacing-display-large-mobile)};
+  --#{$prefix}font-size-heading-small: #{px-to-rem($ouds-font-size-heading-small-mobile)};
+  --#{$prefix}font-size-heading-medium: #{px-to-rem($ouds-font-size-heading-medium-mobile)};
+  --#{$prefix}font-size-heading-large: #{px-to-rem($ouds-font-size-heading-large-mobile)};
+  --#{$prefix}font-size-heading-xlarge: #{px-to-rem($ouds-font-size-heading-xlarge-mobile)};
+  --#{$prefix}font-size-heading-xsmall: #{px-to-rem($ouds-font-size-heading-xsmall-mobile)};
+  --#{$prefix}font-line-height-heading-small: #{divide($ouds-font-line-height-heading-small-mobile, $ouds-font-size-heading-small-mobile)};
+  --#{$prefix}font-line-height-heading-medium: #{divide($ouds-font-line-height-heading-medium-mobile, $ouds-font-size-heading-medium-mobile)};
+  --#{$prefix}font-line-height-heading-large: #{divide($ouds-font-line-height-heading-large-mobile, $ouds-font-size-heading-large-mobile)};
+  --#{$prefix}font-line-height-heading-xlarge: #{divide($ouds-font-line-height-heading-xlarge-mobile, $ouds-font-size-heading-xlarge-mobile)};
+  --#{$prefix}font-line-height-heading-xsmall: #{divide($ouds-font-line-height-heading-xsmall-mobile, $ouds-font-size-heading-xsmall-mobile)};
+  --#{$prefix}font-letter-spacing-heading-small: #{px-to-rem($ouds-font-letter-spacing-heading-small-mobile)};
+  --#{$prefix}font-letter-spacing-heading-medium: #{px-to-rem($ouds-font-letter-spacing-heading-medium-mobile)};
+  --#{$prefix}font-letter-spacing-heading-large: #{px-to-rem($ouds-font-letter-spacing-heading-large-mobile)};
+  --#{$prefix}font-letter-spacing-heading-xlarge: #{px-to-rem($ouds-font-letter-spacing-heading-xlarge-mobile)};
+  --#{$prefix}font-letter-spacing-heading-xsmall: #{px-to-rem($ouds-font-letter-spacing-heading-xsmall-mobile)};
+  --#{$prefix}font-size-body-small: #{px-to-rem($ouds-font-size-body-small-mobile)};
+  --#{$prefix}font-size-body-medium: #{px-to-rem($ouds-font-size-body-medium-mobile)};
+  --#{$prefix}font-size-body-large: #{px-to-rem($ouds-font-size-body-large-mobile)};
+  --#{$prefix}font-line-height-body-small: #{divide($ouds-font-line-height-body-small-mobile, $ouds-font-size-body-small-mobile)};
+  --#{$prefix}font-line-height-body-medium: #{divide($ouds-font-line-height-body-medium-mobile, $ouds-font-size-body-medium-mobile)};
+  --#{$prefix}font-line-height-body-large: #{divide($ouds-font-line-height-body-large-mobile, $ouds-font-size-body-large-mobile)};
+  --#{$prefix}font-letter-spacing-body-small: #{px-to-rem($ouds-font-letter-spacing-body-small-mobile)};
+  --#{$prefix}font-letter-spacing-body-medium: #{px-to-rem($ouds-font-letter-spacing-body-medium-mobile)};
+  --#{$prefix}font-letter-spacing-body-large: #{px-to-rem($ouds-font-letter-spacing-body-large-mobile)};
+
+  @include media-breakpoint-up(md) {
+    --#{$prefix}font-size-display-small: #{px-to-rem($ouds-font-size-display-small-tablet)};
+    --#{$prefix}font-size-display-medium: #{px-to-rem($ouds-font-size-display-medium-tablet)};
+    --#{$prefix}font-size-display-large: #{px-to-rem($ouds-font-size-display-large-tablet)};
+    --#{$prefix}font-line-height-display-small: #{divide($ouds-font-line-height-display-small-tablet, $ouds-font-size-display-small-tablet)};
+    --#{$prefix}font-line-height-display-medium: #{divide($ouds-font-line-height-display-medium-tablet, $ouds-font-size-display-medium-tablet)};
+    --#{$prefix}font-line-height-display-large: #{divide($ouds-font-line-height-display-large-tablet, $ouds-font-size-display-large-tablet)};
+    --#{$prefix}font-letter-spacing-display-small: #{px-to-rem($ouds-font-letter-spacing-display-small-tablet)};
+    --#{$prefix}font-letter-spacing-display-medium: #{px-to-rem($ouds-font-letter-spacing-display-medium-tablet)};
+    --#{$prefix}font-letter-spacing-display-large: #{px-to-rem($ouds-font-letter-spacing-display-large-tablet)};
+    --#{$prefix}font-size-heading-small: #{px-to-rem($ouds-font-size-heading-small-tablet)};
+    --#{$prefix}font-size-heading-medium: #{px-to-rem($ouds-font-size-heading-medium-tablet)};
+    --#{$prefix}font-size-heading-large: #{px-to-rem($ouds-font-size-heading-large-tablet)};
+    --#{$prefix}font-size-heading-xlarge: #{px-to-rem($ouds-font-size-heading-xlarge-tablet)};
+    --#{$prefix}font-size-heading-xsmall: #{px-to-rem($ouds-font-size-heading-xsmall-tablet)};
+    --#{$prefix}font-line-height-heading-small: #{divide($ouds-font-line-height-heading-small-tablet, $ouds-font-size-heading-small-tablet)};
+    --#{$prefix}font-line-height-heading-medium: #{divide($ouds-font-line-height-heading-medium-tablet, $ouds-font-size-heading-medium-tablet)};
+    --#{$prefix}font-line-height-heading-large: #{divide($ouds-font-line-height-heading-large-tablet, $ouds-font-size-heading-large-tablet)};
+    --#{$prefix}font-line-height-heading-xlarge: #{divide($ouds-font-line-height-heading-xlarge-tablet, $ouds-font-size-heading-xlarge-tablet)};
+    --#{$prefix}font-line-height-heading-xsmall: #{divide($ouds-font-line-height-heading-xsmall-tablet, $ouds-font-size-heading-xsmall-tablet)};
+    --#{$prefix}font-letter-spacing-heading-small: #{px-to-rem($ouds-font-letter-spacing-heading-small-tablet)};
+    --#{$prefix}font-letter-spacing-heading-medium: #{px-to-rem($ouds-font-letter-spacing-heading-medium-tablet)};
+    --#{$prefix}font-letter-spacing-heading-large: #{px-to-rem($ouds-font-letter-spacing-heading-large-tablet)};
+    --#{$prefix}font-letter-spacing-heading-xlarge: #{px-to-rem($ouds-font-letter-spacing-heading-xlarge-tablet)};
+    --#{$prefix}font-letter-spacing-heading-xsmall: #{px-to-rem($ouds-font-letter-spacing-heading-xsmall-tablet)};
+    --#{$prefix}font-size-body-small: #{px-to-rem($ouds-font-size-body-small-tablet)};
+    --#{$prefix}font-size-body-medium: #{px-to-rem($ouds-font-size-body-medium-tablet)};
+    --#{$prefix}font-size-body-large: #{px-to-rem($ouds-font-size-body-large-tablet)};
+    --#{$prefix}font-line-height-body-small: #{divide($ouds-font-line-height-body-small-tablet, $ouds-font-size-body-small-tablet)};
+    --#{$prefix}font-line-height-body-medium: #{divide($ouds-font-line-height-body-medium-tablet, $ouds-font-size-body-medium-tablet)};
+    --#{$prefix}font-line-height-body-large: #{divide($ouds-font-line-height-body-large-tablet, $ouds-font-size-body-large-tablet)};
+    --#{$prefix}font-letter-spacing-body-small: #{px-to-rem($ouds-font-letter-spacing-body-small-tablet)};
+    --#{$prefix}font-letter-spacing-body-medium: #{px-to-rem($ouds-font-letter-spacing-body-medium-tablet)};
+    --#{$prefix}font-letter-spacing-body-large: #{px-to-rem($ouds-font-letter-spacing-body-large-tablet)};
+  }
+
+  @include media-breakpoint-up(xl) {
+    --#{$prefix}font-size-display-small: #{px-to-rem($ouds-font-size-display-small-desktop)};
+    --#{$prefix}font-size-display-medium: #{px-to-rem($ouds-font-size-display-medium-desktop)};
+    --#{$prefix}font-size-display-large: #{px-to-rem($ouds-font-size-display-large-desktop)};
+    --#{$prefix}font-line-height-display-small: #{divide($ouds-font-line-height-display-small-desktop, $ouds-font-size-display-small-desktop)};
+    --#{$prefix}font-line-height-display-medium: #{divide($ouds-font-line-height-display-medium-desktop, $ouds-font-size-display-medium-desktop)};
+    --#{$prefix}font-line-height-display-large: #{divide($ouds-font-line-height-display-large-desktop, $ouds-font-size-display-large-desktop)};
+    --#{$prefix}font-letter-spacing-display-small: #{px-to-rem($ouds-font-letter-spacing-display-small-desktop)};
+    --#{$prefix}font-letter-spacing-display-medium: #{px-to-rem($ouds-font-letter-spacing-display-medium-desktop)};
+    --#{$prefix}font-letter-spacing-display-large: #{px-to-rem($ouds-font-letter-spacing-display-large-desktop)};
+    --#{$prefix}font-size-heading-small: #{px-to-rem($ouds-font-size-heading-small-desktop)};
+    --#{$prefix}font-size-heading-medium: #{px-to-rem($ouds-font-size-heading-medium-desktop)};
+    --#{$prefix}font-size-heading-large: #{px-to-rem($ouds-font-size-heading-large-desktop)};
+    --#{$prefix}font-size-heading-xlarge: #{px-to-rem($ouds-font-size-heading-xlarge-desktop)};
+    --#{$prefix}font-size-heading-xsmall: #{px-to-rem($ouds-font-size-heading-xsmall-desktop)};
+    --#{$prefix}font-line-height-heading-small: #{divide($ouds-font-line-height-heading-small-desktop, $ouds-font-size-heading-small-desktop)};
+    --#{$prefix}font-line-height-heading-medium: #{divide($ouds-font-line-height-heading-medium-desktop, $ouds-font-size-heading-medium-desktop)};
+    --#{$prefix}font-line-height-heading-large: #{divide($ouds-font-line-height-heading-large-desktop, $ouds-font-size-heading-large-desktop)};
+    --#{$prefix}font-line-height-heading-xlarge: #{divide($ouds-font-line-height-heading-xlarge-desktop, $ouds-font-size-heading-xlarge-desktop)};
+    --#{$prefix}font-line-height-heading-xsmall: #{divide($ouds-font-line-height-heading-xsmall-desktop, $ouds-font-size-heading-xsmall-desktop)};
+    --#{$prefix}font-letter-spacing-heading-small: #{px-to-rem($ouds-font-letter-spacing-heading-small-desktop)};
+    --#{$prefix}font-letter-spacing-heading-medium: #{px-to-rem($ouds-font-letter-spacing-heading-medium-desktop)};
+    --#{$prefix}font-letter-spacing-heading-large: #{px-to-rem($ouds-font-letter-spacing-heading-large-desktop)};
+    --#{$prefix}font-letter-spacing-heading-xlarge: #{px-to-rem($ouds-font-letter-spacing-heading-xlarge-desktop)};
+    --#{$prefix}font-letter-spacing-heading-xsmall: #{px-to-rem($ouds-font-letter-spacing-heading-xsmall-desktop)};
+    --#{$prefix}font-size-body-small: #{px-to-rem($ouds-font-size-body-small-desktop)};
+    --#{$prefix}font-size-body-medium: #{px-to-rem($ouds-font-size-body-medium-desktop)};
+    --#{$prefix}font-size-body-large: #{px-to-rem($ouds-font-size-body-large-desktop)};
+    --#{$prefix}font-line-height-body-small: #{divide($ouds-font-line-height-body-small-desktop, $ouds-font-size-body-small-desktop)};
+    --#{$prefix}font-line-height-body-medium: #{divide($ouds-font-line-height-body-medium-desktop, $ouds-font-size-body-medium-desktop)};
+    --#{$prefix}font-line-height-body-large: #{divide($ouds-font-line-height-body-large-desktop, $ouds-font-size-body-large-desktop)};
+    --#{$prefix}font-letter-spacing-body-small: #{px-to-rem($ouds-font-letter-spacing-body-small-desktop)};
+    --#{$prefix}font-letter-spacing-body-medium: #{px-to-rem($ouds-font-letter-spacing-body-medium-desktop)};
+    --#{$prefix}font-letter-spacing-body-large: #{px-to-rem($ouds-font-letter-spacing-body-large-desktop)};
+  }
+
   // Root and body
   // scss-docs-start root-body-variables
+  // TODO LM
   @if $font-size-root != null {
     --#{$prefix}root-font-size: #{$font-size-root};
   }
@@ -72,6 +179,7 @@
   @include rfs($font-size-base, --#{$prefix}body-font-size);
   --#{$prefix}body-font-weight: #{$font-weight-base};
   --#{$prefix}body-line-height: #{$line-height-base};
+  --#{$prefix}body-letter-spacing: #{$letter-spacing-base};
   @if $body-text-align != null {
     --#{$prefix}body-text-align: #{$body-text-align};
   }
diff --git a/scss/_title-bars.scss b/scss/_title-bars.scss
index 5b90722cab..3774390a0f 100644
--- a/scss/_title-bars.scss
+++ b/scss/_title-bars.scss
@@ -15,16 +15,6 @@
   background-color: var(--#{$prefix}title-bar-bg);
   border-bottom: var(--#{$prefix}title-bar-border-width) solid var(--#{$prefix}title-bar-border-color);
 
-  @include media-breakpoint-up(md) {
-    --#{$prefix}title-bar-font-size: #{$title-bar-font-size-md};
-    --#{$prefix}title-bar-letter-spacing: #{$title-bar-letter-spacing-md};
-  }
-
-  @include media-breakpoint-up(xl) {
-    --#{$prefix}title-bar-font-size: #{$title-bar-font-size-xl};
-    --#{$prefix}title-bar-letter-spacing: #{$title-bar-letter-spacing-xl};
-  }
-
   > [class*="container"] {
     display: flex;
     align-items: flex-end;
diff --git a/scss/_type.scss b/scss/_type.scss
index 8217542491..4e50612178 100644
--- a/scss/_type.scss
+++ b/scss/_type.scss
@@ -26,185 +26,41 @@
 }
 
 
-// OUDS mod
-// Headings and displays together
-// = Add letter-spacing and line-height
-// = Reduce heading font-sizes for mobile (mobile first, obviously)
-[class*="display-"] {
-  @extend %heading;
-}
-
-.display-1 {
-  @include font-size($h2-font-size);
-  line-height: $h2-line-height;
-
-  /* rtl:remove */
-  letter-spacing: $h2-spacing;
-}
-
-h1,
-.display-2,
-.display-3 {
-  @include font-size($h3-font-size);
-  line-height: $h3-line-height;
-
-  /* rtl:remove */
-  letter-spacing: $mid-spacing;
-}
-
-/* rtl:begin:remove */
-.display-2 {
-  letter-spacing: $h3-spacing;
-}
-
-/* rtl:end:remove */
-
-h2,
-.display-4 {
-  @include font-size($h5-font-size);
-  line-height: $h5-line-height;
-
-  /* rtl:remove */
-  letter-spacing: $h5-spacing;
-}
-
 .lead {
-  @include font-size($h6-font-size);
+  @extend %body-large; // OUDS mod: instead of `@include font-size($lead-font-size)`
   font-weight: $lead-font-weight;
-  line-height: $lead-line-height;
-
-  /* rtl:remove */
-  letter-spacing: $h6-spacing;
 }
 
-@include media-breakpoint-up(sm) {
-  h1,
-  .display-1,
-  .display-2,
-  .display-3 {
+// OUDS mod: no @each
+// Type display classes
+@each $display, $font-size in $display-font-sizes { // TODO LM Check
+  .display-#{$display} {
+    @extend %heading; // OUDS mod
+    font-family: $display-font-family;
+    font-style: $display-font-style;
+    font-weight: $display-font-weight;
     line-height: $display-line-height;
-  }
-
-  .display-1 {
-    @include font-size($display2-size);
-
-    /* rtl:remove */
-    letter-spacing: $display2-spacing;
-  }
-
-  .display-2 {
-    @include font-size($display3-size);
-
-    /* rtl:remove */
-    letter-spacing: $display3-spacing;
-  }
-
-  h1,
-  .display-3 {
-    @include font-size($display4-size);
-
-    /* rtl:remove */
-    letter-spacing: $display4-spacing;
-  }
-
-  h2,
-  h3,
-  .display-4 {
-    @include font-size($h3-font-size);
-    line-height: $h3-line-height;
-
-    /* rtl:remove */
-    letter-spacing: $h3-spacing;
-  }
-
-  h4,
-  h5,
-  h6 {
-    @include font-size($h5-font-size);
-    line-height: $h5-line-height;
-
-    /* rtl:remove */
-    letter-spacing: $h5-spacing;
-  }
-
-  .lead {
-    @include font-size($h5-font-size);
-
-    /* rtl:remove */
-    letter-spacing: $h5-spacing;
+    @extend %#{$font-size}; // OUDS mod: instead of `@include font-size($font-size)`
   }
 }
 
-@include media-breakpoint-up(lg) {
-  .display-1 {
-    @include font-size($display1-size);
-
-    /* rtl:remove */
-    letter-spacing: $display1-spacing;
-  }
-
-  .display-2 {
-    @include font-size($display2-size);
-
-    /* rtl:remove */
-    letter-spacing: $display2-spacing;
-  }
-
-  .display-3 {
-    @include font-size($display3-size);
-
-    /* rtl:remove */
-    letter-spacing: $display3-spacing;
-  }
-
-  .display-4 {
-    @include font-size($display4-size);
-    line-height: $display-line-height;
-
-    /* rtl:remove */
-    letter-spacing: $display4-spacing;
-  }
-
-  h2 {
-    @include font-size($h2-font-size);
-    line-height: $h2-line-height;
+// .display-1 {
+//   @extend %heading;
+//   font-weight: $display-font-weight;
+//   @extend %display-large;
+// }
 
-    /* rtl:remove */
-    letter-spacing: $h2-spacing;
-  }
-
-  h3 {
-    @include font-size($h3-font-size);
-    line-height: $h3-line-height;
-
-    /* rtl:remove */
-    letter-spacing: $h3-spacing;
-  }
-
-  h4 {
-    @include font-size($h4-font-size);
-    line-height: $h4-line-height;
-
-    /* rtl:remove */
-    letter-spacing: $h4-spacing;
-  }
-
-  h5,
-  h6 {
-    @include font-size($h5-font-size);
-    line-height: $h5-line-height;
+// .display-2 {
+//   @extend %heading;
+//   font-weight: $display-font-weight;
+//   @extend %display-medium;
+// }
 
-    /* rtl:remove */
-    letter-spacing: $h5-spacing;
-  }
-
-  .lead {
-    @include font-size($lead-font-size);
-
-    /* rtl:remove */
-    letter-spacing: $lead-letter-spacing;
-  }
-}
+// .display-3 {
+//   @extend %heading;
+//   font-weight: $display-font-weight;
+//   @extend %display-small;
+// }
 // End mod
 
 
@@ -245,18 +101,14 @@ h2,
 
 // Builds on `abbr`
 .initialism {
-  @include font-size($initialism-font-size);
+  @extend %body-small; // OUDS mod: instead of `@include font-size($initialism-font-size)`
   text-transform: uppercase;
 }
 
 // Blockquotes
 .blockquote {
   margin-bottom: $blockquote-margin-y;
-  @include font-size($blockquote-font-size);
-  line-height: $blockquote-line-height; // OUDS mod
-
-  /* rtl:remove */
-  letter-spacing: $blockquote-letter-spacing; // OUDS mod
+  @extend %body-large; // OUDS mod: instead of `@include font-size($blockquote-font-size)`
 
   > :last-child {
     margin-bottom: 0;
@@ -266,13 +118,9 @@ h2,
 .blockquote-footer {
   margin-top: -$blockquote-margin-y;
   margin-bottom: $blockquote-margin-y;
-  @include font-size($blockquote-footer-font-size);
-  line-height: $line-height-sm; // OUDS mod
+  @extend %body-small; // OUDS mod: instead of `@include font-size($blockquote-footer-font-size)`
   color: $blockquote-footer-color;
 
-  /* rtl:remove */
-  letter-spacing: $letter-spacing-base; // OUDS mod
-
   &::before {
     content: "\2014\00A0"; // em dash, nbsp
   }
diff --git a/scss/_variables.scss b/scss/_variables.scss
index dba319fe93..39522c0fb6 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -717,52 +717,50 @@ $aspect-ratios: (
 // Font, line-height, and color for body text, headings, and more.
 
 // scss-docs-start font-variables
-// stylelint-disable value-keyword-case
-$font-family-sans-serif:      "Helvetica Neue", Helvetica, "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
-$font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
-// stylelint-enable value-keyword-case
+$font-family-sans-serif:      $ouds-font-family-sans-serif-stack !default;
+$font-family-monospace:       $ouds-font-family-monospace-stack !default;
 $font-family-base:            var(--#{$prefix}font-sans-serif) !default;
 $font-family-code:            var(--#{$prefix}font-monospace) !default;
 
 
 // OUDS mod
 //// Type scale & vertical rhythm completely revamped to match Orange Web Guidelines
-
+// TODO LM: Check for spacings and colors
 // $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings and margins
 // $font-size-base affects the font size of the body text
 $font-size-root:              null !default;
-$font-size-base:              1rem !default; // Assumes the browser default, typically `16px`
-$font-size-sm:                $font-size-base * .875 !default;  // 14px
-$font-size-lg:                $font-size-base * 1.125 !default; // 18px
-$font-size-xlg:               $font-size-base * 1.25 !default;  // 20px
+$font-size-base:              var(--#{$prefix}font-size-body-medium) !default; // Assumes the browser default, typically `16px`
+$font-size-sm:                var(--#{$prefix}font-size-body-small) !default;  // 14px
+$font-size-lg:                var(--#{$prefix}font-size-body-large) !default; // 18px
+// $font-size-xlg:               $ouds-font-size-label-xlarge !default;  // 20px // TODO LM remove ?
 
 $font-weight-lighter:         null !default;
 $font-weight-light:           null !default;
-$font-weight-normal:          400 !default;
-$font-weight-medium:          500 !default;
-$font-weight-semibold:        600 !default;
-$font-weight-bold:            700 !default;
+$font-weight-normal:          $ouds-font-weight-web-default !default;
+$font-weight-medium:          null !default;
+$font-weight-semibold:        null !default;
+$font-weight-bold:            $ouds-font-weight-web-strong !default;
 $font-weight-bolder:          null !default;
 
 $font-weight-base:            $font-weight-normal !default;
 
-// stylelint-disable function-disallowed-list
-$line-height-base:            calc(18 / 16) !default;
-$line-height-sm:              calc(16 / 14) !default;
-$line-height-lg:              calc(30 / 16) !default;
-// stylelint-enable function-disallowed-list
+$line-height-base:            var(--#{$prefix}font-line-height-body-medium) !default;
+$line-height-sm:              var(--#{$prefix}font-line-height-body-small) !default;
+$line-height-lg:              var(--#{$prefix}font-line-height-body-large) !default;
 
 $line-length-sm:              40ch !default;
 $line-length-md:              80ch !default;
 
-$letter-spacing-base:         $spacer * -.005 !default; // -0.1px
+$letter-spacing-base:         var(--#{$prefix}font-letter-spacing-body-medium) !default;
+$letter-spacing-sm:           var(--#{$prefix}font-letter-spacing-body-small) !default;
+$letter-spacing-lg:           var(--#{$prefix}font-letter-spacing-body-large) !default;
 
-$h1-font-size:                $font-size-base * 2.125 !default;   // 34px
-$h2-font-size:                $font-size-base * 1.875 !default;   // 30px
-$h3-font-size:                $font-size-base * 1.5 !default;     // 24px
-$h4-font-size:                $font-size-xlg !default;            // 20px
-$h5-font-size:                $font-size-lg !default;             // 18px
-$h6-font-size:                $font-size-base !default;           // 16px
+$h1-font-size:                var(--#{$prefix}font-size-heading-xlarge) !default;
+$h2-font-size:                var(--#{$prefix}font-size-heading-large) !default;
+$h3-font-size:                var(--#{$prefix}font-size-heading-medium) !default;
+$h4-font-size:                var(--#{$prefix}font-size-heading-small) !default;
+$h5-font-size:                var(--#{$prefix}font-size-heading-xsmall) !default;
+$h6-font-size:                var(--#{$prefix}font-size-body-large) !default;
 // scss-docs-end font-variables
 
 // scss-docs-start font-sizes
@@ -775,71 +773,63 @@ $font-sizes: (
   6: $h6-font-size
 ) !default;
 // scss-docs-end font-sizes
-
+// TODO LM: Decide if we should have them or not
 // scss-docs-start letter-spacing
-$h1-spacing:                  $letter-spacing-base * 10 !default; // -1px
-$h2-spacing:                  $letter-spacing-base * 8 !default;  // -0.8px
-$mid-spacing:                 $letter-spacing-base * 6 !default;  // -0.6px
-$h3-spacing:                  $letter-spacing-base * 5 !default;  // -0.5px
-$h4-spacing:                  $letter-spacing-base * 4 !default;  // -0.4px
-$h5-spacing:                  $letter-spacing-base * 2 !default;  // -0.2px
-$h6-spacing:                  $letter-spacing-base !default;
+$h2-spacing: var(--#{$prefix}font-letter-spacing-heading-large) !default;
+$h3-spacing: var(--#{$prefix}font-letter-spacing-heading-medium) !default;
+$h5-spacing: var(--#{$prefix}font-letter-spacing-heading-xsmall) !default;
 // scss-docs-end letter-spacing
 
-// stylelint-disable function-disallowed-list
 // scss-docs-start line-height
-$h1-line-height:              1 !default;
-$h2-line-height:              calc(32 / 30) !default;
-$h3-line-height:              calc(26 / 24) !default;
-$h4-line-height:              calc(22 / 20) !default;
-$h5-line-height:              calc(20 / 18) !default;
-$h6-line-height:              $line-height-base !default;
+$h5-line-height: var(--#{$prefix}font-line-height-heading-xsmall) !default;
 // scss-docs-end line-height
-// stylelint-enable function-disallowed-list
 
 // scss-docs-start headings-variables
 $headings-margin-bottom:      $spacer !default; // OUDS mod
 $headings-font-family:        null !default;
 $headings-font-style:         null !default;
-$headings-font-weight:        700 !default;
-$headings-line-height:        $h6-line-height !default;
+$headings-font-weight:        $ouds-font-weight-web-heading !default;
+$headings-line-height:        null !default;
 $headings-color:              inherit !default;
 // scss-docs-end headings-variables
 
+// TODO LM: Check + test other values in here
 // scss-docs-start display-headings
-$display1-size:               $font-size-xlg * 3 !default;        // 60px
-$display2-size:               $font-size-xlg * 2.5 !default;      // 50px
-$display3-size:               $font-size-xlg * 2 !default;        // 40px
-$display4-size:               $h1-font-size !default;             // 34px
-$display1-spacing:            $letter-spacing-base * 20 !default; // -2px
-$display2-spacing:            $letter-spacing-base * 16 !default; // -1.6px
-$display3-spacing:            $h1-spacing !default;               // -1px
-$display4-spacing:            $h1-spacing !default;               // -1px
-$display-line-height:         $h1-line-height !default;
+$display-font-sizes: (
+  1: display-large,
+  2: display-medium,
+  3: display-small
+) !default;
+
+$display-font-family: null !default;
+$display-font-style:  null !default;
+$display-font-weight: $ouds-font-weight-web-display !default;
+$display-line-height: $headings-line-height !default;
 // scss-docs-end display-headings
 
 // scss-docs-start type-variables
-$lead-font-size:              $font-size-xlg !default;
-$lead-font-weight:            400 !default;
-$lead-line-height:            1.5 !default;
-$lead-letter-spacing:         $letter-spacing-base * 4 !default;
+$lead-font-size:              $font-size-lg !default;
+$lead-font-weight:            $ouds-font-weight-web-body-default !default;
+// $lead-line-height:            $line-height-lg !default;
+// $lead-letter-spacing:         $letter-spacing-lg !default;
 
-$small-font-size:             .875rem !default;
+$small-font-size:             $font-size-sm !default;
+$small-font-weight:           $ouds-font-weight-web-body-default !default;
+// $small-line-height:           $line-height-sm !default;
+// $small-letter-spacing:        $letter-spacing-sm !default;
 
-$sub-sup-font-size:           .75em !default;
+$sub-sup-font-size:           .75em !default; // TODO LM: Ask designers for this use case
 
 // fusv-disable
 $text-muted:                  var(--#{$prefix}secondary-color) !default; // Deprecated in Bootstrap 5.3.0
 // fusv-enable
 
-$initialism-font-size:        $small-font-size !default;
+// $initialism-font-size:        $small-font-size !default;
 
 $blockquote-margin-y:         $spacer !default;
-$blockquote-font-size:        $font-size-xlg !default;
+// $blockquote-font-size:        $font-size-lg !default;
 $blockquote-footer-color:     var(--#{$prefix}secondary-color) !default; // OUDS mod: instead of `$gray-600`
-$blockquote-footer-font-size: $small-font-size !default;
-$blockquote-line-height:      1.5 !default; // OUDS mod
-$blockquote-letter-spacing:   $letter-spacing-base * .25 !default; // OUDS mod
+// $blockquote-footer-font-size: $small-font-size !default;
 
 $hr-margin-y:                 $spacer !default;
 $hr-color:                    inherit !default;
@@ -858,7 +848,7 @@ $vr-border-width:             2px !default; // OUDS mod: instead of `var(--#{$pr
 // scss-docs-end vr-variables
 
 $legend-margin-bottom:        $spacer * .25 !default;
-$legend-font-size:            $font-size-xlg !default;
+// $legend-font-size:            $font-size-lg !default;
 $legend-font-weight:          $font-weight-bold !default;
 
 $dt-font-weight:              $font-weight-bold !default;
@@ -993,7 +983,7 @@ $btn-padding-y-lg:            $input-btn-padding-y-lg !default;
 $btn-padding-x-lg:            $input-btn-padding-x-lg !default;
 $btn-font-size-lg:            $input-btn-font-size-lg !default;
 $btn-line-height-lg:          $h5-line-height !default; // OUDS mod
-$btn-letter-spacing-lg:       $letter-spacing-base * 2 !default; // OUDS mod
+$btn-letter-spacing-lg:       calc($letter-spacing-base * 2) !default; // stylelint-disable-line function-disallowed-list
 
 $btn-border-width:            $input-btn-border-width !default;
 
@@ -1109,7 +1099,7 @@ $form-text-color:                       var(--#{$prefix}secondary-color) !defaul
 $form-label-margin-bottom:              .5rem !default; // OUDS mod
 $form-label-font-size:                  null !default;
 $form-label-font-style:                 null !default;
-$form-label-font-weight:                $font-weight-bold !default;
+$form-label-font-weight:                null !default;
 $form-label-color:                      null !default;
 $form-label-disabled-color:             var(--#{$prefix}disabled-color) !default; // OUDS mod
 $form-label-required-margin-left:       .1875rem !default; // OUDS mod
@@ -1121,7 +1111,7 @@ $form-helper-size:                      1.25rem !default; // OUDS mod
 $form-helper-color:                     var(--#{$prefix}info) !default; // OUDS mod
 $form-helper-bg:                        var(--#{$prefix}highlight-color) !default; // OUDS mod
 $form-helper-icon:                      escape-svg($helper-icon) !default; // OUDS mod
-$form-helper-label-margin-bottom:       $form-label-margin-bottom - divide(($form-helper-size - $font-size-base), 2) !default; // OUDS mod
+$form-helper-label-margin-bottom:       $form-label-margin-bottom - divide(($form-helper-size - 1rem), 2) !default; // OUDS mod
 // scss-docs-end form-helper-variables
 
 // scss-docs-start form-input-variables
@@ -1187,7 +1177,7 @@ $form-color-disabled-filter:            brightness(0) invert(1) brightness(.8) !
 
 // scss-docs-start form-check-variables
 $form-check-input-width:                  1em !default;
-$form-check-min-height:                   $font-size-base * $input-btn-line-height !default;
+$form-check-min-height:                   calc($font-size-base * $input-btn-line-height) !default; // stylelint-disable-line function-disallowed-list
 $form-check-padding-start:                $form-check-input-width + .5em !default;
 $form-check-margin-bottom:                .125rem !default;
 $form-check-label-padding-top:            .4375rem !default; // OUDS mod
@@ -1541,15 +1531,15 @@ $navbar-border-color:                       var(--#{$prefix}border-color-subtle)
 $navbar-brand-margin-y-xs:                  $spacer * .5 !default;
 $navbar-brand-logo-size-xs:                 $spacer * 1.5 !default;
 $navbar-brand-font-size-xs:                 1.3125rem !default;
-$navbar-brand-letter-spacing-xs:            $letter-spacing-base * 5 !default;
+$navbar-brand-letter-spacing-xs:            calc($letter-spacing-base * 5) !default; // stylelint-disable-line function-disallowed-list
 $navbar-brand-font-size-two-lined-xs:       1.0625rem !default;
-$navbar-brand-letter-spacing-two-lined-xs:  $letter-spacing-base * 4 !default;
+$navbar-brand-letter-spacing-two-lined-xs:  calc($letter-spacing-base * 4) !default; // stylelint-disable-line function-disallowed-list
 
 $navbar-brand-margin-y:                     $spacer * .95 !default;
 $navbar-brand-logo-size:                    $spacer * 2.5 !default;
-$navbar-brand-letter-spacing:               $letter-spacing-base * 10 !default;
+$navbar-brand-letter-spacing:               calc($letter-spacing-base * 10) !default; // stylelint-disable-line function-disallowed-list
 $navbar-brand-font-size-two-lined:          1.8125rem !default;
-$navbar-brand-letter-spacing-two-lined:     $letter-spacing-base * 8 !default;
+$navbar-brand-letter-spacing-two-lined:     calc($letter-spacing-base * 8) !default; // stylelint-disable-line function-disallowed-list
 
 $navbar-icon-size-xs:                       $spacer * 1.25 !default;
 $navbar-icon-size:                          $spacer * 1.5 !default;
@@ -2097,12 +2087,6 @@ $title-bar-line-height:             $display-line-height !default;
 $title-bar-letter-spacing:          $h2-spacing !default;
 $title-bar-border-width:            calc(var(--#{$prefix}border-width) * .5) !default; // stylelint-disable-line function-disallowed-list
 $title-bar-border-color:            var(--#{$prefix}border-color-subtle) !default;
-
-$title-bar-font-size-md:            $display2-size !default;
-$title-bar-letter-spacing-md:       $display2-spacing !default;
-
-$title-bar-font-size-xl:            $display1-size !default;
-$title-bar-letter-spacing-xl:       $display1-spacing !default;
 // scss-docs-end title-bars-variables
 // End mod
 
@@ -2255,18 +2239,17 @@ $offcanvas-backdrop-opacity:        $modal-backdrop-opacity !default;
 
 // Code
 // OUDS mod
-$code-font-size:                    .875em !default;
+$code-font-size:                    $ouds-font-size-code-medium !default; // OUDS mod: instead of `.875rem`
 $code-color:                        $gray-700 !default;
 
 $kbd-padding-y:                     $spacer * .05 !default;
 $kbd-padding-x:                     $spacer * .05 !default;
-$kbd-font-size:                     $code-font-size !default;
+// $kbd-font-size:                     $code-font-size !default;
 $kbd-color:                         var(--#{$prefix}kbd-color, $black) !default;
 $kbd-bg:                            var(--#{$prefix}kbd-bg, $gray-300) !default;
 $nested-kbd-font-weight:            null !default; // Deprecated in Bootstrap v5.2.0, removing in v6
 
 $pre-color:                         var(--#{$prefix}code-color) !default;
-$pre-line-height:                   1.25 !default;
 // End mod
 
 //
diff --git a/scss/tokens/_composite.scss b/scss/tokens/_composite.scss
index 7750d7de9a..b731565b50 100644
--- a/scss/tokens/_composite.scss
+++ b/scss/tokens/_composite.scss
@@ -13,3 +13,8 @@ $ouds-elevation-sticky-default: $ouds-elevation-x-sticky-default $ouds-elevation
 $ouds-elevation-sticky-emphasized: $ouds-elevation-x-sticky-emphasized $ouds-elevation-y-sticky-emphasized $ouds-elevation-blur-sticky-emphasized $ouds-elevation-spread-sticky-emphasized $ouds-elevation-color-sticky-emphasized !default;
 $ouds-elevation-sticky-navigation-scrolled: $ouds-elevation-x-sticky-navigation-scrolled $ouds-elevation-y-sticky-navigation-scrolled $ouds-elevation-blur-sticky-navigation-scrolled $ouds-elevation-spread-sticky-navigation-scrolled $ouds-elevation-color-sticky-navigation-scrolled !default;
 // scss-docs-end ouds-composite-elevation
+
+// scss-docs-start ouds-composite-font
+$ouds-font-family-sans-serif-stack: "Helvetica Neue", Helvetica, Arial, "SF Pro", Roboto, sans-serif !default; // TODO LM: Do or check RTL as well
+$ouds-font-family-monospace-stack: "SF Mono", Menlo, Monaco, Consolas, monospace !default;
+// scss-docs-end ouds-composite-font
diff --git a/scss/tokens/_raw.scss b/scss/tokens/_raw.scss
index be8ac7bf39..c7a691ef3d 100644
--- a/scss/tokens/_raw.scss
+++ b/scss/tokens/_raw.scss
@@ -267,7 +267,8 @@ $ouds-elevation-y-500: 12px !default;
 // scss-docs-start ouds-raw-font
 $ouds-font-family-brand-default: "Helvetica Neue" !default;
 // $ouds-font-family-brand-tv: "Helvetica Neue LT" !default;
-// $ouds-font-family-monospace-courier-new: "Courier New" !default;
+// $ouds-font-family-monospace-consolas: "Consolas" !default; // TODO LM: Ask for this specific font
+// $ouds-font-family-monospace-courier-new: "Courier New" !default; // TODO LM: Ask to remove this one (default monosapce font is better than this one imo)
 // $ouds-font-family-monospace-menlo: "Menlo" !default;
 // $ouds-font-family-monospace-monaco: "Monaco" !default;
 // $ouds-font-family-monospace-sf-mono: "SF Mono" !default;
@@ -276,23 +277,23 @@ $ouds-font-family-brand-default: "Helvetica Neue" !default;
 // $ouds-font-family-system-noto-sans: "Noto Sans" !default;
 // $ouds-font-family-system-roboto: "Roboto" !default;
 // $ouds-font-family-system-sf-pro: "SF Pro" !default;
-$ouds-font-letter-spacing-150: .18 !default;
-// $ouds-font-letter-spacing-175: .19 !default;
-$ouds-font-letter-spacing-200: .17 !default;
-$ouds-font-letter-spacing-250: .2 !default;
-$ouds-font-letter-spacing-300: .18 !default;
-$ouds-font-letter-spacing-350: 0 !default;
-$ouds-font-letter-spacing-450: -.12 !default;
-$ouds-font-letter-spacing-550: -.28 !default;
-$ouds-font-letter-spacing-650: -.32 !default;
-$ouds-font-letter-spacing-750: -.36 !default;
-$ouds-font-letter-spacing-850: -.4 !default;
-// $ouds-font-letter-spacing-950: -.55 !default;
-$ouds-font-letter-spacing-1050: -.6 !default;
-// $ouds-font-letter-spacing-1150: -.65 !default;
-$ouds-font-letter-spacing-1250: -.7 !default;
-$ouds-font-letter-spacing-1450: -.96 !default;
-$ouds-font-letter-spacing-1850: -1.08 !default;
+$ouds-font-letter-spacing-150: .18px !default; // TODO LM: Ask for px in tokenator.
+// $ouds-font-letter-spacing-175: .19px !default;
+$ouds-font-letter-spacing-200: .17px !default; // TODO LM: Weird value compared to the 5 positive ones.
+$ouds-font-letter-spacing-250: .2px !default;
+$ouds-font-letter-spacing-300: .18px !default;
+$ouds-font-letter-spacing-350: 0px !default;
+$ouds-font-letter-spacing-450: -.12px !default;
+$ouds-font-letter-spacing-550: -.28px !default;
+$ouds-font-letter-spacing-650: -.32px !default;
+$ouds-font-letter-spacing-750: -.36px !default;
+$ouds-font-letter-spacing-850: -.4px !default;
+// $ouds-font-letter-spacing-950: -.55px !default;
+$ouds-font-letter-spacing-1050: -.6px !default;
+// $ouds-font-letter-spacing-1150: -.65px !default;
+$ouds-font-letter-spacing-1250: -.7px !default;
+$ouds-font-letter-spacing-1450: -.96px !default;
+$ouds-font-letter-spacing-1850: -1.08px !default;
 $ouds-font-line-height-250: 16px !default;
 $ouds-font-line-height-350: 20px !default;
 $ouds-font-line-height-450: 24px !default;
diff --git a/scss/tokens/_semantic.scss b/scss/tokens/_semantic.scss
index d086a3297b..bffc07b322 100644
--- a/scss/tokens/_semantic.scss
+++ b/scss/tokens/_semantic.scss
@@ -333,6 +333,9 @@ $ouds-font-letter-spacing-heading-small-tablet: $ouds-font-letter-spacing-350 !d
 $ouds-font-letter-spacing-heading-xlarge-desktop: $ouds-font-letter-spacing-850 !default;
 $ouds-font-letter-spacing-heading-xlarge-mobile: $ouds-font-letter-spacing-550 !default;
 $ouds-font-letter-spacing-heading-xlarge-tablet: $ouds-font-letter-spacing-750 !default;
+$ouds-font-letter-spacing-heading-xsmall-desktop: $ouds-font-letter-spacing-350 !default; // TODO LM: Ask designer about these tokens
+$ouds-font-letter-spacing-heading-xsmall-mobile: $ouds-font-letter-spacing-250 !default;
+$ouds-font-letter-spacing-heading-xsmall-tablet: $ouds-font-letter-spacing-300 !default; // TODO LM: Until there
 $ouds-font-letter-spacing-label-large: $ouds-font-letter-spacing-250 !default;
 $ouds-font-letter-spacing-label-medium: $ouds-font-letter-spacing-200 !default;
 $ouds-font-letter-spacing-label-small: $ouds-font-letter-spacing-150 !default;
@@ -369,6 +372,9 @@ $ouds-font-line-height-heading-small-tablet: $ouds-font-line-height-550 !default
 $ouds-font-line-height-heading-xlarge-desktop: $ouds-font-line-height-1050 !default;
 $ouds-font-line-height-heading-xlarge-mobile: $ouds-font-line-height-750 !default;
 $ouds-font-line-height-heading-xlarge-tablet: $ouds-font-line-height-950 !default;
+$ouds-font-line-height-heading-xsmall-desktop: $ouds-font-line-height-550 !default; // TODO LM: Ask designer about these tokens
+$ouds-font-line-height-heading-xsmall-mobile: $ouds-font-line-height-450 !default;
+$ouds-font-line-height-heading-xsmall-tablet: $ouds-font-line-height-450 !default; // TODO LM: Until there
 $ouds-font-line-height-label-large: $ouds-font-line-height-450 !default;
 $ouds-font-line-height-label-medium: $ouds-font-line-height-350 !default;
 $ouds-font-line-height-label-small: $ouds-font-line-height-250 !default;
@@ -382,7 +388,7 @@ $ouds-font-size-body-medium-tablet: $ouds-font-size-200 !default;
 $ouds-font-size-body-small-desktop: $ouds-font-size-200 !default;
 $ouds-font-size-body-small-mobile: $ouds-font-size-150 !default;
 $ouds-font-size-body-small-tablet: $ouds-font-size-150 !default;
-$ouds-font-size-code-medium: $ouds-font-size-200 !default;
+$ouds-font-size-code-medium: $ouds-font-size-200 !default; // TODO LM: Decide whether it should be em or rem and apply it
 $ouds-font-size-code-small: $ouds-font-size-150 !default;
 $ouds-font-size-display-large-desktop: $ouds-font-size-1850 !default;
 $ouds-font-size-display-large-mobile: $ouds-font-size-850 !default;
@@ -405,6 +411,9 @@ $ouds-font-size-heading-small-tablet: $ouds-font-size-350 !default;
 $ouds-font-size-heading-xlarge-desktop: $ouds-font-size-850 !default;
 $ouds-font-size-heading-xlarge-mobile: $ouds-font-size-550 !default;
 $ouds-font-size-heading-xlarge-tablet: $ouds-font-size-750 !default;
+$ouds-font-size-heading-xsmall-desktop: $ouds-font-size-350 !default; // TODO LM: Ask designer about these tokens
+$ouds-font-size-heading-xsmall-mobile: $ouds-font-size-250 !default;
+$ouds-font-size-heading-xsmall-tablet: $ouds-font-size-300 !default; // TODO LM: Until there
 $ouds-font-size-label-large: $ouds-font-size-250 !default;
 $ouds-font-size-label-medium: $ouds-font-size-200 !default;
 $ouds-font-size-label-small: $ouds-font-size-150 !default;
@@ -414,7 +423,7 @@ $ouds-font-weight-web-default: $ouds-font-weight-400 !default;
 $ouds-font-weight-web-strong: $ouds-font-weight-700 !default;
 $ouds-font-weight-web-body-default: $ouds-font-weight-web-default !default;
 $ouds-font-weight-web-body-strong: $ouds-font-weight-web-strong !default;
-$ouds-font-weight-web-display: $ouds-font-weight-web-strong !default;
+$ouds-font-weight-web-display: $ouds-font-weight-web-strong !default; // TODO LM: Ask for a color field for code, headings, body, etc
 $ouds-font-weight-web-heading: $ouds-font-weight-web-strong !default;
 $ouds-font-weight-web-label-default: $ouds-font-weight-web-default !default;
 $ouds-font-weight-web-label-strong: $ouds-font-weight-web-strong !default;
diff --git a/site/assets/scss/_colors.scss b/site/assets/scss/_colors.scss
index 9ee7abbd13..c9c932e4a9 100644
--- a/site/assets/scss/_colors.scss
+++ b/site/assets/scss/_colors.scss
@@ -1,6 +1,7 @@
 //
 // Docs color palette classes
 //
+// TODO LM
 
 @each $color, $value in map-merge($colors, ("gray-500": $gray-500)) {
   .swatch-#{$color} {
diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index 12e83f4c84..26edb39ac9 100644
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -373,7 +373,7 @@
     background-color: transparent;
     border: 0;
   }
-
+  // TODO LM
   pre code {
     @include font-size(inherit);
     color: var(--bs-body-color); // Effectively the base text color
@@ -405,6 +405,7 @@
   margin-bottom: 1rem;
 }
 
+// TODO LM
 // OUDS mod
 // scss-docs-start sticker-fs-4xl
 .sticker-fs-4xl {
diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss
index d4e4e1f189..d0ea3fff74 100644
--- a/site/assets/scss/_content.scss
+++ b/site/assets/scss/_content.scss
@@ -51,7 +51,7 @@
       line-height: $line-height-base;
     }
   }
-
+// TODO LM
   > details {
     padding: 0 10px; // static even when zoomed
     font-size: 1rem;
@@ -109,7 +109,7 @@
     }
   }
 }
-
+// TODO LM
 .bd-title {
   --bs-heading-color: var(--bs-emphasis-color);
   @include font-size(3rem);
diff --git a/site/assets/scss/_masthead.scss b/site/assets/scss/_masthead.scss
index 560b9a4059..916c37a404 100644
--- a/site/assets/scss/_masthead.scss
+++ b/site/assets/scss/_masthead.scss
@@ -9,7 +9,7 @@
   }
 
   .lead {
-    @include font-size(1rem);
+    @extend %label-large;
     font-weight: 400;
     color: var(--bs-secondary-color);
   }
@@ -55,7 +55,7 @@
     }
   }
 }
-
+// TODO LM
 .masthead-followup {
   h2,
   h3,
diff --git a/site/assets/scss/_ouds-web.scss b/site/assets/scss/_ouds-web.scss
index b3ec661888..6d3234d96b 100644
--- a/site/assets/scss/_ouds-web.scss
+++ b/site/assets/scss/_ouds-web.scss
@@ -11,7 +11,7 @@ html,
 body {
   min-height: 100vh;
 }
-
+// TODO LM
 .display-0 {
   font-size: 5.25em;
   backface-visibility: hidden;
diff --git a/site/assets/scss/_placeholder-img.scss b/site/assets/scss/_placeholder-img.scss
index 6f5bbe4189..81bd15eedb 100644
--- a/site/assets/scss/_placeholder-img.scss
+++ b/site/assets/scss/_placeholder-img.scss
@@ -9,7 +9,7 @@
   user-select: none;
   text-anchor: middle;
 }
-
+// TODO LM
 .bd-placeholder-img-lg {
   @include font-size(3.5rem);
 }
diff --git a/site/assets/scss/_sidebar.scss b/site/assets/scss/_sidebar.scss
index 6ce66af533..8e11e3226f 100644
--- a/site/assets/scss/_sidebar.scss
+++ b/site/assets/scss/_sidebar.scss
@@ -29,7 +29,7 @@
   }
   // End mod
 }
-
+// TODO LM
 .bd-links-nav {
   @include media-breakpoint-down(lg) {
     font-size: .875rem;
diff --git a/site/assets/scss/_tarteaucitron.scss b/site/assets/scss/_tarteaucitron.scss
index c76ac9743c..58dc040c8d 100644
--- a/site/assets/scss/_tarteaucitron.scss
+++ b/site/assets/scss/_tarteaucitron.scss
@@ -52,7 +52,7 @@
     }
   }
 }
-
+// TODO LM
 @include tac("DisclaimerAlert") {
   font-size: $font-size-sm;
 }
@@ -79,7 +79,7 @@
   border: 0;
   opacity: $modal-backdrop-opacity;
 }
-
+// TODO LM
 @include tac("H1", true) {
   margin-bottom: $spacer;
   font-size: $h2-font-size;
@@ -89,12 +89,12 @@
 @include tac("H2", true) {
   padding-top: $spacer / 10;
   font-size: $h4-font-size;
-  letter-spacing: $h4-spacing;
+  letter-spacing: -0.4px;
 }
 
 @include tac("H3", true) {
   font-size: $h6-font-size;
-  letter-spacing: $h6-spacing;
+  letter-spacing: -0.1px;
 }
 
 @include tac("Info") {
@@ -147,7 +147,7 @@
   color: $white;
   background-color: $black;
 }
-
+// TODO LM
 @include tac("Allow", true) {
   @include button-icon($form-switch-checked-bg-image, $btn-font-size-sm);
 
diff --git a/site/assets/scss/_toc.scss b/site/assets/scss/_toc.scss
index 8dbfcb473e..eea5804f3b 100644
--- a/site/assets/scss/_toc.scss
+++ b/site/assets/scss/_toc.scss
@@ -10,7 +10,7 @@
     overflow-y: auto;
   }
 
-  nav {
+  nav { // TODO LM
     @include font-size(.875rem);
 
     ul {
diff --git a/site/content/docs/0.0/content/typography.md b/site/content/docs/0.0/content/typography.md
index 89df4d2f79..53aa181e89 100644
--- a/site/content/docs/0.0/content/typography.md
+++ b/site/content/docs/0.0/content/typography.md
@@ -8,4 +8,281 @@ aliases:
 toc: true
 ---
 
-{{< callout-soon "page" >}}
+## Global settings
+
+Bootstrap sets basic global display, typography, and link styles. When more control is needed, check out the [textual utility classes]({{< docsref "/utilities/text" >}}).
+
+- Use a [native font stack]({{< docsref "/content/reboot#native-font-stack" >}}) that selects the best `font-family` for each OS and device.
+- For a more inclusive and accessible type scale, we use the browser's default root `font-size` (typically 16px) so visitors can customize their browser defaults as needed.
+- Use the `$font-family-base`, `$font-size-base`, and `$line-height-base` attributes as our typographic base applied to the `<body>`.
+- Set the global link color via `$link-color`.
+- Use `$body-bg` to set a `background-color` on the `<body>` (`#fff` by default).
+
+These styles can be found within `_reboot.scss`, and the global variables are defined in `_variables.scss`. Make sure to set `$font-size-base` in `rem`.
+
+## Headings
+
+All HTML headings, `<h1>` through `<h6>`, are available.
+
+{{< bs-table >}}
+| Heading | Example |
+| --- | --- |
+| `<h1></h1>` | <span class="h1">h1. Bootstrap heading</span> |
+| `<h2></h2>` | <span class="h2">h2. Bootstrap heading</span> |
+| `<h3></h3>` | <span class="h3">h3. Bootstrap heading</span> |
+| `<h4></h4>` | <span class="h4">h4. Bootstrap heading</span> |
+| `<h5></h5>` | <span class="h5">h5. Bootstrap heading</span> |
+| `<h6></h6>` | <span class="h6">h6. Bootstrap heading</span> |
+{{< /bs-table >}}
+
+```html
+<h1>h1. Bootstrap heading</h1>
+<h2>h2. Bootstrap heading</h2>
+<h3>h3. Bootstrap heading</h3>
+<h4>h4. Bootstrap heading</h4>
+<h5>h5. Bootstrap heading</h5>
+<h6>h6. Bootstrap heading</h6>
+```
+
+`.h1` through `.h6` classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.
+
+{{< example >}}
+<p class="h1">h1. Bootstrap heading</p>
+<p class="h2">h2. Bootstrap heading</p>
+<p class="h3">h3. Bootstrap heading</p>
+<p class="h4">h4. Bootstrap heading</p>
+<p class="h5">h5. Bootstrap heading</p>
+<p class="h6">h6. Bootstrap heading</p>
+{{< /example >}}
+
+### Customizing headings
+
+Use the included utility classes to recreate the small secondary heading text from Bootstrap 3.
+
+{{< example >}}
+<h3>
+  Fancy display heading
+  <small class="text-body-secondary">With faded secondary text</small>
+</h3>
+{{< /example >}}
+
+## Display headings
+
+Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a **display heading**—a larger, slightly more opinionated heading style.
+
+<div class="bd-example">
+  <div class="display-1 pb-3 mb-3 border-bottom">Display 1</div>
+  <div class="display-2 pb-3 mb-3 border-bottom">Display 2</div>
+  <div class="display-3 pb-3 mb-3 border-bottom">Display 3</div>
+  <div class="display-4 pb-3 mb-3 border-bottom">Display 4</div>
+  <div class="display-5 pb-3 mb-3 border-bottom">Display 5</div>
+  <div class="display-6">Display 6</div>
+</div>
+
+```html
+<h1 class="display-1">Display 1</h1>
+<h1 class="display-2">Display 2</h1>
+<h1 class="display-3">Display 3</h1>
+<h1 class="display-4">Display 4</h1>
+<h1 class="display-5">Display 5</h1>
+<h1 class="display-6">Display 6</h1>
+```
+
+Display headings are configured via the `$display-font-sizes` Sass map and two variables, `$display-font-weight` and `$display-line-height`.
+
+Display headings are customizable via two variables, `$display-font-family` and `$display-font-style`.
+
+{{< scss-docs name="display-headings" file="scss/_variables.scss" >}}
+
+## Lead
+
+Make a paragraph stand out by adding `.lead`.
+
+{{< example >}}
+<p class="lead">
+  This is a lead paragraph. It stands out from regular paragraphs.
+</p>
+{{< /example >}}
+
+## Inline text elements
+
+Styling for common inline HTML5 elements.
+
+{{< example >}}
+<p>You can use the mark tag to <mark>highlight</mark> text.</p>
+<p><del>This line of text is meant to be treated as deleted text.</del></p>
+<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
+<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
+<p><u>This line of text will render as underlined.</u></p>
+<p><small>This line of text is meant to be treated as fine print.</small></p>
+<p><strong>This line rendered as bold text.</strong></p>
+<p><em>This line rendered as italicized text.</em></p>
+{{< /example >}}
+
+Beware that those tags should be used for semantic purpose:
+
+- `<mark>` represents text which is marked or highlighted for reference or notation purposes.
+- `<small>` represents side-comments and small print, like copyright and legal text.
+- `<s>` represents element that are no longer relevant or no longer accurate.
+- `<u>` represents a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation.
+
+If you want to style your text, you should use the following classes instead:
+
+- `.mark` will apply the same styles as `<mark>`.
+- `.small` will apply the same styles as `<small>`.
+- `.text-decoration-underline` will apply the same styles as `<u>`.
+- `.text-decoration-line-through` will apply the same styles as `<s>`.
+
+While not shown above, feel free to use `<b>` and `<i>` in HTML5. `<b>` is meant to highlight words or phrases without conveying additional importance, while `<i>` is mostly for voice, technical terms, etc.
+
+## Text utilities
+
+Change text alignment, transform, style, weight, line-height, decoration and color with our [text utilities]({{< docsref "/utilities/text" >}}) and [color utilities]({{< docsref "/utilities/colors" >}}).
+
+## Abbreviations
+
+Stylized implementation of HTML's `<abbr>` element for abbreviations and acronyms to show the expanded version on hover. Abbreviations have a default underline and gain a help cursor to provide additional context on hover and to users of assistive technologies.
+
+Add `.initialism` to an abbreviation for a slightly smaller font-size.
+
+{{< example >}}
+<p><abbr title="attribute">attr</abbr></p>
+<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
+{{< /example >}}
+
+## Blockquotes
+
+For quoting blocks of content from another source within your document. Wrap `<blockquote class="blockquote">` around any HTML as the quote.
+
+{{< example >}}
+<blockquote class="blockquote">
+  <p>A well-known quote, contained in a blockquote element.</p>
+</blockquote>
+{{< /example >}}
+
+### Naming a source
+
+The HTML spec requires that blockquote attribution be placed outside the `<blockquote>`. When providing attribution, wrap your `<blockquote>` in a `<figure>` and use a `<figcaption>` or a block level element (e.g., `<p>`) with the `.blockquote-footer` class. Be sure to wrap the name of the source work in `<cite>` as well.
+
+{{< example >}}
+<figure>
+  <blockquote class="blockquote">
+    <p>A well-known quote, contained in a blockquote element.</p>
+  </blockquote>
+  <figcaption class="blockquote-footer">
+    Someone famous in <cite title="Source Title">Source Title</cite>
+  </figcaption>
+</figure>
+{{< /example >}}
+
+### Alignment
+
+Use text utilities as needed to change the alignment of your blockquote.
+
+{{< example >}}
+<figure class="text-center">
+  <blockquote class="blockquote">
+    <p>A well-known quote, contained in a blockquote element.</p>
+  </blockquote>
+  <figcaption class="blockquote-footer">
+    Someone famous in <cite title="Source Title">Source Title</cite>
+  </figcaption>
+</figure>
+{{< /example >}}
+
+{{< example >}}
+<figure class="text-end">
+  <blockquote class="blockquote">
+    <p>A well-known quote, contained in a blockquote element.</p>
+  </blockquote>
+  <figcaption class="blockquote-footer">
+    Someone famous in <cite title="Source Title">Source Title</cite>
+  </figcaption>
+</figure>
+{{< /example >}}
+
+## Lists
+
+### Unstyled
+
+Remove the default `list-style` and left margin on list items (immediate children only). **This only applies to immediate children list items**, meaning you will need to add the class for any nested lists as well.
+
+{{< example >}}
+<ul class="list-unstyled">
+  <li>This is a list.</li>
+  <li>It appears completely unstyled.</li>
+  <li>Structurally, it's still a list.</li>
+  <li>However, this style only applies to immediate child elements.</li>
+  <li>Nested lists:
+    <ul>
+      <li>are unaffected by this style</li>
+      <li>will still show a bullet</li>
+      <li>and have appropriate left margin</li>
+    </ul>
+  </li>
+  <li>This may still come in handy in some situations.</li>
+</ul>
+{{< /example >}}
+
+### Inline
+
+Remove a list's bullets and apply some light `margin` with a combination of two classes, `.list-inline` and `.list-inline-item`.
+
+{{< example >}}
+<ul class="list-inline">
+  <li class="list-inline-item">This is a list item.</li>
+  <li class="list-inline-item">And another one.</li>
+  <li class="list-inline-item">But they're displayed inline.</li>
+</ul>
+{{< /example >}}
+
+### Description list alignment
+
+Align terms and descriptions horizontally by using our grid system's predefined classes (or semantic mixins). For longer terms, you can optionally add a `.text-truncate` class to truncate the text with an ellipsis.
+
+{{< example >}}
+<dl class="row">
+  <dt class="col-sm-3">Description lists</dt>
+  <dd class="col-sm-9">A description list is perfect for defining terms.</dd>
+
+  <dt class="col-sm-3">Term</dt>
+  <dd class="col-sm-9">
+    <p>Definition for the term.</p>
+    <p>And some more placeholder definition text.</p>
+  </dd>
+
+  <dt class="col-sm-3">Another term</dt>
+  <dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd>
+
+  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
+  <dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</dd>
+
+  <dt class="col-sm-3">Nesting</dt>
+  <dd class="col-sm-9">
+    <dl class="row">
+      <dt class="col-sm-4">Nested definition list</dt>
+      <dd class="col-sm-8">I heard you like definition lists. Let me put a definition list inside your definition list.</dd>
+    </dl>
+  </dd>
+</dl>
+{{< /example >}}
+
+## Responsive font sizes
+
+In Bootstrap 5, we've enabled responsive font sizes by default, allowing text to scale more naturally across device and viewport sizes. Have a look at the [RFS page]({{< docsref "/getting-started/rfs" >}}) to find out how this works.
+
+## CSS
+
+### Sass variables
+
+Headings have some dedicated variables for sizing and spacing.
+
+{{< scss-docs name="headings-variables" file="scss/_variables.scss" >}}
+
+Miscellaneous typography elements covered here and in [Reboot]({{< docsref "/content/reboot" >}}) also have dedicated variables.
+
+{{< scss-docs name="type-variables" file="scss/_variables.scss" >}}
+
+### Sass mixins
+
+There are no dedicated mixins for typography, but Bootstrap does use [Responsive Font Sizing (RFS)]({{< docsref "/getting-started/rfs" >}}).
diff --git a/site/content/docs/0.0/examples/font/index.html b/site/content/docs/0.0/examples/font/index.html
new file mode 100644
index 0000000000..28e1be87e0
--- /dev/null
+++ b/site/content/docs/0.0/examples/font/index.html
@@ -0,0 +1,9 @@
+---
+layout: examples
+title: Font
+aliases:
+- "/examples/font"
+- "/docs/examples/font"
+---
+
+<main style="background-color: #ff9f9f"></main>
diff --git a/site/data/examples.yml b/site/data/examples.yml
index b777dab722..cd25a173b0 100644
--- a/site/data/examples.yml
+++ b/site/data/examples.yml
@@ -40,6 +40,8 @@
 - category: Framework
   description: "Examples that focus on implementing uses of built-in components provided by OUDS Web."
   examples:
+    - name: Font
+      description: "Multiple examples of fonts to see them in action."
     - name: Grid
       description: "Multiple examples of grid layouts with all four tiers, nesting, and more."
     - name: Grid system
diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml
index ddc9cccc1e..103498fbfa 100644
--- a/site/data/sidebar.yml
+++ b/site/data/sidebar.yml
@@ -66,9 +66,7 @@
   icon_color: body-color
   pages:
     - title: Reboot
-      draft: true
     - title: Typography
-      draft: true
     - title: Images
       draft: true
     - title: Tables
@@ -205,7 +203,6 @@
     - title: Float
     - title: Interactions
     - title: Link
-      draft: true
     - title: Object fit
     - title: Opacity
     - title: Overflow
@@ -214,7 +211,6 @@
     - title: Sizing
     - title: Spacing
     - title: Text
-      draft: true
     - title: Vertical align
     - title: Visibility
     - title: Z-index
diff --git a/site/static/docs/0.0/assets/img/examples/font.png b/site/static/docs/0.0/assets/img/examples/font.png
new file mode 100644
index 0000000000..0ccfd5674a
Binary files /dev/null and b/site/static/docs/0.0/assets/img/examples/font.png differ
diff --git a/site/static/docs/0.0/assets/img/examples/font@2x.png b/site/static/docs/0.0/assets/img/examples/font@2x.png
new file mode 100644
index 0000000000..95337d7110
Binary files /dev/null and b/site/static/docs/0.0/assets/img/examples/font@2x.png differ