diff --git a/packages/dnb-design-system-portal/src/core/ChangeStyleTheme.tsx b/packages/dnb-design-system-portal/src/core/ChangeStyleTheme.tsx
index f745cb1fc13..2eb2faf15fa 100644
--- a/packages/dnb-design-system-portal/src/core/ChangeStyleTheme.tsx
+++ b/packages/dnb-design-system-portal/src/core/ChangeStyleTheme.tsx
@@ -7,7 +7,7 @@ import {
   setTheme,
 } from 'gatsby-plugin-eufemia-theme-handler'
 
-export default function ChangeStyleTheme({ label = null } = {}) {
+export default function ChangeStyleTheme({ label = null, ...rest } = {}) {
   const themes = getThemes()
   const { name } = getTheme()
   const { update } = React.useContext(Context)
@@ -31,6 +31,7 @@ export default function ChangeStyleTheme({ label = null } = {}) {
           update({ skeleton: false })
         })
       }}
+      {...rest}
     />
   )
 }
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..ed6e16e6452 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 dnb-t__family--default">
     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 dnb-t__family--default">
     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
@@ -31,8 +32,10 @@ The default font family for all web applications is the `DNB` font.
 
 ## DNB Bold
 
+**NB!** bold is generally not used, use medium, unless there is a specific unique use case.
+
 <TypographyBox>
-  <p className="dnb-p dnb-typo-bold">
+  <p className="dnb-p dnb-t__weight--bold dnb-t__family--default">
     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 +47,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
