From 54f663ae46751d0068f250ad3c73b2bea1e3cb9b Mon Sep 17 00:00:00 2001
From: Snorre Kim <snorre.kim@dnb.no>
Date: Mon, 18 Nov 2024 17:28:01 +0100
Subject: [PATCH] Use new typography classes

---
 .../typography/font-families.mdx              | 16 ++--
 .../typography/font-weights.mdx               | 10 +-
 .../uilib/elements/paragraph/Examples.tsx     | 89 ++++++++++++++----
 .../docs/uilib/elements/paragraph/demos.mdx   | 57 +++++++++++-
 .../docs/uilib/elements/paragraph/info.mdx    | 20 +---
 .../src/docs/uilib/elements/span/Examples.tsx | 16 ++--
 .../src/docs/uilib/elements/span/demos.mdx    |  2 +
 .../src/docs/uilib/elements/span/info.mdx     |  9 +-
 .../src/docs/uilib/typography/Examples.tsx    |  8 +-
 .../src/docs/uilib/typography/font-size.mdx   | 20 ++--
 .../src/docs/uilib/typography/font-weight.mdx | 18 ++--
 .../docs/uilib/typography/helper-classes.mdx  | 68 ++++++++++++++
 .../src/docs/uilib/typography/line-height.mdx | 21 +++--
 .../src/elements/span/__tests__/Span.test.tsx | 44 +++++----
 .../src/elements/typography/IngressDocs.ts    |  4 +-
 .../src/elements/typography/LeadDocs.ts       |  4 +-
 .../dnb-eufemia/src/elements/typography/P.tsx | 81 +++++++++++++++-
 .../src/elements/typography/PDocs.ts          | 15 +++
 .../src/elements/typography/Typography.tsx    | 72 +++++++-------
 .../src/elements/typography/TypographyDocs.ts | 50 +++++++---
 .../elements/typography/__tests__/P.test.tsx  | 41 +++++---
 .../src/elements/typography/style/_dnb-t.scss | 93 +++++++++++++++++++
 .../typography/style/dnb-typography.scss      |  9 +-
 .../typography/style/typography-mixins.scss   | 14 ++-
 .../Visibility/__tests__/Visibility.test.tsx  |  4 +-
 .../__snapshots__/Elements.test.js.snap       | 89 +++++++++++++-----
 26 files changed, 650 insertions(+), 224 deletions(-)
 create mode 100644 packages/dnb-design-system-portal/src/docs/uilib/typography/helper-classes.mdx
 create mode 100644 packages/dnb-eufemia/src/elements/typography/style/_dnb-t.scss

diff --git a/packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/font-families.mdx b/packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/font-families.mdx
index 7f23a6795aa..c37945d1d59 100644
--- a/packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/font-families.mdx
+++ b/packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/font-families.mdx
@@ -1,14 +1,15 @@
 import { H3 } from '@dnb/eufemia/src'
 
+# Font Families
+
 <VisibilityByTheme hidden="sbanken">
-## Font Families
 
 The default font family for all web applications is the `DNB` font.
 
 ## DNB Regular
 
 <TypographyBox>
-  <p className="dnb-p dnb-typo-regular">
+  <p className="dnb-p dnb-t__weight--regular dnd-t__family-basis">
     Here is a paragraph with some nonsense lipsum text. Contrary to popular
     belief, Lorem Ipsum passage, and going through the cites of the word in
     classical literature, discovered the undoubtable source. Lorem Ipsum
@@ -20,7 +21,7 @@ The default font family for all web applications is the `DNB` font.
 ## DNB Medium
 
 <TypographyBox>
-  <p className="dnb-p dnb-typo-medium">
+  <p className="dnb-p dnb-t__weight--medium dnd-t__family-basis">
     Here is a paragraph with some nonsense lipsum text. Contrary to popular
     belief, Lorem Ipsum passage, and going through the cites of the word in
     classical literature, discovered the undoubtable source. Lorem Ipsum
@@ -32,7 +33,7 @@ The default font family for all web applications is the `DNB` font.
 ## DNB Bold
 
 <TypographyBox>
-  <p className="dnb-p dnb-typo-bold">
+  <p className="dnb-p dnb-t__weight--bold dnd-t__family-basis">
     Here is a paragraph with some nonsense lipsum text. Contrary to popular
     belief, Lorem Ipsum passage, and going through the cites of the word in
     classical literature, discovered the undoubtable source. Lorem Ipsum
@@ -44,7 +45,7 @@ The default font family for all web applications is the `DNB` font.
 ## DNBMono Regular
 
 <TypographyBox>
-  <p className="dnb-p dnb-typo-mono-regular">
+  <p className="dnb-p dnb-t__weight--regular dnb-t__family--monospace">
     Here is a paragraph with some nonsense lipsum text. Contrary to popular
     belief, Lorem Ipsum passage, and going through the cites of the word in
     classical literature, discovered the undoubtable source. Lorem Ipsum
@@ -54,7 +55,6 @@ The default font family for all web applications is the `DNB` font.
 </TypographyBox>
 </VisibilityByTheme>
 <VisibilityByTheme visible="sbanken">
-## Font Families
 
 The default font family for all web applications is `Roboto`, however for headlines and some other items we use `Maison Neue`.
 
@@ -67,7 +67,7 @@ The default font family for all web applications is `Roboto`, however for headli
 ### Roboto regular
 
 <TypographyBox>
-  <p className="dnb-p dnb-typo-regular">
+  <p className="dnb-p dnb-t__weight--regular dnd-t__family-basis">
     Here is a paragraph with some nonsense lipsum text. Contrary to popular
     belief, Lorem Ipsum passage, and going through the cites of the word in
     classical literature, discovered the undoubtable source. Lorem Ipsum
@@ -79,7 +79,7 @@ The default font family for all web applications is `Roboto`, however for headli
 ### Roboto bold
 
 <TypographyBox>
-  <p className="dnb-p dnb-typo-bold">
+  <p className="dnb-p dnb-typo-bold dnd-t__family-basis">
     Here is a paragraph with some nonsense lipsum text. Contrary to popular
     belief, Lorem Ipsum passage, and going through the cites of the word in
     classical literature, discovered the undoubtable source. Lorem Ipsum
diff --git a/packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/font-weights.mdx b/packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/font-weights.mdx
index 656e1eca38e..dee3c5f55fc 100644
--- a/packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/font-weights.mdx
+++ b/packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/font-weights.mdx
@@ -1,6 +1,8 @@
 ## Font Weights
 
-Achieved with HTML classes: `.dnb-typo-regular`, <VisibilityByTheme hidden="sbanken">`.dnb-typo-medium`, </VisibilityByTheme>`.dnb-typo-bold`
+Achieved with HTML classes: `.dnb-t__weight--regular`,`.dnb-t__weight--medium` or `.dnb-t__weight--bold`.
+
+The old classes, `.dnb-typo-regular`, `.dnb-typo-medium` and `.dnb-typo-bold`, still work, but will also set font-family and font-style.
 
 ### Body Regular
 
@@ -8,7 +10,7 @@ Achieved with HTML classes: `.dnb-typo-regular`, <VisibilityByTheme hidden="sban
 no need to use a class.
 
 <TypographyBox>
-  <p className="dnb-typo-regular">
+  <p className="dnb-t__weight-regular">
     Here is a paragraph with some nonsense lipsum text. Contrary to popular
     belief, Lorem Ipsum passage, and going through the cites of the word in
     classical literature, discovered the undoubtable source. Lorem Ipsum
@@ -21,7 +23,7 @@ no need to use a class.
 ### Body Medium
 
 <TypographyBox>
