diff --git a/.changeset/clever-cups-swim.md b/.changeset/clever-cups-swim.md
new file mode 100644
index 0000000000..f79bb0d265
--- /dev/null
+++ b/.changeset/clever-cups-swim.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': major
+---
+
+Removed the `.lh-base` utility class.
diff --git a/.changeset/three-geese-run.md b/.changeset/three-geese-run.md
new file mode 100644
index 0000000000..8fda369bc8
--- /dev/null
+++ b/.changeset/three-geese-run.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': patch
+'@swisspost/design-system-styles': patch
+---
+
+Internalized Bootstrap text utilities into the Design System.
diff --git a/packages/documentation/src/stories/utilities/text/text-color.sample.scss b/packages/documentation/src/stories/utilities/text/text-color.sample.scss
deleted file mode 100644
index 9afdd75af0..0000000000
--- a/packages/documentation/src/stories/utilities/text/text-color.sample.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@use '@swisspost/design-system-styles/core' as post;
-
-.my-element {
-  color: post.$success;
-}
diff --git a/packages/documentation/src/stories/utilities/text/text-font-size.sample.scss b/packages/documentation/src/stories/utilities/text/text-font-size.sample.scss
deleted file mode 100644
index 6593337921..0000000000
--- a/packages/documentation/src/stories/utilities/text/text-font-size.sample.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@use '@swisspost/design-system-styles/core' as post;
-
-.my-element {
-  font-size: post.$font-size-tiny;
-}
diff --git a/packages/documentation/src/stories/utilities/text/text-font-weight.sample.scss b/packages/documentation/src/stories/utilities/text/text-font-weight.sample.scss
deleted file mode 100644
index dcaeb6e85e..0000000000
--- a/packages/documentation/src/stories/utilities/text/text-font-weight.sample.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@use '@swisspost/design-system-styles/core' as post;
-
-.my-element {
-  font-weight: post.$font-weight-bold;
-}
diff --git a/packages/documentation/src/stories/utilities/text/text-line-height.sample.scss b/packages/documentation/src/stories/utilities/text/text-line-height.sample.scss
deleted file mode 100644
index 605372b960..0000000000
--- a/packages/documentation/src/stories/utilities/text/text-line-height.sample.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@use '@swisspost/design-system-styles/core' as post;
-
-.my-element {
-  line-height: post.$line-height-sm;
-}
diff --git a/packages/documentation/src/stories/utilities/text/text.blocks.tsx b/packages/documentation/src/stories/utilities/text/text.blocks.tsx
deleted file mode 100644
index 71d6315c27..0000000000
--- a/packages/documentation/src/stories/utilities/text/text.blocks.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from 'react';
-import { parse } from '@/utils/sass-export';
-import scss from './text.module.scss';
-
-/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-export const SCSS_VARIABLES: any = parse(scss);
-
-export const TextUtilityAPI = (props: {
-  cssPrefix: string;
-  scssPrefix?: string;
-  values: string[];
-}) => (
-  <div>
-    <dl className="row">
-      {props.cssPrefix && (
-        <>
-          <dt className="col-3">Class:</dt>
-          <dd className="col-9">
-            <span className="fs-tiny text-danger">{`.${props.cssPrefix}-{value}`}</span>
-          </dd>
-        </>
-      )}
-      {props.scssPrefix && (
-        <>
-          <dt className="col-3">Variable:</dt>
-          <dd className="col-9">
-            <span className="fs-tiny text-danger">{`$${props.scssPrefix}-{value}`}</span>
-          </dd>
-        </>
-      )}
-      <dt className="col-3">Values:</dt>
-      <dd className="col-9">
-        {props.values.map(value => (
-          <code key={value} className="me-8">
-            {value}
-          </code>
-        ))}
-      </dd>
-    </dl>
-  </div>
-);
diff --git a/packages/documentation/src/stories/utilities/text/text.docs.mdx b/packages/documentation/src/stories/utilities/text/text.docs.mdx
index 22dabfe4f2..8ec3a7c4f0 100644
--- a/packages/documentation/src/stories/utilities/text/text.docs.mdx
+++ b/packages/documentation/src/stories/utilities/text/text.docs.mdx
@@ -1,11 +1,6 @@
 import { Canvas, Meta, Source } from '@storybook/blocks';
