diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
index 0765789d1..7e6acef50 100644
--- a/.github/workflows/chromatic.yml
+++ b/.github/workflows/chromatic.yml
@@ -3,7 +3,7 @@
 
 name: Chromatic
 
-on:  
+on:
     pull_request:
         branches-ignore:
           - changeset-release/*
diff --git a/.storybook/components/component-info/ComponentInfo.css b/.storybook/components/component-info/ComponentInfo.css
index 611522bca..5775822d8 100644
--- a/.storybook/components/component-info/ComponentInfo.css
+++ b/.storybook/components/component-info/ComponentInfo.css
@@ -16,7 +16,7 @@
 .o-ui-sb-component-info-title {
     display: inline-block !important;
     color: var(--o-ui-text-alias-secondary) !important;
-    font-variation-settings: "wght" 500 !important;
+    font-weight: 550 !important;
     font-size: var(--o-ui-fs-3) !important;
     font-style: normal !important;
     width: var(--o-ui-sz-11) !important;
diff --git a/.storybook/components/preview/Preview.css b/.storybook/components/preview/Preview.css
index 389014d36..ae45c334a 100644
--- a/.storybook/components/preview/Preview.css
+++ b/.storybook/components/preview/Preview.css
@@ -24,8 +24,7 @@
     color: var(--o-ui-white);
     z-index: 1;
     font-size: 0.625rem;
-    font-weight: 400;
-    font-variation-settings: "wght" 500;
+    font-weight: 550;
     letter-spacing: 0.025em;
     text-transform: uppercase;
 }
diff --git a/.storybook/preview.js b/.storybook/preview.js
index d6661dfc9..33eb7b7d1 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -11,6 +11,8 @@ import { Themes } from "./styles/themes";
 if (!isChromatic) {
     // Custom font makes chromatic inconsistent and cause "false positive". View https://www.chromatic.com/docs/resource-loading#loading-custom-fonts.
     import("@css/font/index.css");
+} else {
+    import("./styles/chromatic.css");
 }
 
 export const parameters = {
diff --git a/.storybook/styles/app.css b/.storybook/styles/app.css
index 3c647dd1a..09ea35e04 100644
--- a/.storybook/styles/app.css
+++ b/.storybook/styles/app.css
@@ -1,6 +1,6 @@
 html,
 body {
-    font-family: "TT Interphases Variable", Arial, Helvetica, serif !important;
+    font-family: "Inter", Arial, Helvetica, serif !important;
     -webkit-font-smoothing: antialiased;
     font-size: 16px;
 }
diff --git a/.storybook/styles/chromatic.css b/.storybook/styles/chromatic.css
new file mode 100644
index 000000000..c5fe03e5e
--- /dev/null
+++ b/.storybook/styles/chromatic.css
@@ -0,0 +1,9 @@
+/* https://www.chromatic.com/docs/resource-loading/#solution-a-preload-fonts */
+/* Given that loading fonts and making sure that these loads before Chromatic takes a snapshot, and given that the proposed solutions */
+/* are currently not working. We needed a way to ensure that every snapshot uses the same font. The current approach is to force Arial for all Chromatic Snaphots */
+/* While not ideal this at least solves the issue at hand. */
+*,
+*::before,
+*::after {
+    font-family: Arial;
+}
diff --git a/.storybook/styles/docs.css b/.storybook/styles/docs.css
index b55aafa2b..b486948f4 100644
--- a/.storybook/styles/docs.css
+++ b/.storybook/styles/docs.css
@@ -1,6 +1,6 @@
 :root {
     /* Use this var only when the element is not affected by the font-family specified in Storybook docs theme */
-    --orbiter-font-family: "TT Interphases Variable", Arial, Helvetica, sans-serif;
+    --orbiter-font-family: "Inter", Arial, Helvetica, sans-serif;
 }
 
 /* LAYOUT */
@@ -15,7 +15,7 @@
 
 /* STORY */
 .docs-story div + div > button {
-    font-variation-settings: "wght" 500;
+    font-weight: 550;
     font-size: var(--o-ui-fs-2);
 }
 
@@ -32,8 +32,7 @@
 }
 
 .docblock-argstable-head tr th {
-    font-variation-settings: "wght" 500 !important;
-    font-weight: 400;
+    font-weight: 550 !important;
     color: var(--o-ui-text-alias-primary) !important;
 }
 
@@ -57,13 +56,11 @@
 
 /* ARGS TABLE | BODY  */
 .docblock-argstable-body td > span {
-    font-variation-settings: "wght" 500 !important;
-    font-weight: 400;
+    font-weight: 550 !important;
 }
 
 .docblock-argstable-body td > label > span {
-    font-variation-settings: "wght" 500 !important;
-    font-weight: 400;
+    font-weight: 550 !important;
 }
 
 .docblock-argstable-body td label input[type=radio] {
@@ -154,8 +151,7 @@
 .sbdocs.sbdocs-h4,
 .sbdocs.sbdocs-h5,
 .sbdocs.sbdocs-h6 {
-    font-variation-settings: "wght" 500;
-    font-weight: 400;
+    font-weight: 550;
     /* fixing the default position relative on all titles in shared.tsx */
     position: initial;
 }
@@ -167,7 +163,7 @@
 
 .sbdocs.sbdocs-h1,
 .sbdocs .sbdocs-title {
-    font-variation-settings: "wght" 500;
+    font-weight: 550;
 }
 
 .sbdocs.sbdocs-h2 {
@@ -266,8 +262,7 @@
 }
 
 .sbdocs.sbdocs-table tr th {
-    font-weight: 400;
-    font-variation-settings: "wght" 600;
+    font-weight: 600;
     font-size: var(--o-ui-fs-4);
 }
 
@@ -303,7 +298,6 @@
 
 .sbdocs.sbdocs-table b,
 .sbdocs.sbdocs-table strong {
-    font-variation-settings: "wght" 600;
     font-weight: 400;
 }
 
@@ -354,7 +348,6 @@
 
 /* ELEMENTS | STRONG */
 .sbdocs strong {
-    font-variation-settings: "wght" 500;
     font-weight: 400;
 }
 
diff --git a/.storybook/styles/themes.js b/.storybook/styles/themes.js
index 1aa7e9d82..9c29c157f 100644
--- a/.storybook/styles/themes.js
+++ b/.storybook/styles/themes.js
@@ -9,7 +9,7 @@ export const Themes = {
     }),
     docs: create({
         base: "light",
-        fontBase: "TT Interphases Variable, Arial, Helvetica, sans-serif",
+        fontBase: "Inter, Arial, Helvetica, sans-serif",
         textColor: "#04091A"
     })
 };
