diff --git a/packages/dnb-design-system-portal/src/pages/uilib/typography/font-weights/usage-in-css.md b/packages/dnb-design-system-portal/src/pages/uilib/typography/font-weights/usage-in-css.md
index 8e0d327c3fe..9d1543bf62e 100644
--- a/packages/dnb-design-system-portal/src/pages/uilib/typography/font-weights/usage-in-css.md
+++ b/packages/dnb-design-system-portal/src/pages/uilib/typography/font-weights/usage-in-css.md
@@ -11,7 +11,7 @@ order: 1
 /* This will result in loading the Medium Font */
 .my-new-class {
   font-family: 'Fedra Sans Std', sans-serif; /* Fallback */
-  font-family: var(--font-family-std);
+  font-family: var(--font-family-default);
   font-weight: 600;
   font-style: normal;
 }
diff --git a/packages/dnb-design-system-portal/src/pages/uilib/usage/best-practice/styling.md b/packages/dnb-design-system-portal/src/pages/uilib/usage/best-practice/styling.md
index bb13ffbcbcc..174ec832617 100644
--- a/packages/dnb-design-system-portal/src/pages/uilib/usage/best-practice/styling.md
+++ b/packages/dnb-design-system-portal/src/pages/uilib/usage/best-practice/styling.md
@@ -38,8 +38,8 @@ This helps coworkers quickly find and understand the sentence and meaning of the
   padding: 1em; /* Will be the same as our local font-size of 1.5rem */
 
   /* 3. Fonts & Typography */
-  font-family: var(--font-family-std);
-  font-weight: var(--font-weight-std);
+  font-family: var(--font-family-default);
+  font-weight: var(--font-weight-default);
   font-size: 1.5rem;
   color: var(--color-sea-green);
 
diff --git a/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap b/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap
index ec4380f15a3..c89d26e1768 100644
--- a/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap
@@ -212,17 +212,28 @@ exports[`Button scss have to match snapshot 1`] = `
  *
  */
 :root {
-  --font-family-std: 'Fedra Sans Std', sans-serif;
+  --font-family-default: 'Fedra Sans Std', sans-serif;
   --font-family-book: 'Fedra Sans Std', sans-serif;
   /* Do not use, use --font-weight-... */
   --font-family-demi: 'Fedra Sans Std', sans-serif;
   /* Do not use, use --font-weight-... */
   --font-family-medium: 'Fedra Sans Std', sans-serif;
   /* Do not use, use --font-weight-... */
-  --font-weight-std: normal;
+  --font-weight-default: normal;
   --font-weight-book: normal;
   --font-weight-demi: 500;
   --font-weight-medium: 600;
+  --font-size-xxx-small: 0.75rem;
+  --font-size-xx-small: 0.625rem;
+  --font-size-x-small: 0.75rem;
+  --font-size-small: 0.875rem;
+  --font-size-default: 1rem;
+  --font-size-x-default: 1.25rem;
+  --font-size-medium: 1.5rem;
+  --font-size-large: 2rem;
+  --font-size-x-large: 2.5rem;
+  --font-size-xx-large: 3rem;
+  --font-size-decimate: 0.5em;
   --color-sea-green-alt: #008484;
   --color-mint-green-50: #d2f0e9;
   --color-mint-green-25: #e9f8f4;
@@ -255,22 +266,22 @@ exports[`Button scss have to match snapshot 1`] = `
  * Typography
  *
  * The font-family properties are defined in the properties.scss file, like:
- * --font-family-std:
+ * --font-family-default:
  *
  */
 .dnb-typo-std,
 .dnb-typo-book {
-  font-family: var(--font-family-std);
+  font-family: var(--font-family-default);
   font-weight: normal;
   font-style: normal; }
 
 .dnb-typo-medium {
-  font-family: var(--font-family-std);
+  font-family: var(--font-family-default);
   font-weight: var(--font-weight-medium);
   font-style: normal; }
 
 .dnb-typo-demi {
-  font-family: var(--font-family-std);
+  font-family: var(--font-family-default);
   font-weight: var(--font-weight-demi);
   font-style: normal; }
 