@@ -53,21 +56,35 @@ The default font family for all web applications is the `DNB` font.
   </p>
 </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`.
 
 ### Maison Neue
 
 <TypographyBox>
-  <H3>This is a headline in Maison Neue</H3>
+  <p className="dnb-p dnb-t__size--large dnb-t__line-height--large dnb-t__family--heading">
+    This is a paragraph using the headline font Maison Neue
+  </p>
 </TypographyBox>
 
 ### Roboto regular
 
 <TypographyBox>
-  <p className="dnb-p dnb-typo-regular">
+  <p className="dnb-p dnb-t__weight--regular dnb-t__family--default">
+    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
+    comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et
+    Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.
+  </p>
+</TypographyBox>
+
+## Roboto Medium
+
+<TypographyBox>
+  <p className="dnb-p dnb-t__weight--medium dnb-t__family--default">
     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
@@ -78,8 +95,10 @@ The default font family for all web applications is `Roboto`, however for headli
 
 ### Roboto bold
 
+**NB!** bold is generally not used, use medium, unless there is a specific unique use case.
+
 <TypographyBox>
-  <p className="dnb-p dnb-typo-bold">
+  <p className="dnb-p dnb-t__weight--bold dnb-t__family--default">
     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..a3ecae9eb72 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
@@ -17,11 +19,10 @@ no need to use a class.
   </p>
 </TypographyBox>
 
-<VisibilityByTheme hidden="sbanken">
 ### 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
@@ -29,12 +30,13 @@ no need to use a class.
     Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.
   </p>
 </TypographyBox>
-</VisibilityByTheme>
 
 ### Body Bold
 
+**NB!** bold is generally not used, use medium, unless there is a specific unique use case.
+
 <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/quickguide-designer/typography/typographic-elements.mdx b/packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/typographic-elements.mdx
index 2c81995945d..294a9e2b1f1 100644
--- a/packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/typographic-elements.mdx
+++ b/packages/dnb-design-system-portal/src/docs/quickguide-designer/typography/typographic-elements.mdx
@@ -137,16 +137,16 @@ This is an overview of the default, basic typographic elements such as **heading
 
 ### Note:
 
-There are two methods to create small text. One, is to use the `.dnb-p--small` modifier class which can be used on paragraphs etc. and allows you to use a bottom margin. The other method is to just use a `<small>` tag which is inline and cannot have a margin.
+There are two methods to create small text. One, is to use the `.dnb-t__size--small` modifier class. The other method is to just use a `<small>` tag.
 
 ### Example
 
 <TypographyBox>
-  <p className="dnb-p dnb-p--small">
-    This is a paragraph with a <b>modifier class</b>. This is the small
-    content. Quem facilisi moderatius id eam, id tamquam albucius per. Vel
-    quem congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea,
-    ei exerci tacimates pro, aliquam pertinacia eu vim.
+  <p className="dnb-p dnb-t__size--small">
+    This is a paragraph with a <b>modifier class</b> `.dnb-t__size--small`.
+    This is the small content. Quem facilisi moderatius id eam, id tamquam
+    albucius per. Vel quem congue appareat cu, mei te eros convenire. Sea
+    bonorum epicuri ea, ei exerci tacimates pro, aliquam pertinacia eu vim.
   </p>
   <p className="dnb-p">
     <small>
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/Examples.tsx
index 54b98ec8f1d..ee284002148 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/Examples.tsx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/dropdown/Examples.tsx
@@ -250,11 +250,11 @@ export const DropdownDirections = () => {
           data={[
             ['Vertical', 'alignment'],
             <>
-              <P modifier="medium">Vertical</P>
+              <P weight="medium">Vertical</P>
               <P>alignment</P>
             </>,
             <Dropdown.HorizontalItem key="item-1">
-              <P modifier="medium" right="x-small">
+              <P weight="medium" right="x-small">
                 Horizontal
               </P>
               <P>alignment</P>
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/progress-indicator/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/progress-indicator/Examples.tsx
index baae35ec130..30d98e9ca8b 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/progress-indicator/Examples.tsx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/progress-indicator/Examples.tsx
@@ -66,7 +66,9 @@ export const ProgressIndicatorCircularLabelInsideExample = () => (
       labelDirection="inside"
       data-visual-test="progress-indicator-label-inside"
     >
-      <span className="dnb-p dnb-p--bold dnb-p__size--small">{72}%</span>
+      <span className="dnb-p dnb-t__weight--bold dnb-t__size--small">
+        {72}%
+      </span>
     </ProgressIndicator>
   </ComponentBox>
 )
@@ -360,7 +362,7 @@ const StyledLabel = styled.span`
 `
 const MyCustomLabel = ({ children, ...rest }) => (
   <StyledLabel
-    className="dnb-p dnb-p--medium dnb-p__size--small"
+    className="dnb-p dnb-t__weight--medium dnb-t__size--small"
     {...rest}
   >
     {children}
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..63336a1eb3d 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,76 @@ const Case = styled.span`
   padding: 0.25rem 0;
 `
 
+export function ParagraphWeightModifiers() {
+  return (
+    <ComponentBox hideCode data-visual-test="paragraph-modifiers-weight">
+      <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-size">
+      <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-align">
+      <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-family">
+      <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-line">
+      <P lineHeight="x-small">x-small line-height paragraph</P>
+      <P lineHeight="small">small line-height paragraph</P>
+      <P lineHeight="medium">medium line-height paragraph</P>
+      <P lineHeight="basis">
+        basis line-height paragraph (same as default)
+      </P>
+      <P lineHeight="large">large line-height paragraph</P>
+      <P lineHeight="x-large">x-large line-height paragraph</P>
+      <P lineHeight="xx-large">xx-large line-height paragraph</P>
+    </ComponentBox>
+  )
+}
+export function ParagraphAdditionalModifiers() {
+  return (
+    <ComponentBox hideCode data-visual-test="paragraph-modifiers-other">
+      <div>
+        <P weight="bold">Bold weight paragraph</P>
+        <P decoration="underline">Underline paragraph</P>
+        <P slant="italic">Italic paragraph</P>
+      </div>
+    </ComponentBox>
+  )
+}
+
 export function ParagraphDefault() {
   return (
     <ComponentBox
@@ -89,8 +159,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 +240,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
@@ -196,10 +248,10 @@ export function ParagraphRegressionTests() {
         <P {...props}>
           <Case>{size}</Case>
         </P>
-        <P medium {...props}>
+        <P weight="medium" {...props}>
           <Case>{size} - Weight medium</Case>
         </P>
-        <P bold {...props}>
+        <P weight="bold" {...props}>
           <Case>{size} - Weight bold</Case>
         </P>
       </>
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..b06fbe36dad 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 separately 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 bb55617fbed..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
@@ -10,24 +10,12 @@ import { P } from '@dnb/eufemia/elements'
 
 ## Description
 
-Paragraphs are a block-level elements, used to structure and format text contents.
+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.mdx b/packages/dnb-design-system-portal/src/docs/uilib/elements/span.mdx
new file mode 100644
index 00000000000..96150b716e1
--- /dev/null
+++ b/packages/dnb-design-system-portal/src/docs/uilib/elements/span.mdx
@@ -0,0 +1,13 @@
+---
+title: 'Span'
+theme: 'sbanken'
+showTabs: true
+hideTabs:
+  - title: Events
+---
+
+import SpanInfo from 'Docs/uilib/elements/span/info'
+import SpanDemos from 'Docs/uilib/elements/span/demos'
+
+<SpanInfo />
+<SpanDemos />
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
new file mode 100644
index 00000000000..31d3b1e3f98
--- /dev/null
+++ b/packages/dnb-design-system-portal/src/docs/uilib/elements/span/Examples.tsx
@@ -0,0 +1,77 @@
+/**
+ * UI lib Component Example
+ *
+ */
+
+import React from 'react'
+import ComponentBox from '../../../../shared/tags/ComponentBox'
+import Anchor from '@dnb/eufemia/src/components/Anchor'
+import { Span, P, H4 } from '@dnb/eufemia/src/elements'
+
+export function SpanBasic() {
+  return (
+    <ComponentBox data-visual-test="span-basic">
+      <P>
+        Here is a paragraph with a <Span size="x-small">x-small</Span> word
+        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 weight="medium">medium weight</Span> words
+      </Anchor>
+    </ComponentBox>
+  )
+}
+
+export function SpanModifiers() {
+  return (
+    <ComponentBox data-visual-test="span-modifiers">
+      <div>
+        <Span>Default span</Span>
+        <br />
+        <Span weight="medium">Medium weight span</Span>
+        <br />
+        <Span size="basis">Basis size span</Span>
+        <br />
+        <Span weight="medium" size="x-small">
+          X-small span with medium weight
+        </Span>
+      </div>
+    </ComponentBox>
+  )
+}
+
+export function SpanRegressionTests() {
+  const SpanWrap = (props) => {
+    const size = props.size || 'default'
+    return (
+      <div>
+        <Span {...props}>{size}</Span>
+        <br />
+        <Span weight="medium" {...props}>
+          {size} - Weight medium
+        </Span>
+        <br />
+        <Span weight="bold" {...props}>
+          {size} - Weight bold
+        </Span>
+      </div>
+    )
+  }
+
+  return (
+    <ComponentBox scope={{ SpanWrap }} data-visual-test="span-sizes">
+      <SpanWrap />
+      <SpanWrap size="xx-large" />
+      <SpanWrap size="x-large" />
+      <SpanWrap size="large" />
+      <SpanWrap size="medium" />
+      <SpanWrap size="basis" />
+      <SpanWrap size="small" />
+      <SpanWrap size="x-small" />
+    </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
new file mode 100644
index 00000000000..b7c34c9b398
--- /dev/null
+++ b/packages/dnb-design-system-portal/src/docs/uilib/elements/span/demos.mdx
@@ -0,0 +1,25 @@
+---
+showTabs: true
+---
+
+import {
+  SpanBasic,
+  SpanRegressionTests,
+  SpanModifiers,
+} from 'Docs/uilib/elements/span/Examples'
+
+## Demos
+
+For more detailed examples of every prop, see the [Paragraph demos](uilib/elements/paragraph/#demos).
+
+### Basics
+
+<SpanBasic />
+
+### Span modifiers
+
+<SpanModifiers />
+
+<VisibleWhenVisualTest>
+  <SpanRegressionTests />
+</VisibleWhenVisualTest>
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
new file mode 100644
index 00000000000..0532948b1dc
--- /dev/null
+++ b/packages/dnb-design-system-portal/src/docs/uilib/elements/span/info.mdx
@@ -0,0 +1,19 @@
+---
+showTabs: true
+---
+
+## Import
+
+```tsx
+import { Span } from '@dnb/eufemia/elements'
+```
+
+## Description
+
+Spans are inline-elements, used to define parts of text content.
+
+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/elements/span/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/elements/span/properties.mdx
new file mode 100644
index 00000000000..fba727d761b
--- /dev/null
+++ b/packages/dnb-design-system-portal/src/docs/uilib/elements/span/properties.mdx
@@ -0,0 +1,10 @@
+---
+showTabs: true
+---
+
+import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
+import { SpanProperties } from '@dnb/eufemia/src/elements/span/SpanDocs'
+
+## Properties
+
+<PropertiesTable props={SpanProperties} />
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/helpers/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/helpers/Examples.tsx
index 0a5cd486913..87e766b226a 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/helpers/Examples.tsx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/helpers/Examples.tsx
@@ -100,7 +100,7 @@ export function Selection() {
   return (
     <Wrapper className="dnb-spacing">
       <ComponentBox hideCode data-visual-test="helper-selection">
-        <p className="dnb-selection dnb-p__size--basis">
+        <p className="dnb-selection dnb-t__size--basis">
           If you select a part of this text, you will see the selection
           highlight is green.
         </p>
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/typography.mdx b/packages/dnb-design-system-portal/src/docs/uilib/typography.mdx
index 6b5decc8266..daef198fe08 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/typography.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/typography.mdx
@@ -9,6 +9,15 @@ import { TypographyVariants } from 'Docs/uilib/typography/Examples'
 
 # Typography
 
+## Typography components
+
+The two main components used to set typography are:
+
+- [Span](uilib/elements/span)
+- [P](uilib/elements/paragraph)
+
+([Lead](uilib/elements/lead) and [Ingress](uilib/elements/ingress) also works in the same way)
+
 ## Typography in general
 
 Fonts are handled automatically once the CSS packages **dnb-ui-core** or **dnb-ui-basis** are loaded.
@@ -55,7 +64,7 @@ Read more about the [Anchor / Text Link](/uilib/components/anchor)
 
 DNB has its own monospace typeface (`font-family`).
 
-Use it either by a CSS class `.dnb-typo-mono-regular` or define your own like so:
+Use it either by a CSS class `.dnb-t__family--monospace` or define your own like so:
 
 ```css
 .css-selector {
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..88d10c27788 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
@@ -7,6 +7,8 @@ import React from 'react'
 import styled from '@emotion/styled'
 import ComponentBox from '../../../shared/tags/ComponentBox'
 import { Code, H4, Lead, P } from '@dnb/eufemia/src'
+import { useTheme } from '@dnb/eufemia/shared'
+
 import { TypographyBox } from '../../../shared/parts/TypographyBox'
 
 const Wrapper = styled.div`
@@ -29,31 +31,62 @@ const FontUsageExample = ({ typo_class, font_family }) => (
   </TypographyBox>
 )
 
-export function FontWeightExample() {
+export function FontWeightByThemeExample() {
+  const theme = useTheme()
+
+  if (theme?.name === 'sbanken') {
+    return (
+      <Wrapper>
+        {/* Regular */}
+        <FontUsageExample
+          font_family="Roboto Regular"
+          typo_class="dnb-t__weight--regular"
+        />
+
+        {/* Medium */}
+        <FontUsageExample
+          font_family="Roboto Medium"
+          typo_class="dnb-t__weight--medium"
+        />
+
+        {/* Bold */}
+        <FontUsageExample
+          font_family="Roboto Bold"
+          typo_class="dnb-t__weight--bold"
+        />
+
+        {/* Mono Regular */}
+        <FontUsageExample
+          font_family="Monospace Regular"
+          typo_class="dnb-t__weight--regular dnb-t__family--monospace"
+        />
+      </Wrapper>
+    )
+  }
   return (
     <Wrapper>
       {/* 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>
   )
@@ -91,7 +124,7 @@ export function TypographyVariants() {
           fabellas senserit inciderint vim.
         </P>
         <Code top="large">Text basis (Medium)</Code>
-        <P modifier="medium" space={0}>
+        <P weight="medium" space={0}>
           Lorem ipsum dolor sit amet, sint quodsi concludaturque nam ei,
           appetere oporteat eam te. Vel in deleniti sensibus, officiis
           menandri efficiantur no cum. Per et habemus gubergren. Mundi
@@ -107,7 +140,7 @@ export function TypographyVariants() {
           fabellas senserit inciderint vim.
         </P>
         <Code top="large">Text small (Medium)</Code>
-        <P size="small" modifier="medium" space={0}>
+        <P size="small" weight="medium" space={0}>
           Lorem ipsum dolor sit amet, sint quodsi concludaturque nam ei,
           appetere oporteat eam te. Vel in deleniti sensibus, officiis
           menandri efficiantur no cum. Per et habemus gubergren. Mundi
@@ -119,7 +152,7 @@ export function TypographyVariants() {
           Lorem ipsum dolor sit amet, sint quodsi concludaturque nam ei.
         </P>
         <Code top="large">Text x-small (Medium)</Code>
-        <P size="x-small" modifier="medium" space={0}>
+        <P size="x-small" weight="medium" space={0}>
           Lorem ipsum dolor sit amet, sint quodsi concludaturque nam ei.
         </P>
       </div>
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/typography/_helpers.tsx b/packages/dnb-design-system-portal/src/docs/uilib/typography/_helpers.tsx
new file mode 100644
index 00000000000..427c219979a
--- /dev/null
+++ b/packages/dnb-design-system-portal/src/docs/uilib/typography/_helpers.tsx
@@ -0,0 +1,31 @@
+import { useTheme } from '@dnb/eufemia/shared'
+
+import propertiesSbanken from '@dnb/eufemia/src/style/themes/theme-sbanken/properties'
+import propertiesUi from '@dnb/eufemia/src/style/themes/theme-ui/properties'
+import propertiesEiendom from '@dnb/eufemia/src/style/themes/theme-eiendom/properties'
+
+const properties = {
+  sbanken: propertiesSbanken,
+  ui: propertiesUi,
+  eiendom: propertiesEiendom,
+}
+
+export const GetPropValue = (prop) => {
+  const theme = useTheme()
+  const p = properties[theme.name][prop]
+  if (p && p.startsWith('var(')) {
+    return GetPropValue(p.substring(4, p.indexOf(')')))
+  }
+  return p
+}
+
+export const GetPropAsPx = (prop) => {
+  return RemToPx(GetPropValue(prop))
+}
+
+const RemToPx = (rem = '') => {
+  if (rem.endsWith('rem')) {
+    return parseFloat(rem) * 16 + 'px'
+  }
+  return rem
+}
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..30d2375fe21 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,23 +1,29 @@
 ---
 title: 'Font Size'
-order: 2
+order: 3
 ---
 
-# Font Size
+import { GetPropValue, GetPropAsPx } from './_helpers.tsx'
+import ChangeStyleTheme from '../../../core/ChangeStyleTheme'
 
-For details about what values Typographic elements do use, have a look at the [Fonts & Typography](/quickguide-designer/fonts#typographic-elements) documentation.
+# Font Size for <VisibilityByTheme.Name />
+
+<ChangeStyleTheme label="Change the brand:" bottom="large" />
+
+For details about what values Typographic elements do use, have a look at the
+[Fonts & Typography](/quickguide-designer/fonts#typographic-elements) documentation.
 
 ## 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                            |
+| ------------------------------------- | ---------- | ------------------------------------------ | ----------------------- | ------------------------ | ------------------------------- |
+| {GetPropAsPx('--font-size-x-small')}  | `x-small`  | **{GetPropValue('--font-size-x-small')}**  | `--font-size-x-small`   | `.dnb-t__size--x-small`  | Do not use for texts            |
+| {GetPropAsPx('--font-size-small')}    | `small`    | **{GetPropValue('--font-size-small')}**    | `--font-size-small`     | `.dnb-t__size--small`    | [Fallback](#fallback-font-size) |
+| {GetPropAsPx('--font-size-basis')}    | `basis`    | **{GetPropValue('--font-size-basis')}**    | `--font-size-basis`     | `.dnb-t__size--basis`    | Default size                    |
+| {GetPropAsPx('--font-size-medium')}   | `medium`   | **{GetPropValue('--font-size-medium')}**   | `--font-size-medium`    | `.dnb-t__size--medium`   |                                 |
+| {GetPropAsPx('--font-size-large')}    | `large`    | **{GetPropValue('--font-size-large')}**    | `--font-size-large`     | `.dnb-t__size--large`    |                                 |
+| {GetPropAsPx('--font-size-x-large')}  | `x-large`  | **{GetPropValue('--font-size-x-large')}**  | `--font-size-x-large`   | `.dnb-t__size--x-large`  |                                 |
+| {GetPropAsPx('--font-size-xx-large')} | `xx-large` | **{GetPropValue('--font-size-xx-large')}** | `--font-size-xx-large`  | `.dnb-t__size--xx-large` |                                 |
 
 ### Code Editor Extensions
 
@@ -25,16 +31,16 @@ You may be interested to install an [Eufemia code editor extension](/uilib/helpe
 
 ## Additional `font-size` **em** table
 
-| Pixel | Type        | Em      | Custom Property         | Info |
-| ----- | ----------- | ------- | ----------------------- | ---- |
-| 16px  | `basis--em` | **1em** | `--font-size-basis--em` |      |
+| Pixel | Type        | Em                                          | Custom Property         | Info |
+| ----- | ----------- | ------------------------------------------- | ----------------------- | ---- |
+| 16px  | `basis--em` | **{GetPropValue('--font-size-basis--em')}** | `--font-size-basis--em` |      |
 
 ## How to use the sizes (CSS)
 
 ```css
 /* I have a default size */
 .dnb-p {
-  font-size: var(--font-size-basis); /* 1.125 = 18px */
+  font-size: var(--font-size-basis); /* 1.125rem = 18px (in Ui theme) */
 }
 ```
 
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..3843404d8eb 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,23 +1,27 @@
 ---
 title: 'Font Weights'
-order: 1
+order: 2
 redirect_from:
   - /uilib/typography/font-weights
 ---
 
-import { FontWeightExample } from 'Docs/uilib/typography/Examples'
+import { FontWeightByThemeExample } from 'Docs/uilib/typography/Examples'
+import { GetPropValue, GetPropAsPx } from './_helpers.tsx'
+import ChangeStyleTheme from '../../../core/ChangeStyleTheme'
 
-# Font Weights
+# Font Weights for <VisibilityByTheme.Name />
+
+<ChangeStyleTheme label="Change the brand:" bottom="large" />
 
 For details about what values Typographic elements do use, have a look at the [Fonts & Typography](/quickguide-designer/fonts#typographic-elements) documentation.
 
 ## 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 ({GetPropValue('--font-weight-regular')})</span> | `--font-weight-regular` | `.dnb-t__weight--regular` |
+| <span className="dnb-t__weight--medium">Medium ({GetPropValue('--font-weight-medium')})</span>    | `--font-weight-medium`  | `.dnb-t__weight--medium`  |
+| <span className="dnb-t__weight--bold">Bold ({GetPropValue('--font-weight-bold')})</span>          | `--font-weight-bold`    | `.dnb-t__weight--bold`    |
 
 ### How to use the weights (CSS)
 
@@ -34,7 +38,7 @@ p {
 
 /* I am Bold */
 p {
-  font-weight: var(--font-weight-bold); /* 600 */
+  font-weight: var(--font-weight-bold); /* 600 (in Ui theme) */
 }
 
 /* This will result in loading the Bold Font */
@@ -47,11 +51,11 @@ 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
+## <VisibilityByTheme.Name /> weight examples
 
-<FontWeightExample />
+<FontWeightByThemeExample />
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..542e182452a
--- /dev/null
+++ b/packages/dnb-design-system-portal/src/docs/uilib/typography/helper-classes.mdx
@@ -0,0 +1,70 @@
+---
+title: 'Helper classes'
+description: 'A list of typography CSS classes'
+order: 1
+---
+
+# Helpers classes
+
+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).
+
+For details on sizes and weights, see the [Font weights](uilib/typography/font-weight/), [Font size](uilib/typography/font-size/) and [Line Height](uilib/typography/line-height/) documentation.
+
+## CSS classes `.dnb-t`
+
+### 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-height--xx-large
+  .dnb-t__line-height--x-large
+  .dnb-t__line-height--large
+  .dnb-t__line-height--basis
+  .dnb-t__line-height--medium
+  .dnb-t__line-height--small
+  .dnb-t__line-height--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
+```
+
+### Underline / italic
+
+```
+  .dnb-t__decoration--underline
+  .dnb-t__slant--italic
+```
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..721c439c919 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,23 +1,29 @@
 ---
 title: 'Line Height'
-order: 3
+order: 4
 ---
 
-# Line Height
+import { GetPropValue, GetPropAsPx } from './_helpers.tsx'
+import ChangeStyleTheme from '../../../core/ChangeStyleTheme'
+
+# Line Height for <VisibilityByTheme.Name />
+
+<ChangeStyleTheme label="Change the brand:" bottom="large" />
 
 For details about what values Typographic elements do use, have a look at the [Fonts & Typography](/quickguide-designer/fonts#typographic-elements) documentation.
 
 ## 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                             |
+| --------------------------------------- | ---------- | -------------------------------------------- | ------------------------ | ------------------------------- | -------------------------------- |
+| {GetPropAsPx('--line-height-x-small')}  | `x-small`  | **{GetPropValue('--line-height-x-small')}**  | `--line-height-x-small`  | `.dnb-t__line-height--x-small`  |                                  |
+| {GetPropAsPx('--line-height-small')}    | `small`    | **{GetPropValue('--line-height-small')}**    | `--line-height-small`    | `.dnb-t__line-height--small`    |                                  |
+| {GetPropAsPx('--line-height-basis')}    | `basis`    | **{GetPropValue('--line-height-basis')}**    | `--line-height-basis`    | `.dnb-t__line-height--basis`    |                                  |
+| {GetPropAsPx('--line-height-lead')}     | `lead`     | **{GetPropValue('--line-height-lead')}**     | `--line-height-lead`     | `.dnb-t__line-height--lead`     | Unique line-height for `<Lead>`. |
+| {GetPropAsPx('--line-height-medium')}   | `medium`   | **{GetPropValue('--line-height-medium')}**   | `--line-height-medium`   | `.dnb-t__line-height--medium`   |                                  |
+| {GetPropAsPx('--line-height-large')}    | `large`    | **{GetPropValue('--line-height-large')}**    | `--line-height-large`    | `.dnb-t__line-height--large`    |                                  |
+| {GetPropAsPx('--line-height-x-large')}  | `x-large`  | **{GetPropValue('--line-height-x-large')}**  | `--line-height-x-large`  | `.dnb-t__line-height--x-large`  |                                  |
+| {GetPropAsPx('--line-height-xx-large')} | `xx-large` | **{GetPropValue('--line-height-xx-large')}** | `--line-height-xx-large` | `.dnb-t__line-height--xx-large` | Same as `x-large`                |
 
 ### Code Editor Extensions
 
@@ -25,18 +31,18 @@ You may be interested to install an [Eufemia code editor extension](/uilib/helpe
 
 ## Additional `line-height` **em** table
 
-| Pixel | Type           | Em          | Custom Property              | Info   |
-| ----- | -------------- | ----------- | ---------------------------- | ------ |
-| 16px  | `xx-small--em` | **1em**     | `--line-height-xx-small--em` |        |
-| 24px  | `basis--em`    | **1.333em** | `--line-height-basis--em`    | **\*** |
+| Pixel | Type           | Em                                               | Custom Property              | Info   |
+| ----- | -------------- | ------------------------------------------------ | ---------------------------- | ------ |
+| 16px  | `xx-small--em` | **{GetPropValue('--line-height-xx-small--em')}** | `--line-height-xx-small--em` |        |
+| 24px  | `basis--em`    | **{GetPropValue('--line-height-basis--em')}**    | `--line-height-basis--em`    | **\*** |
 
-**\*** If we sum 1.33333333333\*18 we get 24. Browsers do round CSS values, so we do not need all the decimal numbers for now.
+**\*** For example: if we sum 1.33333333333\*18 we get 24. Browsers do round CSS values, so we do not need all the decimal numbers for now.
 
 ### How to use the line heights (CSS)
 
 ```css
 /* I have a default height */
 .dnb-p {
-  line-height: var(--line-height-basis); /* 1.5rem = 24px */
+  line-height: var(--line-height-basis); /* 1.5rem = 24px (in Ui theme) */
 }
 ```
diff --git a/packages/dnb-design-system-portal/src/e2e/typography.spec.ts b/packages/dnb-design-system-portal/src/e2e/typography.spec.ts
index 18e9cad1018..53e3dce4e78 100644
--- a/packages/dnb-design-system-portal/src/e2e/typography.spec.ts
+++ b/packages/dnb-design-system-portal/src/e2e/typography.spec.ts
@@ -75,11 +75,11 @@ test.describe('Typography for UI', () => {
   })
 
   test('bold text should have correct font-weight', async ({ page }) => {
-    await page.waitForSelector('.typography-box > .dnb-typo-bold', {
+    await page.waitForSelector('.typography-box > .dnb-t__weight--bold', {
       state: 'attached',
     })
     const element = page
-      .locator('.typography-box > .dnb-typo-bold')
+      .locator('.typography-box > .dnb-t__weight--bold')
       .first()
     await expect(element).toHaveCSS('font-weight', '600')
   })
@@ -162,11 +162,14 @@ test.describe('Typography for Sbanken', () => {
   })
 
   test('bold text should have correct font-weight', async ({ page }) => {
-    await page.waitForSelector('.typography-box > .dnb-typo-bold', {
-      state: 'attached',
-    })
+    await page.waitForSelector(
+      '.typography-box > .dnb-t__weight--medium',
+      {
+        state: 'attached',
+      },
+    )
     const element = page
-      .locator('.typography-box > .dnb-typo-bold')
+      .locator('.typography-box > .dnb-t__weight--medium')
       .first()
     await expect(element).toHaveCSS('font-weight', '500')
   })
diff --git a/packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.module.scss b/packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.module.scss
index 75fc678b093..8a9c19a8994 100644
--- a/packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.module.scss
+++ b/packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.module.scss
@@ -215,7 +215,7 @@
 
       &.dnb-sidebar-menu__theme-badge--sbanken {
         padding: 0;
-        font-family: var(--sb-font-family-headings);
+        font-family: var(--font-family-heading);
         font-weight: normal;
 
         .dnb-sidebar-menu__theme-badge__title {
diff --git a/packages/dnb-eufemia/scripts/prebuild/tasks/__tests__/__snapshots__/makePropertiesFile.test.ts.snap b/packages/dnb-eufemia/scripts/prebuild/tasks/__tests__/__snapshots__/makePropertiesFile.test.ts.snap
index c84adae7547..5418afc2740 100644
--- a/packages/dnb-eufemia/scripts/prebuild/tasks/__tests__/__snapshots__/makePropertiesFile.test.ts.snap
+++ b/packages/dnb-eufemia/scripts/prebuild/tasks/__tests__/__snapshots__/makePropertiesFile.test.ts.snap
@@ -5,7 +5,7 @@ exports[`Properties for sbanken has to validate 1`] = `
 
 export default {
   '--sb-font-family-default': '"Roboto", "Helvetica", "Arial", sans-serif',
-  '--sb-font-family-headings': '"MaisonNeueHeadings", "Roboto", "Helvetica",',
+  '--sb-font-family-heading': '"MaisonNeueHeadings", "Roboto", "Helvetica",',
   '--sb-font-weight-default': 'normal',
   '--sb-font-weight-basis': 'normal',
   '--sb-font-weight-regular': 'normal',
@@ -97,6 +97,7 @@ export default {
   '--color-emerald-green-25': '#c4d4d6',
   '--color-emerald-green-10': '#e8eeef',
   '--font-family-default': 'var(--sb-font-family-default)',
+  '--font-family-heading': 'var(--sb-font-family-heading)',
   '--font-family-monospace': '"DNBMono", "Menlo", "Consolas", "Roboto Mono",',
   '--font-weight-default': 'normal',
   '--font-weight-basis': 'normal',
@@ -187,7 +188,7 @@ exports[`Properties for ui has to validate 1`] = `
 
 export default {
   '--sb-font-family-default': '"Roboto", "Helvetica", "Arial", sans-serif',
-  '--sb-font-family-headings': '"MaisonNeueHeadings", "Roboto", "Helvetica",',
+  '--sb-font-family-heading': '"MaisonNeueHeadings", "Roboto", "Helvetica",',
   '--sb-font-weight-default': 'normal',
   '--sb-font-weight-basis': 'normal',
   '--sb-font-weight-regular': 'normal',
@@ -279,6 +280,7 @@ export default {
   '--color-emerald-green-25': '#c4d4d6',
   '--color-emerald-green-10': '#e8eeef',
   '--font-family-default': '"DNB", sans-serif',
+  '--font-family-heading': 'var(--font-family-default)',
   '--font-family-monospace': '"DNBMono", "Menlo", "Consolas", "Roboto Mono",',
   '--font-weight-default': 'normal',
   '--font-weight-basis': 'normal',
diff --git a/packages/dnb-eufemia/src/components/avatar/style/themes/dnb-avatar-theme-sbanken.scss b/packages/dnb-eufemia/src/components/avatar/style/themes/dnb-avatar-theme-sbanken.scss
index abbfdb5a453..b1aafe6452f 100644
--- a/packages/dnb-eufemia/src/components/avatar/style/themes/dnb-avatar-theme-sbanken.scss
+++ b/packages/dnb-eufemia/src/components/avatar/style/themes/dnb-avatar-theme-sbanken.scss
@@ -26,12 +26,12 @@
 
   &--size-large {
     font-weight: var(--sb-font-weight-basis);
-    font-family: var(--sb-font-family-headings);
+    font-family: var(--font-family-heading);
   }
 
   &--size-x-large {
     font-weight: var(--sb-font-weight-basis);
-    font-family: var(--sb-font-family-headings);
+    font-family: var(--font-family-heading);
   }
 
   &__group {
diff --git a/packages/dnb-eufemia/src/components/help-button/HelpButtonInline.tsx b/packages/dnb-eufemia/src/components/help-button/HelpButtonInline.tsx
index cfdebcdcd73..8902845d96a 100644
--- a/packages/dnb-eufemia/src/components/help-button/HelpButtonInline.tsx
+++ b/packages/dnb-eufemia/src/components/help-button/HelpButtonInline.tsx
@@ -203,7 +203,7 @@ export function HelpButtonInlineContent(
         {...rest}
       >
         <Flex.Vertical gap="x-small">
-          {title && <P medium>{title}</P>}
+          {title && <P weight="medium">{title}</P>}
           {content && <P>{content}</P>}
         </Flex.Vertical>
         {children}
diff --git a/packages/dnb-eufemia/src/components/modal/parts/ModalHeader.tsx b/packages/dnb-eufemia/src/components/modal/parts/ModalHeader.tsx
index 85515d2eb9b..4c89c573a2b 100644
--- a/packages/dnb-eufemia/src/components/modal/parts/ModalHeader.tsx
+++ b/packages/dnb-eufemia/src/components/modal/parts/ModalHeader.tsx
@@ -33,7 +33,8 @@ export interface ModalHeaderProps extends Omit<SectionProps, 'children'> {
   title_class?: string
 
   /**
-   * Font size of the title (maps to `dnb-p--<size>`)
+   * Font size of the title (maps to `dnb-h--<size>`)
+   * Default is `large`
    */
   size?: 'medium' | 'large' | 'x-large' | 'xx-large'
 }
diff --git a/packages/dnb-eufemia/src/elements/span/Span.tsx b/packages/dnb-eufemia/src/elements/span/Span.tsx
index 4ad41011aea..a5fec218e1b 100644
--- a/packages/dnb-eufemia/src/elements/span/Span.tsx
+++ b/packages/dnb-eufemia/src/elements/span/Span.tsx
@@ -4,13 +4,12 @@
  */
 
 import React from 'react'
-import { SpacingProps } from '../../components/space/types'
-import E from '../Element'
+import Typography, { TypographyProps } from '../typography/Typography'
 
-type SpanProps = SpacingProps & React.HTMLAttributes<HTMLElement>
+type SpanProps = TypographyProps<HTMLSpanElement>
 
 const Span = React.forwardRef((props: SpanProps, ref) => (
-  <E as="span" innerRef={ref} {...props} />
+  <Typography element="span" innerRef={ref} {...props} />
 ))
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
diff --git a/packages/dnb-eufemia/src/elements/span/SpanDocs.ts b/packages/dnb-eufemia/src/elements/span/SpanDocs.ts
new file mode 100644
index 00000000000..428cfb3358a
--- /dev/null
+++ b/packages/dnb-eufemia/src/elements/span/SpanDocs.ts
@@ -0,0 +1,6 @@
+import { PropertiesTableProps } from '../../shared/types'
+import { TypographyProperties } from '../typography/TypographyDocs'
+
+export const SpanProperties: PropertiesTableProps = {
+  ...TypographyProperties,
+}
diff --git a/packages/dnb-eufemia/src/elements/span/__tests__/Span.screenshot.test.ts b/packages/dnb-eufemia/src/elements/span/__tests__/Span.screenshot.test.ts
new file mode 100644
index 00000000000..8c216ae26a4
--- /dev/null
+++ b/packages/dnb-eufemia/src/elements/span/__tests__/Span.screenshot.test.ts
@@ -0,0 +1,37 @@
+/**
+ * Screenshot Test
+ * This file will not run on "test:staged" because we don't require any related files
+ */
+
+import {
+  makeScreenshot,
+  setupPageScreenshot,
+} from '../../../core/jest/jestSetupScreenshots'
+
+describe.each(['ui', 'sbanken'])('Span for %s', (themeName) => {
+  setupPageScreenshot({
+    themeName,
+    url: '/uilib/elements/span',
+  })
+
+  it('basics', async () => {
+    const screenshot = await makeScreenshot({
+      selector: '[data-visual-test="span-basic"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+
+  it('with modifiers', async () => {
+    const screenshot = await makeScreenshot({
+      selector: '[data-visual-test="span-modifiers"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+
+  it('all sizes and weights', async () => {
+    const screenshot = await makeScreenshot({
+      selector: '[data-visual-test="span-sizes"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+})
diff --git a/packages/dnb-eufemia/src/elements/span/__tests__/Span.test.tsx b/packages/dnb-eufemia/src/elements/span/__tests__/Span.test.tsx
new file mode 100644
index 00000000000..efe4ec62544
--- /dev/null
+++ b/packages/dnb-eufemia/src/elements/span/__tests__/Span.test.tsx
@@ -0,0 +1,66 @@
+/**
+ * Element Test
+ *
+ */
+
+import React from 'react'
+import { axeComponent } from '../../../core/jest/jestSetup'
+import Span from '../Span'
+import { render } from '@testing-library/react'
+
+describe('Span element', () => {
+  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-height--large',
+      'dnb-t__size--large',
+      'dnb-span',
+    ])
+  })
+  it('sets only line-height when size is not defined', () => {
+    render(<Span lineHeight="large" />)
+    const element = document.querySelector('.dnb-t__line-height--large')
+
+    expect(Array.from(element.classList)).toEqual([
+      'dnb-t__line-height--large',
+      'dnb-span',
+    ])
+  })
+  it('has correct style when several modifiers are defined', () => {
+    render(
+      <Span
+        size="small"
+        lineHeight="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__line-height--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 weight="bold" />)
+    const element = document.querySelector('.dnb-t__weight--bold')
+    expect(Array.from(element.classList)).toEqual([
+      'dnb-t__weight--bold',
+      'dnb-span',
+    ])
+  })
+  it('should validate with ARIA rules as a span element', async () => {
+    const Comp = render(<Span size="x-small" element="span" />)
+    expect(await axeComponent(Comp)).toHaveNoViolations()
+  })
+})
diff --git a/packages/dnb-eufemia/src/elements/span/__tests__/__image_snapshots__/span-for-sbanken-all-sizes-and-weights.snap.png b/packages/dnb-eufemia/src/elements/span/__tests__/__image_snapshots__/span-for-sbanken-all-sizes-and-weights.snap.png
new file mode 100644
index 00000000000..6efdd4f0d94
Binary files /dev/null and b/packages/dnb-eufemia/src/elements/span/__tests__/__image_snapshots__/span-for-sbanken-all-sizes-and-weights.snap.png differ
diff --git a/packages/dnb-eufemia/src/elements/span/__tests__/__image_snapshots__/span-for-sbanken-basics.snap.png b/packages/dnb-eufemia/src/elements/span/__tests__/__image_snapshots__/span-for-sbanken-basics.snap.png
new file mode 100644
index 00000000000..a1e093ad1dc
Binary files /dev/null and b/packages/dnb-eufemia/src/elements/span/__tests__/__image_snapshots__/span-for-sbanken-basics.snap.png differ
diff --git a/packages/dnb-eufemia/src/elements/span/__tests__/__image_snapshots__/span-for-sbanken-with-modifiers.snap.png b/packages/dnb-eufemia/src/elements/span/__tests__/__image_snapshots__/span-for-sbanken-with-modifiers.snap.png
new file mode 100644
index 00000000000..de5d835369a
Binary files /dev/null and b/packages/dnb-eufemia/src/elements/span/__tests__/__image_snapshots__/span-for-sbanken-with-modifiers.snap.png differ
diff --git a/packages/dnb-eufemia/src/elements/span/__tests__/__image_snapshots__/span-for-ui-all-sizes-and-weights.snap.png b/packages/dnb-eufemia/src/elements/span/__tests__/__image_snapshots__/span-for-ui-all-sizes-and-weights.snap.png
new file mode 100644
index 00000000000..a68410918a1
Binary files /dev/null and b/packages/dnb-eufemia/src/elements/span/__tests__/__image_snapshots__/span-for-ui-all-sizes-and-weights.snap.png differ
diff --git a/packages/dnb-eufemia/src/elements/span/__tests__/__image_snapshots__/span-for-ui-basics.snap.png b/packages/dnb-eufemia/src/elements/span/__tests__/__image_snapshots__/span-for-ui-basics.snap.png
new file mode 100644
index 00000000000..dbe71beac53
Binary files /dev/null and b/packages/dnb-eufemia/src/elements/span/__tests__/__image_snapshots__/span-for-ui-basics.snap.png differ
diff --git a/packages/dnb-eufemia/src/elements/span/__tests__/__image_snapshots__/span-for-ui-with-modifiers.snap.png b/packages/dnb-eufemia/src/elements/span/__tests__/__image_snapshots__/span-for-ui-with-modifiers.snap.png
new file mode 100644
index 00000000000..10037147b5e
Binary files /dev/null and b/packages/dnb-eufemia/src/elements/span/__tests__/__image_snapshots__/span-for-ui-with-modifiers.snap.png differ
diff --git a/packages/dnb-eufemia/src/elements/typography/Ingress.tsx b/packages/dnb-eufemia/src/elements/typography/Ingress.tsx
index 60980b3ef38..35fe9d48c17 100644
--- a/packages/dnb-eufemia/src/elements/typography/Ingress.tsx
+++ b/packages/dnb-eufemia/src/elements/typography/Ingress.tsx
@@ -5,7 +5,7 @@
 import React from 'react'
 import P, { PProps } from './P'
 
-const Ingress = (props: PProps) => <P medium {...props} />
+const Ingress = (props: PProps) => <P weight="medium" {...props} />
 
 Ingress._supportsSpacingProps = true
 
diff --git a/packages/dnb-eufemia/src/elements/typography/P.tsx b/packages/dnb-eufemia/src/elements/typography/P.tsx
index f530acc891f..f5cb7897ca0 100644
--- a/packages/dnb-eufemia/src/elements/typography/P.tsx
+++ b/packages/dnb-eufemia/src/elements/typography/P.tsx
@@ -5,97 +5,112 @@
 
 import React, { createContext, useContext } from 'react'
 import classnames from 'classnames'
-import { SpacingProps } from '../../components/space/types'
-import type { DynamicElement } from '../../shared/types'
-import E from '../Element'
+import Typography, { TypographySize, TypographyProps } from './Typography'
 
-export type PSize =
-  | 'x-small'
-  | 'small'
-  | 'basis'
-  | 'medium'
-  | 'large'
-  | 'x-large'
-  | 'xx-large'
+/** @deprecated use TypographySize instead */
+export type PSize = TypographySize
 
-export type PProps = SpacingProps &
-  React.HTMLAttributes<HTMLParagraphElement> & {
-    /**
-     * Defines the Element Type, like "p"
-     * Default: p
-     */
-    element?: DynamicElement | 'p'
-    /**
-     * 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/
-     */
-    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/
-     */
-    bold?: boolean
-    /**
-     * 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/
-     */
-    size?: PSize
-    /**
-     * 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, small, 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/
-     */
-    modifier?: string
-  }
+export type PProps = TypographyProps<HTMLParagraphElement> & {
+  /**
+   * Tells the component to use the medium font-weight styling dnb-t__weight--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-t__weight--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
+}
 
 function P(props: PProps) {
   const {
-    modifier,
+    remainingModifiers,
     element = 'p',
     className,
-    medium,
-    bold,
-    size,
-    children,
     ...rest
-  } = props
+  } = handleDeprecatedProps(props)
 
-  const allModifiers = [medium && 'medium', bold && 'bold']
   const paragraphContext = useContext(ParagraphContext)
 
-  if (modifier) {
-    modifier
-      .split(/\s/g)
-      .forEach((modifier) => allModifiers.push(modifier))
-  }
-
-  const modifierString = allModifiers
-    .filter(Boolean)
-    .reduce((acc, cur) => {
-      if (['x-small', 'small'].includes(cur)) {
-        return `${acc} dnb-p__size--${cur}`
-      }
-
+  const deprecatedModifierString = remainingModifiers.reduce(
+    (acc, cur) => {
+      // This entire string could possibly be deprecated. There are no remaining modifiers
+      // that should be supported, but technically this allows for any class "dnb-p--[modifier]".
+      // But "dnb-p--lead" is the only class that we have, and it's not supposed to be added here.
       return `${acc} dnb-p--${cur}`
-    }, '')
+    },
+    ''
+  )
 
   return (
     <ParagraphContext.Provider value={{ isNested: true }}>
-      <E
-        as={
+      <Typography
+        element={
           element === 'p' && paragraphContext?.isNested ? 'span' : element
         }
-        {...rest}
         className={classnames(
           'dnb-p',
-          modifierString,
-          className,
-          size && `dnb-p__size--${size}`
+          deprecatedModifierString,
+          className
         )}
-      >
-        {children}
-      </E>
+        {...rest}
+      />
     </ParagraphContext.Provider>
   )
 }
 
+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 {
+      // There should never be anything here unless it's a custom modifier.
+      return true
+    }
+    return false
+  }, [])
+
+  return {
+    weight: weight || oldWeight,
+    size: oldSize && size !== 'x-small' ? oldSize : size,
+    remainingModifiers,
+    ...rest,
+  }
+}
+
 P._supportsSpacingProps = true
 
 export default P
diff --git a/packages/dnb-eufemia/src/elements/typography/PDocs.ts b/packages/dnb-eufemia/src/elements/typography/PDocs.ts
index 8b97070e069..e5d7b74539d 100644
--- a/packages/dnb-eufemia/src/elements/typography/PDocs.ts
+++ b/packages/dnb-eufemia/src/elements/typography/PDocs.ts
@@ -1,34 +1,21 @@
 import { PropertiesTableProps } from '../../shared/types'
+import { TypographyProperties } from './TypographyDocs'
 
 export const ParagraphProperties: PropertiesTableProps = {
-  element: {
-    doc: 'Defines the Element Type, like `p`.',
-    type: ['HTMLElement', 'string'],
-    status: 'optional',
-  },
+  ...TypographyProperties,
   medium: {
-    doc: 'Tells the component to use the medium font-weight styling `dnb-p--medium`. More details [here](/uilib/typography/font-weight).',
+    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: 'optional',
+    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).',
+    doc: 'Tells the component to use the bold font-weight styling class `dnb-t__weight--bold`. More details [here](/uilib/typography/font-weight).',
     type: 'boolean',
-    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',
-    status: 'optional',
+    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 bold` would make the paragraph extra small and bold.',
+    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: 'optional',
-  },
-  '[Space](/uilib/layout/space/properties)': {
-    doc: 'Spacing properties like `top` or `bottom` are supported.',
-    type: ['string', 'object'],
-    status: 'optional',
+    status: 'deprecated',
   },
 }
diff --git a/packages/dnb-eufemia/src/elements/typography/Typography.tsx b/packages/dnb-eufemia/src/elements/typography/Typography.tsx
new file mode 100644
index 00000000000..6178cbc0a29
--- /dev/null
+++ b/packages/dnb-eufemia/src/elements/typography/Typography.tsx
@@ -0,0 +1,101 @@
+/**
+ * HTML Element
+ *
+ */
+
+import React from 'react'
+import classnames from 'classnames'
+import { SpacingProps } from '../../components/space/types'
+import type { DynamicElement } from '../../shared/types'
+import E from '../Element'
+
+export type TypographySize =
+  | 'x-small'
+  | 'small'
+  | 'basis'
+  | 'medium'
+  | 'large'
+  | '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 = 'underline'
+export type TypographySlant = 'italic'
+
+export type TypographyProps<
+  ElementType extends HTMLElement = HTMLElement,
+> = SpacingProps &
+  React.HTMLAttributes<ElementType> & {
+    /**
+     * Defines the Element Type, like "p".
+     */
+    element?: DynamicElement
+    /**
+     * Sets the font size, also sets the line-height if `line` prop is not set
+     */
+    size?: TypographySize
+    /**
+     * Sets the line height, will use same value as `size` if not set.
+     */
+    lineHeight?: TypographySize
+    /**
+     * Sets the text alignment
+     */
+    align?: TypographyAlign
+    /**
+     * Sets the font family
+     */
+    family?: TypographyFamily
+    /**
+     * Sets the font weight
+     */
+    weight?: TypographyWeight
+    /**
+     * Sets the font decoration
+     */
+    decoration?: TypographyDecoration
+    /**
+     * Sets the font style
+     */
+    slant?: TypographySlant
+  }
+
+type TypographyInternalProps = {
+  innerRef?: React.RefObject<HTMLElement> | React.ForwardedRef<unknown>
+}
+
+const Typography = ({
+  element = 'p',
+  className,
+  size,
+  lineHeight,
+  align,
+  family,
+  weight,
+  decoration,
+  slant,
+  ...props
+}: TypographyProps & TypographyInternalProps) => {
+  return (
+    <E
+      as={element}
+      {...props}
+      className={classnames(
+        className,
+        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}`,
+        slant && `dnb-t__slant--${slant}`,
+        (lineHeight || size) && `dnb-t__line-height--${lineHeight || size}`
+      )}
+    />
+  )
+}
+
+Typography._supportsSpacingProps = true
+
+export default Typography
diff --git a/packages/dnb-eufemia/src/elements/typography/TypographyDocs.ts b/packages/dnb-eufemia/src/elements/typography/TypographyDocs.ts
new file mode 100644
index 00000000000..b4318a926f7
--- /dev/null
+++ b/packages/dnb-eufemia/src/elements/typography/TypographyDocs.ts
@@ -0,0 +1,65 @@
+import { PropertiesTableProps } from '../../shared/types'
+
+export const TypographyProperties: PropertiesTableProps = {
+  element: {
+    doc: 'Defines the Element Type, like `p`.',
+    type: ['HTMLElement', 'string'],
+    status: 'optional',
+  },
+  size: {
+    doc: 'Sets the font size, also sets the line-height if `lineHeight` prop is not set.',
+    type: [
+      `'x-small'`,
+      `'small'`,
+      `'basis'`,
+      `'medium'`,
+      `'large'`,
+      `'x-large'`,
+      `'xx-large'`,
+    ],
+    status: 'optional',
+  },
+  lineHeight: {
+    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',
+  },
+  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',
+  },
+  decoration: {
+    doc: 'Sets the font decoration.',
+    type: `'underline'`,
+    status: 'optional',
+  },
+  slant: {
+    doc: 'Sets the font style.',
+    type: `'italic'`,
+    status: 'optional',
+  },
+  '[Space](/uilib/layout/space/properties)': {
+    doc: 'Spacing properties like `top` or `bottom` are supported.',
+    type: ['string', 'object'],
+    status: 'optional',
+  },
+}
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 b5bcb2a4a22..2c7a6ae13c8 100644
--- a/packages/dnb-eufemia/src/elements/typography/__tests__/P.test.tsx
+++ b/packages/dnb-eufemia/src/elements/typography/__tests__/P.test.tsx
@@ -45,56 +45,128 @@ describe('P element', () => {
     expect(element.tagName).toBe('STRONG')
   })
 
-  it('has correct size when size is defined', () => {
-    render(<P size="large" />)
-    const element = document.querySelector('.dnb-p__size--large')
+  it('can set className', () => {
+    render(<P className="my-class" weight="regular" />)
+    const element = document.querySelector('.dnb-p')
 
     expect(Array.from(element.classList)).toEqual([
       'dnb-p',
-      'dnb-p__size--large',
+      'my-class',
+      'dnb-t__weight--regular',
     ])
   })
 
-  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')
+  it('has correct size and line height when size is defined', () => {
+    render(<P size="large" />)
+    const element = document.querySelector('.dnb-t__size--large')
 
     expect(Array.from(element.classList)).toEqual([
       'dnb-p',
-      'dnb-p--medium',
-      'dnb-p__size--medium',
+      'dnb-t__line-height--large',
+      'dnb-t__size--large',
     ])
   })
 
-  it('has correct style when several modifiers are defined', () => {
-    render(<P modifier="medium small" />)
-    const element = document.querySelector('.dnb-p__size--small')
+  it('has correct style when bold is set to true', () => {
+    render(<P weight="bold" />)
+    const element = document.querySelector('.dnb-t__weight--bold')
 
     expect(Array.from(element.classList)).toEqual([
       'dnb-p',
-      'dnb-p--medium',
-      'dnb-p__size--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')
+  it('has correct style when several modifiers are defined', () => {
+    render(
+      <P
+        size="small"
+        lineHeight="xx-large"
+        align="center"
+        family="monospace"
+        weight="medium"
+        decoration="underline"
+      />
+    )
+    const element = document.querySelector('.dnb-p')
+
     expect(Array.from(element.classList)).toEqual([
       'dnb-p',
-      'dnb-p--medium',
+      'dnb-t__line-height--xx-large',
+      'dnb-t__size--small',
+      'dnb-t__align--center',
+      'dnb-t__family--monospace',
+      'dnb-t__weight--medium',
+      'dnb-t__decoration--underline',
     ])
   })
 
-  it('has correct style when bold is set to true', () => {
-    render(<P bold />)
-    const element = document.querySelector('.dnb-p--bold')
-
-    expect(Array.from(element.classList)).toEqual(['dnb-p', 'dnb-p--bold'])
-  })
-
   it('should validate with ARIA rules as a p element', async () => {
     const Comp = render(<P {...props} />)
     expect(await axeComponent(Comp)).toHaveNoViolations()
   })
+
+  describe('deprecated behaviour', () => {
+    it('can set className and modifier', () => {
+      render(<P className="my-class" modifier="my-modifier" />)
+      const element = document.querySelector('.dnb-p')
+
+      expect(Array.from(element.classList)).toEqual([
+        'dnb-p',
+        'dnb-p--my-modifier',
+        'my-class',
+      ])
+    })
+    it('has correct style when size and a modifier is defined', () => {
+      render(<P size="medium" modifier="medium" />)
+      const element = document.querySelector('.dnb-t__size--medium')
+
+      expect(Array.from(element.classList)).toEqual([
+        'dnb-p',
+        'dnb-t__line-height--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-t__size--small')
+
+      expect(Array.from(element.classList)).toEqual([
+        'dnb-p',
+        'dnb-t__line-height--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-height--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-t__weight--medium')
+      expect(Array.from(element.classList)).toEqual([
+        'dnb-p',
+        'dnb-t__weight--medium',
+      ])
+    })
+
+    it('has correct style when bold is set to true', () => {
+      render(<P bold />)
+      const element = document.querySelector('.dnb-t__weight--bold')
+
+      expect(Array.from(element.classList)).toEqual([
+        'dnb-p',
+        'dnb-t__weight--bold',
+      ])
+    })
+  })
 })
diff --git a/packages/dnb-eufemia/src/elements/typography/__tests__/Paragraph.screenshot.test.ts b/packages/dnb-eufemia/src/elements/typography/__tests__/Paragraph.screenshot.test.ts
index dde88c9ed42..72d15a759a7 100644
--- a/packages/dnb-eufemia/src/elements/typography/__tests__/Paragraph.screenshot.test.ts
+++ b/packages/dnb-eufemia/src/elements/typography/__tests__/Paragraph.screenshot.test.ts
@@ -14,23 +14,59 @@ describe.each(['ui', 'sbanken'])('Paragraph for %s', (themeName) => {
     url: '/uilib/elements/paragraph',
   })
 
-  it('have to match the paragraph example', async () => {
+  it('have to match the paragraph with weight modifiers', async () => {
     const screenshot = await makeScreenshot({
-      selector: '[data-visual-test="paragraph-default"]',
+      selector: '[data-visual-test="paragraph-modifiers-weight"]',
     })
     expect(screenshot).toMatchImageSnapshot()
   })
 
-  it('have to match the paragraph with small text', async () => {
+  it('have to match the paragraph with size modifiers', async () => {
     const screenshot = await makeScreenshot({
-      selector: '[data-visual-test="paragraph-small"]',
+      selector: '[data-visual-test="paragraph-modifiers-size"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+
+  it('have to match the paragraph with align modifiers', async () => {
+    const screenshot = await makeScreenshot({
+      style: { width: '30rem' },
+      selector: '[data-visual-test="paragraph-modifiers-align"]',
     })
     expect(screenshot).toMatchImageSnapshot()
   })
 
-  it('have to match the paragraph with modifiers', async () => {
+  it('have to match the paragraph with family modifiers', async () => {
     const screenshot = await makeScreenshot({
-      selector: '[data-visual-test="paragraph-modifiers"]',
+      selector: '[data-visual-test="paragraph-modifiers-family"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+
+  it('have to match the paragraph with line modifiers', async () => {
+    const screenshot = await makeScreenshot({
+      selector: '[data-visual-test="paragraph-modifiers-line"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+
+  it('have to match the paragraph with other modifiers', async () => {
+    const screenshot = await makeScreenshot({
+      selector: '[data-visual-test="paragraph-modifiers-other"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+
+  it('have to match the paragraph example', async () => {
+    const screenshot = await makeScreenshot({
+      selector: '[data-visual-test="paragraph-default"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+
+  it('have to match the paragraph with small text', async () => {
+    const screenshot = await makeScreenshot({
+      selector: '[data-visual-test="paragraph-small"]',
     })
     expect(screenshot).toMatchImageSnapshot()
   })
diff --git a/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/paragraph-for-sbanken-have-to-match-the-paragraph-with-additional-elements.snap.png b/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/paragraph-for-sbanken-have-to-match-the-paragraph-with-additional-elements.snap.png
index 9cc37d5f375..93c1f8984d0 100644
Binary files a/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/paragraph-for-sbanken-have-to-match-the-paragraph-with-additional-elements.snap.png and b/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/paragraph-for-sbanken-have-to-match-the-paragraph-with-additional-elements.snap.png differ
diff --git a/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/paragraph-for-sbanken-have-to-match-the-paragraph-with-align-modifiers.snap.png b/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/paragraph-for-sbanken-have-to-match-the-paragraph-with-align-modifiers.snap.png
new file mode 100644
index 00000000000..06f36931f7b
Binary files /dev/null and b/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/paragraph-for-sbanken-have-to-match-the-paragraph-with-align-modifiers.snap.png differ
diff --git a/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/paragraph-for-sbanken-have-to-match-the-paragraph-with-family-modifiers.snap.png b/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/paragraph-for-sbanken-have-to-match-the-paragraph-with-family-modifiers.snap.png
new file mode 100644
index 00000000000..bb8d7320973
Binary files /dev/null and b/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/paragraph-for-sbanken-have-to-match-the-paragraph-with-family-modifiers.snap.png differ
diff --git a/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/paragraph-for-sbanken-have-to-match-the-paragraph-with-line-modifiers.snap.png b/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/paragraph-for-sbanken-have-to-match-the-paragraph-with-line-modifiers.snap.png
new file mode 100644
index 00000000000..2c55f6c9bd0
Binary files /dev/null and b/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/paragraph-for-sbanken-have-to-match-the-paragraph-with-line-modifiers.snap.png differ
diff --git a/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/paragraph-for-sbanken-have-to-match-the-paragraph-with-modifiers.snap.png b/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/paragraph-for-sbanken-have-to-match-the-paragraph-with-modifiers.snap.png
deleted file mode 100644
index 07c58427cc7..00000000000
Binary files a/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/paragraph-for-sbanken-have-to-match-the-paragraph-with-modifiers.snap.png and /dev/null differ
diff --git a/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/paragraph-for-sbanken-have-to-match-the-paragraph-with-other-modifiers.snap.png b/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/paragraph-for-sbanken-have-to-match-the-paragraph-with-other-modifiers.snap.png
new file mode 100644
index 00000000000..6cec9501b17
Binary files /dev/null and b/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/paragraph-for-sbanken-have-to-match-the-paragraph-with-other-modifiers.snap.png differ
diff --git a/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/paragraph-for-sbanken-have-to-match-the-paragraph-with-size-modifiers.snap.png b/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/paragraph-for-sbanken-have-to-match-the-paragraph-with-size-modifiers.snap.png
new file mode 100644
index 00000000000..3cc42bd5995
Binary files /dev/null and b/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/paragraph-for-sbanken-have-to-match-the-paragraph-with-size-modifiers.snap.png differ
diff --git a/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/paragraph-for-sbanken-have-to-match-the-paragraph-with-weight-modifiers.snap.png b/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/paragraph-for-sbanken-have-to-match-the-paragraph-with-weight-modifiers.snap.png
new file mode 100644
index 00000000000..c3ec48554cb
Binary files /dev/null and b/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/paragraph-for-sbanken-have-to-match-the-paragraph-with-weight-modifiers.snap.png differ
diff --git a/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/paragraph-for-ui-have-to-match-the-paragraph-with-align-modifiers.snap.png b/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/paragraph-for-ui-have-to-match-the-paragraph-with-align-modifiers.snap.png
new file mode 100644
index 00000000000..5f3022cb912
Binary files /dev/null and b/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/paragraph-for-ui-have-to-match-the-paragraph-with-align-modifiers.snap.png differ
diff --git a/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/paragraph-for-ui-have-to-match-the-paragraph-with-family-modifiers.snap.png b/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/paragraph-for-ui-have-to-match-the-paragraph-with-family-modifiers.snap.png
new file mode 100644
index 00000000000..98f546c66b0
Binary files /dev/null and b/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/paragraph-for-ui-have-to-match-the-paragraph-with-family-modifiers.snap.png differ
diff --git a/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/paragraph-for-ui-have-to-match-the-paragraph-with-line-modifiers.snap.png b/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/paragraph-for-ui-have-to-match-the-paragraph-with-line-modifiers.snap.png
new file mode 100644
index 00000000000..a359955777f
Binary files /dev/null and b/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/paragraph-for-ui-have-to-match-the-paragraph-with-line-modifiers.snap.png differ
diff --git a/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/paragraph-for-ui-have-to-match-the-paragraph-with-modifiers.snap.png b/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/paragraph-for-ui-have-to-match-the-paragraph-with-modifiers.snap.png
deleted file mode 100644
index 6a286fd4bf2..00000000000
Binary files a/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/paragraph-for-ui-have-to-match-the-paragraph-with-modifiers.snap.png and /dev/null differ
diff --git a/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/paragraph-for-ui-have-to-match-the-paragraph-with-other-modifiers.snap.png b/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/paragraph-for-ui-have-to-match-the-paragraph-with-other-modifiers.snap.png
new file mode 100644
index 00000000000..9245dae4eff
Binary files /dev/null and b/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/paragraph-for-ui-have-to-match-the-paragraph-with-other-modifiers.snap.png differ
diff --git a/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/paragraph-for-ui-have-to-match-the-paragraph-with-size-modifiers.snap.png b/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/paragraph-for-ui-have-to-match-the-paragraph-with-size-modifiers.snap.png
new file mode 100644
index 00000000000..5031d192b5a
Binary files /dev/null and b/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/paragraph-for-ui-have-to-match-the-paragraph-with-size-modifiers.snap.png differ
diff --git a/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/paragraph-for-ui-have-to-match-the-paragraph-with-weight-modifiers.snap.png b/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/paragraph-for-ui-have-to-match-the-paragraph-with-weight-modifiers.snap.png
new file mode 100644
index 00000000000..979a5faee26
Binary files /dev/null and b/packages/dnb-eufemia/src/elements/typography/__tests__/__image_snapshots__/paragraph-for-ui-have-to-match-the-paragraph-with-weight-modifiers.snap.png differ
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..5c63b49aeb8
--- /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-height--xx-large {
+    line-height: var(--line-height-xx-large);
+  }
+  &__line-height--x-large {
+    line-height: var(--line-height-x-large);
+  }
+  &__line-height--large {
+    line-height: var(--line-height-large);
+  }
+  &__line-height--medium {
+    line-height: var(--line-height-medium);
+  }
+  &__line-height--basis {
+    line-height: var(--line-height-basis);
+  }
+  &__line-height--small {
+    line-height: var(--line-height-small);
+  }
+  &__line-height--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);
+  }
+
+  // underline / italic
+  &__decoration--underline {
+    text-decoration: underline;
+  }
+  &__slant--italic {
+    font-style: italic;
+  }
+}
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 5fba5f66c3c..63c8ff1b07a 100644
--- a/packages/dnb-eufemia/src/elements/typography/style/dnb-typography.scss
+++ b/packages/dnb-eufemia/src/elements/typography/style/dnb-typography.scss
@@ -7,7 +7,6 @@
 @import './typography-mixins.scss';
 
 @include typographySelectors() {
-  --typography-h-default-font-family: var(--font-family-default);
   --typography-h-default-font-weight: var(--font-weight-medium);
 
   // Heading xx-large
@@ -94,6 +93,8 @@ sub {
   @include paragraphStyle();
 }
 
+@import './dnb-t.scss';
+
 // Tables
 .dnb-table {
   b,
diff --git a/packages/dnb-eufemia/src/elements/typography/style/themes/dnb-typography-theme-sbanken.scss b/packages/dnb-eufemia/src/elements/typography/style/themes/dnb-typography-theme-sbanken.scss
index 50064e93b27..1d13f27f1d1 100644
--- a/packages/dnb-eufemia/src/elements/typography/style/themes/dnb-typography-theme-sbanken.scss
+++ b/packages/dnb-eufemia/src/elements/typography/style/themes/dnb-typography-theme-sbanken.scss
@@ -18,7 +18,6 @@
 }
 
 @include typography.typographySelectors() {
-  --typography-h-default-font-family: var(--sb-font-family-headings);
   --typography-h-xx-large-weight: var(--font-weight-regular);
   --typography-h-x-large-weight: var(--font-weight-regular);
   --typography-h-large-small-font-size: var(--sb-font-size-medium--plus);
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 34399faf355..04fadd65786 100644
--- a/packages/dnb-eufemia/src/elements/typography/style/typography-mixins.scss
+++ b/packages/dnb-eufemia/src/elements/typography/style/typography-mixins.scss
@@ -96,7 +96,7 @@
     margin: 0;
   }
 
-  font-family: var(--typography-h-default-font-family);
+  font-family: var(--font-family-heading);
 
   // make icons inside heading responsive to the heading size
   .dnb-icon--default {
@@ -240,13 +240,29 @@
   &--lead {
     @include typography_lead();
   }
+  b,
+  strong {
+    font-weight: var(--font-weight-medium);
+  }
+  // is still needed for backwards compatibility when ".dnp-p" was used for all typography
+  @include paragraphDeprecated();
 
-  &--medium {
+  & > small {
+    font-size: var(--font-size-small);
+    line-height: var(--line-height-small);
+  }
+
+  & > cite {
     font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-basis);
+    font-style: italic;
   }
+}
 
-  b,
-  strong {
+// should use the .dnb-t classes instead
+@mixin paragraphDeprecated() {
+  // weights
+  &--medium {
     font-weight: var(--font-weight-medium);
   }
 
@@ -254,6 +270,7 @@
     font-weight: var(--font-weight-bold);
   }
 
+  // sizes and line-heights
   &__size--xx-large {
     font-size: var(--font-size-xx-large);
     line-height: var(--line-height-xx-large);
@@ -279,24 +296,17 @@
     line-height: var(--line-height-medium);
   }
 
-  &--small ,// backwards compatibility
-   &__size--small,
-   & > small {
+  &--small, // backwards compatibility
+  &__size--small {
     font-size: var(--font-size-small);
     line-height: var(--line-height-small);
   }
 
-  &--x-small ,// backwards compatibility
-   &__size--x-small {
+  &--x-small, // backwards compatibility
+  &__size--x-small {
     font-size: var(--font-size-x-small);
     line-height: var(--line-height-x-small);
   }
-
-  & > cite {
-    font-weight: var(--font-weight-medium);
-    line-height: var(--line-height-basis);
-    font-style: italic;
-  }
 }
 
 @mixin headingSpacing_xx-large() {
diff --git a/packages/dnb-eufemia/src/extensions/payment-card/__tests__/__snapshots__/PaymentCard.test.tsx.snap b/packages/dnb-eufemia/src/extensions/payment-card/__tests__/__snapshots__/PaymentCard.test.tsx.snap
index 1b953ef23f1..5111e15b325 100644
--- a/packages/dnb-eufemia/src/extensions/payment-card/__tests__/__snapshots__/PaymentCard.test.tsx.snap
+++ b/packages/dnb-eufemia/src/extensions/payment-card/__tests__/__snapshots__/PaymentCard.test.tsx.snap
@@ -21,7 +21,7 @@ exports[`PaymentCard scss has to match style dependencies css 1`] = `
  */
 :root {
   --sb-font-family-default: "Roboto", "Helvetica", "Arial", sans-serif;
-  --sb-font-family-headings: "MaisonNeueHeadings", "Roboto", "Helvetica",
+  --sb-font-family-heading: "MaisonNeueHeadings", "Roboto", "Helvetica",
     "Arial", sans-serif;
   --sb-font-weight-default: normal;
   --sb-font-weight-basis: normal;
diff --git a/packages/dnb-eufemia/src/shared/VisibilityByTheme.tsx b/packages/dnb-eufemia/src/shared/VisibilityByTheme.tsx
index b65a1643106..26fc9451402 100644
--- a/packages/dnb-eufemia/src/shared/VisibilityByTheme.tsx
+++ b/packages/dnb-eufemia/src/shared/VisibilityByTheme.tsx
@@ -61,3 +61,16 @@ export default function VisibilityByTheme({
     })
   }
 }
+
+VisibilityByTheme.Name = function ThemeName() {
+  const theme = useTheme()
+  if (theme.isEiendom) {
+    return 'Eiendom'
+  }
+  if (theme.isSbanken) {
+    return 'Sbanken'
+  }
+  if (theme.isUi) {
+    return 'DNB'
+  }
+}
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 f2364b55c58..05c84747c72 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
@@ -610,7 +610,6 @@ del .dnb-code {
  *
  */
 .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-family: var(--font-family-default);
   --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);
@@ -672,7 +671,7 @@ del .dnb-code {
 .dnb-core-style .dnb-h--small,
 .dnb-core-style .dnb-h--x-small {
   padding: 0;
-  font-family: var(--typography-h-default-font-family);
+  font-family: var(--font-family-heading);
 }
 .dnb-lead:not([class*=dnb-space]),
 .dnb-h--xx-large:not([class*=dnb-space]),
@@ -793,13 +792,13 @@ sub {
   font-size: var(--typography-lead-small-font-size);
   line-height: var(--typography-lead-small-line-height);
 }
-.dnb-p--medium {
-  font-weight: var(--font-weight-medium);
-}
 .dnb-p b,
 .dnb-p strong {
   font-weight: var(--font-weight-medium);
 }
+.dnb-p--medium {
+  font-weight: var(--font-weight-medium);
+}
 .dnb-p--bold {
   font-weight: var(--font-weight-bold);
 }
@@ -823,7 +822,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);
 }
@@ -831,12 +830,97 @@ 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.
+ */
+.dnb-t__size--xx-large {
+  font-size: var(--font-size-xx-large);
+}
+.dnb-t__size--x-large {
+  font-size: var(--font-size-x-large);
+}
+.dnb-t__size--large {
+  font-size: var(--font-size-large);
+}
+.dnb-t__size--medium {
+  font-size: var(--font-size-medium);
+}
+.dnb-t__size--basis {
+  font-size: var(--font-size-basis);
+}
+.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-height--xx-large {
+  line-height: var(--line-height-xx-large);
+}
+.dnb-t__line-height--x-large {
+  line-height: var(--line-height-x-large);
+}
+.dnb-t__line-height--large {
+  line-height: var(--line-height-large);
+}
+.dnb-t__line-height--medium {
+  line-height: var(--line-height-medium);
+}
+.dnb-t__line-height--basis {
+  line-height: var(--line-height-basis);
+}
+.dnb-t__line-height--small {
+  line-height: var(--line-height-small);
+}
+.dnb-t__line-height--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--underline {
+  text-decoration: underline;
+}
+.dnb-t__slant--italic {
+  font-style: italic;
+}
+
 .dnb-table b,
 .dnb-table strong {
   font-weight: var(--font-weight-medium);
diff --git a/packages/dnb-eufemia/src/style/themes/theme-eiendom/properties.js b/packages/dnb-eufemia/src/style/themes/theme-eiendom/properties.js
index b91cec0012b..3daa8ce876d 100644
--- a/packages/dnb-eufemia/src/style/themes/theme-eiendom/properties.js
+++ b/packages/dnb-eufemia/src/style/themes/theme-eiendom/properties.js
@@ -2,7 +2,7 @@
 
 export default {
   '--sb-font-family-default': '"Roboto", "Helvetica", "Arial", sans-serif',
-  '--sb-font-family-headings': '"MaisonNeueHeadings", "Roboto", "Helvetica",',
+  '--sb-font-family-heading': '"MaisonNeueHeadings", "Roboto", "Helvetica",',
   '--sb-font-weight-default': 'normal',
   '--sb-font-weight-basis': 'normal',
   '--sb-font-weight-regular': 'normal',
@@ -94,6 +94,7 @@ export default {
   '--color-emerald-green-25': '#c4d4d6',
   '--color-emerald-green-10': '#e8eeef',
   '--font-family-default': '"DNB", sans-serif',
+  '--font-family-heading': 'var(--font-family-default)',
   '--font-family-monospace': '"DNBMono", "Menlo", "Consolas", "Roboto Mono",',
   '--font-weight-default': 'normal',
   '--font-weight-basis': 'normal',
diff --git a/packages/dnb-eufemia/src/style/themes/theme-sbanken/fonts.scss b/packages/dnb-eufemia/src/style/themes/theme-sbanken/fonts.scss
index 5f474789e9f..fdfe031565d 100644
--- a/packages/dnb-eufemia/src/style/themes/theme-sbanken/fonts.scss
+++ b/packages/dnb-eufemia/src/style/themes/theme-sbanken/fonts.scss
@@ -13,14 +13,18 @@
   font-style: normal;
 }
 
-// For backwards compatibility
-.dnb-typo-medium,
-.dnb-typo-bold {
+.dnb-typo-medium {
   font-family: var(--sb-font-family-default);
   font-weight: var(--sb-font-weight-medium);
   font-style: normal;
 }
 
+.dnb-typo-bold {
+  font-family: var(--sb-font-family-default);
+  font-weight: var(--sb-font-weight-bold);
+  font-style: normal;
+}
+
 $fonts-path: '../../../../assets/fonts/sbanken' !default;
 
 // Maison
diff --git a/packages/dnb-eufemia/src/style/themes/theme-sbanken/properties.js b/packages/dnb-eufemia/src/style/themes/theme-sbanken/properties.js
index e0ba26fd86d..459b5543cb9 100644
--- a/packages/dnb-eufemia/src/style/themes/theme-sbanken/properties.js
+++ b/packages/dnb-eufemia/src/style/themes/theme-sbanken/properties.js
@@ -2,7 +2,7 @@
 
 export default {
   '--sb-font-family-default': '"Roboto", "Helvetica", "Arial", sans-serif',
-  '--sb-font-family-headings': '"MaisonNeueHeadings", "Roboto", "Helvetica",',
+  '--sb-font-family-heading': '"MaisonNeueHeadings", "Roboto", "Helvetica",',
   '--sb-font-weight-default': 'normal',
   '--sb-font-weight-basis': 'normal',
   '--sb-font-weight-regular': 'normal',
@@ -94,6 +94,7 @@ export default {
   '--color-emerald-green-25': '#c4d4d6',
   '--color-emerald-green-10': '#e8eeef',
   '--font-family-default': 'var(--sb-font-family-default)',
+  '--font-family-heading': 'var(--sb-font-family-heading)',
   '--font-family-monospace': '"DNBMono", "Menlo", "Consolas", "Roboto Mono",',
   '--font-weight-default': 'normal',
   '--font-weight-basis': 'normal',
diff --git a/packages/dnb-eufemia/src/style/themes/theme-sbanken/properties.scss b/packages/dnb-eufemia/src/style/themes/theme-sbanken/properties.scss
index ce17072a595..88509776686 100644
--- a/packages/dnb-eufemia/src/style/themes/theme-sbanken/properties.scss
+++ b/packages/dnb-eufemia/src/style/themes/theme-sbanken/properties.scss
@@ -6,7 +6,7 @@
 :root {
   // Typography Family
   --sb-font-family-default: 'Roboto', 'Helvetica', 'Arial', sans-serif;
-  --sb-font-family-headings: 'MaisonNeueHeadings', 'Roboto', 'Helvetica',
+  --sb-font-family-heading: 'MaisonNeueHeadings', 'Roboto', 'Helvetica',
     'Arial', sans-serif;
 
   // Typography Weights
diff --git a/packages/dnb-eufemia/src/style/themes/theme-sbanken/theme-mapping.scss b/packages/dnb-eufemia/src/style/themes/theme-sbanken/theme-mapping.scss
index bf40d28faa0..6acaf9f92d0 100644
--- a/packages/dnb-eufemia/src/style/themes/theme-sbanken/theme-mapping.scss
+++ b/packages/dnb-eufemia/src/style/themes/theme-sbanken/theme-mapping.scss
@@ -12,6 +12,7 @@
 
   // font-family
   --font-family-default: var(--sb-font-family-default);
+  --font-family-heading: var(--sb-font-family-heading);
 
   // font-weight
   --font-weight-medium: var(--sb-font-weight-medium);
diff --git a/packages/dnb-eufemia/src/style/themes/theme-ui/properties.js b/packages/dnb-eufemia/src/style/themes/theme-ui/properties.js
index b91cec0012b..3daa8ce876d 100644
--- a/packages/dnb-eufemia/src/style/themes/theme-ui/properties.js
+++ b/packages/dnb-eufemia/src/style/themes/theme-ui/properties.js
@@ -2,7 +2,7 @@
 
 export default {
   '--sb-font-family-default': '"Roboto", "Helvetica", "Arial", sans-serif',
-  '--sb-font-family-headings': '"MaisonNeueHeadings", "Roboto", "Helvetica",',
+  '--sb-font-family-heading': '"MaisonNeueHeadings", "Roboto", "Helvetica",',
   '--sb-font-weight-default': 'normal',
   '--sb-font-weight-basis': 'normal',
   '--sb-font-weight-regular': 'normal',
@@ -94,6 +94,7 @@ export default {
   '--color-emerald-green-25': '#c4d4d6',
   '--color-emerald-green-10': '#e8eeef',
   '--font-family-default': '"DNB", sans-serif',
+  '--font-family-heading': 'var(--font-family-default)',
   '--font-family-monospace': '"DNBMono", "Menlo", "Consolas", "Roboto Mono",',
   '--font-weight-default': 'normal',
   '--font-weight-basis': 'normal',
diff --git a/packages/dnb-eufemia/src/style/themes/theme-ui/properties.scss b/packages/dnb-eufemia/src/style/themes/theme-ui/properties.scss
index 79aeb2eb6a3..df1ae185498 100644
--- a/packages/dnb-eufemia/src/style/themes/theme-ui/properties.scss
+++ b/packages/dnb-eufemia/src/style/themes/theme-ui/properties.scss
@@ -6,6 +6,7 @@
 :root {
   // Typography Family
   --font-family-default: 'DNB', sans-serif;
+  --font-family-heading: var(--font-family-default);
   --font-family-monospace: 'DNBMono', 'Menlo', 'Consolas', 'Roboto Mono',
     'Ubuntu Monospace', 'Noto Mono', 'Oxygen Mono', 'Liberation Mono',
     monospace;