diff --git a/packages/components/package.json b/packages/components/package.json
index 8933443bd..7e4f2963a 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -39,3 +39,4 @@
     },
     "gitHead": "f8b5019bdc53f68abe27e931387aeec7f0747d85"
 }
+
diff --git a/packages/components/src/accordion/src/Accordion.css b/packages/components/src/accordion/src/Accordion.css
index 2b79ae366..c7e394c51 100644
--- a/packages/components/src/accordion/src/Accordion.css
+++ b/packages/components/src/accordion/src/Accordion.css
@@ -15,7 +15,7 @@
 /* HEADER */
 .o-ui-accordion .o-ui-accordion-header {
     margin-bottom: 0;
-    font-variation-settings: "wght" 500;
+    font-weight: 500;
 }
 
 /* HEADER BORDERLESS */
diff --git a/packages/components/src/accordion/src/AccordionHeader.tsx b/packages/components/src/accordion/src/AccordionHeader.tsx
index 31737b1ee..0cd58dfd0 100644
--- a/packages/components/src/accordion/src/AccordionHeader.tsx
+++ b/packages/components/src/accordion/src/AccordionHeader.tsx
@@ -69,7 +69,7 @@ export function InnerAccordionHeader(props: InnerAccordionHeaderProps) {
                 headingProps ?? {},
                 {
                     className: "o-ui-accordion-header",
-                    size: "2xs"
+                    size: "xs"
                 }
             )}
         >
diff --git a/packages/components/src/button/src/Button.css b/packages/components/src/button/src/Button.css
index 649628249..7f2d8a4d4 100644
--- a/packages/components/src/button/src/Button.css
+++ b/packages/components/src/button/src/Button.css
@@ -11,7 +11,7 @@
     background-image: none;
     cursor: pointer;
     line-height: var(--o-ui-lh-1);
-    font-variation-settings: "wght" 500;
+    font-weight: 500;
     transition: all var(--o-ui-easing-duration-2) var(--o-ui-easing-productive);
     border: none;
     text-align: center;