-import { SCSS_VARIABLES, TextUtilityAPI } from './text.blocks';
 import * as TextStories from './text.stories';
 import SampleFontFamily from './text-font-family.sample.scss?raw';
-import SampleFontSize from './text-font-size.sample.scss?raw';
-import SampleFontWeight from './text-font-weight.sample.scss?raw';
-import SampleLineHeight from './text-line-height.sample.scss?raw';
-import SampleColor from './text-color.sample.scss?raw';
 import './text.styles.scss';
 
 <Meta of={TextStories} />
@@ -20,93 +15,38 @@ import './text.styles.scss';
 
 ### Font Family
 
+Use the class `.font-sans-serif` to set the text as the default font-family.
+
 <Canvas of={TextStories.FontFamily} sourceState="shown" />
 
 #### Set Font Family in SCSS
 
 <Source code={SampleFontFamily} language="scss" />
 
-#### Possible Values
-
-<TextUtilityAPI values={SCSS_VARIABLES.fontFamilies} cssPrefix="font" scssPrefix="font-family" />
-
-### Font Size
-
-<Canvas of={TextStories.FontSize} sourceState="shown" />
-
-#### Set Font Size in SCSS
-
-<Source code={SampleFontSize} language="scss" />
-
-#### Possible Values
-
-<TextUtilityAPI values={SCSS_VARIABLES.fontSizes} cssPrefix="fs" scssPrefix="font-size" />
-
 ### Font Weight
 
-<div className="banner banner-warning my-24">
-  The `.bold`, `.regular`, and `.light` classes are deprecated in favor of the `.fw-*` classes.
-</div>
+The font weight classes available are `.fw-normal`, `.fw-bold` and `.fw-black`.
 
 <Canvas of={TextStories.FontWeight} sourceState="shown" />
 
-#### Set Font Weight in SCSS
-
-<Source code={SampleFontWeight} language="scss" />
-
-#### Possible Values
-
-<TextUtilityAPI values={SCSS_VARIABLES.fontWeights} cssPrefix="fw" scssPrefix="font-weight" />
-
 ### Font Style
 
-<Canvas of={TextStories.FontStyle} sourceState="shown" />
-
-<p className="mb-32">
-  <em>There are no Sass variables for font styles at this time.</em>
-</p>
+The font style classes available are `.fst-normal` and `.fst-italic`.
 
-#### Possible Values
-
-<TextUtilityAPI values={SCSS_VARIABLES.fontStyles} cssPrefix="fst" />
+<Canvas of={TextStories.FontStyle} sourceState="shown" />
 
 ### Line Heights
 
-<Canvas of={TextStories.LineHeight} sourceState="shown" />
-
-#### Set Line Height in SCSS
+The line height classes available are `.lh-1`, `.lh-sm` and `.lh-lg`.
 
-<Source code={SampleLineHeight} language="scss" />
+For good accessibility, the line height is set to <code>1.5</code> for body text and <code>1.2</code> for headings by default.
 
-#### Possible Values
-
-##### Relative
-
-For good accessibility, the line height is set to <code>1.5</code> for body text and <code>1.2</code> for headings.
-To make the line height equal to the font size, you can use the `.lh-1` class.
-There are no Sass variables for these row heights.
-
-<TextUtilityAPI values={SCSS_VARIABLES.relativeLineHeights} cssPrefix="lh" />
+<Canvas of={TextStories.LineHeight} sourceState="shown" />
 
 ## Text
 
 Define how text-blocks are displayed.
 
