diff --git a/scss/_maps.scss b/scss/_maps.scss
index a00532630d..a91bf69447 100644
--- a/scss/_maps.scss
+++ b/scss/_maps.scss
@@ -85,22 +85,22 @@ $ouds-elevations: (
 
 // scss-docs-start ouds-maps-font
 $ouds-font-sizes: (
-  dl: "/display-large",
-  dm: "/display-medium",
-  ds: "/display-small",
-  hxl: "/heading-xlarge",
-  hl: "/heading-large",
-  hm: "/heading-medium",
-  hs: "/heading-small",
-  bl: "/body-large",
-  bm: "/body-medium",
-  bs: "/body-small",
-  lxl: "/label-xlarge",
-  ll: "/label-large",
-  lm: "/label-medium",
-  ls: "/label-small",
+  cs: "/code-small",
   cm: "/code-medium",
-  cs: "/code-small"
+  ls: "/label-small",
+  lm: "/label-medium",
+  ll: "/label-large",
+  lxl: "/label-xlarge",
+  bs: "/body-small",
+  bm: "/body-medium",
+  bl: "/body-large",
+  hs: "/heading-small",
+  hm: "/heading-medium",
+  hl: "/heading-large",
+  hxl: "/heading-xlarge",
+  ds: "/display-small",
+  dm: "/display-medium",
+  dl: "/display-large",
 ) !default;
 
 $ouds-font-weights: (
diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index ca22e52446..a5329ebd89 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 maybe for some RTL fonts
+// 5. Prevent faux-bold/italic especially for some RTL fonts
 //    See https://developer.mozilla.org/fr/docs/Web/CSS/font-synthesis
 
 // scss-docs-start reboot-body-rules
diff --git a/scss/_root.scss b/scss/_root.scss
index c6173c5da6..b181ee518a 100644
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -79,6 +79,7 @@
   --#{$prefix}font-size-label-large: #{px-to-rem($ouds-font-size-label-large)};
   --#{$prefix}font-size-label-medium: #{px-to-rem($ouds-font-size-label-medium)};
   --#{$prefix}font-size-label-small: #{px-to-rem($ouds-font-size-label-small)};
+  --#{$prefix}font-size-code-medium: #{px-to-rem($ouds-font-size-code-medium)};
   --#{$prefix}font-line-height-display-large: #{divide($ouds-font-line-height-display-large-mobile, $ouds-font-size-display-large-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-small: #{divide($ouds-font-line-height-display-small-mobile, $ouds-font-size-display-small-mobile)};
@@ -93,6 +94,7 @@
   --#{$prefix}font-line-height-label-large: #{divide($ouds-font-line-height-label-large, $ouds-font-size-label-large)};
   --#{$prefix}font-line-height-label-medium: #{divide($ouds-font-line-height-label-medium, $ouds-font-size-label-medium)};
   --#{$prefix}font-line-height-label-small: #{divide($ouds-font-line-height-label-small, $ouds-font-size-label-small)};
+  --#{$prefix}font-line-height-code-medium: #{divide($ouds-font-line-height-label-small, $ouds-font-size-code-medium)};
   --#{$prefix}font-letter-spacing-display-large: #{px-to-rem($ouds-font-letter-spacing-display-large-mobile)};
   --#{$prefix}font-letter-spacing-display-medium: #{px-to-rem($ouds-font-letter-spacing-display-medium-mobile)};
   --#{$prefix}font-letter-spacing-display-small: #{px-to-rem($ouds-font-letter-spacing-display-small-mobile)};
@@ -107,6 +109,7 @@
   --#{$prefix}font-letter-spacing-label-large: #{px-to-rem($ouds-font-letter-spacing-label-large)};
   --#{$prefix}font-letter-spacing-label-medium: #{px-to-rem($ouds-font-letter-spacing-label-medium)};
   --#{$prefix}font-letter-spacing-label-small: #{px-to-rem($ouds-font-letter-spacing-label-small)};
+  --#{$prefix}font-letter-spacing-code-medium: #{px-to-rem($ouds-font-letter-spacing-code-medium)};
   --#{$prefix}font-max-width-display-large: #{px-to-rem($ouds-size-max-width-type-display-large-mobile)};
   --#{$prefix}font-max-width-display-medium: #{px-to-rem($ouds-size-max-width-type-display-medium-mobile)};
   --#{$prefix}font-max-width-display-small: #{px-to-rem($ouds-size-max-width-type-display-small-mobile)};
diff --git a/scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss b/scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss
index 75e4a0741d..f0c332711a 100644
--- a/scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss
+++ b/scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss
@@ -3041,76 +3041,61 @@ $utilities: ();
 
         /* rtl:end:remove */
 
-        .fs-dl {
-          max-width: var(--bs-font-max-width-display-large);
-          font-size: var(--bs-font-size-display-large);
-          line-height: var(--bs-font-line-height-display-large);
-
-          /* rtl:remove */
-          letter-spacing: var(--bs-font-letter-spacing-display-large);
-        }
-
-        .fs-dm {
-          max-width: var(--bs-font-max-width-display-medium);
-          font-size: var(--bs-font-size-display-medium);
-          line-height: var(--bs-font-line-height-display-medium);
+        .fs-cs {
+          font-size: var(--bs-font-size-code-small);
+          line-height: var(--bs-font-line-height-code-small);
 
           /* rtl:remove */
-          letter-spacing: var(--bs-font-letter-spacing-display-medium);
+          letter-spacing: var(--bs-font-letter-spacing-code-small);
         }
 
-        .fs-ds {
-          max-width: var(--bs-font-max-width-display-small);
-          font-size: var(--bs-font-size-display-small);
-          line-height: var(--bs-font-line-height-display-small);
+        .fs-cm {
+          font-size: var(--bs-font-size-code-medium);
+          line-height: var(--bs-font-line-height-code-medium);
 
           /* rtl:remove */
-          letter-spacing: var(--bs-font-letter-spacing-display-small);
+          letter-spacing: var(--bs-font-letter-spacing-code-medium);
         }
 
-        .fs-hxl {
-          max-width: var(--bs-font-max-width-heading-xlarge);
-          font-size: var(--bs-font-size-heading-xlarge);
-          line-height: var(--bs-font-line-height-heading-xlarge);
+        .fs-ls {
+          font-size: var(--bs-font-size-label-small);
+          line-height: var(--bs-font-line-height-label-small);
 
           /* rtl:remove */
-          letter-spacing: var(--bs-font-letter-spacing-heading-xlarge);
+          letter-spacing: var(--bs-font-letter-spacing-label-small);
         }
 
-        .fs-hl {
-          max-width: var(--bs-font-max-width-heading-large);
-          font-size: var(--bs-font-size-heading-large);
-          line-height: var(--bs-font-line-height-heading-large);
+        .fs-lm {
+          font-size: var(--bs-font-size-label-medium);
+          line-height: var(--bs-font-line-height-label-medium);
 
           /* rtl:remove */
-          letter-spacing: var(--bs-font-letter-spacing-heading-large);
+          letter-spacing: var(--bs-font-letter-spacing-label-medium);
         }
 
-        .fs-hm {
-          max-width: var(--bs-font-max-width-heading-medium);
-          font-size: var(--bs-font-size-heading-medium);
-          line-height: var(--bs-font-line-height-heading-medium);
+        .fs-ll {
+          font-size: var(--bs-font-size-label-large);
+          line-height: var(--bs-font-line-height-label-large);
 
           /* rtl:remove */
-          letter-spacing: var(--bs-font-letter-spacing-heading-medium);
+          letter-spacing: var(--bs-font-letter-spacing-label-large);
         }
 
-        .fs-hs {
-          max-width: var(--bs-font-max-width-heading-small);
-          font-size: var(--bs-font-size-heading-small);
-          line-height: var(--bs-font-line-height-heading-small);
+        .fs-lxl {
+          font-size: var(--bs-font-size-label-xlarge);
+          line-height: var(--bs-font-line-height-label-xlarge);
 
           /* rtl:remove */
-          letter-spacing: var(--bs-font-letter-spacing-heading-small);
+          letter-spacing: var(--bs-font-letter-spacing-label-xlarge);
         }
 
-        .fs-bl {
-          max-width: var(--bs-font-max-width-body-large);
-          font-size: var(--bs-font-size-body-large);
-          line-height: var(--bs-font-line-height-body-large);
+        .fs-bs {
+          max-width: var(--bs-font-max-width-body-small);
+          font-size: var(--bs-font-size-body-small);
+          line-height: var(--bs-font-line-height-body-small);
 
           /* rtl:remove */
-          letter-spacing: var(--bs-font-letter-spacing-body-large);
+          letter-spacing: var(--bs-font-letter-spacing-body-small);
         }
 
         .fs-bm {
@@ -3122,61 +3107,76 @@ $utilities: ();
           letter-spacing: var(--bs-font-letter-spacing-body-medium);
         }
 
-        .fs-bs {
-          max-width: var(--bs-font-max-width-body-small);
-          font-size: var(--bs-font-size-body-small);
-          line-height: var(--bs-font-line-height-body-small);
+        .fs-bl {
+          max-width: var(--bs-font-max-width-body-large);
+          font-size: var(--bs-font-size-body-large);
+          line-height: var(--bs-font-line-height-body-large);
 
           /* rtl:remove */
-          letter-spacing: var(--bs-font-letter-spacing-body-small);
+          letter-spacing: var(--bs-font-letter-spacing-body-large);
         }
 
-        .fs-lxl {
-          font-size: var(--bs-font-size-label-xlarge);
-          line-height: var(--bs-font-line-height-label-xlarge);
+        .fs-hs {
+          max-width: var(--bs-font-max-width-heading-small);
+          font-size: var(--bs-font-size-heading-small);
+          line-height: var(--bs-font-line-height-heading-small);
 
           /* rtl:remove */
-          letter-spacing: var(--bs-font-letter-spacing-label-xlarge);
+          letter-spacing: var(--bs-font-letter-spacing-heading-small);
         }
 
-        .fs-ll {
-          font-size: var(--bs-font-size-label-large);
-          line-height: var(--bs-font-line-height-label-large);
+        .fs-hm {
+          max-width: var(--bs-font-max-width-heading-medium);
+          font-size: var(--bs-font-size-heading-medium);
+          line-height: var(--bs-font-line-height-heading-medium);
 
           /* rtl:remove */
-          letter-spacing: var(--bs-font-letter-spacing-label-large);
+          letter-spacing: var(--bs-font-letter-spacing-heading-medium);
         }
 
-        .fs-lm {
-          font-size: var(--bs-font-size-label-medium);
-          line-height: var(--bs-font-line-height-label-medium);
+        .fs-hl {
+          max-width: var(--bs-font-max-width-heading-large);
+          font-size: var(--bs-font-size-heading-large);
+          line-height: var(--bs-font-line-height-heading-large);
 
           /* rtl:remove */
-          letter-spacing: var(--bs-font-letter-spacing-label-medium);
+          letter-spacing: var(--bs-font-letter-spacing-heading-large);
         }
 
-        .fs-ls {
-          font-size: var(--bs-font-size-label-small);
-          line-height: var(--bs-font-line-height-label-small);
+        .fs-hxl {
+          max-width: var(--bs-font-max-width-heading-xlarge);
+          font-size: var(--bs-font-size-heading-xlarge);
+          line-height: var(--bs-font-line-height-heading-xlarge);
 
           /* rtl:remove */
-          letter-spacing: var(--bs-font-letter-spacing-label-small);
+          letter-spacing: var(--bs-font-letter-spacing-heading-xlarge);
         }
 
-        .fs-cm {
-          font-size: var(--bs-font-size-code-medium);
-          line-height: var(--bs-font-line-height-code-medium);
+        .fs-ds {
+          max-width: var(--bs-font-max-width-display-small);
+          font-size: var(--bs-font-size-display-small);
+          line-height: var(--bs-font-line-height-display-small);
 
           /* rtl:remove */
-          letter-spacing: var(--bs-font-letter-spacing-code-medium);
+          letter-spacing: var(--bs-font-letter-spacing-display-small);
         }
 
-        .fs-cs {
-          font-size: var(--bs-font-size-code-small);
-          line-height: var(--bs-font-line-height-code-small);
+        .fs-dm {
+          max-width: var(--bs-font-max-width-display-medium);
+          font-size: var(--bs-font-size-display-medium);
+          line-height: var(--bs-font-line-height-display-medium);
 
           /* rtl:remove */
-          letter-spacing: var(--bs-font-letter-spacing-code-small);
+          letter-spacing: var(--bs-font-letter-spacing-display-medium);
+        }
+
+        .fs-dl {
+          max-width: var(--bs-font-max-width-display-large);
+          font-size: var(--bs-font-size-display-large);
+          line-height: var(--bs-font-line-height-display-large);
+
+          /* rtl:remove */
+          letter-spacing: var(--bs-font-letter-spacing-display-large);
         }
 
         .fw-normal {
@@ -13319,76 +13319,61 @@ $utilities: ();
 
         /* rtl:end:remove */
 
-        .fs-dl {
-          max-width: var(--bs-font-max-width-display-large);
-          font-size: var(--bs-font-size-display-large);
-          line-height: var(--bs-font-line-height-display-large);
-
-          /* rtl:remove */
-          letter-spacing: var(--bs-font-letter-spacing-display-large);
-        }
-
-        .fs-dm {
-          max-width: var(--bs-font-max-width-display-medium);
-          font-size: var(--bs-font-size-display-medium);
-          line-height: var(--bs-font-line-height-display-medium);
+        .fs-cs {
+          font-size: var(--bs-font-size-code-small);
+          line-height: var(--bs-font-line-height-code-small);
 
           /* rtl:remove */
-          letter-spacing: var(--bs-font-letter-spacing-display-medium);
+          letter-spacing: var(--bs-font-letter-spacing-code-small);
         }
 
-        .fs-ds {
-          max-width: var(--bs-font-max-width-display-small);
-          font-size: var(--bs-font-size-display-small);
-          line-height: var(--bs-font-line-height-display-small);
+        .fs-cm {
+          font-size: var(--bs-font-size-code-medium);
+          line-height: var(--bs-font-line-height-code-medium);
 
           /* rtl:remove */
-          letter-spacing: var(--bs-font-letter-spacing-display-small);
+          letter-spacing: var(--bs-font-letter-spacing-code-medium);
         }
 
-        .fs-hxl {
-          max-width: var(--bs-font-max-width-heading-xlarge);
-          font-size: var(--bs-font-size-heading-xlarge);
-          line-height: var(--bs-font-line-height-heading-xlarge);
+        .fs-ls {
+          font-size: var(--bs-font-size-label-small);
+          line-height: var(--bs-font-line-height-label-small);
 
           /* rtl:remove */
-          letter-spacing: var(--bs-font-letter-spacing-heading-xlarge);
+          letter-spacing: var(--bs-font-letter-spacing-label-small);
         }
 
-        .fs-hl {
-          max-width: var(--bs-font-max-width-heading-large);
-          font-size: var(--bs-font-size-heading-large);
-          line-height: var(--bs-font-line-height-heading-large);
+        .fs-lm {
+          font-size: var(--bs-font-size-label-medium);
+          line-height: var(--bs-font-line-height-label-medium);
 
           /* rtl:remove */
-          letter-spacing: var(--bs-font-letter-spacing-heading-large);
+          letter-spacing: var(--bs-font-letter-spacing-label-medium);
         }
 
-        .fs-hm {
-          max-width: var(--bs-font-max-width-heading-medium);
-          font-size: var(--bs-font-size-heading-medium);
-          line-height: var(--bs-font-line-height-heading-medium);
+        .fs-ll {
+          font-size: var(--bs-font-size-label-large);
+          line-height: var(--bs-font-line-height-label-large);
 
           /* rtl:remove */
-          letter-spacing: var(--bs-font-letter-spacing-heading-medium);
+          letter-spacing: var(--bs-font-letter-spacing-label-large);
         }
 
-        .fs-hs {
-          max-width: var(--bs-font-max-width-heading-small);
-          font-size: var(--bs-font-size-heading-small);
-          line-height: var(--bs-font-line-height-heading-small);
+        .fs-lxl {
+          font-size: var(--bs-font-size-label-xlarge);
+          line-height: var(--bs-font-line-height-label-xlarge);
 
           /* rtl:remove */
-          letter-spacing: var(--bs-font-letter-spacing-heading-small);
+          letter-spacing: var(--bs-font-letter-spacing-label-xlarge);
         }
 
-        .fs-bl {
-          max-width: var(--bs-font-max-width-body-large);
-          font-size: var(--bs-font-size-body-large);
-          line-height: var(--bs-font-line-height-body-large);
+        .fs-bs {
+          max-width: var(--bs-font-max-width-body-small);
+          font-size: var(--bs-font-size-body-small);
+          line-height: var(--bs-font-line-height-body-small);
 
           /* rtl:remove */
-          letter-spacing: var(--bs-font-letter-spacing-body-large);
+          letter-spacing: var(--bs-font-letter-spacing-body-small);
         }
 
         .fs-bm {
@@ -13400,61 +13385,76 @@ $utilities: ();
           letter-spacing: var(--bs-font-letter-spacing-body-medium);
         }
 
-        .fs-bs {
-          max-width: var(--bs-font-max-width-body-small);
-          font-size: var(--bs-font-size-body-small);
-          line-height: var(--bs-font-line-height-body-small);
+        .fs-bl {
+          max-width: var(--bs-font-max-width-body-large);
+          font-size: var(--bs-font-size-body-large);
+          line-height: var(--bs-font-line-height-body-large);
 
           /* rtl:remove */
-          letter-spacing: var(--bs-font-letter-spacing-body-small);
+          letter-spacing: var(--bs-font-letter-spacing-body-large);
         }
 
-        .fs-lxl {
-          font-size: var(--bs-font-size-label-xlarge);
-          line-height: var(--bs-font-line-height-label-xlarge);
+        .fs-hs {
+          max-width: var(--bs-font-max-width-heading-small);
+          font-size: var(--bs-font-size-heading-small);
+          line-height: var(--bs-font-line-height-heading-small);
 
           /* rtl:remove */
-          letter-spacing: var(--bs-font-letter-spacing-label-xlarge);
+          letter-spacing: var(--bs-font-letter-spacing-heading-small);
         }
 
-        .fs-ll {
-          font-size: var(--bs-font-size-label-large);
-          line-height: var(--bs-font-line-height-label-large);
+        .fs-hm {
+          max-width: var(--bs-font-max-width-heading-medium);
+          font-size: var(--bs-font-size-heading-medium);
+          line-height: var(--bs-font-line-height-heading-medium);
 
           /* rtl:remove */
-          letter-spacing: var(--bs-font-letter-spacing-label-large);
+          letter-spacing: var(--bs-font-letter-spacing-heading-medium);
         }
 
-        .fs-lm {
-          font-size: var(--bs-font-size-label-medium);
-          line-height: var(--bs-font-line-height-label-medium);
+        .fs-hl {
+          max-width: var(--bs-font-max-width-heading-large);
+          font-size: var(--bs-font-size-heading-large);
+          line-height: var(--bs-font-line-height-heading-large);
 
           /* rtl:remove */
-          letter-spacing: var(--bs-font-letter-spacing-label-medium);
+          letter-spacing: var(--bs-font-letter-spacing-heading-large);
         }
 
-        .fs-ls {
-          font-size: var(--bs-font-size-label-small);
-          line-height: var(--bs-font-line-height-label-small);
+        .fs-hxl {
+          max-width: var(--bs-font-max-width-heading-xlarge);
+          font-size: var(--bs-font-size-heading-xlarge);
+          line-height: var(--bs-font-line-height-heading-xlarge);
 
           /* rtl:remove */
-          letter-spacing: var(--bs-font-letter-spacing-label-small);
+          letter-spacing: var(--bs-font-letter-spacing-heading-xlarge);
         }
 
-        .fs-cm {
-          font-size: var(--bs-font-size-code-medium);
-          line-height: var(--bs-font-line-height-code-medium);
+        .fs-ds {
+          max-width: var(--bs-font-max-width-display-small);
+          font-size: var(--bs-font-size-display-small);
+          line-height: var(--bs-font-line-height-display-small);
 
           /* rtl:remove */
-          letter-spacing: var(--bs-font-letter-spacing-code-medium);
+          letter-spacing: var(--bs-font-letter-spacing-display-small);
         }
 
-        .fs-cs {
-          font-size: var(--bs-font-size-code-small);
-          line-height: var(--bs-font-line-height-code-small);
+        .fs-dm {
+          max-width: var(--bs-font-max-width-display-medium);
+          font-size: var(--bs-font-size-display-medium);
+          line-height: var(--bs-font-line-height-display-medium);
 
           /* rtl:remove */
-          letter-spacing: var(--bs-font-letter-spacing-code-small);
+          letter-spacing: var(--bs-font-letter-spacing-display-medium);
+        }
+
+        .fs-dl {
+          max-width: var(--bs-font-max-width-display-large);
+          font-size: var(--bs-font-size-display-large);
+          line-height: var(--bs-font-line-height-display-large);
+
+          /* rtl:remove */
+          letter-spacing: var(--bs-font-letter-spacing-display-large);
         }
 
         .fw-normal {
diff --git a/site/content/docs/0.0/content/reboot.md b/site/content/docs/0.0/content/reboot.md
index 375c997323..b9bfa0a81d 100644
--- a/site/content/docs/0.0/content/reboot.md
+++ b/site/content/docs/0.0/content/reboot.md
@@ -17,10 +17,10 @@ Reboot builds upon Normalize, providing many HTML elements with somewhat opinion
 
 Here are our guidelines and reasons for choosing what to override in Reboot:
 
-- Update some browser default values to use `px`s instead of `em`s for scalable component spacing.
+- Update some browser default values to use `px`s instead of `em`s for fixed component spacing, to keep as much space as possible for meaningful content on zoom.
 - Avoid `margin-top`. Vertical margins can collapse, yielding unexpected results. More importantly though, a single direction of `margin` is a simpler mental model.
 - For easier scaling across device sizes, block elements should use `px`s for `margin`s.
-- Keep declarations of `font`-related properties to a minimum, using `inherit` whenever possible. We use `max-width` on all font references for readability reasons. If you want to get rid of the `max-width`, please make sure to use our `.mw-none` [width utilities]({{< docsref "/utilities/sizing" >}}).
+- Keep declarations of `font`-related properties to a minimum, using `inherit` whenever possible. We use `max-width` on all font references for readability reasons. If you want to get rid of the `max-width`, please make sure to use our `.mw-none` [width utility]({{< docsref "/utilities/sizing" >}}).
 
 ## CSS variables
 
diff --git a/site/content/docs/0.0/content/typography.md b/site/content/docs/0.0/content/typography.md
index f2182a9a2c..5a5bfc9f59 100644
--- a/site/content/docs/0.0/content/typography.md
+++ b/site/content/docs/0.0/content/typography.md
@@ -1,7 +1,7 @@
 ---
 layout: docs
 title: Typography
-description: Documentation and examples for OUDS Web typography, including global settings, headings, body text, and more.
+description: Documentation and examples for OUDS Web typography, including global settings, headings, body text, <!--lists, -->and more.
 group: content
 aliases:
   - "/docs/content/typography/"
@@ -15,7 +15,7 @@ OUDS Web sets basic global display, typography<!--, and link styles-->. When mor
 - 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>`.
-- Use `max-width` on all font references for readability reasons. If you want to get rid of the `max-width`, please make sure to use our `.mw-none` [width utilities]({{< docsref "/utilities/sizing" >}}).
+- Use `max-width` on all font references for readability reasons. If you want to get rid of the `max-width`, please make sure to use our `.mw-none` [width utility]({{< docsref "/utilities/sizing" >}}).
 <!--- Set the global link color via `$link-color`.
 - Use `$body-bg` to set a `background-color` on the `<body>` (`#fff` by default).-->
 
@@ -27,7 +27,7 @@ If you need need to include a font reference inside a custom component, please r
 
 ## Headings
 
-All HTML headings, `<h1>` through `<h6>`, are available. Each class sets `font-size` but also `line-height`, `letter-spacing`, `font-weight: bold`, and `max-width`. Here are the associated `font-size`s depending on the breakpoints. If you want to get rid of the `max-width`, please make sure to use our `.mw-none` [width utilities]({{< docsref "/utilities/sizing" >}}).
+All HTML headings, `<h1>` through `<h6>`, are available. Each class sets `font-size` but also `line-height`, `letter-spacing`, `font-weight: bold`, and `max-width`. Here are the associated `font-size`s depending on the breakpoints. If you want to get rid of the `max-width`, please make sure to use our `.mw-none` [width utility]({{< docsref "/utilities/sizing" >}}).
 
 {{< bs-table >}}
 | Heading reference | Values from `2xs` to `sm` | Values from `md` to `lg` | Values for `xl` and upper |
@@ -84,7 +84,7 @@ You can easily add an icon with your font reference using [our icon helper]({{<
 
 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.
 
-We provide `.display-*` from `1` through `3`. Each class sets `font-size` but also `line-height`, `letter-spacing`, `font-weight: bold`, and `max-width`. If you want to get rid of the `max-width`, please make sure to use our `.mw-none` [width utilities]({{< docsref "/utilities/sizing" >}}). Here are the associated `font-size`s depending on the breakpoints.
+We provide `.display-*` from `1` through `3`. Each class sets `font-size` but also `line-height`, `letter-spacing`, `font-weight: bold`, and `max-width`. If you want to get rid of the `max-width`, please make sure to use our `.mw-none` [width utility]({{< docsref "/utilities/sizing" >}}). Here are the associated `font-size`s depending on the breakpoints.
 
 {{< bs-table >}}
 | Display reference | Values from `2xs` to `sm` | Values from `md` to `lg` | Values for `xl` and upper |
@@ -153,9 +153,9 @@ Display headings are customizable via two variables, `$display-font-family` and
 
 {{< scss-docs name="display-headings" file="scss/_variables.scss" >}}
 
-## Regular text
+## Regular texts
 
-Since only [headings](#headings), [display headings](#display-headings) and `strong` text are meant to use **Bold** in main content, other contents should use `normal` font-weight. Each class sets `font-size` but also `line-height`, `letter-spacing`, and `max-width`. If you want to get rid of the `max-width`, please make sure to use our `.mw-none` [width utilities]({{< docsref "/utilities/sizing" >}}). Here are the associated `font-size`s depending on the breakpoints. See our [Font utilities]({{< docsref "/utilities/text#font-size" >}}).
+Since only [headings](#headings), [display headings](#display-headings) and `strong` text are meant to use **Bold** in main content, other contents should use `normal` font-weight. Each class sets `font-size` but also `line-height`, `letter-spacing`, and `max-width`. If you want to get rid of the `max-width`, please make sure to use our `.mw-none` [width utility]({{< docsref "/utilities/sizing" >}}). Here are the associated `font-size`s depending on the breakpoints. See our [Font utilities]({{< docsref "/utilities/text#font-size" >}}).
 
 {{< callout info >}}
 Body medium is set by default on `body` but we don't set the `max-width` property for usability reasons.
@@ -186,7 +186,7 @@ You can easily add an icon with your font reference using [our icon helper]({{<
 
 ### Lead
 
-Make a paragraph stand out by adding `.lead`. It uses [Regular text](#regular-text) body large.
+Make a paragraph stand out by adding `.lead`. It uses [Regular text](#regular-texts) body large.
 
 {{< example >}}
 <p class="lead">
@@ -196,7 +196,7 @@ Make a paragraph stand out by adding `.lead`. It uses [Regular text](#regular-te
 
 ### Small
 
-Render a paragraph with a small `font-size` by adding `.small` or use `<small>`. It uses [Regular text](#regular-text) body small.
+Render a paragraph with a small `font-size` by adding `.small` or use `<small>`. It uses [Regular text](#regular-texts) body small.
 
 {{< example >}}
 <p>
@@ -225,7 +225,7 @@ Styling for common inline HTML5 elements.
 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. It uses [Regular text](#regular-text) body small.
+- `<small>` represents side-comments and small print, like copyright and legal text. It uses [Regular text](#regular-texts) body small.
 - `<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.
 
@@ -252,7 +252,7 @@ Stylized implementation of HTML's `<abbr>` element for abbreviations and acronym
 
 ## Blockquotes
 
-For quoting blocks of content from another source within your document. Wrap `<blockquote class="blockquote">` around any HTML as the quote. It uses [Regular text](#regular-text) body large.
+For quoting blocks of content from another source within your document. Wrap `<blockquote class="blockquote">` around any HTML as the quote. It uses [Regular text](#regular-texts) body large.
 
 {{< example >}}
 <blockquote class="blockquote">
@@ -262,7 +262,7 @@ For quoting blocks of content from another source within your document. Wrap `<b
 
 ### 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. It uses [Regular text](#regular-text) body small.
+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. It uses [Regular text](#regular-texts) body small.
 
 {{< example >}}
 <figure>
diff --git a/site/content/docs/0.0/helpers/icon.md b/site/content/docs/0.0/helpers/icon.md
index 430633c421..d48393c581 100644
--- a/site/content/docs/0.0/helpers/icon.md
+++ b/site/content/docs/0.0/helpers/icon.md
@@ -1,31 +1,31 @@
 ---
 layout: docs
 title: Icon
-description: Quickly see the icon sizes you should use with a specific typography.
+description: Quickly see the right icon sizes with a specific typography reference.
 group: helpers
 aliases:
   - "/docs/helpers/icon/"
 toc: true
 ---
 
-## Core concept
+## Approach
 
-The icon classes are quite easy to use. You can use these classes upon `<img>`, `<svg>` or even icon font wherever the icon is. Please make sure to either the rules described in this page or follow the design.
+The icon classes are done to be used upon `<img>`, `<svg>` or even icon font wherever the icon is. Please make sure to either the rules described in this page or follow the design.
 
 Every icon class presented in here has the common following code:
 
 {{< scss-docs name="ouds-font-icon-common" file="scss/helpers/_icon.scss" >}}
 
-## Displays
+## Display headings
 
 You should not use any icon with our `.display-*` font sizes, because we prefer to keep the place for the text.
 
 ## Headings
 
-Here are the rules to follow for headings. These icons are responsive.
+Here are the rules to follow for headings. These icons' sizes are responsive.
 
 <details class="mb-medium">
-  <summary>See the <code>size</code> associated to classes</summary>
+  <summary>See the <strong>sizes</strong> associated to classes</summary>
 
 {{< bs-table >}}
 | Icon class | Values from `2xs` to `sm` | Values from `md` to `lg` | Values for `xl` and upper |
@@ -53,19 +53,19 @@ Here are the rules to follow for headings. These icons are responsive.
 </details>
 
 {{< example >}}
-<h1> <!-- h1 uses heading-xlarge font reference so all related classes as `.h1`, `.fs-hxl`, etc... -->
+<h1> <!-- h1 uses heading-xlarge font reference like all related classes as `.h1`, `.fs-hxl`, etc... -->
   <svg class="hxl-tall-icon me-short text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
     <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
   </svg>
   H1 with tall icon
 </h1>
-<h1> <!-- h1 uses heading-xlarge font reference so all related classes as `.h1`, `.fs-hxl`, etc... -->
+<h1> <!-- h1 uses heading-xlarge font reference like all related classes as `.h1`, `.fs-hxl`, etc... -->
   <svg class="hxl-medium-icon me-short text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
     <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
   </svg>
   H1 with medium icon
 </h1>
-<h1> <!-- h1 uses heading-xlarge font reference so all related classes as `.h1`, `.fs-hxl`, etc... -->
+<h1> <!-- h1 uses heading-xlarge font reference like all related classes as `.h1`, `.fs-hxl`, etc... -->
   <svg class="hxl-short-icon me-short text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
     <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
   </svg>
@@ -74,19 +74,19 @@ Here are the rules to follow for headings. These icons are responsive.
 
 <hr>
 
-<h2> <!-- h2 uses heading-large font reference so all related classes as `.h2`, `.fs-hl`, etc... -->
+<h2> <!-- h2 uses heading-large font reference like all related classes as `.h2`, `.fs-hl`, etc... -->
   <svg class="hl-tall-icon me-short text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
     <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
   </svg>
   H2 with tall icon
 </h2>
-<h2> <!-- h2 uses heading-large font reference so all related classes as `.h2`, `.fs-hl`, etc... -->
+<h2> <!-- h2 uses heading-large font reference like all related classes as `.h2`, `.fs-hl`, etc... -->
   <svg class="hl-medium-icon me-short text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
     <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
   </svg>
   H2 with medium icon
 </h2>
-<h2> <!-- h2 uses heading-large font reference so all related classes as `.h2`, `.fs-hl`, etc... -->
+<h2> <!-- h2 uses heading-large font reference like all related classes as `.h2`, `.fs-hl`, etc... -->
   <svg class="hl-short-icon me-short text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
     <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
   </svg>
@@ -95,19 +95,19 @@ Here are the rules to follow for headings. These icons are responsive.
 
 <hr>
 
-<h3> <!-- h3 uses heading-medium font reference so all related classes as `.h3`, `.fs-hm`, etc... -->
+<h3> <!-- h3 uses heading-medium font reference like all related classes as `.h3`, `.fs-hm`, etc... -->
   <svg class="hm-tall-icon me-short text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
     <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
   </svg>
   H3 with tall icon
 </h3>
-<h3> <!-- h3 uses heading-medium font reference so all related classes as `.h3`, `.fs-hm`, etc... -->
+<h3> <!-- h3 uses heading-medium font reference like all related classes as `.h3`, `.fs-hm`, etc... -->
   <svg class="hm-medium-icon me-short text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
     <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
   </svg>
   H3 with medium icon
 </h3>
-<h3> <!-- h3 uses heading-medium font reference so all related classes as `.h3`, `.fs-hm`, etc... -->
+<h3> <!-- h3 uses heading-medium font reference like all related classes as `.h3`, `.fs-hm`, etc... -->
   <svg class="hm-short-icon me-short text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
     <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
   </svg>
@@ -116,19 +116,19 @@ Here are the rules to follow for headings. These icons are responsive.
 
 <hr>
 
-<h4> <!-- h4 uses heading-small font reference so all related classes as `.h4`, `.fs-hs`, etc... -->
+<h4> <!-- h4 uses heading-small font reference like all related classes as `.h4`, `.fs-hs`, etc... -->
   <svg class="hs-tall-icon me-short text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
     <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
   </svg>
   H4 with tall icon
 </h4>
-<h4> <!-- h4 uses heading-small font reference so all related classes as `.h4`, `.fs-hs`, etc... -->
+<h4> <!-- h4 uses heading-small font reference like all related classes as `.h4`, `.fs-hs`, etc... -->
   <svg class="hs-medium-icon me-short text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
     <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
   </svg>
   H4 with medium icon
 </h4>
-<h4> <!-- h4 uses heading-small font reference so all related classes as `.h4`, `.fs-hs`, etc... -->
+<h4> <!-- h4 uses heading-small font reference like all related classes as `.h4`, `.fs-hs`, etc... -->
   <svg class="hs-short-icon me-short text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
     <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
   </svg>
@@ -137,19 +137,19 @@ Here are the rules to follow for headings. These icons are responsive.
 
 <hr>
 
-<h5> <!-- h5 uses body-large font reference so all related classes as `.h5`, `.fs-bl`, etc... -->
+<h5> <!-- h5 uses body-large font reference like all related classes as `.h5`, `.fs-bl`, etc... -->
   <svg class="bl-tall-icon me-short text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
     <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
   </svg>
   H5 with tall icon
 </h5>
-<h5> <!-- h5 uses body-large font reference so all related classes as `.h5`, `.fs-bl`, etc... -->
+<h5> <!-- h5 uses body-large font reference like all related classes as `.h5`, `.fs-bl`, etc... -->
   <svg class="bl-medium-icon me-short text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
     <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
   </svg>
   H5 with medium icon
 </h5>
-<h5> <!-- h5 uses body-large font reference so all related classes as `.h5`, `.fs-bl`, etc... -->
+<h5> <!-- h5 uses body-large font reference like all related classes as `.h5`, `.fs-bl`, etc... -->
   <svg class="bl-short-icon me-short text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
     <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
   </svg>
@@ -158,19 +158,19 @@ Here are the rules to follow for headings. These icons are responsive.
 
 <hr>
 
-<h6> <!-- h6 uses body-medium font reference so all related classes as `.h6`, `.fs-bm`, etc... -->
+<h6> <!-- h6 uses body-medium font reference like all related classes as `.h6`, `.fs-bm`, etc... -->
   <svg class="bm-tall-icon me-short text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
     <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
   </svg>
   H6 with tall icon
 </h6>
-<h6> <!-- h6 uses body-medium font reference so all related classes as `.h6`, `.fs-bm`, etc... -->
+<h6> <!-- h6 uses body-medium font reference like all related classes as `.h6`, `.fs-bm`, etc... -->
   <svg class="bm-medium-icon me-short text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
     <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
   </svg>
   H6 with medium icon
 </h6>
-<h6> <!-- h6 uses body-medium font reference so all related classes as `.h6`, `.fs-bm`, etc... -->
+<h6> <!-- h6 uses body-medium font reference like all related classes as `.h6`, `.fs-bm`, etc... -->
   <svg class="bm-short-icon me-short text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
     <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
   </svg>
@@ -180,10 +180,10 @@ Here are the rules to follow for headings. These icons are responsive.
 
 ## Regular texts
 
-Here are the rules to follow for the regular texts. These icons are responsive.
+Here are the rules to follow for regular texts. These icons' sizes are responsive.
 
 <details class="mb-medium">
-  <summary>See the <code>size</code> associated to classes</summary>
+  <summary>See the <strong>sizes</strong> associated to classes</summary>
 
 {{< bs-table >}}
 | Icon class | Values from `2xs` to `sm` | Values from `md` to `lg` | Values for `xl` and upper |
@@ -202,19 +202,19 @@ Here are the rules to follow for the regular texts. These icons are responsive.
 </details>
 
 {{< example >}}
-<p class="lead"> <!-- .lead uses body-large font reference so all related classes as `.lead`, `.fs-bl`, etc... -->
+<p class="lead"> <!-- .lead uses body-large font reference like all related classes as `.lead`, `.fs-bl`, etc... -->
   <svg class="bl-tall-icon me-short text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
     <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
   </svg>
   Lead paragraph with tall icon
 </p>
-<p class="lead"> <!-- .lead uses body-large font reference so all related classes as `.lead`, `.fs-bl`, etc... -->
+<p class="lead"> <!-- .lead uses body-large font reference like all related classes as `.lead`, `.fs-bl`, etc... -->
   <svg class="bl-medium-icon me-short text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
     <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
   </svg>
   Lead paragraph with medium icon
 </p>
-<p class="lead"> <!-- .lead uses body-large font reference so all related classes as `.lead`, `.fs-bl`, etc... -->
+<p class="lead"> <!-- .lead uses body-large font reference like all related classes as `.lead`, `.fs-bl`, etc... -->
   <svg class="bl-short-icon me-short text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
     <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
   </svg>
@@ -223,19 +223,19 @@ Here are the rules to follow for the regular texts. These icons are responsive.
 
 <hr>
 
-<p> <!-- default paragraph uses body-medium font reference so all related classes as `.fs-bm`, etc... -->
+<p> <!-- default paragraph uses body-medium font reference like all related classes as `.fs-bm`, etc... -->
   <svg class="bm-tall-icon me-short text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
     <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
   </svg>
   Default paragraph with tall icon
 </p>
-<p> <!-- default paragraph uses body-medium font reference so all related classes as `.fs-bm`, etc... -->
+<p> <!-- default paragraph uses body-medium font reference like all related classes as `.fs-bm`, etc... -->
   <svg class="bm-medium-icon me-short text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
     <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
   </svg>
   Default paragraph with medium icon
 </p>
-<p> <!-- default paragraph uses body-medium font reference so all related classes as `.fs-bm`, etc... -->
+<p> <!-- default paragraph uses body-medium font reference like all related classes as `.fs-bm`, etc... -->
   <svg class="bm-short-icon me-short text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
     <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
   </svg>
@@ -244,19 +244,19 @@ Here are the rules to follow for the regular texts. These icons are responsive.
 
 <hr>
 
-<p class="small"> <!-- .small uses body-small font reference so all related classes as `.small`, `.fs-bs`, etc... -->
+<p class="small"> <!-- .small uses body-small font reference like all related classes as `.small`, `.fs-bs`, etc... -->
   <svg class="bs-tall-icon me-short text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
     <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
   </svg>
   Small paragraph with tall icon
 </p>
-<p class="small"> <!-- .small uses body-small font reference so all related classes as `.small`, `.fs-bs`, etc... -->
+<p class="small"> <!-- .small uses body-small font reference like all related classes as `.small`, `.fs-bs`, etc... -->
   <svg class="bs-medium-icon me-short text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
     <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
   </svg>
   Small paragraph with medium icon
 </p>
-<p class="small"> <!-- .small uses body-small font reference so all related classes as `.small`, `.fs-bs`, etc... -->
+<p class="small"> <!-- .small uses body-small font reference like all related classes as `.small`, `.fs-bs`, etc... -->
   <svg class="bs-short-icon me-short text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
     <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
   </svg>
@@ -266,10 +266,10 @@ Here are the rules to follow for the regular texts. These icons are responsive.
 
 ## Decorative
 
-Here are the rules to follow for decorative icons. Be careful using these icons because they are not responsive.
+Here are the rules to follow for decorative icons. Be careful using these icons' sizes because they are not responsive.
 
 <details class="mb-medium">
-  <summary>See the <code>size</code> associated to classes</summary>
+  <summary>See the <strong>size</strong> associated to classes</summary>
 
 {{< bs-table >}}
 | Icon class | Value |
diff --git a/site/content/docs/0.0/utilities/sizing.md b/site/content/docs/0.0/utilities/sizing.md
index 097e1267db..28557ad4af 100644
--- a/site/content/docs/0.0/utilities/sizing.md
+++ b/site/content/docs/0.0/utilities/sizing.md
@@ -33,9 +33,6 @@ Width and height utilities are generated from the utility API in `_utilities.scs
 You can also use `max-width: 100%;` and `max-height: 100%;` utilities as needed.
 
 {{< example class="bd-example-flex" >}}
-<div style="width: 50%; height: 100px;">
-  <div class="mw-none" style="width: 200%;">Max-width none</div>
-</div>
 <div style="width: 50%; height: 100px;">
   <div class="mw-100" style="width: 200%;">Max-width 100%</div>
 </div>
@@ -47,6 +44,14 @@ You can also use `max-width: 100%;` and `max-height: 100%;` utilities as needed.
 </div>
 {{< /example >}}
 
+You can also use in some cases (mainly [font references]({{< docsref "/content/typography" >}})) `max-width: none` utility as needed.
+
+{{< example class="bd-example-flex" >}}
+<div style="width: 50%; height: 100px;">
+  <div class="mw-none" style="width: 200%;">Max-width none</div>
+</div>
+{{< /example >}}
+
 ## Relative to the viewport
 
 You can also use utilities to set the width and height relative to the viewport.
diff --git a/site/content/docs/0.0/utilities/text.md b/site/content/docs/0.0/utilities/text.md
index 135c52be3c..32317835e5 100644
--- a/site/content/docs/0.0/utilities/text.md
+++ b/site/content/docs/0.0/utilities/text.md
@@ -80,7 +80,7 @@ Note how `.text-capitalize` only changes the first letter of each word, leaving
 
 Quickly change the `font-size` of text. Sizing for these utilities matches our predefined typography placeholders. Don't forget to add one of our [`font-weight`](#font-weight) utility when needed.
 
-These classes change the `font-size` but also the `line-height`, the `letter-spacing` and the `max-width`. If you want to get rid of the `max-width`, please make sure to use our `.mw-none` [width utilities]({{< docsref "/utilities/sizing" >}}).
+These classes change the `font-size` but also the `line-height`, the `letter-spacing` and the `max-width`. If you want to get rid of the `max-width`, please make sure to use our `.mw-none` [width utility]({{< docsref "/utilities/sizing" >}}).
 
 <details class="mb-medium">
   <summary>See the <code>font-size</code> associated to classes</summary>