-  <p className="dnb-typo-medium">
+  <p className="dnb-t__weight-medium">
     Here is a paragraph with some nonsense lipsum text. Contrary to popular
     belief, Lorem Ipsum passage, and going through the cites of the word in
     classical literature, discovered the undoubtable source. Lorem Ipsum
@@ -34,7 +36,7 @@ no need to use a class.
 ### Body Bold
 
 <TypographyBox>
-  <p className="dnb-typo-bold">
+  <p className="dnb-t__weight-bold">
     Here is a paragraph with some nonsense lipsum text. Contrary to popular
     belief, Lorem Ipsum passage, and going through the cites of the word in
     classical literature, discovered the undoubtable source. Lorem Ipsum
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/elements/paragraph/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/elements/paragraph/Examples.tsx
index cee52636e2e..e44fb128eea 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/elements/paragraph/Examples.tsx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/elements/paragraph/Examples.tsx
@@ -14,6 +14,77 @@ const Case = styled.span`
   padding: 0.25rem 0;
 `
 
+export function ParagraphWeightModifiers() {
+  return (
+    <ComponentBox hideCode data-visual-test="paragraph-modifiers">
+      <P>Default paragraph</P>
+      <P weight="regular">Regular weight paragraph (same as default)</P>
+      <P weight="medium">Medium weight paragraph</P>
+    </ComponentBox>
+  )
+}
+export function ParagraphSizeModifiers() {
+  return (
+    <ComponentBox hideCode data-visual-test="paragraph-modifiers">
+      <P size="x-small">x-small paragraph</P>
+      <P size="small">small paragraph</P>
+      <P size="medium">medium paragraph</P>
+      <P size="basis">basis paragraph (same as default)</P>
+      <P size="large">large paragraph</P>
+      <P size="x-large">x-large paragraph</P>
+      <P size="xx-large">xx-large paragraph</P>
+    </ComponentBox>
+  )
+}
+export function ParagraphAlignmentModifiers() {
+  return (
+    <ComponentBox hideCode data-visual-test="paragraph-modifiers">
+      <P align="right">Right aligned paragraph</P>
+      <P align="center">Center aligned paragraph</P>
+      <P align="left">Left aligned paragraph</P>
+    </ComponentBox>
+  )
+}
+export function ParagraphFamilyModifiers() {
+  return (
+    <ComponentBox hideCode data-visual-test="paragraph-modifiers">
+      <P family="basis">Basis family paragraph (same as default)</P>
+      <P family="heading">
+        Heading family paragraph (only different on some themes)
+      </P>
+      <P family="monospace">Monospace family paragraph</P>
+    </ComponentBox>
+  )
+}
+
+export function ParagraphLineHeightModifiers() {
+  return (
+    <ComponentBox hideCode data-visual-test="paragraph-modifiers">
+      <P line="x-small">x-small line-height paragraph</P>
+      <P line="small">small line-height paragraph</P>
+      <P line="medium">medium line-height paragraph</P>
+      <P line="basis">basis line-height paragraph (same as default)</P>
+      <P line="large">large line-height paragraph</P>
+      <P line="x-large">x-large line-height paragraph</P>
+      <P line="xx-large">xx-large line-height paragraph</P>
+    </ComponentBox>
+  )
+}
+export function ParagraphAdditionalModifiers() {
+  return (
+    <ComponentBox
+      hideCode
+      data-visual-test="paragraph-additional-modifiers"
+    >
+      <div>
+        <P weight="bold">Bold weight paragraph</P>
+        <P decoration="underline">Underline paragraph</P>
+        <P decoration="italic">Italic paragraph</P>
+      </div>
+    </ComponentBox>
+  )
+}
+
 export function ParagraphDefault() {
   return (
     <ComponentBox
@@ -89,8 +160,6 @@ export function ParagraphSmall() {
           <Case>
             <strong>Strong paragraph (medium weight)</strong>
           </Case>
-          {/* <i>Italic paragraph</i> */}
-          {/* <u>Underline paragraph</u> */}
           <Case>Numbers 0123456789</Case>
           <Case>
             <code className="dnb-code">Code paragraph</code>
@@ -172,22 +241,6 @@ export function ParagraphAdditional() {
   )
 }
 
-export function ParagraphModifiers() {
-  return (
-    <ComponentBox data-visual-test="paragraph-modifiers">
-      <div>
-        <P>Default paragraph</P>
-        <P modifier="medium">Medium weight paragraph</P>
-        <P size="small">Small paragraph</P>
-        <P modifier="small medium">Small paragraph with medium weight</P>
-        {/* (Bold is currently not supported by DNB UX) */}
-        {/* <P modifier="bold">Bold weight paragraph</P> */}
-        {/* <P modifier="small bold">Small paragraph with bold weight</P> */}
-      </div>
-    </ComponentBox>
-  )
-}
-
 export function ParagraphRegressionTests() {
   const PWrap = ({ customSize = null, ...props }) => {
     const size = props.size || customSize
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/elements/paragraph/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/elements/paragraph/demos.mdx
index 1da55828471..e64a66b8920 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/elements/paragraph/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/elements/paragraph/demos.mdx
@@ -3,28 +3,75 @@ showTabs: true
 ---
 
 import {
+  ParagraphWeightModifiers,
+  ParagraphSizeModifiers,
+  ParagraphAlignmentModifiers,
+  ParagraphFamilyModifiers,
+  ParagraphLineHeightModifiers,
+  ParagraphAdditionalModifiers,
   ParagraphDefault,
   ParagraphSmall,
   ParagraphAdditional,
   ParagraphRegressionTests,
-  ParagraphModifiers,
 } from 'Docs/uilib/elements/paragraph/Examples'
 
 ## Demos
 
 ### Paragraphs modifiers
 
-<ParagraphModifiers />
+These are the standard available modifiers for paragraph typography:
 
-### Paragraphs `basis` sized
+- [Weight](#weight)
+- [Size](#size)
+- [Alignment](#alignment)
+- [Font family](#font-family)
+- [Line height](#line-height)
+
+As well as some [other modifiers](#other-modifiers).
+
+#### Weight
+
+<ParagraphWeightModifiers />
+
+#### Size
+
+Also automatically sets the matching line-height (`line` prop).
+
+<ParagraphSizeModifiers />
+
+#### Alignment
+
+<ParagraphAlignmentModifiers />
+
+#### Font family
+
+<ParagraphFamilyModifiers />
+
+#### Line height
+
+Line-height will be set automatically based on the `size` props, but can also be set seperately if needed.
+
+<ParagraphLineHeightModifiers />
+
+#### Other modifiers
+
+Although bold, italic and underline are not a standard part of the Eufemia design system for typography (in particular, "medium" should be used instead of "bold"), we still include them as an option for convenience. And there are also cases where an accessibility case can be made for their use.
+
+<ParagraphAdditionalModifiers />
+
+### Children tag styling
+
+Paragraph also adds some default styling to child typography HTML elements. Like `<b>` or `<strong>`.
+
+#### Paragraphs `basis` sized
 
 <ParagraphDefault />
 
-#### Paragraph `small` sized
+##### Paragraph `small` sized
 
 <ParagraphSmall />
 
-#### Additional Paragraph formatting (not defined yet)
+##### Additional Paragraph formatting (not defined yet)
 
 <ParagraphAdditional />
 
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/elements/paragraph/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/elements/paragraph/info.mdx
index d58c12f9c40..36c978ae877 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/elements/paragraph/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/elements/paragraph/info.mdx
@@ -12,22 +12,10 @@ import { P } from '@dnb/eufemia/elements'
 
 Paragraphs are block-level elements, used to structure and format text contents.
 
-## Paragraph class modifiers
+Paragraph has some default typography styling even without any props being set.
 
-Eufemia comes with several styles you can use on paragraphs and other HTML text elements:
-
-**Weights**
-
-- `.dnb-p` (Body text)
-- `.dnb-p--medium`
-
-**Sizes**
-
-- `.dnb-p--small`
-- `.dnb-p--x-small`
-
-**Variants**
+Read more [about Fonts in the Designer Guides](/quickguide-designer/fonts/).
 
-- `.dnb-p--lead`
+### Typography CSS classes
 
-Read more [about Fonts in the Designer Guides](/quickguide-designer/fonts/).
+Both Paragraph and the [Span](uilib/elements/span/) component have the same typography props that uses the [typography helper classes](uilib/typography/helper-classes/).
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/elements/span/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/elements/span/Examples.tsx
index 971776ef474..0c39fc839eb 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/elements/span/Examples.tsx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/elements/span/Examples.tsx
@@ -13,14 +13,14 @@ export function SpanBasic() {
     <ComponentBox data-visual-test="span-basic">
       <P>
         Here is a paragraph with a <Span size="x-small">x-small</Span> word
-        and some <Span medium>medium weight text</Span> in it.
+        and some <Span weight="medium">medium weight text</Span> in it.
       </P>
       <H4>
         Heading 4 with <Span size="x-large">x-large</Span> word
       </H4>
 
       <Anchor href="/">
-        Anchor with <Span medium>medium weight</Span> words
+        Anchor with <Span weight="medium">medium weight</Span> words
       </Anchor>
     </ComponentBox>
   )
@@ -32,15 +32,13 @@ export function SpanModifiers() {
       <div>
         <Span>Default span</Span>
         <br />
-        <Span modifier="medium">Medium weight span</Span>
+        <Span weight="medium">Medium weight span</Span>
         <br />
-        <Span size="small">Small span</Span>
+        <Span size="basis">Basis size span</Span>
         <br />
-        <Span modifier="small medium">Small span with medium weight</Span>
-        <br />
-        {/* (Bold is currently not supported by DNB UX) */}
-        {/* <Span modifier="bold">Bold weight span</Span> */}
-        {/* <Span modifier="small bold">Small span with bold weight</Span> */}
+        <Span weight="medium" size="x-small">
+          X-small span with medium weight
+        </Span>
       </div>
     </ComponentBox>
   )
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/elements/span/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/elements/span/demos.mdx
index 4ca90557af0..b7c34c9b398 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/elements/span/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/elements/span/demos.mdx
@@ -10,6 +10,8 @@ import {
 
 ## Demos
 
+For more detailed examples of every prop, see the [Paragraph demos](uilib/elements/paragraph/#demos).
+
 ### Basics
 
 <SpanBasic />
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/elements/span/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/elements/span/info.mdx
index 31d4328da1c..0532948b1dc 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/elements/span/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/elements/span/info.mdx
@@ -10,7 +10,10 @@ import { Span } from '@dnb/eufemia/elements'
 
 ## Description
 
-`<Span>` are inline elements. They share typography props (for size and weight) with the [Paragraph component](/uilib/elements/paragraph).
-Unlike `<P>`, the `<Span>` component does not modify anything by default.
+Spans are inline-elements, used to define parts of text content.
 
-Since `<Span>` is an inline element, it's easier to modify parts of text than it is with `<P>`.
+Span does not define any default styling, if no props are set, it will just be a regular inline `<span>` element.
+
+### Typography CSS classes
+
+Both Span and the [Paragraph](uilib/elements/paragraph/) component have the same typography props that uses the [typography helper classes](uilib/typography/helper-classes/).
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/typography/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/typography/Examples.tsx
index 36027183e8a..c502935b791 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/typography/Examples.tsx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/typography/Examples.tsx
@@ -35,25 +35,25 @@ export function FontWeightExample() {
       {/* Regular */}
       <FontUsageExample
         font_family="DNB Regular"
-        typo_class="dnb-typo-regular"
+        typo_class="dnb-t__weight--regular"
       />
 
       {/* Medium */}
       <FontUsageExample
         font_family="DNB Medium"
-        typo_class="dnb-typo-medium"
+        typo_class="dnb-t__weight--medium"
       />
 
       {/* Bold */}
       <FontUsageExample
         font_family="DNB Bold"
-        typo_class="dnb-typo-bold"
+        typo_class="dnb-t__weight--bold"
       />
 
       {/* Mono Regular */}
       <FontUsageExample
         font_family="DNB Mono Regular"
-        typo_class="dnb-typo-mono-regular"
+        typo_class="dnb-t__weight--regular dnb-t__family--monospace"
       />
     </Wrapper>
   )
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/typography/font-size.mdx b/packages/dnb-design-system-portal/src/docs/uilib/typography/font-size.mdx
index f1c138e0de5..9bdecac5cff 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/typography/font-size.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/typography/font-size.mdx
@@ -1,6 +1,6 @@
 ---
 title: 'Font Size'
-order: 2
+order: 3
 ---
 
 # Font Size
@@ -9,15 +9,15 @@ For details about what values Typographic elements do use, have a look at the [F
 
 ## Default `font-size` **rem** table
 
-| Pixel | Type       | Rem          | Custom Property        | Info                            |
-| ----- | ---------- | ------------ | ---------------------- | ------------------------------- |
-| 14px  | `x-small`  | **0.875rem** | `--font-size-x-small`  | Do not use for texts            |
-| 16px  | `small`    | **1rem**     | `--font-size-small`    | [Fallback](#fallback-font-size) |
-| 18px  | `basis`    | **1.125rem** | `--font-size-basis`    | Default size                    |
-| 20px  | `medium`   | **1.25rem**  | `--font-size-medium`   |                                 |
-| 26px  | `large`    | **1.625rem** | `--font-size-large`    |                                 |
-| 34px  | `x-large`  | **2.125rem** | `--font-size-x-large`  |                                 |
-| 48px  | `xx-large` | **3rem**     | `--font-size-xx-large` |                                 |
+| Pixel | Type       | Rem          | CSS variable / property | CSS Classname            | Info                            |
+| ----- | ---------- | ------------ | ----------------------- | ------------------------ | ------------------------------- |
+| 14px  | `x-small`  | **0.875rem** | `--font-size-x-small`   | `.dnb-t__size--x-small`  | Do not use for texts            |
+| 16px  | `small`    | **1rem**     | `--font-size-small`     | `.dnb-t__size--small`    | [Fallback](#fallback-font-size) |
+| 18px  | `basis`    | **1.125rem** | `--font-size-basis`     | `.dnb-t__size--basis`    | Default size                    |
+| 20px  | `medium`   | **1.25rem**  | `--font-size-medium`    | `.dnb-t__size--medium`   |                                 |
+| 26px  | `large`    | **1.625rem** | `--font-size-large`     | `.dnb-t__size--large`    |                                 |
+| 34px  | `x-large`  | **2.125rem** | `--font-size-x-large`   | `.dnb-t__size--x-large`  |                                 |
+| 48px  | `xx-large` | **3rem**     | `--font-size-xx-large`  | `.dnb-t__size--xx-large` |                                 |
 
 ### Code Editor Extensions
 
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/typography/font-weight.mdx b/packages/dnb-design-system-portal/src/docs/uilib/typography/font-weight.mdx
index b06ff72263a..37bffaf628a 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/typography/font-weight.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/typography/font-weight.mdx
@@ -1,6 +1,6 @@
 ---
 title: 'Font Weights'
-order: 1
+order: 2
 redirect_from:
   - /uilib/typography/font-weights
 ---
@@ -13,11 +13,11 @@ For details about what values Typographic elements do use, have a look at the [F
 
 ## Eufemia has three (3) font-weights
 
-| Type                                                       | Custom Property         | CSS Classname      |
-| ---------------------------------------------------------- | ----------------------- | ------------------ |
-| <span className="dnb-typo-regular">Regular (normal)</span> | `--font-weight-regular` | `dnb-typo-regular` |
-| <span className="dnb-typo-medium">Medium (500)</span>      | `--font-weight-medium`  | `dnb-typo-medium`  |
-| <span className="dnb-typo-bold">Bold (600)</span>          | `--font-weight-bold`    | `dnb-typo-bold`    |
+| Type                                                             | CSS variable / property | CSS Classname             |
+| ---------------------------------------------------------------- | ----------------------- | ------------------------- |
+| <span className="dnb-t__weight--regular">Regular (normal)</span> | `--font-weight-regular` | `.dnb-t__weight--regular` |
+| <span className="dnb-t__weight--medium">Medium (500)</span>      | `--font-weight-medium`  | `.dnb-t__weight--medium`  |
+| <span className="dnb-t__weight--bold">Bold (600)</span>          | `--font-weight-bold`    | `.dnb-t__weight--bold`    |
 
 ### How to use the weights (CSS)
 
@@ -47,9 +47,9 @@ p {
 
 ```html
 <!-- Example usage of Weights in Markup -->
-<h3 class="dnb-typo-regular">Heading</h3>
-<p class="dnb-typo-medium">Paragraph</p>
-<span class="dnb-typo-bold">Third Tag</span>
+<h3 class="dnb-t__weight--regular">Heading</h3>
+<p class="dnb-t__weight--medium">Paragraph</p>
+<span class="dnb-t__weight--bold">Third Tag</span>
 ```
 
 ## Examples
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/typography/helper-classes.mdx b/packages/dnb-design-system-portal/src/docs/uilib/typography/helper-classes.mdx
new file mode 100644
index 00000000000..2570f4ccc01
--- /dev/null
+++ b/packages/dnb-design-system-portal/src/docs/uilib/typography/helper-classes.mdx
@@ -0,0 +1,68 @@
+---
+title: 'Helper classes'
+description: 'A list of typography CSS classes'
+order: 1
+---
+
+# Helpers classes and components
+
+Details on the different sizes and weights can be found in the [Font weights](uilib/typography/font-weight/), [Font size](uilib/typography/font-size/) and [Line Height](uilib/typography/line-height/) documentation.
+
+## Helper classes `.dnb-t`
+
+This is a list of all the typography helper classes available. They are used by the [Span](uilib/elements/span) and [Paragraph](uilib/elements/paragraph) components, but can also be used on their own. For visual examples, see the [Paragraph demos](uilib/elements/paragraph/#demos).
+
+### Font weight
+
+```
+  .dnb-t__weight--regular
+  .dnb-t__weight--medium
+  .dnb-t__weight--bold
+```
+
+### Font size
+
+```
+  .dnb-t__size--xx-large
+  .dnb-t__size--x-large
+  .dnb-t__size--large
+  .dnb-t__size--basis
+  .dnb-t__size--medium
+  .dnb-t__size--small
+  .dnb-t__size--x-small
+```
+
+### Line heights
+
+```
+  .dnb-t__line--xx-large
+  .dnb-t__line--x-large
+  .dnb-t__line--large
+  .dnb-t__line--basis
+  .dnb-t__line--medium
+  .dnb-t__line--small
+  .dnb-t__line--x-small
+```
+
+### Text alignment
+
+```
+  .dnb-t__align--center
+  .dnb-t__align--left
+  .dnb-t__align--right
+```
+
+### Font family
+
+```
+  .dnb-t__family--default
+  .dnb-t__family--heading
+  .dnb-t__family--monospace
+```
+
+### Text decoration
+
+```
+  .dnb-t__decoration--italic
+  .dnb-t__decoration--underline
+```
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/typography/line-height.mdx b/packages/dnb-design-system-portal/src/docs/uilib/typography/line-height.mdx
index e6547f21cff..7ff99d7833c 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/typography/line-height.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/typography/line-height.mdx
@@ -1,6 +1,6 @@
 ---
 title: 'Line Height'
-order: 3
+order: 4
 ---
 
 # Line Height
@@ -9,15 +9,16 @@ For details about what values Typographic elements do use, have a look at the [F
 
 ## Default `line-height` **rem** table
 
-| Pixel | Type      | Rem          | Custom Property         |
-| ----- | --------- | ------------ | ----------------------- |
-| 18px  | `x-small` | **1.125rem** | `--line-height-x-small` |
-| 20px  | `small`   | **1.25rem**  | `--line-height-small`   |
-| 24px  | `basis`   | **1.5rem**   | `--line-height-basis`   |
-| 28px  | `lead`    | **1.75rem**  | `--line-height-lead`    |
-| 32px  | `medium`  | **2rem**     | `--line-height-medium`  |
-| 40px  | `large`   | **2.5rem**   | `--line-height-large`   |
-| 56px  | `x-large` | **3.5rem**   | `--line-height-x-large` |
+| Pixel | Type       | Rem          | CSS variable / property  | CSS Classname            | Info                             |
+| ----- | ---------- | ------------ | ------------------------ | ------------------------ | -------------------------------- |
+| 18px  | `x-small`  | **1.125rem** | `--line-height-x-small`  | `.dnb-t__line--x-small`  |                                  |
+| 20px  | `small`    | **1.25rem**  | `--line-height-small`    | `.dnb-t__line--small`    |                                  |
+| 24px  | `basis`    | **1.5rem**   | `--line-height-basis`    | `.dnb-t__line--basis`    |                                  |
+| 28px  | `lead`     | **1.75rem**  | `--line-height-lead`     | `.dnb-t__line--lead`     | Unique line-height for `<Lead>`. |
+| 32px  | `medium`   | **2rem**     | `--line-height-medium`   | `.dnb-t__line--medium`   |                                  |
+| 40px  | `large`    | **2.5rem**   | `--line-height-large`    | `.dnb-t__line--large`    |                                  |
+| 56px  | `x-large`  | **3.5rem**   | `--line-height-x-large`  | `.dnb-t__line--x-large`  |                                  |
+| 56px  | `xx-large` | **3.5rem**   | `--line-height-xx-large` | `.dnb-t__line--xx-large` | Same as `x-large`                |
 
 ### Code Editor Extensions
 
diff --git a/packages/dnb-eufemia/src/elements/span/__tests__/Span.test.tsx b/packages/dnb-eufemia/src/elements/span/__tests__/Span.test.tsx
index 114637d46f7..6dda761b047 100644
--- a/packages/dnb-eufemia/src/elements/span/__tests__/Span.test.tsx
+++ b/packages/dnb-eufemia/src/elements/span/__tests__/Span.test.tsx
@@ -9,49 +9,53 @@ import Span from '../Span'
 import { render } from '@testing-library/react'
 
 describe('Span element', () => {
-  it('has correct size when size is defined', () => {
+  it('size also sets line-height when not defined', () => {
     render(<Span size="large" />)
     const element = document.querySelector('.dnb-t__size--large')
 
     expect(Array.from(element.classList)).toEqual([
+      'dnb-t__line--large',
       'dnb-t__size--large',
       'dnb-span',
     ])
   })
-  it('has correct style when size and a modifier is defined', () => {
-    render(<Span size="medium" modifier="medium" />)
-    const element = document.querySelector('.dnb-t__size--medium')
+  it('sets only line-height when size is not defined', () => {
+    render(<Span line="large" />)
+    const element = document.querySelector('.dnb-t__line--large')
 
     expect(Array.from(element.classList)).toEqual([
-      'dnb-t--medium',
-      'dnb-t__size--medium',
+      'dnb-t__line--large',
       'dnb-span',
     ])
   })
   it('has correct style when several modifiers are defined', () => {
-    render(<Span modifier="medium small" />)
+    render(
+      <Span
+        size="small"
+        line="xx-large"
+        align="center"
+        family="monospace"
+        weight="medium"
+        decoration="underline"
+      />
+    )
     const element = document.querySelector('.dnb-t__size--small')
 
     expect(Array.from(element.classList)).toEqual([
-      'dnb-t--medium',
+      'dnb-t__line--xx-large',
       'dnb-t__size--small',
+      'dnb-t__align--center',
+      'dnb-t__family--monospace',
+      'dnb-t__weight--medium',
+      'dnb-t__decoration--underline',
       'dnb-span',
     ])
   })
   it('has correct style when medium is set to true', () => {
-    render(<Span medium />)
-    const element = document.querySelector('.dnb-t--medium')
+    render(<Span weight="bold" />)
+    const element = document.querySelector('.dnb-t__weight--bold')
     expect(Array.from(element.classList)).toEqual([
-      'dnb-t--medium',
-      'dnb-span',
-    ])
-  })
-  it('has correct style when bold is set to true', () => {
-    render(<Span bold />)
-    const element = document.querySelector('.dnb-t--bold')
-
-    expect(Array.from(element.classList)).toEqual([
-      'dnb-t--bold',
+      'dnb-t__weight--bold',
       'dnb-span',
     ])
   })
diff --git a/packages/dnb-eufemia/src/elements/typography/IngressDocs.ts b/packages/dnb-eufemia/src/elements/typography/IngressDocs.ts
index 6f018fa62cb..a00a12619e3 100644
--- a/packages/dnb-eufemia/src/elements/typography/IngressDocs.ts
+++ b/packages/dnb-eufemia/src/elements/typography/IngressDocs.ts
@@ -1,6 +1,6 @@
 import { PropertiesTableProps } from '../../shared/types'
-import { TypographyProperties } from './TypographyDocs'
+import { ParagraphProperties } from './PDocs'
 
 export const IngressProperties: PropertiesTableProps = {
-  ...TypographyProperties,
+  ...ParagraphProperties,
 }
diff --git a/packages/dnb-eufemia/src/elements/typography/LeadDocs.ts b/packages/dnb-eufemia/src/elements/typography/LeadDocs.ts
index fc5eb98d63f..35cc52b5d96 100644
--- a/packages/dnb-eufemia/src/elements/typography/LeadDocs.ts
+++ b/packages/dnb-eufemia/src/elements/typography/LeadDocs.ts
@@ -1,6 +1,6 @@
 import { PropertiesTableProps } from '../../shared/types'
-import { TypographyProperties } from './TypographyDocs'
+import { ParagraphProperties } from './PDocs'
 
 export const LeadProperties: PropertiesTableProps = {
-  ...TypographyProperties,
+  ...ParagraphProperties,
 }
diff --git a/packages/dnb-eufemia/src/elements/typography/P.tsx b/packages/dnb-eufemia/src/elements/typography/P.tsx
index 80cc69cbeb5..2c6a65ce3dc 100644
--- a/packages/dnb-eufemia/src/elements/typography/P.tsx
+++ b/packages/dnb-eufemia/src/elements/typography/P.tsx
@@ -4,15 +4,92 @@
  */
 
 import React from 'react'
+import classnames from 'classnames'
+
 import Typography, { TypographySize, TypographyProps } from './Typography'
 
 /** @deprecated use TypographySize instead */
 export type PSize = TypographySize
 
-export type PProps = TypographyProps<HTMLParagraphElement>
+export type PProps = TypographyProps<HTMLParagraphElement> & {
+  /**
+   * Tells the component to use the medium font-weight styling dnb-p--medium defined in paragraphStyle - typography-mixins.scss. Find more details here https://eufemia.dnb.no/uilib/typography/font-weight/
+   * @deprecated use the `weight` prop instead
+   */
+  medium?: boolean
+  /**
+   * Tells the component to use the bold font-weight styling dnb-p--bold defined in paragraphStyle - typography-mixins.scss. Find more details here https://eufemia.dnb.no/uilib/typography/font-weight/
+   * @deprecated use the `weight` prop instead
+   */
+  bold?: boolean
+  /**
+   * A string containing a combination of modifiers, used to set both font-size and weight in one property. e.g. "x-small bold" would make the paragraph extra small and bold.
+   * Works as a flexible alternative to setting the medium, bold and size props.
+   * List of modifiers can be found at https://eufemia.dnb.no/uilib/typography/font-size/ and https://eufemia.dnb.no/uilib/typography/font-weight/
+   * @deprecated only font weights "bold" and "medium" and sizes "x-small" and "small" are supported. Use the `size` and `weight` props instead.
+   */
+  modifier?: string
+}
 
 const P = (props: PProps) => {
-  return <Typography element="p" modifierClassName="dnb-p" {...props} />
+  const { remainingModifiers, ...rest } = handleDeprecatedProps(props)
+
+  const modifierClasses = remainingModifiers.reduce((acc, cur) => {
+    // only .dnb-p--lead or .dnb-p--bold remain as supported modifiers
+    return `${acc} dnb-p--${cur}`
+  }, '')
+
+  return (
+    <Typography
+      element="p"
+      className={classnames('dnb-p', modifierClasses)}
+      {...rest}
+    />
+  )
+}
+
+const handleDeprecatedProps = ({
+  weight,
+  size,
+  modifier,
+  bold,
+  medium,
+  ...rest
+}: PProps): TypographyProps<HTMLParagraphElement> & {
+  remainingModifiers?: string[]
+} => {
+  let oldWeight
+  let oldSize
+
+  const allModifiers = [bold && 'bold', medium && 'medium']
+  if (modifier) {
+    modifier
+      .split(/\s/g)
+      .forEach((modifier) => allModifiers.push(modifier))
+  }
+
+  const remainingModifiers = allModifiers.filter(Boolean).filter((cur) => {
+    if (['x-small'].includes(cur)) {
+      oldSize = 'x-small'
+    } else if (['small'].includes(cur)) {
+      oldSize = oldSize || 'small'
+    } else if (['medium'].includes(cur)) {
+      oldWeight = oldWeight || 'medium'
+    } else if (['bold'].includes(cur)) {
+      oldWeight = 'bold'
+    } else {
+      // only .dnb-p--lead really remains as supported modifier
+      return true
+    }
+    return false
+  }, [])
+
+  return {
+    weight: weight || oldWeight,
+    size: oldSize && size !== 'x-small' ? oldSize : size,
+    remainingModifiers,
+    ...rest,
+  }
 }
 
 P._supportsSpacingProps = true
diff --git a/packages/dnb-eufemia/src/elements/typography/PDocs.ts b/packages/dnb-eufemia/src/elements/typography/PDocs.ts
index 5e3f1a5820f..ea5fae0082a 100644
--- a/packages/dnb-eufemia/src/elements/typography/PDocs.ts
+++ b/packages/dnb-eufemia/src/elements/typography/PDocs.ts
@@ -3,4 +3,19 @@ import { TypographyProperties } from './TypographyDocs'
 
 export const ParagraphProperties: PropertiesTableProps = {
   ...TypographyProperties,
+  medium: {
+    doc: 'Tells the component to use the medium font-weight styling `dnb-t__weight--medium`. More details [here](/uilib/typography/font-weight).',
+    type: 'boolean',
+    status: 'deprecated',
+  },
+  bold: {
+    doc: 'Tells the component to use the bold font-weight styling class `dnb-p--bold`. More details [here](/uilib/typography/font-weight).',
+    type: 'boolean',
+    status: 'deprecated',
+  },
+  modifier: {
+    doc: 'String containing a combination of modifiers, used to set both font-size and weight in one property. e.g. `x-small medium` would make the paragraph extra small and medium.',
+    type: 'string',
+    status: 'deprecated',
+  },
 }
diff --git a/packages/dnb-eufemia/src/elements/typography/Typography.tsx b/packages/dnb-eufemia/src/elements/typography/Typography.tsx
index 3e878e51742..5d61da2acb0 100644
--- a/packages/dnb-eufemia/src/elements/typography/Typography.tsx
+++ b/packages/dnb-eufemia/src/elements/typography/Typography.tsx
@@ -18,6 +18,11 @@ export type TypographySize =
   | 'x-large'
   | 'xx-large'
 
+export type TypographyAlign = 'center' | 'left' | 'right'
+export type TypographyFamily = 'basis' | 'heading' | 'monospace'
+export type TypographyWeight = 'regular' | 'medium' | 'bold'
+export type TypographyDecoration = 'italic' | 'underline'
+
 export type TypographyProps<
   ElementType extends HTMLElement = HTMLElement,
 > = SpacingProps &
@@ -27,71 +32,58 @@ export type TypographyProps<
      */
     element?: DynamicElement
     /**
-     * Tells the component to use the medium font-weight styling dnb-p--medium defined in paragraphStyle - typography-mixins.scss. Find more details here https://eufemia.dnb.no/uilib/typography/font-weight/
+     * Sets the font size, also sets the line-height if `line` prop is not set
      */
-    medium?: boolean
+    size?: TypographySize
     /**
-     * Tells the component to use the bold font-weight styling dnb-p--bold defined in paragraphStyle - typography-mixins.scss. Find more details here https://eufemia.dnb.no/uilib/typography/font-weight/
+     * Sets the line height, will use same value as `size` if not set.
      */
-    bold?: boolean
+    line?: TypographySize
     /**
-     * Sets the font size based on size classes defined in paragraphStyle - typography-mixins.scss. For more detailed information go here: https://eufemia.dnb.no/uilib/typography/font-size/
+     * Sets the text alignment
      */
-    size?: TypographySize
+    align?: TypographyAlign
+    /**
+     * Sets the font family
+     */
+    family?: TypographyFamily
+    /**
+     * Sets the font weight
+     */
+    weight?: TypographyWeight
     /**
-     * A string containing a combination of modifiers, used to set both font-size and weight in one property. e.g. "x-small bold" would make the paragraph extra small and bold.
-     * Works as a flexible alternative to setting the medium, bold and size props.
-     * List of modifiers can be found at https://eufemia.dnb.no/uilib/typography/font-size/ and https://eufemia.dnb.no/uilib/typography/font-weight/
+     * Sets the font decoration
      */
-    modifier?: string
+    decoration?: TypographyDecoration
   }
 
 type TypographyInternalProps = {
   innerRef?: React.RefObject<HTMLElement> | React.ForwardedRef<unknown>
-  /**
-   * Replaces the base class of typography styles. Only used for "dnb-p".
-   *
-   * Default: "dnb-t"
-   */
-  modifierClassName?: string
 }
 
 const Typography = ({
-  modifier,
   element = 'p',
   className,
-  modifierClassName = 'dnb-t',
-  medium,
-  bold,
   size,
+  line,
+  align,
+  family,
+  weight,
+  decoration,
   ...props
 }: TypographyProps & TypographyInternalProps) => {
-  const allModifiers = [medium && 'medium', bold && 'bold']
-
-  if (modifier) {
-    modifier
-      .split(/\s/g)
-      .forEach((modifier) => allModifiers.push(modifier))
-  }
-
-  const modifierClasses = allModifiers
-    .filter(Boolean)
-    .reduce((acc, cur) => {
-      if (['x-small', 'small'].includes(cur)) {
-        return `${acc} ${modifierClassName}__size--${cur}`
-      }
-
-      return `${acc} ${modifierClassName}--${cur}`
-    }, '')
-
   return (
     <E
       as={element}
       {...props}
       className={classnames(
-        modifierClasses,
         className,
-        size && `${modifierClassName}__size--${size}`
+        size && `dnb-t__size--${size}`,
+        align && `dnb-t__align--${align}`,
+        family && `dnb-t__family--${family}`,
+        weight && `dnb-t__weight--${weight}`,
+        decoration && `dnb-t__decoration--${decoration}`,
+        (line || size) && `dnb-t__line--${line || size}`
       )}
     />
   )
diff --git a/packages/dnb-eufemia/src/elements/typography/TypographyDocs.ts b/packages/dnb-eufemia/src/elements/typography/TypographyDocs.ts
index 822e141ac58..f60d0569254 100644
--- a/packages/dnb-eufemia/src/elements/typography/TypographyDocs.ts
+++ b/packages/dnb-eufemia/src/elements/typography/TypographyDocs.ts
@@ -6,24 +6,50 @@ export const TypographyProperties: PropertiesTableProps = {
     type: ['HTMLElement', 'string'],
     status: 'optional',
   },
-  medium: {
-    doc: 'Tells the component to use the medium font-weight styling `dnb-p--medium`. More details [here](/uilib/typography/font-weight).',
-    type: 'boolean',
+  size: {
+    doc: 'Sets the font size, also sets the line-height if `line` prop is not set.',
+    type: [
+      `'x-small'`,
+      `'small'`,
+      `'basis'`,
+      `'medium'`,
+      `'large'`,
+      `'x-large'`,
+      `'xx-large'`,
+    ],
     status: 'optional',
   },
-  bold: {
-    doc: 'Tells the component to use the bold font-weight styling class `dnb-p--bold`. More details [here](/uilib/typography/font-weight).',
-    type: 'boolean',
+  line: {
+    doc: 'Sets the line height, will use same value as `size` if not set.',
+    type: [
+      `'x-small'`,
+      `'small'`,
+      `'basis'`,
+      `'medium'`,
+      `'large'`,
+      `'x-large'`,
+      `'xx-large'`,
+    ],
     status: 'optional',
   },
-  size: {
-    doc: 'Sets the font size based on the following sizes:  `x-small`, `small`, `basis`, `medium`, `large`, `x-large` or `xx-large`.',
-    type: 'string',
+  align: {
+    doc: 'Sets the text alignment.',
+    type: [`'center'`, `'left'`, `'right'`],
+    status: 'optional',
+  },
+  family: {
+    doc: 'Sets the font family.',
+    type: [`'basis'`, `'heading'`, `'monospace'`],
+    status: 'optional',
+  },
+  weight: {
+    doc: 'Sets the font weight.',
+    type: [`'regular'`, `'medium'`],
     status: 'optional',
   },
-  modifier: {
-    doc: 'String containing a combination of modifiers, used to set both font-size and weight in one property. e.g. `x-small bold` would make the paragraph extra small and bold.',
-    type: 'string',
+  decoration: {
+    doc: 'Sets the font decoration.',
+    type: [`'italic'`, `'underline'`],
     status: 'optional',
   },
   '[Space](/uilib/layout/space/properties)': {
diff --git a/packages/dnb-eufemia/src/elements/typography/__tests__/P.test.tsx b/packages/dnb-eufemia/src/elements/typography/__tests__/P.test.tsx
index 3b1a4ababc4..3e01b705a9e 100644
--- a/packages/dnb-eufemia/src/elements/typography/__tests__/P.test.tsx
+++ b/packages/dnb-eufemia/src/elements/typography/__tests__/P.test.tsx
@@ -16,46 +16,63 @@ const props: PProps = {
 describe('P element', () => {
   it('has correct size when size is defined', () => {
     render(<P size="large" />)
-    const element = document.querySelector('.dnb-p__size--large')
+    const element = document.querySelector('.dnb-t__size--large')
 
     expect(Array.from(element.classList)).toEqual([
-      'dnb-p__size--large',
       'dnb-p',
+      'dnb-t__line--large',
+      'dnb-t__size--large',
     ])
   })
   it('has correct style when size and a modifier is defined', () => {
     render(<P size="medium" modifier="medium" />)
-    const element = document.querySelector('.dnb-p__size--medium')
+    const element = document.querySelector('.dnb-t__size--medium')
 
     expect(Array.from(element.classList)).toEqual([
-      'dnb-p--medium',
-      'dnb-p__size--medium',
       'dnb-p',
+      'dnb-t__line--medium',
+      'dnb-t__size--medium',
+      'dnb-t__weight--medium',
     ])
   })
   it('has correct style when several modifiers are defined', () => {
     render(<P modifier="medium small" />)
-    const element = document.querySelector('.dnb-p__size--small')
+    const element = document.querySelector('.dnb-t__size--small')
 
     expect(Array.from(element.classList)).toEqual([
-      'dnb-p--medium',
-      'dnb-p__size--small',
       'dnb-p',
+      'dnb-t__line--small',
+      'dnb-t__size--small',
+      'dnb-t__weight--medium',
+    ])
+  })
+  it('has correct style when several modifiers conflict', () => {
+    render(<P modifier="medium bold x-small small" />)
+    const element = document.querySelector('.dnb-t__size--x-small')
+
+    expect(Array.from(element.classList)).toEqual([
+      'dnb-p',
+      'dnb-t__line--x-small',
+      'dnb-t__size--x-small',
+      'dnb-t__weight--bold',
     ])
   })
   it('has correct style when medium is set to true', () => {
     render(<P medium />)
-    const element = document.querySelector('.dnb-p--medium')
+    const element = document.querySelector('.dnb-t__weight--medium')
     expect(Array.from(element.classList)).toEqual([
-      'dnb-p--medium',
       'dnb-p',
+      'dnb-t__weight--medium',
     ])
   })
   it('has correct style when bold is set to true', () => {
     render(<P bold />)
-    const element = document.querySelector('.dnb-p--bold')
+    const element = document.querySelector('.dnb-t__weight--bold')
 
-    expect(Array.from(element.classList)).toEqual(['dnb-p--bold', 'dnb-p'])
+    expect(Array.from(element.classList)).toEqual([
+      'dnb-p',
+      'dnb-t__weight--bold',
+    ])
   })
   it('should validate with ARIA rules as a p element', async () => {
     const Comp = render(<P {...props} />)
diff --git a/packages/dnb-eufemia/src/elements/typography/style/_dnb-t.scss b/packages/dnb-eufemia/src/elements/typography/style/_dnb-t.scss
new file mode 100644
index 00000000000..640149afbcd
--- /dev/null
+++ b/packages/dnb-eufemia/src/elements/typography/style/_dnb-t.scss
@@ -0,0 +1,93 @@
+/*
+ * Typography
+ * Universal set of helper classes that do not have a specific element. 
+ * The class ".dnb-t" does nothing, only it's modifiers ".dnb-t__[***]" do.
+ */
+.dnb-t {
+  // size
+  &__size--xx-large {
+    font-size: var(--font-size-xx-large);
+  }
+  &__size--x-large {
+    font-size: var(--font-size-x-large);
+  }
+  &__size--large {
+    font-size: var(--font-size-large);
+  }
+  &__size--medium {
+    font-size: var(--font-size-medium);
+  }
+  &__size--basis {
+    font-size: var(--font-size-basis);
+  }
+  &__size--small {
+    font-size: var(--font-size-small);
+  }
+  &__size--x-small {
+    font-size: var(--font-size-x-small);
+  }
+
+  // line height
+  &__line--xx-large {
+    line-height: var(--line-height-xx-large);
+  }
+  &__line--x-large {
+    line-height: var(--line-height-x-large);
+  }
+  &__line--large {
+    line-height: var(--line-height-large);
+  }
+  &__line--medium {
+    line-height: var(--line-height-medium);
+  }
+  &__line--basis {
+    line-height: var(--line-height-basis);
+  }
+  &__line--small {
+    line-height: var(--line-height-small);
+  }
+  &__line--x-small {
+    line-height: var(--line-height-x-small);
+  }
+
+  // weight
+  &__weight--regular {
+    font-weight: var(--font-weight-regular);
+  }
+  &__weight--medium {
+    font-weight: var(--font-weight-medium);
+  }
+  &__weight--bold {
+    font-weight: var(--font-weight-bold);
+  }
+
+  // alignement
+  &__align--center {
+    text-align: center;
+  }
+  &__align-left {
+    text-align: left;
+  }
+  &__align--right {
+    text-align: right;
+  }
+
+  // family
+  &__family--default {
+    font-family: var(--font-family-default);
+  }
+  &__family--heading {
+    font-family: var(--font-family-heading);
+  }
+  &__family--monospace {
+    font-family: var(--font-family-monospace);
+  }
+
+  // italic / underline
+  &__decoration--italic {
+    text-decoration: italic;
+  }
+  &__decoration--underline {
+    text-decoration: underline;
+  }
+}
diff --git a/packages/dnb-eufemia/src/elements/typography/style/dnb-typography.scss b/packages/dnb-eufemia/src/elements/typography/style/dnb-typography.scss
index 83a085c1a60..63c8ff1b07a 100644
--- a/packages/dnb-eufemia/src/elements/typography/style/dnb-typography.scss
+++ b/packages/dnb-eufemia/src/elements/typography/style/dnb-typography.scss
@@ -93,14 +93,7 @@ sub {
   @include paragraphStyle();
 }
 
-/**
- * Typography
- * Universal set of helper classes that do not have a specific element. 
- * The class ".dnb-t" does nothing, only it's modifiers ".dnb-t--[***]" do.
- */
-.dnb-t {
-  @include typographyModifiers();
-}
+@import './dnb-t.scss';
 
 // Tables
 .dnb-table {
diff --git a/packages/dnb-eufemia/src/elements/typography/style/typography-mixins.scss b/packages/dnb-eufemia/src/elements/typography/style/typography-mixins.scss
index b45a26a7020..04fadd65786 100644
--- a/packages/dnb-eufemia/src/elements/typography/style/typography-mixins.scss
+++ b/packages/dnb-eufemia/src/elements/typography/style/typography-mixins.scss
@@ -62,7 +62,6 @@
   small,
   strong,
   .dnb-p,
-  .dnb-t,
   .dnb-small,
   .dnb-table,
   sub,
@@ -246,7 +245,12 @@
     font-weight: var(--font-weight-medium);
   }
   // is still needed for backwards compatibility when ".dnp-p" was used for all typography
-  @include typographyModifiers();
+  @include paragraphDeprecated();
+
+  & > small {
+    font-size: var(--font-size-small);
+    line-height: var(--line-height-small);
+  }
 
   & > cite {
     font-weight: var(--font-weight-medium);
@@ -255,7 +259,8 @@
   }
 }
 
-@mixin typographyModifiers() {
+// should use the .dnb-t classes instead
+@mixin paragraphDeprecated() {
   // weights
   &--medium {
     font-weight: var(--font-weight-medium);
@@ -292,8 +297,7 @@
   }
 
   &--small, // backwards compatibility
-  &__size--small,
-  & > small {
+  &__size--small {
     font-size: var(--font-size-small);
     line-height: var(--line-height-small);
   }
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Visibility/__tests__/Visibility.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/Visibility/__tests__/Visibility.test.tsx
index 342f691d890..46b0ee45f4a 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Form/Visibility/__tests__/Visibility.test.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Form/Visibility/__tests__/Visibility.test.tsx
@@ -424,12 +424,12 @@ describe('Visibility', () => {
         class="dnb-space dnb-space__top--medium dnb-space__bottom--zero dnb-flex-container dnb-flex-stack dnb-flex-container--direction-vertical dnb-flex-container--justify-flex-start dnb-flex-container--align-stretch dnb-flex-container--align-self-stretch dnb-flex-container--spacing-medium dnb-flex-container--wrap dnb-flex-container--divider-space"
       >
         <p
-          class="dnb-space__top--zero dnb-space__bottom--zero dnb-p"
+          class="dnb-p dnb-space__top--zero dnb-space__bottom--zero"
         >
           This is visible 1
         </p>
         <p
-          class="dnb-space__top--medium dnb-space__bottom--zero dnb-p"
+          class="dnb-p dnb-space__top--medium dnb-space__bottom--zero"
         >
           This is visible 2
         </p>
diff --git a/packages/dnb-eufemia/src/style/elements/__tests__/__snapshots__/Elements.test.js.snap b/packages/dnb-eufemia/src/style/elements/__tests__/__snapshots__/Elements.test.js.snap
index 297c9b9307e..dfe6d8b2f20 100644
--- a/packages/dnb-eufemia/src/style/elements/__tests__/__snapshots__/Elements.test.js.snap
+++ b/packages/dnb-eufemia/src/style/elements/__tests__/__snapshots__/Elements.test.js.snap
@@ -608,7 +608,7 @@ del .dnb-code {
  * Mainly only the margins are defined in here
  *
  */
-.dnb-lead, .dnb-h--xx-large, .dnb-h--x-large, .dnb-h--large, .dnb-h--medium, .dnb-h--basis, .dnb-h--small, .dnb-h--x-small, .dnb-core-style .dnb-lead, .dnb-core-style .dnb-h--xx-large, .dnb-core-style .dnb-h--x-large, .dnb-core-style .dnb-h--large, .dnb-core-style .dnb-h--medium, .dnb-core-style .dnb-h--basis, .dnb-core-style .dnb-h--small, .dnb-core-style .dnb-h--x-small, h1, h2, h3, h4, h5, h6, p, b, small, strong, .dnb-p, .dnb-t, .dnb-small, .dnb-table, sub, sup {
+.dnb-lead, .dnb-h--xx-large, .dnb-h--x-large, .dnb-h--large, .dnb-h--medium, .dnb-h--basis, .dnb-h--small, .dnb-h--x-small, .dnb-core-style .dnb-lead, .dnb-core-style .dnb-h--xx-large, .dnb-core-style .dnb-h--x-large, .dnb-core-style .dnb-h--large, .dnb-core-style .dnb-h--medium, .dnb-core-style .dnb-h--basis, .dnb-core-style .dnb-h--small, .dnb-core-style .dnb-h--x-small, h1, h2, h3, h4, h5, h6, p, b, small, strong, .dnb-p, .dnb-small, .dnb-table, sub, sup {
   --typography-h-default-font-weight: var(--font-weight-medium);
   --typography-h-xx-large-font-size: var(--font-size-xx-large);
   --typography-h-xx-large-line-height: var(--line-height-xx-large);
@@ -821,7 +821,7 @@ sub {
   font-size: var(--font-size-medium);
   line-height: var(--line-height-medium);
 }
-.dnb-p--small, .dnb-p__size--small, .dnb-p > small {
+.dnb-p--small, .dnb-p__size--small {
   font-size: var(--font-size-small);
   line-height: var(--line-height-small);
 }
@@ -829,51 +829,96 @@ sub {
   font-size: var(--font-size-x-small);
   line-height: var(--line-height-x-small);
 }
+.dnb-p > small {
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+}
 .dnb-p > cite {
   font-weight: var(--font-weight-medium);
   line-height: var(--line-height-basis);
   font-style: italic;
 }
 
-/**
+/*
  * Typography
  * Universal set of helper classes that do not have a specific element. 
- * The class ".dnb-t" does nothing, only it's modifiers ".dnb-t--[***]" do.
+ * The class ".dnb-t" does nothing, only it's modifiers ".dnb-t__[***]" do.
  */
-.dnb-t--medium {
-  font-weight: var(--font-weight-medium);
-}
-.dnb-t--bold {
-  font-weight: var(--font-weight-bold);
-}
 .dnb-t__size--xx-large {
   font-size: var(--font-size-xx-large);
-  line-height: var(--line-height-xx-large);
 }
 .dnb-t__size--x-large {
   font-size: var(--font-size-x-large);
-  line-height: var(--line-height-x-large);
 }
 .dnb-t__size--large {
   font-size: var(--font-size-large);
-  line-height: var(--line-height-large);
+}
+.dnb-t__size--medium {
+  font-size: var(--font-size-medium);
 }
 .dnb-t__size--basis {
   font-size: var(--font-size-basis);
-  line-height: var(--line-height-basis);
 }
-.dnb-t__size--medium {
-  font-size: var(--font-size-medium);
+.dnb-t__size--small {
+  font-size: var(--font-size-small);
+}
+.dnb-t__size--x-small {
+  font-size: var(--font-size-x-small);
+}
+.dnb-t__line--xx-large {
+  line-height: var(--line-height-xx-large);
+}
+.dnb-t__line--x-large {
+  line-height: var(--line-height-x-large);
+}
+.dnb-t__line--large {
+  line-height: var(--line-height-large);
+}
+.dnb-t__line--medium {
   line-height: var(--line-height-medium);
 }
-.dnb-t--small, .dnb-t__size--small, .dnb-t > small {
-  font-size: var(--font-size-small);
+.dnb-t__line--basis {
+  line-height: var(--line-height-basis);
+}
+.dnb-t__line--small {
   line-height: var(--line-height-small);
 }
-.dnb-t--x-small, .dnb-t__size--x-small {
-  font-size: var(--font-size-x-small);
+.dnb-t__line--x-small {
   line-height: var(--line-height-x-small);
 }
+.dnb-t__weight--regular {
+  font-weight: var(--font-weight-regular);
+}
+.dnb-t__weight--medium {
+  font-weight: var(--font-weight-medium);
+}
+.dnb-t__weight--bold {
+  font-weight: var(--font-weight-bold);
+}
+.dnb-t__align--center {
+  text-align: center;
+}
+.dnb-t__align-left {
+  text-align: left;
+}
+.dnb-t__align--right {
+  text-align: right;
+}
+.dnb-t__family--default {
+  font-family: var(--font-family-default);
+}
+.dnb-t__family--heading {
+  font-family: var(--font-family-heading);
+}
+.dnb-t__family--monospace {
+  font-family: var(--font-family-monospace);
+}
+.dnb-t__decoration--italic {
+  text-decoration: italic;
+}
+.dnb-t__decoration--underline {
+  text-decoration: underline;
+}
 
 .dnb-table b,
 .dnb-table strong {
@@ -886,12 +931,10 @@ sub {
   font-weight: var(--typography-h-xx-large-weight);
 }
 .dnb-h--xx-large > small {
+  display: block;
   font-size: var(--typography-h-xx-large-small-font-size);
   line-height: var(--typography-h-xx-large-small-line-height);
 }
-.dnb-h--xx-large > small {
-  display: block;
-}
 
 .dnb-h--x-large {
   font-size: var(--typography-h-x-large-font-size);