-### Color
-
-Colorize text with `.text-*` utility classes.
-To colorize links, use the `.link-*` classes instead as they also provide styling for the `:hover` and `:focus` states.
-
-<Canvas of={TextStories.TextColor} sourceState="shown" />
-
-#### Set the Color in SCSS
-
-<Source code={SampleColor} language="scss" />
-
-#### Possible Values
-
-<TextUtilityAPI values={SCSS_VARIABLES.colors} cssPrefix="text" />
-
 ### Reset Color
 
 Reset a text color with `.text-reset`, so that an element inherits the color from its parent.
@@ -146,6 +86,6 @@ Transform text with the following text capitalization classes: `.text-lowercase`
 
 ### Decorations
 
-Decorate text with the following text decoration classes.: `.text-decoration-line-through` and `.text-decoration-none`.
+Decorate text with the following text decoration classes: `text-decoration-underline`, `.text-decoration-line-through` and `.text-decoration-none`.
 
 <Canvas of={TextStories.TextDecoration} sourceState="shown" />
diff --git a/packages/documentation/src/stories/utilities/text/text.module.scss b/packages/documentation/src/stories/utilities/text/text.module.scss
deleted file mode 100644
index a25016a868..0000000000
--- a/packages/documentation/src/stories/utilities/text/text.module.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-@use 'sass:map';
-@use '@swisspost/design-system-styles/core' as post;
-
-:export {
-  fontFamilies: [('sans-serif', 'monospace')];
-  fontSizes: [map.keys(post.$font-sizes)];
-  fontWeights: [('light', 'normal', 'bold')];
-  fontStyles: [('normal', 'italic')];
-  relativeLineHeights: [('1', 'base', 'sm', 'lg')];
-  colors: [map.keys(post.$theme-colors)];
-}
diff --git a/packages/documentation/src/stories/utilities/text/text.snapshot.stories.ts b/packages/documentation/src/stories/utilities/text/text.snapshot.stories.ts
new file mode 100644
index 0000000000..a8b50e275d
--- /dev/null
+++ b/packages/documentation/src/stories/utilities/text/text.snapshot.stories.ts
@@ -0,0 +1,108 @@
+import type { StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import { schemes } from '@/shared/snapshots/schemes';
+import meta from './text.stories';
+import './text.styles.scss';
+
+const { id, ...metaWithoutId } = meta;
+
+export default {
+  ...metaWithoutId,
+  title: 'Snapshots',
+  decorators: null,
+};
+
+type Story = StoryObj;
+
+function getTextUtility(type: string) {
+  switch (type) {
+    case 'Family':
+      return html`<p class="font-sans-serif">Font sans-serif</p>`;
+    case 'Style':
+      return html`
+        ${['normal', 'italic'].map(
+          (val: string) => html`<p class="fst-${val}">Font style ${val}</p>`,
+        )}
+      `;
+    case 'Weight':
+      return html`
+        ${['normal', 'bold', 'black'].map(
+          (val: string) => html`<p class="fw-${val}">Font weight ${val}</p>`,
+        )}
+      `;
+    case 'Line height':
+      return html`
+        ${['1', 'sm', 'lg'].map(
+          (val: string) => html`<p class="text-example-bordered lh-${val}">Line height ${val}</p>`,
+        )}
+      `;
+    case 'Text align':
+      return html`
+        ${['start', 'end', 'center'].map(
+          val => html`
+            <div class="text-${val}">
+              <p>Text align ${val}</p>
+            </div>
+          `,
+        )}
+      `;
+    case 'Text decoration':
+      return html`
+        ${['none', 'underline', 'line-through'].map(
+          val => html`<p class="text-decoration-${val}">Text decoration ${val}</p>`,
+        )}
+      `;
+    case 'Text transform':
+      return html`
+        ${['lowercase', 'uppercase', 'capitalize'].map(
+          val => html`<p class="text-${val}">Text transform ${val}</p>`,
+        )}
+      `;
+    case 'White space':
+      return html`
+        ${['wrap', 'nowrap'].map(
+          val =>
+            html`
+              <p class="text-example-bordered w-100 text-${val}">
+                White space ${val} White space ${val} White space ${val} White space ${val}
+              </p>
+            `,
+        )}
+      `;
+    case 'Word wrap break':
+      return html`
+        ${['break'].map(
+          val =>
+            html`
+              <p class="text-example-bordered w-78 text-${val}">Averylongwordthatwillbreak</p>
+            `,
+        )}
+      `;
+  }
+}
+
+export const Text: Story = {
+  render: () => {
+    return schemes(
+      () => html` <div class="text-example">
+        <h1>Text utilities</h1>
+        ${[
+          'Family',
+          'Style',
+          'Weight',
+          'Line height',
+          'Text align',
+          'Text decoration',
+          'Text transform',
+          'White space',
+          'Word wrap break',
+        ].map(
+          val => html`
+            <h2>${val}</h2>
+            <div class="text-example-child gap-8 d-flex flex-column">${getTextUtility(val)}</div>
+          `,
+        )}
+      </div>`,
+    );
+  },
+};
diff --git a/packages/documentation/src/stories/utilities/text/text.stories.ts b/packages/documentation/src/stories/utilities/text/text.stories.ts
index 2499546b8b..5e436b5909 100644
--- a/packages/documentation/src/stories/utilities/text/text.stories.ts
+++ b/packages/documentation/src/stories/utilities/text/text.stories.ts
@@ -18,35 +18,37 @@ export const FontFamily: Story = {
   render: () => html` <p class="font-sans-serif">This is sans serif text.</p> `,
 };
 
-export const FontSize: Story = {
-  render: () => html` <p class="fs-tiny">This is tiny text.</p> `,
-};
-
 export const FontWeight: Story = {
-  render: () => html` <p class="fw-bold">This is bold text.</p> `,
+  render: () =>
+    html`
+      <p class="fw-normal">This is a normal text.</p>
+      <p class="fw-bold">This is a bold text.</p>
+      <p class="fw-black">This is a black text.</p>
+    `,
 };
 
 export const FontStyle: Story = {
-  render: () => html` <p class="fst-italic">This is italic text.</p> `,
+  render: () =>
+    html`
+      <p class="fst-normal">This is a normal text.</p>
+      <p class="fst-italic">This is an italic text.</p>
+    `,
 };
 
 export const LineHeight: Story = {
-  render: () => html` <p class="lh-1">This text has a line height equal to the font size.</p> `,
-};
-
-export const TextColor: Story = {
-  decorators: [story => html` <div @click=${(e: Event) => e.preventDefault()}>${story()}</div> `],
-  render: () => html`
-    <p class="text-success">This is colored text.</p>
-    <a href="#" class="link-warning">This is a colored link, it lightens on hover.</a>
-  `,
+  render: () =>
+    html`
+      <p class="my-text lh-1">This text has a line height equal to the font size.</p>
+      <p class="my-text lh-sm">This text has a small line height.</p>
+      <p class="my-text lh-lg">This text has a large line height.</p>
+    `,
 };
 
 export const TextColorReset: Story = {
   decorators: [story => html` <div @click=${(e: Event) => e.preventDefault()}>${story()}</div> `],
   render: () => html`
-    <p class="text-danger">
-      This is colored text with a
+    <p class="my-colored-text">
+      This is a colored text with a
       <a href="#" class="text-reset">link</a>
       of the same color.
     </p>
@@ -86,9 +88,9 @@ export const WordBreak: Story = {
 
 export const TextTransform: Story = {
   render: () => html`
-    <p class="text-lowercase">Lowercased text.</p>
-    <p class="text-uppercase">Uppercased text.</p>
-    <p class="text-capitalize">CapiTaliZed text.</p>
+    <p class="text-lowercase">This is a Lowercased text.</p>
+    <p class="text-uppercase">This is an Uppercased text.</p>
+    <p class="text-capitalize">This is a CapiTaliZed text.</p>
   `,
 };
 
@@ -96,6 +98,6 @@ export const TextDecoration: Story = {
   render: () => html`
     <p class="text-decoration-underline">This text has a line underneath it.</p>
     <p class="text-decoration-line-through">This text has a line going through it.</p>
-    <a href="#" class="text-decoration-none">This link has its text decoration removed</a>
+    <a href="#" class="text-decoration-none">This link has its text decoration removed.</a>
   `,
 };
diff --git a/packages/documentation/src/stories/utilities/text/text.styles.scss b/packages/documentation/src/stories/utilities/text/text.styles.scss
index 509c0b15af..2ce37dd117 100644
--- a/packages/documentation/src/stories/utilities/text/text.styles.scss
+++ b/packages/documentation/src/stories/utilities/text/text.styles.scss
@@ -1,5 +1,14 @@
 @use '@swisspost/design-system-styles/core' as post;
 
-.my-container {
+.my-container,
+.my-text {
   background-color: post.$info;
 }
+
+.text-example-bordered {
+  border: 1px solid post.$gray-40;
+}
+
+.my-colored-text {
+  color: post.$error;
+}
diff --git a/packages/styles/src/themes/bootstrap/_utilities.scss b/packages/styles/src/themes/bootstrap/_utilities.scss
index db41bbadf2..03a5a27788 100644
--- a/packages/styles/src/themes/bootstrap/_utilities.scss
+++ b/packages/styles/src/themes/bootstrap/_utilities.scss
@@ -73,6 +73,15 @@ $utilities: map.remove($utilities, 'overflow');
 $utilities: map.remove($utilities, 'overflow-x');
 $utilities: map.remove($utilities, 'overflow-y');
 
+$utilities: map.remove($utilities, 'font-family');
+$utilities: map.remove($utilities, 'font-size');
+$utilities: map.remove($utilities, 'font-style');
 $utilities: map.remove($utilities, 'font-weight');
+$utilities: map.remove($utilities, 'line-height');
+$utilities: map.remove($utilities, 'text-align');
+$utilities: map.remove($utilities, 'text-decoration');
+$utilities: map.remove($utilities, 'text-transform');
+$utilities: map.remove($utilities, 'white-space');
+$utilities: map.remove($utilities, 'word-wrap');
 
 @import 'bootstrap/scss/utilities/api';
diff --git a/packages/styles/src/utilities/_variables.scss b/packages/styles/src/utilities/_variables.scss
index f565fa93a6..372a12b684 100644
--- a/packages/styles/src/utilities/_variables.scss
+++ b/packages/styles/src/utilities/_variables.scss
@@ -3,6 +3,8 @@
 @use './functions' as *;
 
 @use '../variables/sizing' as *;
+@use '../variables/type';
+
 /*
   Utilities are generated with our utility API using bellow $utilities map.
 
@@ -442,14 +444,70 @@ $utilities: (
     property: overflow-y,
     values: auto hidden visible scroll,
   ),
+  'font-family': (
+    property: font-family,
+    class: font,
+    values: (
+      'sans-serif': type.$font-family-sans-serif,
+    ),
+  ),
+  'font-style': (
+    property: font-style,
+    class: fst,
+    values: italic normal,
+  ),
   'font-weight': (
     property: font-weight,
+    class: fw,
     values: (
-      black: 900,
-      bold: 700,
-      normal: 400,
+      black: type.$font-weight-black,
+      bold: type.$font-weight-bold,
+      normal: type.$font-weight-normal,
     ),
-    class: fw,
+  ),
+  'line-height': (
+    property: line-height,
+    class: lh,
+    values: (
+      1: type.$line-height-1,
+      sm: type.$line-height-sm,
+      lg: type.$line-height-lg,
+    ),
+  ),
+  'text-align': (
+    responsive: true,
+    property: text-align,
+    class: text,
+    values: (
+      start: left,
+      end: right,
+      center: center,
+    ),
+  ),
+  'text-decoration': (
+    property: text-decoration,
+    values: none underline line-through,
+  ),
+  'text-transform': (
+    property: text-transform,
+    class: text,
+    values: lowercase uppercase capitalize,
+  ),
+  'white-space': (
+    property: white-space,
+    class: text,
+    values: (
+      wrap: normal,
+      nowrap: nowrap,
+    ),
+  ),
+  'word-wrap': (
+    property: word-wrap word-break,
+    class: text,
+    values: (
+      break: break-word,
+    ),
+    rtl: false,
   ),
 );
 
diff --git a/packages/styles/src/variables/_type.scss b/packages/styles/src/variables/_type.scss
index b4cd07a6a4..1f92d6f611 100644
--- a/packages/styles/src/variables/_type.scss
+++ b/packages/styles/src/variables/_type.scss
@@ -10,7 +10,7 @@
 @use './../tokens/utilities';
 @use './../tokens/elements' as element-tokens;
 
-tokens.$default-map: utilities.$post-spacing;
+tokens.$default-map: utilities.$post-typo;
 
 // Fonts
 //
@@ -54,13 +54,12 @@ $font-size-40: sizing.px-to-rem(40px);
 $font-size-48: sizing.px-to-rem(48px);
 $font-size-56: sizing.px-to-rem(56px);
 
-$line-height-sm: 1;
 $line-height-copy: 1.5;
 $line-height-heading: 1.2;
 
-$font-weight-normal: 400 !default;
-$font-weight-bold: 700 !default;
-$font-weight-black: 900 !default;
+$font-weight-normal: tokens.get('utility-font-weight-regular') !default;
+$font-weight-bold: tokens.get('utility-font-weight-bold') !default;
+$font-weight-black: tokens.get('utility-font-weight-black') !default;
 
 // Deprecated
 $font-sizes: (
@@ -163,8 +162,9 @@ $font-curves: (
 $font-size-base: $font-size-regular !default;
 $font-weight-base: $font-weight-normal !default;
 $line-height-base: $line-height-copy;
-$line-height-sm: $line-height-heading;
-$line-height-lg: $line-height-copy;
+$line-height-1: tokens.get('utility-line-height-1');
+$line-height-sm: tokens.get('utility-line-height-sm');
+$line-height-lg: tokens.get('utility-line-height-lg');
 
 $headings-margin-bottom: (spacing.$spacer * 0.5) !default;
 $headings-font-family: inherit !default;
@@ -185,10 +185,10 @@ $text-muted: color.$gray-60;
 
 $blockquote-font-weight: $font-weight-bold !default;
 $blockquote-border-left: commons.$border-thick solid color.$black !default;
-$blockquote-border-left-width-md: tokens.get('utility-gap-4') !default;
-$blockquote-padding-left: tokens.get('utility-gap-12') !default;
-$blockquote-margin-top: tokens.get('utility-gap-24') !default;
-$blockquote-margin-y: tokens.get('utility-gap-16') !default;
+$blockquote-border-left-width-md: tokens.get('utility-gap-4', utilities.$post-spacing) !default;
+$blockquote-padding-left: tokens.get('utility-gap-12', utilities.$post-spacing) !default;
+$blockquote-margin-top: tokens.get('utility-gap-24', utilities.$post-spacing) !default;
+$blockquote-margin-y: tokens.get('utility-gap-16', utilities.$post-spacing) !default;
 $blockquote-footer-font-size: math.div(1em * sizing.strip-unit($small-font-size), 100) !default;
 $blockquote-cite-font-weight: $font-weight-normal !default;