@@ -402,4 +402,4 @@ a.o-ui-button {
 .o-ui-button:hover.o-ui-button-primary .o-ui-button-counter,
 .o-ui-button-hover:not([disabled]).o-ui-button-primary .o-ui-button-counter {
     opacity: 1;
-}
\ No newline at end of file
+}
diff --git a/packages/components/src/card/src/Card.tsx b/packages/components/src/card/src/Card.tsx
index 6c8fecf32..b590e4dc9 100644
--- a/packages/components/src/card/src/Card.tsx
+++ b/packages/components/src/card/src/Card.tsx
@@ -55,7 +55,8 @@ export function InnerCard({
         },
         content: {
             as: Text,
-            className: "o-ui-card-content"
+            className: "o-ui-card-content",
+            size: "sm"
         },
         header: {
             className: "o-ui-card-header"
@@ -63,7 +64,7 @@ export function InnerCard({
         heading: {
             as: "span",
             className: "o-ui-card-heading",
-            size: "xs"
+            size: "sm"
         },
         illustration: {
             className: "o-ui-card-illustration",
@@ -73,7 +74,7 @@ export function InnerCard({
     }), [orientationValue]));
 
     const headerMarkup = isString(header?.props?.children)
-        ? cloneElement(header, { children: <Text>{header?.props?.children}</Text> })
+        ? cloneElement(header, { children: <Text size="sm">{header?.props?.children}</Text> })
         : header;
 
     const imageMarkup = image && (
diff --git a/packages/components/src/counter/src/Counter.css b/packages/components/src/counter/src/Counter.css
index 0036e5309..8822fa596 100644
--- a/packages/components/src/counter/src/Counter.css
+++ b/packages/components/src/counter/src/Counter.css
@@ -4,7 +4,7 @@
 
 /* HIGHLIGHT */
 .o-ui-counter-highlight {
-    font-variation-settings: "wght" 500;
+    font-weight: 500;
 }
 
 /* PUSHED */
diff --git a/packages/components/src/counter/src/Counter.tsx b/packages/components/src/counter/src/Counter.tsx
index e5c8747dc..60df0157c 100644
--- a/packages/components/src/counter/src/Counter.tsx
+++ b/packages/components/src/counter/src/Counter.tsx
@@ -30,7 +30,7 @@ export interface InnerCounterProps extends SlotProps, InternalProps, StyledCompo
     /**
      * A counter can vary in size.
      */
-    size?: ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "inherit">;
+    size?: ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "inherit">;
     /**
      * The style to use.
      */
diff --git a/packages/components/src/dialog/src/Dialog.tsx b/packages/components/src/dialog/src/Dialog.tsx
index abaadfeec..c18ee8f73 100644
--- a/packages/components/src/dialog/src/Dialog.tsx
+++ b/packages/components/src/dialog/src/Dialog.tsx
@@ -227,7 +227,8 @@ export function InnerDialog({
         content: {
             as: Text,
             className: "o-ui-dialog-content",
-            id: `${dialogId}-content`
+            id: `${dialogId}-content`,
+            size: "sm"
         },
         footer: {
             as: "footer",
@@ -241,7 +242,7 @@ export function InnerDialog({
             as: "h3",
             className: "o-ui-dialog-heading",
             id: `${dialogId}-heading`,
-            size: "sm"
+            size: "lg"
         },
         illustration: {
             className: "o-ui-dialog-illustration",
diff --git a/packages/components/src/divider/src/Divider.tsx b/packages/components/src/divider/src/Divider.tsx
index 49f5ff126..6950c8fcd 100644
--- a/packages/components/src/divider/src/Divider.tsx
+++ b/packages/components/src/divider/src/Divider.tsx
@@ -27,7 +27,7 @@ export function InnerDivider({
     const orientationValue = useResponsiveValue(orientation);
 
     const labelMarkup = children && (
-        <Text className="o-ui-divider-label">
+        <Text className="o-ui-divider-label" size="sm">
             {children}
         </Text>
     );
diff --git a/packages/components/src/field/src/FieldMessage.tsx b/packages/components/src/field/src/FieldMessage.tsx
index f92a110ce..f90ed9c86 100644
--- a/packages/components/src/field/src/FieldMessage.tsx
+++ b/packages/components/src/field/src/FieldMessage.tsx
@@ -57,7 +57,8 @@ export const FieldMessage = forwardRef<any, InnerFieldMessageProps>(({
                         variant,
                         fluidValue && "fluid"
                     ),
-                    ref
+                    ref,
+                    size: "sm" as const
                 }
             )}
         >
diff --git a/packages/components/src/form/src/Form.css b/packages/components/src/form/src/Form.css
index 8651bcacd..0eef90ad9 100644
--- a/packages/components/src/form/src/Form.css
+++ b/packages/components/src/form/src/Form.css
@@ -17,8 +17,7 @@
 .o-ui-fieldset-label {
     display: inline-block;
     font-size: var(--o-ui-fs-4);
-    font-weight: 400;
-    font-variation-settings: "wght" 600;
+    font-weight: 600;
     color: var(--o-ui-text-alias-primary);
     margin-bottom: var(--o-ui-sp-3);
 }
diff --git a/packages/components/src/illustrated-message/src/IllustratedMessage.tsx b/packages/components/src/illustrated-message/src/IllustratedMessage.tsx
index 49e16f29c..e2403935f 100644
--- a/packages/components/src/illustrated-message/src/IllustratedMessage.tsx
+++ b/packages/components/src/illustrated-message/src/IllustratedMessage.tsx
@@ -38,7 +38,7 @@ export function InnerIllustratedMessage({
         heading: {
             as: "h3",
             className: "o-ui-illustrated-message-heading",
-            size: "sm"
+            size: "md"
         },
         image: {
             className: "o-ui-illustrated-message-image"
diff --git a/packages/components/src/input-group/src/InputGroupContext.tsx b/packages/components/src/input-group/src/InputGroupContext.tsx
index 203097169..5d75fe50d 100644
--- a/packages/components/src/input-group/src/InputGroupContext.tsx
+++ b/packages/components/src/input-group/src/InputGroupContext.tsx
@@ -87,7 +87,7 @@ export function useInputGroupButtonAddonProps(): [UseInputGroupButtonAddonPropsR
     const [{ disabled }, isInInputGroup] = useInputGroupContext();
 
     const props = isInInputGroup && {
-        className: "o-ui-input-group-addon  o-ui-input-group-button-addon",
+        className: "o-ui-input-group-addon o-ui-input-group-button-addon",
         disabled
     };
 
diff --git a/packages/components/src/listbox/src/Listbox.css b/packages/components/src/listbox/src/Listbox.css
index a9ece7d83..8967ac6c0 100644
--- a/packages/components/src/listbox/src/Listbox.css
+++ b/packages/components/src/listbox/src/Listbox.css
@@ -151,7 +151,7 @@ IMPORTANT: The Listbox component hardcoded a few CSS values to enable dynamic sc
 /* SECTION */
 .o-ui-listbox-section {
     display: flex;
-    font-variation-settings: "wght" 500;
+    font-weight: 500;
     padding-left: var(--o-ui-sp-3);
     cursor: default;
     line-height: var(--o-ui-lh-1);
diff --git a/packages/components/src/listbox/src/ListboxOption.tsx b/packages/components/src/listbox/src/ListboxOption.tsx
index fb0e89e9c..be5c1ec1a 100644
--- a/packages/components/src/listbox/src/ListboxOption.tsx
+++ b/packages/components/src/listbox/src/ListboxOption.tsx
@@ -127,7 +127,8 @@ export function InnerListboxOption({
         },
         text: {
             className: "o-ui-listbox-option-label",
-            id: `${id}-label`
+            id: `${id}-label`,
+            size: "sm"
         }
     }), [id]));
 
diff --git a/packages/components/src/lozenge/src/Lozenge.css b/packages/components/src/lozenge/src/Lozenge.css
index 9f7a7ebd6..52043d501 100644
--- a/packages/components/src/lozenge/src/Lozenge.css
+++ b/packages/components/src/lozenge/src/Lozenge.css
@@ -5,7 +5,7 @@
     color: var(--o-ui-text-alias-primary);
     padding: 0 var(--o-ui-sp-2);
     border-radius: var(--o-ui-br-2);
-    font-variation-settings: "wght" 600;
+    font-weight: 600;
     min-height: var(--o-ui-sz-3);
     line-height: var(--o-ui-sz-3);
     width: max-content;
diff --git a/packages/components/src/menu/src/Menu.css b/packages/components/src/menu/src/Menu.css
index 70b483d29..e13b1ec97 100644
--- a/packages/components/src/menu/src/Menu.css
+++ b/packages/components/src/menu/src/Menu.css
@@ -156,8 +156,7 @@ IMPORTANT: The Menu component hardcoded a few CSS values to enable dynamic scrol
 .o-ui-menu-section-title {
     cursor: default;
     display: flex;
-    font-weight: 400;
-    font-variation-settings: "wght" 500;
+    font-weight: 500;
     padding-left: var(--o-ui-sp-3);
     height: var(--o-ui-menu-item-height);
     line-height: var(--o-ui-lh-1);
diff --git a/packages/components/src/message/src/Message.tsx b/packages/components/src/message/src/Message.tsx
index 410baab1f..44e48b92b 100644
--- a/packages/components/src/message/src/Message.tsx
+++ b/packages/components/src/message/src/Message.tsx
@@ -21,8 +21,7 @@ const MessageContent = forwardRef<any, TextProps>(({
             <StyleProvider
                 value={{
                     heading: {
-                        className: "o-ui-message-title",
-                        size: "2xs"
+                        className: "o-ui-message-title"
                     },
                     "html-a": {
                         color: "inherit"
diff --git a/packages/components/src/popover/src/Popover.tsx b/packages/components/src/popover/src/Popover.tsx
index 622acf628..d3e43fd27 100644
--- a/packages/components/src/popover/src/Popover.tsx
+++ b/packages/components/src/popover/src/Popover.tsx
@@ -128,7 +128,8 @@ export function InnerPopover({
         },
         content: {
             as: Text,
-            className: "o-ui-popover-content"
+            className: "o-ui-popover-content",
+            size: "sm"
         },
         footer: {
             as: "footer",
@@ -137,7 +138,7 @@ export function InnerPopover({
         heading: {
             as: "h3",
             id: `${popoverId}-heading`,
-            size: "sm"
+            size: "md"
         }
     }), [popoverId]));
 
diff --git a/packages/components/src/shared/src/size.ts b/packages/components/src/shared/src/size.ts
index 24720d2d1..7f1476209 100644
--- a/packages/components/src/shared/src/size.ts
+++ b/packages/components/src/shared/src/size.ts
@@ -1,4 +1,4 @@
-export type Size = "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "inherit";
+export type Size = "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "inherit";
 
 export function normalizeSize<T extends Size>(size?: T) {
     return size || "md";
diff --git a/packages/components/src/tag/src/Tag.tsx b/packages/components/src/tag/src/Tag.tsx
index f6796aac7..44fffd8c5 100644
--- a/packages/components/src/tag/src/Tag.tsx
+++ b/packages/components/src/tag/src/Tag.tsx
@@ -38,8 +38,8 @@ export interface InnerTagProps extends InternalProps, InteractionProps, StyledCo
 
 /* eslint-disable sort-keys, sort-keys-fix/sort-keys-fix */
 const textSize = createSizeAdapter({
-    "sm": "md",
-    "md": "md"
+    "sm": "sm",
+    "md": "sm"
 });
 /* eslint-enable sort-keys, sort-keys-fix/sort-keys-fix */
 
diff --git a/packages/components/src/tile/src/useTile.tsx b/packages/components/src/tile/src/useTile.tsx
index 3bf27d932..378bd5f6b 100644
--- a/packages/components/src/tile/src/useTile.tsx
+++ b/packages/components/src/tile/src/useTile.tsx
@@ -31,7 +31,7 @@ export function useTile({
         heading: {
             as: "span",
             className: "o-ui-tile-heading",
-            size: "xs"
+            size: "sm"
         },
         illustration: {
             className: "o-ui-tile-illustration",
diff --git a/packages/components/src/typography/docs/Heading.stories.mdx b/packages/components/src/typography/docs/Heading.stories.mdx
index 5f12101b3..1954e3e09 100644
--- a/packages/components/src/typography/docs/Heading.stories.mdx
+++ b/packages/components/src/typography/docs/Heading.stories.mdx
@@ -53,7 +53,7 @@ You can alter the size of an heading component by specifying a `size` prop.
     <Story name="size">
         <>
             <Heading>Houston, Tranquillity Base here. The Eagle has landed.</Heading>
-            <H2 size="sm">Houston, Tranquillity Base here. The Eagle has landed.</H2>
+            <H2 size="xs">Houston, Tranquillity Base here. The Eagle has landed.</H2>
         </>
     </Story>
 </Preview>
diff --git a/packages/components/src/typography/src/Heading.css b/packages/components/src/typography/src/Heading.css
index 4f98c9e63..c0093bd87 100644
--- a/packages/components/src/typography/src/Heading.css
+++ b/packages/components/src/typography/src/Heading.css
@@ -1,44 +1,62 @@
 :where(.o-ui-heading) {
     margin: 0;
     font-size: inherit;
-    font-weight: 400;
-    font-variation-settings: "wght" 600;
     overflow-wrap: break-word;
 }
 
 /* SIZE */
-:where(.o-ui-heading-2xs) {
-    font-size: var(--o-ui-fs-4);
-    line-height: var(--o-ui-lh-3);
-    margin-bottom: calc(var(--o-ui-fs-4) * .5);
-}
-
 :where(.o-ui-heading-xs) {
-    font-size: var(--o-ui-fs-5);
-    line-height: var(--o-ui-lh-4);
+    font-size: var(--hop-heading-xs-font-size);
+    font-family: var(--hop-heading-xs-font-family);
+    font-weight: var(--hop-heading-xs-font-weight);
+    line-height: var(--hop-heading-xs-line-height);
     margin-bottom: calc(var(--o-ui-fs-5) * .5);
 }
 
 :where(.o-ui-heading-sm) {
-    font-size: var(--o-ui-fs-6);
-    line-height: var(--o-ui-lh-5);
+    font-size: var(--hop-heading-sm-font-size);
+    font-family: var(--hop-heading-sm-font-family);
+    font-weight: var(--hop-heading-sm-font-weight);
+    line-height: var(--hop-heading-sm-line-height);
     margin-bottom: calc(var(--o-ui-fs-6) * .5);
 }
 
 :where(.o-ui-heading-md) {
-    font-size: var(--o-ui-fs-7);
-    line-height: var(--o-ui-lh-5);
+    font-size: var(--hop-heading-md-font-size);
+    font-family: var(--hop-heading-md-font-family);
+    font-weight: var(--hop-heading-md-font-weight);
+    line-height: var(--hop-heading-md-line-height);
     margin-bottom: calc(var(--o-ui-fs-7) * .5);
 }
 
 :where(.o-ui-heading-lg) {
-    font-size: var(--o-ui-fs-8);
-    line-height: var(--o-ui-lh-6);
+    font-size: var(--hop-heading-lg-font-size);
+    font-family: var(--hop-heading-lg-font-family);
+    font-weight: var(--hop-heading-lg-font-weight);
+    line-height: var(--hop-heading-lg-line-height);
     margin-bottom: calc(var(--o-ui-fs-8) * .5);
 }
 
 :where(.o-ui-heading-xl) {
-    font-size: var(--o-ui-fs-9);
-    line-height: var(--o-ui-lh-2);
+    font-size: var(--hop-heading-xl-font-size);
+    font-family: var(--hop-heading-xl-font-family);
+    font-weight: var(--hop-heading-xl-font-weight);
+    line-height: var(--hop-heading-xl-line-height);
     margin-bottom: calc(var(--o-ui-fs-9) * .5);
 }
+
+:where(.o-ui-heading-2xl) {
+    font-size: var(--hop-heading-2xl-font-size);
+    font-family: var(--hop-heading-2xl-font-family);
+    font-weight: var(--hop-heading-2xl-font-weight);
+    line-height: var(--hop-heading-2xl-line-height);
+    margin-bottom: calc(var(--o-ui-fs-4) * .5);
+}
+
+:where(.o-ui-heading-3xl) {
+    font-size: var(--hop-heading-3xl-font-size);
+    font-family: var(--hop-heading-3xl-font-family);
+    font-weight: var(--hop-heading-3xl-font-weight);
+    line-height: var(--hop-heading-3xl-line-height);
+    margin-bottom: calc(var(--o-ui-fs-4) * .5);
+}
diff --git a/packages/components/src/typography/src/Heading.tsx b/packages/components/src/typography/src/Heading.tsx
index 6cfad8b65..647291329 100644
--- a/packages/components/src/typography/src/Heading.tsx
+++ b/packages/components/src/typography/src/Heading.tsx
@@ -11,7 +11,7 @@ export type AbstractHeadingProps<T extends ElementType> = SlotProps & InternalPr
     /**
      * An heading can vary in size.
      */
-    size?: ResponsiveProp<"2xs" | "xs" | "sm" | "md" | "lg" | "xl">;
+    size?: ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl">;
 };
 
 const DefaultElement = "div";
diff --git a/packages/components/src/typography/src/Paragraph.css b/packages/components/src/typography/src/Paragraph.css
index 521a2888a..a8a26f857 100644
--- a/packages/components/src/typography/src/Paragraph.css
+++ b/packages/components/src/typography/src/Paragraph.css
@@ -1,5 +1,5 @@
 .o-ui-p {
-    font-variation-settings: "wght" 400;
+    font-weight: 400;
     overflow-wrap: break-word;
     margin: 0;
 }
diff --git a/packages/components/src/typography/src/Text.css b/packages/components/src/typography/src/Text.css
index dcac402a6..bbc6332c2 100644
--- a/packages/components/src/typography/src/Text.css
+++ b/packages/components/src/typography/src/Text.css
@@ -1,47 +1,44 @@
 /* SIZE */
 :where(.o-ui-text-xs) {
-    font-size: var(--o-ui-fs-1);
-    line-height: var(--o-ui-lh-2);
+    font-size: var(--hop-body-xs-font-size);
+    font-family: var(--hop-body-xs-font-family);
+    font-weight: var(--hop-body-xs-font-weight);
+    line-height: var(--hop-body-xs-line-height);
 }
 
 :where(.o-ui-text-sm) {
-    font-size: var(--o-ui-fs-2);
-    line-height: var(--o-ui-lh-4);
+    font-size: var(--hop-body-sm-font-size);
+    font-family: var(--hop-body-sm-font-family);
+    font-weight: var(--hop-body-sm-font-weight);
+    line-height: var(--hop-body-sm-line-height);
 }
 
 :where(.o-ui-text-md) {
-    font-size: var(--o-ui-fs-3);
-    line-height: var(--o-ui-lh-5);
+    font-size: var(--hop-body-md-font-size);
+    font-family: var(--hop-body-md-font-family);
+    font-weight: var(--hop-body-md-font-weight);
+    line-height: var(--hop-body-md-line-height);
 }
 
 :where(.o-ui-text-lg) {
-    font-size: var(--o-ui-fs-4);
-    line-height: var(--o-ui-lh-6);
+    font-size: var(--hop-body-lg-font-size);
+    font-family: var(--hop-body-lg-font-family);
+    font-weight: var(--hop-body-lg-font-weight);
+    line-height: var(--hop-body-lg-line-height);
 }
 
 :where(.o-ui-text-xl) {
-    font-size: var(--o-ui-fs-5);
-    line-height: var(--o-ui-lh-4);
+    font-size: var(--hop-body-xl-font-size);
+    font-family: var(--hop-body-xl-font-family);
+    font-weight: var(--hop-body-xl-font-weight);
+    line-height: var(--hop-body-xl-line-height);
 }
 
 :where(.o-ui-text-2xl) {
-    font-size: var(--o-ui-fs-6);
-    line-height: var(--o-ui-lh-5);
-}
-
-:where(.o-ui-text-3xl) {
-    font-size: var(--o-ui-fs-7);
-    line-height: var(--o-ui-lh-5);
-}
-
-:where(.o-ui-text-4xl) {
-    font-size: var(--o-ui-fs-8);
-    line-height: var(--o-ui-lh-3);
-}
-
-:where(.o-ui-text-5xl) {
-    font-size: var(--o-ui-fs-9);
-    line-height: var(--o-ui-lh-2);
+    font-size: var(--hop-body-2xl-font-size);
+    font-family: var(--hop-body-2xl-font-family);
+    font-weight: var(--hop-body-2xl-font-weight);
+    line-height: var(--hop-body-2xl-line-height);
 }
 
 :where(.o-ui-text-inherit-size) {
diff --git a/packages/components/src/typography/src/Text.tsx b/packages/components/src/typography/src/Text.tsx
index 66222d14d..b7ec49bce 100644
--- a/packages/components/src/typography/src/Text.tsx
+++ b/packages/components/src/typography/src/Text.tsx
@@ -9,7 +9,7 @@ export interface InnerTextProps extends SlotProps, InternalProps, StyledComponen
     /**
      * A text can vary in size.
      */
-    size?: ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "inherit">;
+    size?: ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "inherit">;
 }
 
 export function InnerText(props: InnerTextProps) {
diff --git a/packages/components/src/typography/tests/chromatic/Heading.stories.tsx b/packages/components/src/typography/tests/chromatic/Heading.stories.tsx
index 7991d3fa5..2aded4447 100644
--- a/packages/components/src/typography/tests/chromatic/Heading.stories.tsx
+++ b/packages/components/src/typography/tests/chromatic/Heading.stories.tsx
@@ -12,6 +12,8 @@ export const Size: HeadingStory = {
     storyName: "size",
     render: () => (
         <>
+            <Heading size="3xl">I see Earth!<br /> It is so beautiful!</Heading>
+            <Heading size="2xl">I see Earth!<br /> It is so beautiful!</Heading>
             <Heading size="xl">I see Earth!<br /> It is so beautiful!</Heading>
             <Heading size="lg">I see Earth!<br /> It is so beautiful!</Heading>
             <Heading>I see Earth!<br /> It is so beautiful!</Heading>
@@ -36,6 +38,8 @@ export const HeadingH1: HeadingStory = {
     storyName: "h1",
     render: () => (
         <>
+            <H1 size="3xl">I see Earth!<br /> It is so beautiful!</H1>
+            <H1 size="2xl">I see Earth!<br /> It is so beautiful!</H1>
             <H1 size="xl">I see Earth!<br /> It is so beautiful!</H1>
             <H1 size="lg">I see Earth!<br /> It is so beautiful!</H1>
             <H1>I see Earth!<br /> It is so beautiful!</H1>
@@ -49,6 +53,8 @@ export const HeadingH2: HeadingStory = {
     storyName: "h2",
     render: () => (
         <>
+            <H2 size="3xl">I see Earth!<br /> It is so beautiful!</H2>
+            <H2 size="2xl">I see Earth!<br /> It is so beautiful!</H2>
             <H2 size="xl">I see Earth!<br /> It is so beautiful!</H2>
             <H2 size="lg">I see Earth!<br /> It is so beautiful!</H2>
             <H2>I see Earth!<br /> It is so beautiful!</H2>
@@ -62,6 +68,8 @@ export const HeadingH3: HeadingStory = {
     storyName: "h3",
     render: () => (
         <>
+            <H3 size="3xl">I see Earth!<br /> It is so beautiful!</H3>
+            <H3 size="2xl">I see Earth!<br /> It is so beautiful!</H3>
             <H3 size="xl">I see Earth!<br /> It is so beautiful!</H3>
             <H3 size="lg">I see Earth!<br /> It is so beautiful!</H3>
             <H3>I see Earth!<br /> It is so beautiful!</H3>
@@ -75,6 +83,8 @@ export const HeadingH4: HeadingStory = {
     storyName: "h4",
     render: () => (
         <>
+            <H4 size="3xl">I see Earth!<br /> It is so beautiful!</H4>
+            <H4 size="2xl">I see Earth!<br /> It is so beautiful!</H4>
             <H4 size="xl">I see Earth!<br /> It is so beautiful!</H4>
             <H4 size="lg">I see Earth!<br /> It is so beautiful!</H4>
             <H4>I see Earth!<br /> It is so beautiful!</H4>
@@ -88,6 +98,8 @@ export const HeadingH5: HeadingStory = {
     storyName: "h5",
     render: () => (
         <>
+            <H5 size="3xl">I see Earth!<br /> It is so beautiful!</H5>
+            <H5 size="2xl">I see Earth!<br /> It is so beautiful!</H5>
             <H5 size="xl">I see Earth!<br /> It is so beautiful!</H5>
             <H5 size="lg">I see Earth!<br /> It is so beautiful!</H5>
             <H5>I see Earth!<br /> It is so beautiful!</H5>
@@ -101,6 +113,8 @@ export const HeadingH6: HeadingStory = {
     storyName: "h6",
     render: () => (
         <>
+            <H6 size="3xl">I see Earth!<br /> It is so beautiful!</H6>
+            <H6 size="2xl">I see Earth!<br /> It is so beautiful!</H6>
             <H6 size="xl">I see Earth!<br /> It is so beautiful!</H6>
             <H6 size="lg">I see Earth!<br /> It is so beautiful!</H6>
             <H6>I see Earth!<br /> It is so beautiful!</H6>
diff --git a/packages/components/src/typography/tests/chromatic/Text.stories.tsx b/packages/components/src/typography/tests/chromatic/Text.stories.tsx
index 951add435..a4fbe9984 100644
--- a/packages/components/src/typography/tests/chromatic/Text.stories.tsx
+++ b/packages/components/src/typography/tests/chromatic/Text.stories.tsx
@@ -14,9 +14,6 @@ export const Default: TextStory = {
     storyName: "default",
     render: () => (
         <Stack gap="0">
-            <Text size="5xl">There are no passengers on spaceship earth.</Text>
-            <Text size="4xl">There are no passengers on spaceship earth.</Text>
-            <Text size="3xl">There are no passengers on spaceship earth.</Text>
             <Text size="2xl">There are no passengers on spaceship earth.</Text>
             <Text size="xl">There are no passengers on spaceship earth.</Text>
             <Text size="lg">There are no passengers on spaceship earth.</Text>
diff --git a/packages/css/src/font/assets/abc-favorit-mono/ABCFavoritMono-Regular.otf b/packages/css/src/font/assets/abc-favorit-mono/ABCFavoritMono-Regular.otf
new file mode 100644
index 000000000..8f0445633
Binary files /dev/null and b/packages/css/src/font/assets/abc-favorit-mono/ABCFavoritMono-Regular.otf differ
diff --git a/packages/css/src/font/assets/abc-favorit-mono/ABCFavoritMono-Regular.woff b/packages/css/src/font/assets/abc-favorit-mono/ABCFavoritMono-Regular.woff
new file mode 100644
index 000000000..0010c1aef
Binary files /dev/null and b/packages/css/src/font/assets/abc-favorit-mono/ABCFavoritMono-Regular.woff differ
diff --git a/packages/css/src/font/assets/abc-favorit-mono/ABCFavoritMono-Regular.woff2 b/packages/css/src/font/assets/abc-favorit-mono/ABCFavoritMono-Regular.woff2
new file mode 100644
index 000000000..94956a9c4
Binary files /dev/null and b/packages/css/src/font/assets/abc-favorit-mono/ABCFavoritMono-Regular.woff2 differ
diff --git a/packages/css/src/font/assets/abc-favorit/ABCFavorit-Bold.otf b/packages/css/src/font/assets/abc-favorit/ABCFavorit-Bold.otf
new file mode 100644
index 000000000..bf932ef01
Binary files /dev/null and b/packages/css/src/font/assets/abc-favorit/ABCFavorit-Bold.otf differ
diff --git a/packages/css/src/font/assets/abc-favorit/ABCFavorit-Bold.woff b/packages/css/src/font/assets/abc-favorit/ABCFavorit-Bold.woff
new file mode 100644
index 000000000..77ffa804a
Binary files /dev/null and b/packages/css/src/font/assets/abc-favorit/ABCFavorit-Bold.woff differ
diff --git a/packages/css/src/font/assets/abc-favorit/ABCFavorit-Bold.woff2 b/packages/css/src/font/assets/abc-favorit/ABCFavorit-Bold.woff2
new file mode 100644
index 000000000..74d8056b6
Binary files /dev/null and b/packages/css/src/font/assets/abc-favorit/ABCFavorit-Bold.woff2 differ
diff --git a/packages/css/src/font/assets/abc-favorit/ABCFavorit-Medium.otf b/packages/css/src/font/assets/abc-favorit/ABCFavorit-Medium.otf
new file mode 100644
index 000000000..b287ad2cf
Binary files /dev/null and b/packages/css/src/font/assets/abc-favorit/ABCFavorit-Medium.otf differ
diff --git a/packages/css/src/font/assets/abc-favorit/ABCFavorit-Medium.woff b/packages/css/src/font/assets/abc-favorit/ABCFavorit-Medium.woff
new file mode 100644
index 000000000..baba91eb4
Binary files /dev/null and b/packages/css/src/font/assets/abc-favorit/ABCFavorit-Medium.woff differ
diff --git a/packages/css/src/font/assets/abc-favorit/ABCFavorit-Medium.woff2 b/packages/css/src/font/assets/abc-favorit/ABCFavorit-Medium.woff2
new file mode 100644
index 000000000..a8eb04c1d
Binary files /dev/null and b/packages/css/src/font/assets/abc-favorit/ABCFavorit-Medium.woff2 differ
diff --git a/packages/css/src/font/assets/abc-favorit/ABCFavorit-Regular.otf b/packages/css/src/font/assets/abc-favorit/ABCFavorit-Regular.otf
new file mode 100644
index 000000000..0efaf72ce
Binary files /dev/null and b/packages/css/src/font/assets/abc-favorit/ABCFavorit-Regular.otf differ
diff --git a/packages/css/src/font/assets/abc-favorit/ABCFavorit-Regular.woff b/packages/css/src/font/assets/abc-favorit/ABCFavorit-Regular.woff
new file mode 100644
index 000000000..5759443d4
Binary files /dev/null and b/packages/css/src/font/assets/abc-favorit/ABCFavorit-Regular.woff differ
diff --git a/packages/css/src/font/assets/abc-favorit/ABCFavorit-Regular.woff2 b/packages/css/src/font/assets/abc-favorit/ABCFavorit-Regular.woff2
new file mode 100644
index 000000000..90b7add1b
Binary files /dev/null and b/packages/css/src/font/assets/abc-favorit/ABCFavorit-Regular.woff2 differ
diff --git a/packages/css/src/font/assets/inter/Inter-Bold.otf b/packages/css/src/font/assets/inter/Inter-Bold.otf
new file mode 100644
index 000000000..ed9019a5a
Binary files /dev/null and b/packages/css/src/font/assets/inter/Inter-Bold.otf differ
diff --git a/packages/css/src/font/assets/inter/Inter-BoldItalic.otf b/packages/css/src/font/assets/inter/Inter-BoldItalic.otf
new file mode 100644
index 000000000..be8a3d3c9
Binary files /dev/null and b/packages/css/src/font/assets/inter/Inter-BoldItalic.otf differ
diff --git a/packages/css/src/font/assets/inter/Inter-Medium.otf b/packages/css/src/font/assets/inter/Inter-Medium.otf
new file mode 100644
index 000000000..01b0b4ae6
Binary files /dev/null and b/packages/css/src/font/assets/inter/Inter-Medium.otf differ
diff --git a/packages/css/src/font/assets/inter/Inter-MediumItalic.otf b/packages/css/src/font/assets/inter/Inter-MediumItalic.otf
new file mode 100644
index 000000000..abd98779d
Binary files /dev/null and b/packages/css/src/font/assets/inter/Inter-MediumItalic.otf differ
diff --git a/packages/css/src/font/assets/inter/Inter-Regular.otf b/packages/css/src/font/assets/inter/Inter-Regular.otf
new file mode 100644
index 000000000..e94fa4541
Binary files /dev/null and b/packages/css/src/font/assets/inter/Inter-Regular.otf differ
diff --git a/packages/css/src/font/assets/inter/Inter-SemiBold.otf b/packages/css/src/font/assets/inter/Inter-SemiBold.otf
new file mode 100644
index 000000000..23294024c
Binary files /dev/null and b/packages/css/src/font/assets/inter/Inter-SemiBold.otf differ
diff --git a/packages/css/src/font/assets/inter/Inter-SemiBoldItalic.otf b/packages/css/src/font/assets/inter/Inter-SemiBoldItalic.otf
new file mode 100644
index 000000000..2137d6533
Binary files /dev/null and b/packages/css/src/font/assets/inter/Inter-SemiBoldItalic.otf differ
diff --git a/packages/css/src/font/index.css b/packages/css/src/font/index.css
index 2fc0e7ed3..6e20a8391 100644
--- a/packages/css/src/font/index.css
+++ b/packages/css/src/font/index.css
@@ -1,14 +1,75 @@
-/* FONT */
 @font-face {
-    src: url("https://assets.sharegate.com/shared/brand/fonts/interphases/TT-Interphases-Var-Roman.woff2") format("woff2-variations");
-    font-family: "TT Interphases Variable";
+    font-family: "Inter";
     font-style: normal;
-    font-display: swap;
+    font-weight: 410;
+    src: url("./assets/inter/Inter-Regular.otf") format("opentype");
+    font-display: fallback;
 }
 
 @font-face {
-    src: url("https://assets.sharegate.com/shared/brand/fonts/interphases/TT-Interphases-Var-Italic.woff2") format("woff2-variations");
-    font-family: "TT Interphases Variable";
-    font-style: italic;
-    font-display: swap;
+    font-family: "Inter";
+    font-style: normal;
+    font-weight: 505;
+    src: url("./assets/inter/Inter-Medium.otf") format("opentype");
+    font-display: fallback;
+}
+
+@font-face {
+    font-family: "Inter";
+    font-style: normal;
+    font-weight: 590;
+    src: url("./assets/inter/Inter-SemiBold.otf") format("opentype");
+    font-display: fallback;
+}
+
+@font-face {
+    font-family: "Inter";
+    font-style: normal;
+    font-weight: 690;
+    src: url("./assets/inter/Inter-Bold.otf") format("opentype");
+    font-display: fallback;
+}
+
+@font-face {
+    font-family: "ABC Favorit Mono";
+    font-style: normal;
+    font-weight: 400;
+    src:
+        url("./assets/abc-favorit-mono/ABCFavoritMono-Regular.otf") format("opentype"),
+        url("./assets/abc-favorit-mono/ABCFavoritMono-Regular.woff") format("woff"),
+        url("./assets/abc-favorit-mono/ABCFavoritMono-Regular.woff2") format("woff2");
+    font-display: fallback;
+}
+
+@font-face {
+    font-family: "ABC Favorit";
+    font-style: normal;
+    font-weight: 410;
+    src:
+        url("./assets/abc-favorit/ABCFavorit-Regular.otf") format("opentype"),
+        url("./assets/abc-favorit/ABCFavorit-Regular.woff") format("woff"),
+        url("./assets/abc-favorit/ABCFavorit-Regular.woff2") format("woff2");
+    font-display: fallback;
+}
+
+@font-face {
+    font-family: "ABC Favorit";
+    font-style: normal;
+    font-weight: 580;
+    src:
+        url("./assets/abc-favorit/ABCFavorit-Medium.otf") format("opentype"),
+        url("./assets/abc-favorit/ABCFavorit-Medium.woff") format("woff"),
+        url("./assets/abc-favorit/ABCFavorit-Medium.woff2") format("woff2");
+    font-display: fallback;
+}
+
+@font-face {
+    font-family: "ABC Favorit";
+    font-style: normal;
+    font-weight: 680;
+    src:
+        url("./assets/abc-favorit/ABCFavorit-Bold.otf") format("opentype"),
+        url("./assets/abc-favorit/ABCFavorit-Bold.woff") format("woff"),
+        url("./assets/abc-favorit/ABCFavorit-Bold.woff2") format("woff2");
+    font-display: fallback;
 }
diff --git a/packages/css/src/normalize.css b/packages/css/src/normalize.css
index 67719faa4..193158821 100644
--- a/packages/css/src/normalize.css
+++ b/packages/css/src/normalize.css
@@ -1,5 +1,5 @@
 body {
-    font-family: "TT Interphases Variable", Arial, Helvetica, sans-serif;
+    font-family: "Inter", Arial, Helvetica, sans-serif;
     font-size: 16px;
     margin: 0;
     padding: 0;