@@ -355,8 +366,8 @@ exports[`Button scss have to match snapshot 1`] = `
 
 .dnb-button {
   font-family: sans-serif;
-  font-family: var(--font-family-std);
-  font-weight: var(--font-weight-std);
+  font-family: var(--font-family-default);
+  font-weight: var(--font-weight-default);
   font-size: 1rem;
   font-style: normal;
   line-height: 1.5rem;
diff --git a/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap b/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap
index df0198e1686..02bfdc551f8 100644
--- a/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap
@@ -192,17 +192,28 @@ exports[`Dropdown scss have to match snapshot 1`] = `
  *
  */
 :root {
-  --font-family-std: 'Fedra Sans Std', sans-serif;
+  --font-family-default: 'Fedra Sans Std', sans-serif;
   --font-family-book: 'Fedra Sans Std', sans-serif;
   /* Do not use, use --font-weight-... */
   --font-family-demi: 'Fedra Sans Std', sans-serif;
   /* Do not use, use --font-weight-... */
   --font-family-medium: 'Fedra Sans Std', sans-serif;
   /* Do not use, use --font-weight-... */
-  --font-weight-std: normal;
+  --font-weight-default: normal;
   --font-weight-book: normal;
   --font-weight-demi: 500;
   --font-weight-medium: 600;
+  --font-size-xxx-small: 0.75rem;
+  --font-size-xx-small: 0.625rem;
+  --font-size-x-small: 0.75rem;
+  --font-size-small: 0.875rem;
+  --font-size-default: 1rem;
+  --font-size-x-default: 1.25rem;
+  --font-size-medium: 1.5rem;
+  --font-size-large: 2rem;
+  --font-size-x-large: 2.5rem;
+  --font-size-xx-large: 3rem;
+  --font-size-decimate: 0.5em;
   --color-sea-green-alt: #008484;
   --color-mint-green-50: #d2f0e9;
   --color-mint-green-25: #e9f8f4;
@@ -235,22 +246,22 @@ exports[`Dropdown scss have to match snapshot 1`] = `
  * Typography
  *
  * The font-family properties are defined in the properties.scss file, like:
- * --font-family-std:
+ * --font-family-default:
  *
  */
 .dnb-typo-std,
 .dnb-typo-book {
-  font-family: var(--font-family-std);
+  font-family: var(--font-family-default);
   font-weight: normal;
   font-style: normal; }
 
 .dnb-typo-medium {
-  font-family: var(--font-family-std);
+  font-family: var(--font-family-default);
   font-weight: var(--font-weight-medium);
   font-style: normal; }
 
 .dnb-typo-demi {
-  font-family: var(--font-family-std);
+  font-family: var(--font-family-default);
   font-weight: var(--font-weight-demi);
   font-style: normal; }
 
@@ -343,8 +354,8 @@ exports[`Dropdown scss have to match snapshot 1`] = `
 
 .dnb-button {
   font-family: sans-serif;
-  font-family: var(--font-family-std);
-  font-weight: var(--font-weight-std);
+  font-family: var(--font-family-default);
+  font-weight: var(--font-weight-default);
   font-size: 1rem;
   font-style: normal;
   line-height: 1.5rem;
@@ -492,8 +503,8 @@ a.dnb-button {
 */
 .dnb-form-label {
   font-family: sans-serif;
-  font-family: var(--font-family-std);
-  font-weight: var(--font-weight-std);
+  font-family: var(--font-family-default);
+  font-weight: var(--font-weight-default);
   font-size: 1rem;
   font-style: normal;
   line-height: 1.5rem;
@@ -527,8 +538,8 @@ a.dnb-button {
 
 .dnb-input {
   font-family: sans-serif;
-  font-family: var(--font-family-std);
-  font-weight: var(--font-weight-std);
+  font-family: var(--font-family-default);
+  font-weight: var(--font-weight-default);
   font-size: 1rem;
   font-style: normal;
   line-height: 1.5rem;
@@ -664,8 +675,8 @@ a.dnb-button {
 
 .dnb-dropdown {
   font-family: sans-serif;
-  font-family: var(--font-family-std);
-  font-weight: var(--font-weight-std);
+  font-family: var(--font-family-default);
+  font-weight: var(--font-weight-default);
   font-size: 1rem;
   font-style: normal;
   line-height: 1.5rem;
diff --git a/packages/dnb-ui-lib/src/components/icon/__tests__/__snapshots__/Icon.test.js.snap b/packages/dnb-ui-lib/src/components/icon/__tests__/__snapshots__/Icon.test.js.snap
index 9ae0c0d8512..ac40a9d1caf 100644
--- a/packages/dnb-ui-lib/src/components/icon/__tests__/__snapshots__/Icon.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/icon/__tests__/__snapshots__/Icon.test.js.snap
@@ -66,17 +66,28 @@ exports[`Icon scss have to match snapshot 1`] = `
  *
  */
 :root {
-  --font-family-std: 'Fedra Sans Std', sans-serif;
+  --font-family-default: 'Fedra Sans Std', sans-serif;
   --font-family-book: 'Fedra Sans Std', sans-serif;
   /* Do not use, use --font-weight-... */
   --font-family-demi: 'Fedra Sans Std', sans-serif;
   /* Do not use, use --font-weight-... */
   --font-family-medium: 'Fedra Sans Std', sans-serif;
   /* Do not use, use --font-weight-... */
-  --font-weight-std: normal;
+  --font-weight-default: normal;
   --font-weight-book: normal;
   --font-weight-demi: 500;
   --font-weight-medium: 600;
+  --font-size-xxx-small: 0.75rem;
+  --font-size-xx-small: 0.625rem;
+  --font-size-x-small: 0.75rem;
+  --font-size-small: 0.875rem;
+  --font-size-default: 1rem;
+  --font-size-x-default: 1.25rem;
+  --font-size-medium: 1.5rem;
+  --font-size-large: 2rem;
+  --font-size-x-large: 2.5rem;
+  --font-size-xx-large: 3rem;
+  --font-size-decimate: 0.5em;
   --color-sea-green-alt: #008484;
   --color-mint-green-50: #d2f0e9;
   --color-mint-green-25: #e9f8f4;
@@ -109,22 +120,22 @@ exports[`Icon scss have to match snapshot 1`] = `
  * Typography
  *
  * The font-family properties are defined in the properties.scss file, like:
- * --font-family-std:
+ * --font-family-default:
  *
  */
 .dnb-typo-std,
 .dnb-typo-book {
-  font-family: var(--font-family-std);
+  font-family: var(--font-family-default);
   font-weight: normal;
   font-style: normal; }
 
 .dnb-typo-medium {
-  font-family: var(--font-family-std);
+  font-family: var(--font-family-default);
   font-weight: var(--font-weight-medium);
   font-style: normal; }
 
 .dnb-typo-demi {
-  font-family: var(--font-family-std);
+  font-family: var(--font-family-default);
   font-weight: var(--font-weight-demi);
   font-style: normal; }
 
diff --git a/packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap b/packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap
index b79efc83986..a7d6dbf3a70 100644
--- a/packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap
@@ -49,17 +49,28 @@ exports[`InputMasked scss have to match snapshot 1`] = `
  *
  */
 :root {
-  --font-family-std: 'Fedra Sans Std', sans-serif;
+  --font-family-default: 'Fedra Sans Std', sans-serif;
   --font-family-book: 'Fedra Sans Std', sans-serif;
   /* Do not use, use --font-weight-... */
   --font-family-demi: 'Fedra Sans Std', sans-serif;
   /* Do not use, use --font-weight-... */
   --font-family-medium: 'Fedra Sans Std', sans-serif;
   /* Do not use, use --font-weight-... */
-  --font-weight-std: normal;
+  --font-weight-default: normal;
   --font-weight-book: normal;
   --font-weight-demi: 500;
   --font-weight-medium: 600;
+  --font-size-xxx-small: 0.75rem;
+  --font-size-xx-small: 0.625rem;
+  --font-size-x-small: 0.75rem;
+  --font-size-small: 0.875rem;
+  --font-size-default: 1rem;
+  --font-size-x-default: 1.25rem;
+  --font-size-medium: 1.5rem;
+  --font-size-large: 2rem;
+  --font-size-x-large: 2.5rem;
+  --font-size-xx-large: 3rem;
+  --font-size-decimate: 0.5em;
   --color-sea-green-alt: #008484;
   --color-mint-green-50: #d2f0e9;
   --color-mint-green-25: #e9f8f4;
@@ -92,22 +103,22 @@ exports[`InputMasked scss have to match snapshot 1`] = `
  * Typography
  *
  * The font-family properties are defined in the properties.scss file, like:
- * --font-family-std:
+ * --font-family-default:
  *
  */
 .dnb-typo-std,
 .dnb-typo-book {
-  font-family: var(--font-family-std);
+  font-family: var(--font-family-default);
   font-weight: normal;
   font-style: normal; }
 
 .dnb-typo-medium {
-  font-family: var(--font-family-std);
+  font-family: var(--font-family-default);
   font-weight: var(--font-weight-medium);
   font-style: normal; }
 
 .dnb-typo-demi {
-  font-family: var(--font-family-std);
+  font-family: var(--font-family-default);
   font-weight: var(--font-weight-demi);
   font-style: normal; }
 
@@ -200,8 +211,8 @@ exports[`InputMasked scss have to match snapshot 1`] = `
 
 .dnb-button {
   font-family: sans-serif;
-  font-family: var(--font-family-std);
-  font-weight: var(--font-weight-std);
+  font-family: var(--font-family-default);
+  font-weight: var(--font-weight-default);
   font-size: 1rem;
   font-style: normal;
   line-height: 1.5rem;
@@ -349,8 +360,8 @@ a.dnb-button {
 */
 .dnb-form-label {
   font-family: sans-serif;
-  font-family: var(--font-family-std);
-  font-weight: var(--font-weight-std);
+  font-family: var(--font-family-default);
+  font-weight: var(--font-weight-default);
   font-size: 1rem;
   font-style: normal;
   line-height: 1.5rem;
@@ -384,8 +395,8 @@ a.dnb-button {
 
 .dnb-input {
   font-family: sans-serif;
-  font-family: var(--font-family-std);
-  font-weight: var(--font-weight-std);
+  font-family: var(--font-family-default);
+  font-weight: var(--font-weight-default);
   font-size: 1rem;
   font-style: normal;
   line-height: 1.5rem;
@@ -521,8 +532,8 @@ a.dnb-button {
 
 .dnb-input-masked {
   font-family: sans-serif;
-  font-family: var(--font-family-std);
-  font-weight: var(--font-weight-std);
+  font-family: var(--font-family-default);
+  font-weight: var(--font-weight-default);
   font-size: 1rem;
   font-style: normal;
   line-height: 1.5rem;
diff --git a/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap b/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap
index 1815a102092..ec19a42582a 100644
--- a/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap
@@ -125,17 +125,28 @@ exports[`Input scss have to match snapshot 1`] = `
  *
  */
 :root {
-  --font-family-std: 'Fedra Sans Std', sans-serif;
+  --font-family-default: 'Fedra Sans Std', sans-serif;
   --font-family-book: 'Fedra Sans Std', sans-serif;
   /* Do not use, use --font-weight-... */
   --font-family-demi: 'Fedra Sans Std', sans-serif;
   /* Do not use, use --font-weight-... */
   --font-family-medium: 'Fedra Sans Std', sans-serif;
   /* Do not use, use --font-weight-... */
-  --font-weight-std: normal;
+  --font-weight-default: normal;
   --font-weight-book: normal;
   --font-weight-demi: 500;
   --font-weight-medium: 600;
+  --font-size-xxx-small: 0.75rem;
+  --font-size-xx-small: 0.625rem;
+  --font-size-x-small: 0.75rem;
+  --font-size-small: 0.875rem;
+  --font-size-default: 1rem;
+  --font-size-x-default: 1.25rem;
+  --font-size-medium: 1.5rem;
+  --font-size-large: 2rem;
+  --font-size-x-large: 2.5rem;
+  --font-size-xx-large: 3rem;
+  --font-size-decimate: 0.5em;
   --color-sea-green-alt: #008484;
   --color-mint-green-50: #d2f0e9;
   --color-mint-green-25: #e9f8f4;
@@ -168,22 +179,22 @@ exports[`Input scss have to match snapshot 1`] = `
  * Typography
  *
  * The font-family properties are defined in the properties.scss file, like:
- * --font-family-std:
+ * --font-family-default:
  *
  */
 .dnb-typo-std,
 .dnb-typo-book {
-  font-family: var(--font-family-std);
+  font-family: var(--font-family-default);
   font-weight: normal;
   font-style: normal; }
 
 .dnb-typo-medium {
-  font-family: var(--font-family-std);
+  font-family: var(--font-family-default);
   font-weight: var(--font-weight-medium);
   font-style: normal; }
 
 .dnb-typo-demi {
-  font-family: var(--font-family-std);
+  font-family: var(--font-family-default);
   font-weight: var(--font-weight-demi);
   font-style: normal; }
 
@@ -272,8 +283,8 @@ exports[`Input scss have to match snapshot 1`] = `
 
 .dnb-button {
   font-family: sans-serif;
-  font-family: var(--font-family-std);
-  font-weight: var(--font-weight-std);
+  font-family: var(--font-family-default);
+  font-weight: var(--font-weight-default);
   font-size: 1rem;
   font-style: normal;
   line-height: 1.5rem;
@@ -421,8 +432,8 @@ a.dnb-button {
 */
 .dnb-form-label {
   font-family: sans-serif;
-  font-family: var(--font-family-std);
-  font-weight: var(--font-weight-std);
+  font-family: var(--font-family-default);
+  font-weight: var(--font-weight-default);
   font-size: 1rem;
   font-style: normal;
   line-height: 1.5rem;
@@ -456,8 +467,8 @@ a.dnb-button {
 
 .dnb-input {
   font-family: sans-serif;
-  font-family: var(--font-family-std);
-  font-weight: var(--font-weight-std);
+  font-family: var(--font-family-default);
+  font-weight: var(--font-weight-default);
   font-size: 1rem;
   font-style: normal;
   line-height: 1.5rem;
diff --git a/packages/dnb-ui-lib/src/components/logo/__tests__/__snapshots__/Logo.test.js.snap b/packages/dnb-ui-lib/src/components/logo/__tests__/__snapshots__/Logo.test.js.snap
index dc14777926a..210a0a666a1 100644
--- a/packages/dnb-ui-lib/src/components/logo/__tests__/__snapshots__/Logo.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/logo/__tests__/__snapshots__/Logo.test.js.snap
@@ -49,17 +49,28 @@ exports[`Logo scss have to match snapshot 1`] = `
  *
  */
 :root {
-  --font-family-std: 'Fedra Sans Std', sans-serif;
+  --font-family-default: 'Fedra Sans Std', sans-serif;
   --font-family-book: 'Fedra Sans Std', sans-serif;
   /* Do not use, use --font-weight-... */
   --font-family-demi: 'Fedra Sans Std', sans-serif;
   /* Do not use, use --font-weight-... */
   --font-family-medium: 'Fedra Sans Std', sans-serif;
   /* Do not use, use --font-weight-... */
-  --font-weight-std: normal;
+  --font-weight-default: normal;
   --font-weight-book: normal;
   --font-weight-demi: 500;
   --font-weight-medium: 600;
+  --font-size-xxx-small: 0.75rem;
+  --font-size-xx-small: 0.625rem;
+  --font-size-x-small: 0.75rem;
+  --font-size-small: 0.875rem;
+  --font-size-default: 1rem;
+  --font-size-x-default: 1.25rem;
+  --font-size-medium: 1.5rem;
+  --font-size-large: 2rem;
+  --font-size-x-large: 2.5rem;
+  --font-size-xx-large: 3rem;
+  --font-size-decimate: 0.5em;
   --color-sea-green-alt: #008484;
   --color-mint-green-50: #d2f0e9;
   --color-mint-green-25: #e9f8f4;
@@ -92,22 +103,22 @@ exports[`Logo scss have to match snapshot 1`] = `
  * Typography
  *
  * The font-family properties are defined in the properties.scss file, like:
- * --font-family-std:
+ * --font-family-default:
  *
  */
 .dnb-typo-std,
 .dnb-typo-book {
-  font-family: var(--font-family-std);
+  font-family: var(--font-family-default);
   font-weight: normal;
   font-style: normal; }
 
 .dnb-typo-medium {
-  font-family: var(--font-family-std);
+  font-family: var(--font-family-default);
   font-weight: var(--font-weight-medium);
   font-style: normal; }
 
 .dnb-typo-demi {
-  font-family: var(--font-family-std);
+  font-family: var(--font-family-default);
   font-weight: var(--font-weight-demi);
   font-style: normal; }
 
@@ -157,8 +168,8 @@ exports[`Logo scss have to match snapshot 1`] = `
  */
 .dnb-logo {
   font-family: sans-serif;
-  font-family: var(--font-family-std);
-  font-weight: var(--font-weight-std);
+  font-family: var(--font-family-default);
+  font-weight: var(--font-weight-default);
   font-size: 1rem;
   font-style: normal;
   line-height: 1.5rem;
diff --git a/packages/dnb-ui-lib/src/components/modal/__tests__/__snapshots__/Modal.test.js.snap b/packages/dnb-ui-lib/src/components/modal/__tests__/__snapshots__/Modal.test.js.snap
index 1ba09ddf034..b8c4504fb38 100644
--- a/packages/dnb-ui-lib/src/components/modal/__tests__/__snapshots__/Modal.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/modal/__tests__/__snapshots__/Modal.test.js.snap
@@ -422,17 +422,28 @@ exports[`Modal scss have to match snapshot 1`] = `
  *
  */
 :root {
-  --font-family-std: 'Fedra Sans Std', sans-serif;
+  --font-family-default: 'Fedra Sans Std', sans-serif;
   --font-family-book: 'Fedra Sans Std', sans-serif;
   /* Do not use, use --font-weight-... */
   --font-family-demi: 'Fedra Sans Std', sans-serif;
   /* Do not use, use --font-weight-... */
   --font-family-medium: 'Fedra Sans Std', sans-serif;
   /* Do not use, use --font-weight-... */
-  --font-weight-std: normal;
+  --font-weight-default: normal;
   --font-weight-book: normal;
   --font-weight-demi: 500;
   --font-weight-medium: 600;
+  --font-size-xxx-small: 0.75rem;
+  --font-size-xx-small: 0.625rem;
+  --font-size-x-small: 0.75rem;
+  --font-size-small: 0.875rem;
+  --font-size-default: 1rem;
+  --font-size-x-default: 1.25rem;
+  --font-size-medium: 1.5rem;
+  --font-size-large: 2rem;
+  --font-size-x-large: 2.5rem;
+  --font-size-xx-large: 3rem;
+  --font-size-decimate: 0.5em;
   --color-sea-green-alt: #008484;
   --color-mint-green-50: #d2f0e9;
   --color-mint-green-25: #e9f8f4;
@@ -465,22 +476,22 @@ exports[`Modal scss have to match snapshot 1`] = `
  * Typography
  *
  * The font-family properties are defined in the properties.scss file, like:
- * --font-family-std:
+ * --font-family-default:
  *
  */
 .dnb-typo-std,
 .dnb-typo-book {
-  font-family: var(--font-family-std);
+  font-family: var(--font-family-default);
   font-weight: normal;
   font-style: normal; }
 
 .dnb-typo-medium {
-  font-family: var(--font-family-std);
+  font-family: var(--font-family-default);
   font-weight: var(--font-weight-medium);
   font-style: normal; }
 
 .dnb-typo-demi {
-  font-family: var(--font-family-std);
+  font-family: var(--font-family-default);
   font-weight: var(--font-weight-demi);
   font-style: normal; }
 
@@ -569,8 +580,8 @@ exports[`Modal scss have to match snapshot 1`] = `
 
 .dnb-button {
   font-family: sans-serif;
-  font-family: var(--font-family-std);
-  font-weight: var(--font-weight-std);
+  font-family: var(--font-family-default);
+  font-weight: var(--font-weight-default);
   font-size: 1rem;
   font-style: normal;
   line-height: 1.5rem;
@@ -714,8 +725,8 @@ a.dnb-button {
 
 .dnb-modal {
   font-family: sans-serif;
-  font-family: var(--font-family-std);
-  font-weight: var(--font-weight-std);
+  font-family: var(--font-family-default);
+  font-weight: var(--font-weight-default);
   font-size: 1rem;
   font-style: normal;
   line-height: 1.5rem;
diff --git a/packages/dnb-ui-lib/src/components/slider/__tests__/__snapshots__/Slider.test.js.snap b/packages/dnb-ui-lib/src/components/slider/__tests__/__snapshots__/Slider.test.js.snap
index fc28ab0a15f..c24fc091fe4 100644
--- a/packages/dnb-ui-lib/src/components/slider/__tests__/__snapshots__/Slider.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/slider/__tests__/__snapshots__/Slider.test.js.snap
@@ -69,17 +69,28 @@ exports[`Slider scss have to match snapshot 1`] = `
  *
  */
 :root {
-  --font-family-std: 'Fedra Sans Std', sans-serif;
+  --font-family-default: 'Fedra Sans Std', sans-serif;
   --font-family-book: 'Fedra Sans Std', sans-serif;
   /* Do not use, use --font-weight-... */
   --font-family-demi: 'Fedra Sans Std', sans-serif;
   /* Do not use, use --font-weight-... */
   --font-family-medium: 'Fedra Sans Std', sans-serif;
   /* Do not use, use --font-weight-... */
-  --font-weight-std: normal;
+  --font-weight-default: normal;
   --font-weight-book: normal;
   --font-weight-demi: 500;
   --font-weight-medium: 600;
+  --font-size-xxx-small: 0.75rem;
+  --font-size-xx-small: 0.625rem;
+  --font-size-x-small: 0.75rem;
+  --font-size-small: 0.875rem;
+  --font-size-default: 1rem;
+  --font-size-x-default: 1.25rem;
+  --font-size-medium: 1.5rem;
+  --font-size-large: 2rem;
+  --font-size-x-large: 2.5rem;
+  --font-size-xx-large: 3rem;
+  --font-size-decimate: 0.5em;
   --color-sea-green-alt: #008484;
   --color-mint-green-50: #d2f0e9;
   --color-mint-green-25: #e9f8f4;
@@ -112,22 +123,22 @@ exports[`Slider scss have to match snapshot 1`] = `
  * Typography
  *
  * The font-family properties are defined in the properties.scss file, like:
- * --font-family-std:
+ * --font-family-default:
  *
  */
 .dnb-typo-std,
 .dnb-typo-book {
-  font-family: var(--font-family-std);
+  font-family: var(--font-family-default);
   font-weight: normal;
   font-style: normal; }
 
 .dnb-typo-medium {
-  font-family: var(--font-family-std);
+  font-family: var(--font-family-default);
   font-weight: var(--font-weight-medium);
   font-style: normal; }
 
 .dnb-typo-demi {
-  font-family: var(--font-family-std);
+  font-family: var(--font-family-default);
   font-weight: var(--font-weight-demi);
   font-style: normal; }
 
@@ -177,8 +188,8 @@ exports[`Slider scss have to match snapshot 1`] = `
  */
 .dnb-slider {
   font-family: sans-serif;
-  font-family: var(--font-family-std);
-  font-weight: var(--font-weight-std);
+  font-family: var(--font-family-default);
+  font-weight: var(--font-weight-default);
   font-size: 1rem;
   font-style: normal;
   line-height: 1.5rem;
diff --git a/packages/dnb-ui-lib/src/components/switch/__tests__/__snapshots__/Switch.test.js.snap b/packages/dnb-ui-lib/src/components/switch/__tests__/__snapshots__/Switch.test.js.snap
index f1e0249338a..9ff0210f73f 100644
--- a/packages/dnb-ui-lib/src/components/switch/__tests__/__snapshots__/Switch.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/switch/__tests__/__snapshots__/Switch.test.js.snap
@@ -89,17 +89,28 @@ exports[`Switch scss have to match snapshot 1`] = `
  *
  */
 :root {
-  --font-family-std: 'Fedra Sans Std', sans-serif;
+  --font-family-default: 'Fedra Sans Std', sans-serif;
   --font-family-book: 'Fedra Sans Std', sans-serif;
   /* Do not use, use --font-weight-... */
   --font-family-demi: 'Fedra Sans Std', sans-serif;
   /* Do not use, use --font-weight-... */
   --font-family-medium: 'Fedra Sans Std', sans-serif;
   /* Do not use, use --font-weight-... */
-  --font-weight-std: normal;
+  --font-weight-default: normal;
   --font-weight-book: normal;
   --font-weight-demi: 500;
   --font-weight-medium: 600;
+  --font-size-xxx-small: 0.75rem;
+  --font-size-xx-small: 0.625rem;
+  --font-size-x-small: 0.75rem;
+  --font-size-small: 0.875rem;
+  --font-size-default: 1rem;
+  --font-size-x-default: 1.25rem;
+  --font-size-medium: 1.5rem;
+  --font-size-large: 2rem;
+  --font-size-x-large: 2.5rem;
+  --font-size-xx-large: 3rem;
+  --font-size-decimate: 0.5em;
   --color-sea-green-alt: #008484;
   --color-mint-green-50: #d2f0e9;
   --color-mint-green-25: #e9f8f4;
@@ -132,22 +143,22 @@ exports[`Switch scss have to match snapshot 1`] = `
  * Typography
  *
  * The font-family properties are defined in the properties.scss file, like:
- * --font-family-std:
+ * --font-family-default:
  *
  */
 .dnb-typo-std,
 .dnb-typo-book {
-  font-family: var(--font-family-std);
+  font-family: var(--font-family-default);
   font-weight: normal;
   font-style: normal; }
 
 .dnb-typo-medium {
-  font-family: var(--font-family-std);
+  font-family: var(--font-family-default);
   font-weight: var(--font-weight-medium);
   font-style: normal; }
 
 .dnb-typo-demi {
-  font-family: var(--font-family-std);
+  font-family: var(--font-family-default);
   font-weight: var(--font-weight-demi);
   font-style: normal; }
 
@@ -197,8 +208,8 @@ exports[`Switch scss have to match snapshot 1`] = `
  */
 .dnb-switch {
   font-family: sans-serif;
-  font-family: var(--font-family-std);
-  font-weight: var(--font-weight-std);
+  font-family: var(--font-family-default);
+  font-weight: var(--font-weight-default);
   font-size: 1rem;
   font-style: normal;
   line-height: 1.5rem;
diff --git a/packages/dnb-ui-lib/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap b/packages/dnb-ui-lib/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap
index af961d62255..a0716fa1bef 100644
--- a/packages/dnb-ui-lib/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap
@@ -172,17 +172,28 @@ exports[`Tabs scss have to match snapshot 1`] = `
  *
  */
 :root {
-  --font-family-std: 'Fedra Sans Std', sans-serif;
+  --font-family-default: 'Fedra Sans Std', sans-serif;
   --font-family-book: 'Fedra Sans Std', sans-serif;
   /* Do not use, use --font-weight-... */
   --font-family-demi: 'Fedra Sans Std', sans-serif;
   /* Do not use, use --font-weight-... */
   --font-family-medium: 'Fedra Sans Std', sans-serif;
   /* Do not use, use --font-weight-... */
-  --font-weight-std: normal;
+  --font-weight-default: normal;
   --font-weight-book: normal;
   --font-weight-demi: 500;
   --font-weight-medium: 600;
+  --font-size-xxx-small: 0.75rem;
+  --font-size-xx-small: 0.625rem;
+  --font-size-x-small: 0.75rem;
+  --font-size-small: 0.875rem;
+  --font-size-default: 1rem;
+  --font-size-x-default: 1.25rem;
+  --font-size-medium: 1.5rem;
+  --font-size-large: 2rem;
+  --font-size-x-large: 2.5rem;
+  --font-size-xx-large: 3rem;
+  --font-size-decimate: 0.5em;
   --color-sea-green-alt: #008484;
   --color-mint-green-50: #d2f0e9;
   --color-mint-green-25: #e9f8f4;
@@ -215,22 +226,22 @@ exports[`Tabs scss have to match snapshot 1`] = `
  * Typography
  *
  * The font-family properties are defined in the properties.scss file, like:
- * --font-family-std:
+ * --font-family-default:
  *
  */
 .dnb-typo-std,
 .dnb-typo-book {
-  font-family: var(--font-family-std);
+  font-family: var(--font-family-default);
   font-weight: normal;
   font-style: normal; }
 
 .dnb-typo-medium {
-  font-family: var(--font-family-std);
+  font-family: var(--font-family-default);
   font-weight: var(--font-weight-medium);
   font-style: normal; }
 
 .dnb-typo-demi {
-  font-family: var(--font-family-std);
+  font-family: var(--font-family-default);
   font-weight: var(--font-weight-demi);
   font-style: normal; }
 
@@ -280,8 +291,8 @@ exports[`Tabs scss have to match snapshot 1`] = `
  */
 .dnb-tabs {
   font-family: sans-serif;
-  font-family: var(--font-family-std);
-  font-weight: var(--font-weight-std);
+  font-family: var(--font-family-default);
+  font-weight: var(--font-weight-default);
   font-size: 1rem;
   font-style: normal;
   line-height: 1.5rem;
diff --git a/packages/dnb-ui-lib/src/patterns/view-title/__tests__/__snapshots__/ViewTitle.test.js.snap b/packages/dnb-ui-lib/src/patterns/view-title/__tests__/__snapshots__/ViewTitle.test.js.snap
index 1648ebaef89..78154c99d84 100644
--- a/packages/dnb-ui-lib/src/patterns/view-title/__tests__/__snapshots__/ViewTitle.test.js.snap
+++ b/packages/dnb-ui-lib/src/patterns/view-title/__tests__/__snapshots__/ViewTitle.test.js.snap
@@ -23,17 +23,28 @@ exports[`ViewTitle scss have to match snapshot 1`] = `
  *
  */
 :root {
-  --font-family-std: 'Fedra Sans Std', sans-serif;
+  --font-family-default: 'Fedra Sans Std', sans-serif;
   --font-family-book: 'Fedra Sans Std', sans-serif;
   /* Do not use, use --font-weight-... */
   --font-family-demi: 'Fedra Sans Std', sans-serif;
   /* Do not use, use --font-weight-... */
   --font-family-medium: 'Fedra Sans Std', sans-serif;
   /* Do not use, use --font-weight-... */
-  --font-weight-std: normal;
+  --font-weight-default: normal;
   --font-weight-book: normal;
   --font-weight-demi: 500;
   --font-weight-medium: 600;
+  --font-size-xxx-small: 0.75rem;
+  --font-size-xx-small: 0.625rem;
+  --font-size-x-small: 0.75rem;
+  --font-size-small: 0.875rem;
+  --font-size-default: 1rem;
+  --font-size-x-default: 1.25rem;
+  --font-size-medium: 1.5rem;
+  --font-size-large: 2rem;
+  --font-size-x-large: 2.5rem;
+  --font-size-xx-large: 3rem;
+  --font-size-decimate: 0.5em;
   --color-sea-green-alt: #008484;
   --color-mint-green-50: #d2f0e9;
   --color-mint-green-25: #e9f8f4;
@@ -66,22 +77,22 @@ exports[`ViewTitle scss have to match snapshot 1`] = `
  * Typography
  *
  * The font-family properties are defined in the properties.scss file, like:
- * --font-family-std:
+ * --font-family-default:
  *
  */
 .dnb-typo-std,
 .dnb-typo-book {
-  font-family: var(--font-family-std);
+  font-family: var(--font-family-default);
   font-weight: normal;
   font-style: normal; }
 
 .dnb-typo-medium {
-  font-family: var(--font-family-std);
+  font-family: var(--font-family-default);
   font-weight: var(--font-weight-medium);
   font-style: normal; }
 
 .dnb-typo-demi {
-  font-family: var(--font-family-std);
+  font-family: var(--font-family-default);
   font-weight: var(--font-weight-demi);
   font-style: normal; }
 
@@ -131,8 +142,8 @@ exports[`ViewTitle scss have to match snapshot 1`] = `
  */
 .dnb-view-title {
   font-family: sans-serif;
-  font-family: var(--font-family-std);
-  font-weight: var(--font-weight-std);
+  font-family: var(--font-family-default);
+  font-weight: var(--font-weight-default);
   font-size: 1rem;
   font-style: normal;
   line-height: 1.5rem;
diff --git a/packages/dnb-ui-lib/src/style/core/dnb-style.scss b/packages/dnb-ui-lib/src/style/core/dnb-style.scss
index 18b5dd7f59b..78d1733d866 100644
--- a/packages/dnb-ui-lib/src/style/core/dnb-style.scss
+++ b/packages/dnb-ui-lib/src/style/core/dnb-style.scss
@@ -12,7 +12,7 @@
 // hey have to be used by a parent css class: .dnb-style
 .dnb-style {
   small {
-    font-size: 0.875rem; // 14px
+    font-size: var(--font-size-small); // 14px
     line-height: 1.5rem;
   }
 
@@ -35,7 +35,7 @@
   h1 {
     margin: 1.5rem 0 1rem;
 
-    font-size: 3rem; // 48px
+    font-size: var(--font-size-xx-large); // 48px
     line-height: 3.5rem; // 56px
     font-weight: var(--font-weight-demi);
   }
@@ -43,14 +43,14 @@
   h1.small,
   h1 small {
     display: block;
-    font-size: 2rem; // 32px
+    font-size: var(--font-size-large); // 32px
     line-height: 3rem; // 48px
   }
 
   h2 {
     margin: 1.5rem 0 1rem;
 
-    font-size: 1.5rem; // 24px
+    font-size: var(--font-size-medium); // 24px
     line-height: 2rem; // 32px
   }
 
@@ -62,28 +62,28 @@
   p.dnb-lead {
     font-family: var(--font-family-demi);
     font-weight: var(--font-weight-demi);
-    font-size: 1.25rem; // 20px
+    font-size: var(--font-size-x-default); // 20px
     line-height: 2rem; // 32px
   }
   h3 > small,
   h3.small,
   p.dnb-lead > small,
   p.dnb-lead > .small {
-    font-size: 1rem; // 16px
+    font-size: var(--font-size-default); // 16px
     line-height: 1.5rem; // 24px
   }
 
   // The rest of the Headings are nod defned by the Eufemia Typography
   h4 {
-    font-size: 1.25rem; // 20px
+    font-size: var(--font-size-x-default); // 20px
     line-height: 1.5rem; // 24px
   }
   h5 {
-    font-size: 1rem; // 16px
+    font-size: var(--font-size-default); // 16px
     line-height: 1.5rem; // 24px
   }
   h6 {
-    font-size: 0.875rem;
+    font-size: var(--font-size-small);
   }
 
   p {
diff --git a/packages/dnb-ui-lib/src/style/core/properties.scss b/packages/dnb-ui-lib/src/style/core/properties.scss
index d567dfea8ee..7785f9fd85f 100644
--- a/packages/dnb-ui-lib/src/style/core/properties.scss
+++ b/packages/dnb-ui-lib/src/style/core/properties.scss
@@ -5,17 +5,31 @@
 
 :root {
   // Typography Family
-  --font-family-std: 'Fedra Sans Std', sans-serif;
+  --font-family-default: 'Fedra Sans Std', sans-serif;
   --font-family-book: 'Fedra Sans Std', sans-serif; /* Do not use, use --font-weight-... */
   --font-family-demi: 'Fedra Sans Std', sans-serif; /* Do not use, use --font-weight-... */
   --font-family-medium: 'Fedra Sans Std', sans-serif; /* Do not use, use --font-weight-... */
 
   // Typography Weights
-  --font-weight-std: normal;
+  --font-weight-default: normal;
   --font-weight-book: normal;
   --font-weight-demi: 500;
   --font-weight-medium: 600;
 
+  // Typography Sizes
+  // --font-size-x-small: 0.75rem; // 12px
+  --font-size-xxx-small: 0.75rem; // 8px
+  --font-size-xx-small: 0.625rem; // 10px
+  --font-size-x-small: 0.75rem; // 12px
+  --font-size-small: 0.875rem; // 14px
+  --font-size-default: 1rem; // 16px
+  --font-size-x-default: 1.25rem; // 20px
+  --font-size-medium: 1.5rem; // 24px
+  --font-size-large: 2rem; // 32px
+  --font-size-x-large: 2.5rem; // 40px
+  --font-size-xx-large: 3rem; // 48px
+  --font-size-decimate: 0.5em;
+
   // UX colors
   --color-sea-green-alt: #008484;
   --color-mint-green-50: #d2f0e9;
diff --git a/packages/dnb-ui-lib/src/style/core/scopes.scss b/packages/dnb-ui-lib/src/style/core/scopes.scss
index cbba969293e..74a417dfea7 100644
--- a/packages/dnb-ui-lib/src/style/core/scopes.scss
+++ b/packages/dnb-ui-lib/src/style/core/scopes.scss
@@ -5,8 +5,8 @@
 
 @mixin bodyDefault() {
   font-family: sans-serif;
-  font-family: var(--font-family-std);
-  font-weight: var(--font-weight-std);
+  font-family: var(--font-family-default);
+  font-weight: var(--font-weight-default);
   font-size: 1rem;
   font-style: normal;
   line-height: 1.5rem;
diff --git a/packages/dnb-ui-lib/src/style/core/typography.scss b/packages/dnb-ui-lib/src/style/core/typography.scss
index a0a5701adbd..fb0265d7a66 100644
--- a/packages/dnb-ui-lib/src/style/core/typography.scss
+++ b/packages/dnb-ui-lib/src/style/core/typography.scss
@@ -2,24 +2,24 @@
  * Typography
  *
  * The font-family properties are defined in the properties.scss file, like:
- * --font-family-std:
+ * --font-family-default:
  *
  */
 
 // Font usage
 .dnb-typo-std,
 .dnb-typo-book {
-  font-family: var(--font-family-std);
+  font-family: var(--font-family-default);
   font-weight: normal;
   font-style: normal;
 }
 .dnb-typo-medium {
-  font-family: var(--font-family-std);
+  font-family: var(--font-family-default);
   font-weight: var(--font-weight-medium);
   font-style: normal;
 }
 .dnb-typo-demi {
-  font-family: var(--font-family-std);
+  font-family: var(--font-family-default);
   font-weight: var(--font-weight-demi);
   font-style: normal;
 }