diff --git a/src/theme/font-spec/specs/lifesg-font-spec-set.ts b/src/theme/font-spec/specs/lifesg-font-spec-set.ts
new file mode 100644
index 000000000..84c161d03
--- /dev/null
+++ b/src/theme/font-spec/specs/lifesg-font-spec-set.ts
@@ -0,0 +1,55 @@
+import { FontSpecSet } from "../types";
+
+// Pending for different font styling
+export const LifeSgFontSpecSet: FontSpecSet = {
+    "header-size-xxl": "3rem",
+    "header-size-xl": "2.5rem",
+    "header-size-lg": "2rem",
+    "header-size-md": "1.625rem",
+    "header-size-sm": "1.375rem",
+    "header-size-xs": "1.125rem",
+
+    "header-lh-xxl": "3.5rem",
+    "header-lh-xl": "3rem",
+    "header-lh-lg": "2.5rem",
+    "header-lh-md": "2.25rem",
+    "header-lh-sm": "1.75rem",
+    "header-lh-xs": "1.625rem",
+
+    "header-ls-xxl": "-0.056rem",
+    "header-ls-xl": "-0.032rem",
+    "header-ls-lg": "-0.032rem",
+    "header-ls-md": "0rem",
+    "header-ls-sm": "0rem",
+    "header-ls-xs": "0rem",
+
+    "weight-light": "300",
+    "weight-regular": "400",
+    "weight-semibold": "600",
+    "weight-bold": "700",
+    "font-family": "Open Sans",
+
+    "body-size-baseline": "1.125rem",
+    "body-size-lg": "1rem",
+    "body-size-md": "0.875rem",
+    "body-size-sm": "0.75rem",
+
+    "body-lh-baseline": "1.625rem",
+    "body-lh-lg": "1.5rem",
+    "body-lh-md": "1.6rem",
+    "body-lh-sm": "1.2rem",
+
+    "body-ls-baseline": "0rem",
+    "body-ls-lg": "0.014rem",
+    "body-ls-md": "0.012rem",
+    "body-ls-sm": "0.012rem",
+
+    "formlabel-size-baseline": "1rem",
+    "formlabel-size-lg": "1.125rem",
+
+    "formlabel-lh-baseline": "1.5rem",
+    "formlabel-lh-lg": "1.625rem",
+
+    "formlabel-ls-baseline": "0.014rem",
+    "formlabel-ls-lg": "0rem",
+};
diff --git a/src/theme/font-spec/theme-helper.ts b/src/theme/font-spec/theme-helper.ts
new file mode 100644
index 000000000..d1e927f85
--- /dev/null
+++ b/src/theme/font-spec/theme-helper.ts
@@ -0,0 +1,87 @@
+import { StyledComponentProps, getCollection } from "../helpers";
+import { FontScheme, ThemeCollectionSpec } from "../types";
+import { LifeSgFontSpecSet } from "./specs/lifesg-font-spec-set";
+import { getValue } from "../helpers";
+import { FontSpecCollectionMap, FontSpecSet } from "./types";
+
+const FontSpec: ThemeCollectionSpec<FontSpecCollectionMap, FontScheme> = {
+    collections: {
+        lifesg: LifeSgFontSpecSet,
+        bookingsg: LifeSgFontSpecSet,
+        rbs: LifeSgFontSpecSet,
+        mylegacy: LifeSgFontSpecSet,
+        ccube: LifeSgFontSpecSet,
+    },
+    defaultValue: "lifesg",
+};
+
+export const getFontSpec = (key: keyof FontSpecSet) => {
+    return (props: StyledComponentProps): string => {
+        const theme = props.theme;
+        const fontSpecSet: FontSpecSet = getCollection(
+            FontSpec,
+            theme.fontScheme
+        );
+
+        if (theme.overrides && theme.overrides.fontSpec) {
+            return getValue(fontSpecSet, key, theme.overrides.fontSpec);
+        } else {
+            return fontSpecSet[key];
+        }
+    };
+};
+
+export const FontSpecValues: {
+    [key in keyof FontSpecSet]: (props: StyledComponentProps) => string;
+} = {
+    "header-size-xxl": getFontSpec("header-size-xxl"),
+    "header-size-xl": getFontSpec("header-size-xl"),
+    "header-size-lg": getFontSpec("header-size-lg"),
+    "header-size-md": getFontSpec("header-size-md"),
+    "header-size-sm": getFontSpec("header-size-sm"),
+    "header-size-xs": getFontSpec("header-size-xs"),
+
+    "header-lh-xxl": getFontSpec("header-lh-xxl"),
+    "header-lh-xl": getFontSpec("header-lh-xl"),
+    "header-lh-lg": getFontSpec("header-lh-lg"),
+    "header-lh-md": getFontSpec("header-lh-md"),
+    "header-lh-sm": getFontSpec("header-lh-sm"),
+    "header-lh-xs": getFontSpec("header-lh-xs"),
+
+    "header-ls-xxl": getFontSpec("header-ls-xxl"),
+    "header-ls-xl": getFontSpec("header-ls-xl"),
+    "header-ls-lg": getFontSpec("header-ls-lg"),
+    "header-ls-md": getFontSpec("header-ls-md"),
+    "header-ls-sm": getFontSpec("header-ls-sm"),
+    "header-ls-xs": getFontSpec("header-ls-xs"),
+
+    "weight-light": getFontSpec("weight-light"),
+    "weight-regular": getFontSpec("weight-regular"),
+    "weight-semibold": getFontSpec("weight-semibold"),
+    "weight-bold": getFontSpec("weight-bold"),
+    "font-family": getFontSpec("font-family"),
+
+    "body-size-baseline": getFontSpec("body-size-baseline"),
+    "body-size-lg": getFontSpec("body-size-lg"),
+    "body-size-md": getFontSpec("body-size-md"),
+    "body-size-sm": getFontSpec("body-size-sm"),
+
+    "body-lh-baseline": getFontSpec("body-lh-baseline"),
+    "body-lh-lg": getFontSpec("body-lh-lg"),
+    "body-lh-md": getFontSpec("body-lh-md"),
+    "body-lh-sm": getFontSpec("body-lh-sm"),
+
+    "body-ls-baseline": getFontSpec("body-ls-baseline"),
+    "body-ls-lg": getFontSpec("body-ls-lg"),
+    "body-ls-md": getFontSpec("body-ls-md"),
+    "body-ls-sm": getFontSpec("body-ls-sm"),
+
+    "formlabel-size-baseline": getFontSpec("formlabel-size-baseline"),
+    "formlabel-size-lg": getFontSpec("formlabel-size-lg"),
+
+    "formlabel-lh-baseline": getFontSpec("formlabel-lh-baseline"),
+    "formlabel-lh-lg": getFontSpec("formlabel-lh-lg"),
+
+    "formlabel-ls-baseline": getFontSpec("formlabel-ls-baseline"),
+    "formlabel-ls-lg": getFontSpec("formlabel-ls-lg"),
+};
diff --git a/src/theme/font-spec/types.ts b/src/theme/font-spec/types.ts
new file mode 100644
index 000000000..80ade6406
--- /dev/null
+++ b/src/theme/font-spec/types.ts
@@ -0,0 +1,72 @@
+import { FontScheme } from "../types";
+
+export type FontSpecCollectionMap = {
+    [key in FontScheme]: FontSpecSet;
+};
+
+export type FontSpecSetOptions = Partial<FontSpecSet>;
+
+export type FontSpecSet = {
+    // Header sizes
+    "header-size-xxl": string;
+    "header-size-xl": string;
+    "header-size-lg": string;
+    "header-size-md": string;
+    "header-size-sm": string;
+    "header-size-xs": string;
+
+    // Header line heights
+    "header-lh-xxl": string;
+    "header-lh-xl": string;
+    "header-lh-lg": string;
+    "header-lh-md": string;
+    "header-lh-sm": string;
+    "header-lh-xs": string;
+
+    // Header letter spacing
+    "header-ls-xxl": string;
+    "header-ls-xl": string;
+    "header-ls-lg": string;
+    "header-ls-md": string;
+    "header-ls-sm": string;
+    "header-ls-xs": string;
+
+    // Font weights
+    "weight-light": string;
+    "weight-regular": string;
+    "weight-semibold": string;
+    "weight-bold": string;
+
+    // Font family
+    "font-family": string;
+
+    // Body sizes
+    "body-size-baseline": string;
+    "body-size-lg": string;
+    "body-size-md": string;
+    "body-size-sm": string;
+
+    // Body line heights
+    "body-lh-baseline": string;
+    "body-lh-lg": string;
+    "body-lh-md": string;
+    "body-lh-sm": string;
+
+    // Body letter spacing
+    "body-ls-baseline": string;
+    "body-ls-lg": string;
+    "body-ls-md": string;
+    "body-ls-sm": string;
+
+    // Form label sizes
+    "formlabel-size-baseline": string;
+    "formlabel-size-lg": string;
+
+    // Form label line heights
+    "formlabel-lh-baseline": string;
+    "formlabel-lh-lg": string;
+
+    // Form label letter spacing
+    "formlabel-ls-baseline": string;
+    "formlabel-ls-lg": string;
+};
diff --git a/src/theme/font/specs/lifesg-font-set.ts b/src/theme/font/specs/lifesg-font-set.ts
index ebf6586f1..d9b7026b8 100644
--- a/src/theme/font/specs/lifesg-font-set.ts
+++ b/src/theme/font/specs/lifesg-font-set.ts
@@ -1,55 +1,273 @@
-import { FontSet } from "../types";
-
-// Pending for different font styling
-export const LifeSgFontSet: FontSet = {
-    "header-size-xxl": "3rem",
-    "header-size-xl": "2.5rem",
-    "header-size-lg": "2rem",
-    "header-size-md": "1.625rem",
-    "header-size-sm": "1.375rem",
-    "header-size-xs": "1.125rem",
-
-    "header-lh-xxl": "3.5rem",
-    "header-lh-xl": "3rem",
-    "header-lh-lg": "2.5rem",
-    "header-lh-md": "2.25rem",
-    "header-lh-sm": "1.75rem",
-    "header-lh-xs": "1.625rem",
-
-    "header-ls-xxl": "-0.056rem",
-    "header-ls-xl": "-0.032rem",
-    "header-ls-lg": "-0.032rem",
-    "header-ls-md": "0rem",
-    "header-ls-sm": "0rem",
-    "header-ls-xs": "0rem",
-
-    "weight-light": "300",
-    "weight-regular": "400",
-    "weight-semibold": "600",
-    "weight-bold": "700",
-    "font-family": "Open Sans",
+import { css } from "styled-components";
 
-    "body-size-baseline": "1.125rem",
-    "body-size-lg": "1rem",
-    "body-size-md": "0.875rem",
-    "body-size-sm": "0.75rem",
-
-    "body-lh-baseline": "1.625rem",
-    "body-lh-lg": "1.5rem",
-    "body-lh-md": "1.6rem",
-    "body-lh-sm": "1.2rem",
-
-    "body-ls-baseline": "0rem",
-    "body-ls-lg": "0.014rem",
-    "body-ls-md": "0.012rem",
-    "body-ls-sm": "0.012rem",
-
-    "formlabel-size-baseline": "1rem",
-    "formlabel-size-lg": "1.125rem",
+import { getFontSpec } from "../../font-spec/theme-helper";
+import { FontSpecSet } from "../../font-spec/types";
+import { FontSet } from "../types";
 
-    "formlabel-lh-baseline": "1.5rem",
-    "formlabel-lh-lg": "1.625rem",
+const generateFontCSS = (
+    fontSizeKey: keyof FontSpecSet,
+    fontWeightKey: keyof FontSpecSet,
+    lineHeightKey: keyof FontSpecSet,
+    letterSpacingKey: keyof FontSpecSet
+) => css`
+    font-family: ${getFontSpec("font-family")};
+    font-size: ${getFontSpec(fontSizeKey)};
+    font-weight: ${getFontSpec(fontWeightKey)};
+    line-height: ${getFontSpec(lineHeightKey)};
+    letter-spacing: ${getFontSpec(letterSpacingKey)};
+`;
 
-    "formlabel-ls-baseline": "0.014rem",
-    "formlabel-ls-lg": "0rem",
+export const LifeSgFontSet: FontSet = {
+    "header-xxl-light": generateFontCSS(
+        "header-size-xxl",
+        "weight-light",
+        "header-lh-xxl",
+        "header-ls-xxl"
+    ),
+    "header-xxl-regular": generateFontCSS(
+        "header-size-xxl",
+        "weight-regular",
+        "header-lh-xxl",
+        "header-ls-xxl"
+    ),
+    "header-xxl-semibold": generateFontCSS(
+        "header-size-xxl",
+        "weight-semibold",
+        "header-lh-xxl",
+        "header-ls-xxl"
+    ),
+    "header-xxl-bold": generateFontCSS(
+        "header-size-xxl",
+        "weight-bold",
+        "header-lh-xxl",
+        "header-ls-xxl"
+    ),
+    "header-xl-light": generateFontCSS(
+        "header-size-xl",
+        "weight-light",
+        "header-lh-xl",
+        "header-ls-xl"
+    ),
+    "header-xl-regular": generateFontCSS(
+        "header-size-xl",
+        "weight-regular",
+        "header-lh-xl",
+        "header-ls-xl"
+    ),
+    "header-xl-semibold": generateFontCSS(
+        "header-size-xl",
+        "weight-semibold",
+        "header-lh-xl",
+        "header-ls-xl"
+    ),
+    "header-xl-bold": generateFontCSS(
+        "header-size-xl",
+        "weight-bold",
+        "header-lh-xl",
+        "header-ls-xl"
+    ),
+    "header-lg-light": generateFontCSS(
+        "header-size-lg",
+        "weight-light",
+        "header-lh-lg",
+        "header-ls-lg"
+    ),
+    "header-lg-regular": generateFontCSS(
+        "header-size-lg",
+        "weight-regular",
+        "header-lh-lg",
+        "header-ls-lg"
+    ),
+    "header-lg-semibold": generateFontCSS(
+        "header-size-lg",
+        "weight-semibold",
+        "header-lh-lg",
+        "header-ls-lg"
+    ),
+    "header-lg-bold": generateFontCSS(
+        "header-size-lg",
+        "weight-bold",
+        "header-lh-lg",
+        "header-ls-lg"
+    ),
+    "header-md-light": generateFontCSS(
+        "header-size-md",
+        "weight-light",
+        "header-lh-md",
+        "header-ls-md"
+    ),
+    "header-md-regular": generateFontCSS(
+        "header-size-md",
+        "weight-regular",
+        "header-lh-md",
+        "header-ls-md"
+    ),
+    "header-md-semibold": generateFontCSS(
+        "header-size-md",
+        "weight-semibold",
+        "header-lh-md",
+        "header-ls-md"
+    ),
+    "header-md-bold": generateFontCSS(
+        "header-size-md",
+        "weight-bold",
+        "header-lh-md",
+        "header-ls-md"
+    ),
+    "header-sm-light": generateFontCSS(
+        "header-size-sm",
+        "weight-light",
+        "header-lh-sm",
+        "header-ls-sm"
+    ),
+    "header-sm-regular": generateFontCSS(
+        "header-size-sm",
+        "weight-regular",
+        "header-lh-sm",
+        "header-ls-sm"
+    ),
+    "header-sm-semibold": generateFontCSS(
+        "header-size-sm",
+        "weight-semibold",
+        "header-lh-sm",
+        "header-ls-sm"
+    ),
+    "header-sm-bold": generateFontCSS(
+        "header-size-sm",
+        "weight-bold",
+        "header-lh-sm",
+        "header-ls-sm"
+    ),
+    "header-xs-light": generateFontCSS(
+        "header-size-xs",
+        "weight-light",
+        "header-lh-xs",
+        "header-ls-xs"
+    ),
+    "header-xs-regular": generateFontCSS(
+        "header-size-xs",
+        "weight-regular",
+        "header-lh-xs",
+        "header-ls-xs"
+    ),
+    "header-xs-semibold": generateFontCSS(
+        "header-size-xs",
+        "weight-semibold",
+        "header-lh-xs",
+        "header-ls-xs"
+    ),
+    "header-xs-bold": generateFontCSS(
+        "header-size-xs",
+        "weight-bold",
+        "header-lh-xs",
+        "header-ls-xs"
+    ),
+    "body-baseline-light": generateFontCSS(
+        "body-size-baseline",
+        "weight-light",
+        "body-lh-baseline",
+        "body-ls-baseline"
+    ),
+    "body-baseline-regular": generateFontCSS(
+        "body-size-baseline",
+        "weight-regular",
+        "body-lh-baseline",
+        "body-ls-baseline"
+    ),
+    "body-baseline-semibold": generateFontCSS(
+        "body-size-baseline",
+        "weight-semibold",
+        "body-lh-baseline",
+        "body-ls-baseline"
+    ),
+    "body-baseline-bold": generateFontCSS(
+        "body-size-baseline",
+        "weight-bold",
+        "body-lh-baseline",
+        "body-ls-baseline"
+    ),
+    "body-lg-light": generateFontCSS(
+        "body-size-lg",
+        "weight-light",
+        "body-lh-lg",
+        "body-ls-lg"
+    ),
+    "body-lg-regular": generateFontCSS(
+        "body-size-lg",
+        "weight-regular",
+        "body-lh-lg",
+        "body-ls-lg"
+    ),
+    "body-lg-semibold": generateFontCSS(
+        "body-size-lg",
+        "weight-semibold",
+        "body-lh-lg",
+        "body-ls-lg"
+    ),
+    "body-lg-bold": generateFontCSS(
+        "body-size-lg",
+        "weight-bold",
+        "body-lh-lg",
+        "body-ls-lg"
+    ),
+    "body-md-light": generateFontCSS(
+        "body-size-md",
+        "weight-light",
+        "body-lh-md",
+        "body-ls-md"
+    ),
+    "body-md-regular": generateFontCSS(
+        "body-size-md",
+        "weight-regular",
+        "body-lh-md",
+        "body-ls-md"
+    ),
+    "body-md-semibold": generateFontCSS(
+        "body-size-md",
+        "weight-semibold",
+        "body-lh-md",
+        "body-ls-md"
+    ),
+    "body-md-bold": generateFontCSS(
+        "body-size-md",
+        "weight-bold",
+        "body-lh-md",
+        "body-ls-md"
+    ),
+    "body-sm-light": generateFontCSS(
+        "body-size-sm",
+        "weight-light",
+        "body-lh-sm",
+        "body-ls-sm"
+    ),
+    "body-sm-regular": generateFontCSS(
+        "body-size-sm",
+        "weight-regular",
+        "body-lh-sm",
+        "body-ls-sm"
+    ),
+    "body-sm-semibold": generateFontCSS(
+        "body-size-sm",
+        "weight-semibold",
+        "body-lh-sm",
+        "body-ls-sm"
+    ),
+    "body-sm-bold": generateFontCSS(
+        "body-size-sm",
+        "weight-bold",
+        "body-lh-sm",
+        "body-ls-sm"
+    ),
+    "formlabel-baseline-semibold": generateFontCSS(
+        "formlabel-size-baseline",
+        "weight-semibold",
+        "formlabel-lh-baseline",
+        "formlabel-ls-baseline"
+    ),
+    "formlabel-lg-semibold": generateFontCSS(
+        "formlabel-size-lg",
+        "weight-semibold",
+        "formlabel-lh-lg",
+        "formlabel-ls-lg"
+    ),
 };
diff --git a/src/theme/font/theme-helper.ts b/src/theme/font/theme-helper.ts
index 97972f393..f5c2e5d51 100644
--- a/src/theme/font/theme-helper.ts
+++ b/src/theme/font/theme-helper.ts
@@ -1,7 +1,7 @@
-import { StyledComponentProps, getCollection } from "../helpers";
+import { CSSProp } from "styled-components";
+import { StyledComponentProps, getCollection, getValue } from "../helpers";
 import { FontScheme, ThemeCollectionSpec } from "../types";
 import { LifeSgFontSet } from "./specs/lifesg-font-set";
-import { getValue } from "../helpers";
 import { FontCollectionMap, FontSet } from "./types";
 
 const FontSpec: ThemeCollectionSpec<FontCollectionMap, FontScheme> = {
@@ -15,70 +15,77 @@ const FontSpec: ThemeCollectionSpec<FontCollectionMap, FontScheme> = {
     defaultValue: "lifesg",
 };
 
-export const getFontValues = (key: keyof FontSet) => {
-    return (props: StyledComponentProps): string => {
+export const getFont = (key: keyof FontSet) => {
+    return (props: StyledComponentProps): CSSProp | string => {
         const theme = props.theme;
         const fontSet: FontSet = getCollection(FontSpec, theme.fontScheme);
 
-        if (theme.overrides && theme.overrides.font) {
-            return getValue(fontSet, key, theme.overrides.font);
-        } else {
-            return fontSet[key];
-        }
+        // Check for an override
+        const fontValue =
+            theme.overrides && theme.overrides.font
+                ? getValue(fontSet, key, theme.overrides.font)
+                : fontSet[key];
+
+        // If function, resolve with props
+        return typeof fontValue === "function"
+            ? (fontValue as (props: any) => string)(props)
+            : fontValue;
     };
 };
 
 export const FontValues: {
-    [key in keyof FontSet]: (props: StyledComponentProps) => string;
+    [key in keyof FontSet]: (props: StyledComponentProps) => CSSProp;
 } = {
-    "header-size-xxl": getFontValues("header-size-xxl"),
-    "header-size-xl": getFontValues("header-size-xl"),
-    "header-size-lg": getFontValues("header-size-lg"),
-    "header-size-md": getFontValues("header-size-md"),
-    "header-size-sm": getFontValues("header-size-sm"),
-    "header-size-xs": getFontValues("header-size-xs"),
+    "header-xxl-light": getFont("header-xxl-light"),
+    "header-xxl-regular": getFont("header-xxl-regular"),
+    "header-xxl-semibold": getFont("header-xxl-semibold"),
+    "header-xxl-bold": getFont("header-xxl-bold"),
+
+    "header-xl-light": getFont("header-xl-light"),
+    "header-xl-regular": getFont("header-xl-regular"),
+    "header-xl-semibold": getFont("header-xl-semibold"),
+    "header-xl-bold": getFont("header-xl-bold"),
 
-    "header-lh-xxl": getFontValues("header-lh-xxl"),
-    "header-lh-xl": getFontValues("header-lh-xl"),
-    "header-lh-lg": getFontValues("header-lh-lg"),
-    "header-lh-md": getFontValues("header-lh-md"),
-    "header-lh-sm": getFontValues("header-lh-sm"),
-    "header-lh-xs": getFontValues("header-lh-xs"),
+    "header-lg-light": getFont("header-lg-light"),
+    "header-lg-regular": getFont("header-lg-regular"),
+    "header-lg-semibold": getFont("header-lg-semibold"),
+    "header-lg-bold": getFont("header-lg-bold"),
 
-    "header-ls-xxl": getFontValues("header-ls-xxl"),
-    "header-ls-xl": getFontValues("header-ls-xl"),
-    "header-ls-lg": getFontValues("header-ls-lg"),
-    "header-ls-md": getFontValues("header-ls-md"),
-    "header-ls-sm": getFontValues("header-ls-sm"),
-    "header-ls-xs": getFontValues("header-ls-xs"),
+    "header-md-light": getFont("header-md-light"),
+    "header-md-regular": getFont("header-md-regular"),
+    "header-md-semibold": getFont("header-md-semibold"),
+    "header-md-bold": getFont("header-md-bold"),
 
-    "weight-light": getFontValues("weight-light"),
-    "weight-regular": getFontValues("weight-regular"),
-    "weight-semibold": getFontValues("weight-semibold"),
-    "weight-bold": getFontValues("weight-bold"),
-    "font-family": getFontValues("font-family"),
+    "header-sm-light": getFont("header-sm-light"),
+    "header-sm-regular": getFont("header-sm-regular"),
+    "header-sm-semibold": getFont("header-sm-semibold"),
+    "header-sm-bold": getFont("header-sm-bold"),
 
-    "body-size-baseline": getFontValues("body-size-baseline"),
-    "body-size-lg": getFontValues("body-size-lg"),
-    "body-size-md": getFontValues("body-size-md"),
-    "body-size-sm": getFontValues("body-size-sm"),
+    "header-xs-light": getFont("header-xs-light"),
+    "header-xs-regular": getFont("header-xs-regular"),
+    "header-xs-semibold": getFont("header-xs-semibold"),
+    "header-xs-bold": getFont("header-xs-bold"),
 
-    "body-lh-baseline": getFontValues("body-lh-baseline"),
-    "body-lh-lg": getFontValues("body-lh-lg"),
-    "body-lh-md": getFontValues("body-lh-md"),
-    "body-lh-sm": getFontValues("body-lh-sm"),
+    "body-baseline-light": getFont("body-baseline-light"),
+    "body-baseline-regular": getFont("body-baseline-regular"),
+    "body-baseline-semibold": getFont("body-baseline-semibold"),
+    "body-baseline-bold": getFont("body-baseline-bold"),
 
-    "body-ls-baseline": getFontValues("body-ls-baseline"),
-    "body-ls-lg": getFontValues("body-ls-lg"),
-    "body-ls-md": getFontValues("body-ls-md"),
-    "body-ls-sm": getFontValues("body-ls-sm"),
+    "body-lg-light": getFont("body-lg-light"),
+    "body-lg-regular": getFont("body-lg-regular"),
+    "body-lg-semibold": getFont("body-lg-semibold"),
+    "body-lg-bold": getFont("body-lg-bold"),
 
-    "formlabel-size-baseline": getFontValues("formlabel-size-baseline"),
-    "formlabel-size-lg": getFontValues("formlabel-size-lg"),
+    "body-md-light": getFont("body-md-light"),
+    "body-md-regular": getFont("body-md-regular"),
+    "body-md-semibold": getFont("body-md-semibold"),
+    "body-md-bold": getFont("body-md-bold"),
 
-    "formlabel-lh-baseline": getFontValues("formlabel-lh-baseline"),
-    "formlabel-lh-lg": getFontValues("formlabel-lh-lg"),
+    "body-sm-light": getFont("body-sm-light"),
+    "body-sm-regular": getFont("body-sm-regular"),
+    "body-sm-semibold": getFont("body-sm-semibold"),
+    "body-sm-bold": getFont("body-sm-bold"),
 
-    "formlabel-ls-baseline": getFontValues("formlabel-ls-baseline"),
-    "formlabel-ls-lg": getFontValues("formlabel-ls-lg"),
+    "formlabel-baseline-semibold": getFont("formlabel-baseline-semibold"),
+    "formlabel-lg-semibold": getFont("formlabel-lg-semibold"),
 };
diff --git a/src/theme/font/types.ts b/src/theme/font/types.ts
index bbd36f225..01ad52181 100644
--- a/src/theme/font/types.ts
+++ b/src/theme/font/types.ts
@@ -1,3 +1,4 @@
+import { CSSProp } from "styled-components";
 import { FontScheme } from "../types";
 
 export type FontCollectionMap = {
@@ -6,67 +7,69 @@ export type FontCollectionMap = {
 
 export type FontSetOptions = Partial<FontSet>;
 
+export type TypographySizeType =
+    | "header-xxl"
+    | "header-xl"
+    | "header-lg"
+    | "header-md"
+    | "header-sm"
+    | "header-xs"
+    | "body-baseline"
+    | "body-lg"
+    | "body-md"
+    | "body-sm";
+
 export type FontSet = {
-    // Header sizes
-    "header-size-xxl": string;
-    "header-size-xl": string;
-    "header-size-lg": string;
-    "header-size-md": string;
-    "header-size-sm": string;
-    "header-size-xs": string;
+    "header-xxl-light": CSSProp | string;
+    "header-xxl-regular": CSSProp | string;
+    "header-xxl-semibold": CSSProp | string;
+    "header-xxl-bold": CSSProp | string;
 
-    // Header line heights
-    "header-lh-xxl": string;
-    "header-lh-xl": string;
-    "header-lh-lg": string;
-    "header-lh-md": string;
-    "header-lh-sm": string;
-    "header-lh-xs": string;
+    "header-xl-light": CSSProp | string;
+    "header-xl-regular": CSSProp | string;
+    "header-xl-semibold": CSSProp | string;
+    "header-xl-bold": CSSProp | string;
 
-    // Header letter spacing
-    "header-ls-xxl": string;
-    "header-ls-xl": string;
-    "header-ls-lg": string;
-    "header-ls-md": string;
-    "header-ls-sm": string;
-    "header-ls-xs": string;
+    "header-lg-light": CSSProp | string;
+    "header-lg-regular": CSSProp | string;
+    "header-lg-semibold": CSSProp | string;
+    "header-lg-bold": CSSProp | string;
 
-    // Font weights
-    "weight-light": string;
-    "weight-regular": string;
-    "weight-semibold": string;
-    "weight-bold": string;
+    "header-md-light": CSSProp | string;
+    "header-md-regular": CSSProp | string;
+    "header-md-semibold": CSSProp | string;
+    "header-md-bold": CSSProp | string;
 
-    // Font family
-    "font-family": string;
+    "header-sm-light": CSSProp | string;
+    "header-sm-regular": CSSProp | string;
+    "header-sm-semibold": CSSProp | string;
+    "header-sm-bold": CSSProp | string;
 
-    // Body sizes
-    "body-size-baseline": string;
-    "body-size-lg": string;
-    "body-size-md": string;
-    "body-size-sm": string;
+    "header-xs-light": CSSProp | string;
+    "header-xs-regular": CSSProp | string;
+    "header-xs-semibold": CSSProp | string;
+    "header-xs-bold": CSSProp | string;
 
-    // Body line heights
-    "body-lh-baseline": string;
-    "body-lh-lg": string;
-    "body-lh-md": string;
-    "body-lh-sm": string;
+    "body-baseline-light": CSSProp | string;
+    "body-baseline-regular": CSSProp | string;
+    "body-baseline-semibold": CSSProp | string;
+    "body-baseline-bold": CSSProp | string;
 
-    // Body letter spacing
-    "body-ls-baseline": string;
-    "body-ls-lg": string;
-    "body-ls-md": string;
-    "body-ls-sm": string;
+    "body-lg-light": CSSProp | string;
+    "body-lg-regular": CSSProp | string;
+    "body-lg-semibold": CSSProp | string;
+    "body-lg-bold": CSSProp | string;
 
-    // Form label sizes
-    "formlabel-size-baseline": string;
-    "formlabel-size-lg": string;
+    "body-md-light": CSSProp | string;
+    "body-md-regular": CSSProp | string;
+    "body-md-semibold": CSSProp | string;
+    "body-md-bold": CSSProp | string;
 
-    // Form label line heights
-    "formlabel-lh-baseline": string;
-    "formlabel-lh-lg": string;
+    "body-sm-light": CSSProp | string;
+    "body-sm-regular": CSSProp | string;
+    "body-sm-semibold": CSSProp | string;
+    "body-sm-bold": CSSProp | string;
 
-    // Form label letter spacing
-    "formlabel-ls-baseline": string;
-    "formlabel-ls-lg": string;
+    "formlabel-baseline-semibold": CSSProp | string;
+    "formlabel-lg-semibold": CSSProp | string;
 };
diff --git a/src/theme/index.ts b/src/theme/index.ts
index beaf0292a..2ecbd5f68 100644
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -4,11 +4,11 @@ import { MediaQuery as MediaQueryValues } from "./breakpoint/media-query-helper"
 import { BreakpointValues } from "./breakpoint/theme-helper";
 import { PrimitiveColour } from "./colour-primitive/theme-helper";
 import { ColourSemantic } from "./colour-semantic/theme-helper";
-import { FontValues } from "./font/theme-helper";
+import { FontSpecValues } from "./font-spec/theme-helper";
 import { RadiusValues } from "./radius/theme-helper";
 import { SpacingValues } from "./spacing/theme-helper";
 import { ThemeSpec } from "./types";
-import { TypographyValues } from "./typography/theme-helper";
+import { FontValues } from "./font/theme-helper";
 
 // =============================================================================
 // TOKENS
@@ -19,9 +19,9 @@ export const Colour = {
     Primitive: PrimitiveColour,
 };
 
-export const Font = FontValues;
+export const FontSpec = FontSpecValues;
 
-export const Typography = TypographyValues;
+export const Font = FontValues;
 
 export const Motion = MotionValues;
 
diff --git a/src/theme/types.ts b/src/theme/types.ts
index 64a4ee59a..b5f5fb742 100644
--- a/src/theme/types.ts
+++ b/src/theme/types.ts
@@ -1,7 +1,7 @@
 import { PrimitiveColourSetOptions } from "./colour-primitive/types";
 import { SemanticColourSetOptions } from "./colour-semantic/types";
-import { TypographySetOptions } from "./typography/types";
 import { FontSetOptions } from "./font/types";
+import { FontSpecSetOptions } from "./font-spec/types";
 import { MotionSetOptions } from "./motion/types";
 import { BorderSetOptions } from "./border/types";
 import { SpacingSetOptions } from "./spacing/types";
@@ -17,9 +17,9 @@ export type {
     SemanticColourSetOptions,
 } from "./colour-semantic/types";
 
-export type { FontSet, FontSetOptions } from "./font/types";
+export type { FontSpecSet, FontSpecSetOptions } from "./font-spec/types";
 
-export type { TypographySet, TypographySetOptions } from "./typography/types";
+export type { FontSet, FontSetOptions } from "./font/types";
 
 export type { MotionSet, MotionSetOptions } from "./motion/types";
 
@@ -48,13 +48,13 @@ export type BreakpointScheme = "lifesg";
 export interface ThemeSpecOptions {
     primitiveColour?: PrimitiveColourSetOptions | undefined;
     semanticColour?: SemanticColourSetOptions | undefined;
+    fontSpec?: FontSpecSetOptions | undefined;
     font?: FontSetOptions | undefined;
     motion?: MotionSetOptions | undefined;
     spacing?: SpacingSetOptions | undefined;
     border?: BorderSetOptions | undefined;
     radius?: RadiusSetOptions | undefined;
     breakpoint?: BreakpointSetOptions | undefined;
-    typography?: TypographySetOptions | undefined;
 }
 
 export interface ThemeSpec {
diff --git a/src/theme/typography/specs/lifesg-typography-set.ts b/src/theme/typography/specs/lifesg-typography-set.ts
deleted file mode 100644
index f3cf525c8..000000000
--- a/src/theme/typography/specs/lifesg-typography-set.ts
+++ /dev/null
@@ -1,273 +0,0 @@
-import { css } from "styled-components";
-
-import { getFontValues } from "../../font/theme-helper";
-import { FontSet } from "../../font/types";
-import { TypographySet } from "../types";
-
-const generateTypographyCSS = (
-    fontSizeKey: keyof FontSet,
-    fontWeightKey: keyof FontSet,
-    lineHeightKey: keyof FontSet,
-    letterSpacingKey: keyof FontSet
-) => css`
-    font-family: ${getFontValues("font-family")};
-    font-size: ${getFontValues(fontSizeKey)};
-    font-weight: ${getFontValues(fontWeightKey)};
-    line-height: ${getFontValues(lineHeightKey)};
-    letter-spacing: ${getFontValues(letterSpacingKey)};
-`;
-
-export const LifeSgTypographySet: TypographySet = {
-    "header-xxl-light": generateTypographyCSS(
-        "header-size-xxl",
-        "weight-light",
-        "header-lh-xxl",
-        "header-ls-xxl"
-    ),
-    "header-xxl-regular": generateTypographyCSS(
-        "header-size-xxl",
-        "weight-regular",
-        "header-lh-xxl",
-        "header-ls-xxl"
-    ),
-    "header-xxl-semibold": generateTypographyCSS(
-        "header-size-xxl",
-        "weight-semibold",
-        "header-lh-xxl",
-        "header-ls-xxl"
-    ),
-    "header-xxl-bold": generateTypographyCSS(
-        "header-size-xxl",
-        "weight-bold",
-        "header-lh-xxl",
-        "header-ls-xxl"
-    ),
-    "header-xl-light": generateTypographyCSS(
-        "header-size-xl",
-        "weight-light",
-        "header-lh-xl",
-        "header-ls-xl"
-    ),
-    "header-xl-regular": generateTypographyCSS(
-        "header-size-xl",
-        "weight-regular",
-        "header-lh-xl",
-        "header-ls-xl"
-    ),
-    "header-xl-semibold": generateTypographyCSS(
-        "header-size-xl",
-        "weight-semibold",
-        "header-lh-xl",
-        "header-ls-xl"
-    ),
-    "header-xl-bold": generateTypographyCSS(
-        "header-size-xl",
-        "weight-bold",
-        "header-lh-xl",
-        "header-ls-xl"
-    ),
-    "header-lg-light": generateTypographyCSS(
-        "header-size-lg",
-        "weight-light",
-        "header-lh-lg",
-        "header-ls-lg"
-    ),
-    "header-lg-regular": generateTypographyCSS(
-        "header-size-lg",
-        "weight-regular",
-        "header-lh-lg",
-        "header-ls-lg"
-    ),
-    "header-lg-semibold": generateTypographyCSS(
-        "header-size-lg",
-        "weight-semibold",
-        "header-lh-lg",
-        "header-ls-lg"
-    ),
-    "header-lg-bold": generateTypographyCSS(
-        "header-size-lg",
-        "weight-bold",
-        "header-lh-lg",
-        "header-ls-lg"
-    ),
-    "header-md-light": generateTypographyCSS(
-        "header-size-md",
-        "weight-light",
-        "header-lh-md",
-        "header-ls-md"
-    ),
-    "header-md-regular": generateTypographyCSS(
-        "header-size-md",
-        "weight-regular",
-        "header-lh-md",
-        "header-ls-md"
-    ),
-    "header-md-semibold": generateTypographyCSS(
-        "header-size-md",
-        "weight-semibold",
-        "header-lh-md",
-        "header-ls-md"
-    ),
-    "header-md-bold": generateTypographyCSS(
-        "header-size-md",
-        "weight-bold",
-        "header-lh-md",
-        "header-ls-md"
-    ),
-    "header-sm-light": generateTypographyCSS(
-        "header-size-sm",
-        "weight-light",
-        "header-lh-sm",
-        "header-ls-sm"
-    ),
-    "header-sm-regular": generateTypographyCSS(
-        "header-size-sm",
-        "weight-regular",
-        "header-lh-sm",
-        "header-ls-sm"
-    ),
-    "header-sm-semibold": generateTypographyCSS(
-        "header-size-sm",
-        "weight-semibold",
-        "header-lh-sm",
-        "header-ls-sm"
-    ),
-    "header-sm-bold": generateTypographyCSS(
-        "header-size-sm",
-        "weight-bold",
-        "header-lh-sm",
-        "header-ls-sm"
-    ),
-    "header-xs-light": generateTypographyCSS(
-        "header-size-xs",
-        "weight-light",
-        "header-lh-xs",
-        "header-ls-xs"
-    ),
-    "header-xs-regular": generateTypographyCSS(
-        "header-size-xs",
-        "weight-regular",
-        "header-lh-xs",
-        "header-ls-xs"
-    ),
-    "header-xs-semibold": generateTypographyCSS(
-        "header-size-xs",
-        "weight-semibold",
-        "header-lh-xs",
-        "header-ls-xs"
-    ),
-    "header-xs-bold": generateTypographyCSS(
-        "header-size-xs",
-        "weight-bold",
-        "header-lh-xs",
-        "header-ls-xs"
-    ),
-    "body-baseline-light": generateTypographyCSS(
-        "body-size-baseline",
-        "weight-light",
-        "body-lh-baseline",
-        "body-ls-baseline"
-    ),
-    "body-baseline-regular": generateTypographyCSS(
-        "body-size-baseline",
-        "weight-regular",
-        "body-lh-baseline",
-        "body-ls-baseline"
-    ),
-    "body-baseline-semibold": generateTypographyCSS(
-        "body-size-baseline",
-        "weight-semibold",
-        "body-lh-baseline",
-        "body-ls-baseline"
-    ),
-    "body-baseline-bold": generateTypographyCSS(
-        "body-size-baseline",
-        "weight-bold",
-        "body-lh-baseline",
-        "body-ls-baseline"
-    ),
-    "body-lg-light": generateTypographyCSS(
-        "body-size-lg",
-        "weight-light",
-        "body-lh-lg",
-        "body-ls-lg"
-    ),
-    "body-lg-regular": generateTypographyCSS(
-        "body-size-lg",
-        "weight-regular",
-        "body-lh-lg",
-        "body-ls-lg"
-    ),
-    "body-lg-semibold": generateTypographyCSS(
-        "body-size-lg",
-        "weight-semibold",
-        "body-lh-lg",
-        "body-ls-lg"
-    ),
-    "body-lg-bold": generateTypographyCSS(
-        "body-size-lg",
-        "weight-bold",
-        "body-lh-lg",
-        "body-ls-lg"
-    ),
-    "body-md-light": generateTypographyCSS(
-        "body-size-md",
-        "weight-light",
-        "body-lh-md",
-        "body-ls-md"
-    ),
-    "body-md-regular": generateTypographyCSS(
-        "body-size-md",
-        "weight-regular",
-        "body-lh-md",
-        "body-ls-md"
-    ),
-    "body-md-semibold": generateTypographyCSS(
-        "body-size-md",
-        "weight-semibold",
-        "body-lh-md",
-        "body-ls-md"
-    ),
-    "body-md-bold": generateTypographyCSS(
-        "body-size-md",
-        "weight-bold",
-        "body-lh-md",
-        "body-ls-md"
-    ),
-    "body-sm-light": generateTypographyCSS(
-        "body-size-sm",
-        "weight-light",
-        "body-lh-sm",
-        "body-ls-sm"
-    ),
-    "body-sm-regular": generateTypographyCSS(
-        "body-size-sm",
-        "weight-regular",
-        "body-lh-sm",
-        "body-ls-sm"
-    ),
-    "body-sm-semibold": generateTypographyCSS(
-        "body-size-sm",
-        "weight-semibold",
-        "body-lh-sm",
-        "body-ls-sm"
-    ),
-    "body-sm-bold": generateTypographyCSS(
-        "body-size-sm",
-        "weight-bold",
-        "body-lh-sm",
-        "body-ls-sm"
-    ),
-    "formlabel-baseline-semibold": generateTypographyCSS(
-        "formlabel-size-baseline",
-        "weight-semibold",
-        "formlabel-lh-baseline",
-        "formlabel-ls-baseline"
-    ),
-    "formlabel-lg-semibold": generateTypographyCSS(
-        "formlabel-size-lg",
-        "weight-semibold",
-        "formlabel-lh-lg",
-        "formlabel-ls-lg"
-    ),
-};
diff --git a/src/theme/typography/theme-helper.ts b/src/theme/typography/theme-helper.ts
deleted file mode 100644
index 21df339c2..000000000
--- a/src/theme/typography/theme-helper.ts
+++ /dev/null
@@ -1,95 +0,0 @@
-import { CSSProp } from "styled-components";
-import { StyledComponentProps, getCollection, getValue } from "../helpers";
-import { FontScheme, ThemeCollectionSpec } from "../types";
-import { LifeSgTypographySet } from "./specs/lifesg-typography-set";
-import { TypographyCollectionMap, TypographySet } from "./types";
-
-const TypographySpec: ThemeCollectionSpec<TypographyCollectionMap, FontScheme> =
-    {
-        collections: {
-            lifesg: LifeSgTypographySet,
-            bookingsg: LifeSgTypographySet,
-            rbs: LifeSgTypographySet,
-            mylegacy: LifeSgTypographySet,
-            ccube: LifeSgTypographySet,
-        },
-        defaultValue: "lifesg",
-    };
-
-export const getTypography = (key: keyof TypographySet) => {
-    return (props: StyledComponentProps): CSSProp | string => {
-        const theme = props.theme;
-        const typographySet: TypographySet = getCollection(
-            TypographySpec,
-            theme.fontScheme
-        );
-
-        // Check for an override
-        const typographyValue =
-            theme.overrides && theme.overrides.typography
-                ? getValue(typographySet, key, theme.overrides.typography)
-                : typographySet[key];
-
-        // If function, resolve with props
-        return typeof typographyValue === "function"
-            ? (typographyValue as (props: any) => string)(props)
-            : typographyValue;
-    };
-};
-
-export const TypographyValues: {
-    [key in keyof TypographySet]: (props: StyledComponentProps) => CSSProp;
-} = {
-    "header-xxl-light": getTypography("header-xxl-light"),
-    "header-xxl-regular": getTypography("header-xxl-regular"),
-    "header-xxl-semibold": getTypography("header-xxl-semibold"),
-    "header-xxl-bold": getTypography("header-xxl-bold"),
-
-    "header-xl-light": getTypography("header-xl-light"),
-    "header-xl-regular": getTypography("header-xl-regular"),
-    "header-xl-semibold": getTypography("header-xl-semibold"),
-    "header-xl-bold": getTypography("header-xl-bold"),
-
-    "header-lg-light": getTypography("header-lg-light"),
-    "header-lg-regular": getTypography("header-lg-regular"),
-    "header-lg-semibold": getTypography("header-lg-semibold"),
-    "header-lg-bold": getTypography("header-lg-bold"),
-
-    "header-md-light": getTypography("header-md-light"),
-    "header-md-regular": getTypography("header-md-regular"),
-    "header-md-semibold": getTypography("header-md-semibold"),
-    "header-md-bold": getTypography("header-md-bold"),
-
-    "header-sm-light": getTypography("header-sm-light"),
-    "header-sm-regular": getTypography("header-sm-regular"),
-    "header-sm-semibold": getTypography("header-sm-semibold"),
-    "header-sm-bold": getTypography("header-sm-bold"),
-
-    "header-xs-light": getTypography("header-xs-light"),
-    "header-xs-regular": getTypography("header-xs-regular"),
-    "header-xs-semibold": getTypography("header-xs-semibold"),
-    "header-xs-bold": getTypography("header-xs-bold"),
-
-    "body-baseline-light": getTypography("body-baseline-light"),
-    "body-baseline-regular": getTypography("body-baseline-regular"),
-    "body-baseline-semibold": getTypography("body-baseline-semibold"),
-    "body-baseline-bold": getTypography("body-baseline-bold"),
-
-    "body-lg-light": getTypography("body-lg-light"),
-    "body-lg-regular": getTypography("body-lg-regular"),
-    "body-lg-semibold": getTypography("body-lg-semibold"),
-    "body-lg-bold": getTypography("body-lg-bold"),
-
-    "body-md-light": getTypography("body-md-light"),
-    "body-md-regular": getTypography("body-md-regular"),
-    "body-md-semibold": getTypography("body-md-semibold"),
-    "body-md-bold": getTypography("body-md-bold"),
-
-    "body-sm-light": getTypography("body-sm-light"),
-    "body-sm-regular": getTypography("body-sm-regular"),
-    "body-sm-semibold": getTypography("body-sm-semibold"),
-    "body-sm-bold": getTypography("body-sm-bold"),
-
-    "formlabel-baseline-semibold": getTypography("formlabel-baseline-semibold"),
-    "formlabel-lg-semibold": getTypography("formlabel-lg-semibold"),
-};
diff --git a/src/theme/typography/types.ts b/src/theme/typography/types.ts
deleted file mode 100644
index 3a85f1d89..000000000
--- a/src/theme/typography/types.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import { CSSProp } from "styled-components";
-import { FontScheme } from "../types";
-
-export type TypographyCollectionMap = {
-    [key in FontScheme]: TypographySet;
-};
-
-export type TypographySetOptions = Partial<TypographySet>;
-
-export type TypographySizeType =
-    | "header-xxl"
-    | "header-xl"
-    | "header-lg"
-    | "header-md"
-    | "header-sm"
-    | "header-xs"
-    | "body-baseline"
-    | "body-lg"
-    | "body-md"
-    | "body-sm";
-
-export type TypographySet = {
-    "header-xxl-light": CSSProp | string;
-    "header-xxl-regular": CSSProp | string;
-    "header-xxl-semibold": CSSProp | string;
-    "header-xxl-bold": CSSProp | string;
-
-    "header-xl-light": CSSProp | string;
-    "header-xl-regular": CSSProp | string;
-    "header-xl-semibold": CSSProp | string;
-    "header-xl-bold": CSSProp | string;
-
-    "header-lg-light": CSSProp | string;
-    "header-lg-regular": CSSProp | string;
-    "header-lg-semibold": CSSProp | string;
-    "header-lg-bold": CSSProp | string;
-
-    "header-md-light": CSSProp | string;
-    "header-md-regular": CSSProp | string;
-    "header-md-semibold": CSSProp | string;
-    "header-md-bold": CSSProp | string;
-
-    "header-sm-light": CSSProp | string;
-    "header-sm-regular": CSSProp | string;
-    "header-sm-semibold": CSSProp | string;
-    "header-sm-bold": CSSProp | string;
-
-    "header-xs-light": CSSProp | string;
-    "header-xs-regular": CSSProp | string;
-    "header-xs-semibold": CSSProp | string;
-    "header-xs-bold": CSSProp | string;
-
-    "body-baseline-light": CSSProp | string;
-    "body-baseline-regular": CSSProp | string;
-    "body-baseline-semibold": CSSProp | string;
-    "body-baseline-bold": CSSProp | string;
-
-    "body-lg-light": CSSProp | string;
-    "body-lg-regular": CSSProp | string;
-    "body-lg-semibold": CSSProp | string;
-    "body-lg-bold": CSSProp | string;
-
-    "body-md-light": CSSProp | string;
-    "body-md-regular": CSSProp | string;
-    "body-md-semibold": CSSProp | string;
-    "body-md-bold": CSSProp | string;
-
-    "body-sm-light": CSSProp | string;
-    "body-sm-regular": CSSProp | string;
-    "body-sm-semibold": CSSProp | string;
-    "body-sm-bold": CSSProp | string;
-
-    "formlabel-baseline-semibold": CSSProp | string;
-    "formlabel-lg-semibold": CSSProp | string;
-};
diff --git a/src/typography/helper.ts b/src/typography/helper.ts
index 02c512b19..593544c7f 100644
--- a/src/typography/helper.ts
+++ b/src/typography/helper.ts
@@ -1,6 +1,6 @@
 import { css } from "styled-components";
-import { Colour, Typography } from "../theme";
-import { TypographySizeType } from "../theme/typography/types";
+import { Colour, Font } from "../theme";
+import { TypographySizeType } from "../theme/font/types";
 import { TypographyProps, TypographyWeight } from "./types";
 
 export const getTextStyle = (
@@ -11,7 +11,7 @@ export const getTextStyle = (
     const token = `${type}-${weight.toLowerCase()}`;
 
     return css`
-        ${Typography[token]}
+        ${Font[token]}
         ${paragraph ? "margin-bottom: 1.05em;" : "margin-bottom: 0;"}
     `;
 };
diff --git a/src/typography/typography.tsx b/src/typography/typography.tsx
index 4c27841b1..e3f5441e8 100644
--- a/src/typography/typography.tsx
+++ b/src/typography/typography.tsx
@@ -1,7 +1,7 @@
 import { ExternalIcon } from "@lifesg/react-icons/external";
 import styled, { css } from "styled-components";
 import { Colour } from "../theme";
-import { TypographySizeType } from "../theme/typography/types";
+import { TypographySizeType } from "../theme/font/types";
 import { createTypographyStyles, getTextStyle } from "./helper";
 import { TypographyLinkProps, TypographyProps } from "./types";
 
diff --git a/stories/theme/doc-elements/doc-typography-display.tsx b/stories/theme/doc-elements/doc-font-display.tsx
similarity index 84%
rename from stories/theme/doc-elements/doc-typography-display.tsx
rename to stories/theme/doc-elements/doc-font-display.tsx
index b3fceb271..55cf027e9 100644
--- a/stories/theme/doc-elements/doc-typography-display.tsx
+++ b/stories/theme/doc-elements/doc-font-display.tsx
@@ -1,25 +1,25 @@
-import { Typography } from "src/theme";
-import { FontSet, ThemeSpec, TypographySet } from "src/theme/types";
+import { Font } from "src/theme";
+import { FontSet, FontSpecSet, ThemeSpec } from "src/theme/types";
 import styled, { ThemeProvider, useTheme } from "styled-components";
-import { getFontValues } from "../../../src/theme/font/theme-helper";
+import { getFontSpec } from "../../../src/theme/font-spec/theme-helper";
 
-interface TypographyCollectionProps {
-    tokens: (keyof TypographySet)[];
-    fontSizeToken: keyof FontSet;
-    lineHeightToken: keyof FontSet;
-    letterSpacingToken: keyof FontSet;
+interface FontCollectionProps {
+    tokens: (keyof FontSet)[];
+    fontSizeToken: keyof FontSpecSet;
+    lineHeightToken: keyof FontSpecSet;
+    letterSpacingToken: keyof FontSpecSet;
 }
 
-const TypographyCollection = ({
+const FontCollection = ({
     tokens,
     fontSizeToken,
     lineHeightToken,
     letterSpacingToken,
-}: TypographyCollectionProps) => {
+}: FontCollectionProps) => {
     const theme = useTheme();
-    const fontSize = getFontValues(fontSizeToken)({ theme });
-    const lineHeight = getFontValues(lineHeightToken)({ theme });
-    const letterSpacing = getFontValues(letterSpacingToken)({ theme });
+    const fontSize = getFontSpec(fontSizeToken)({ theme });
+    const lineHeight = getFontSpec(lineHeightToken)({ theme });
+    const letterSpacing = getFontSpec(letterSpacingToken)({ theme });
 
     return (
         <Row key={fontSizeToken}>
@@ -39,11 +39,11 @@ const TypographyCollection = ({
     );
 };
 
-interface TypographyDisplayProps {
+interface FontDisplayProps {
     theme: ThemeSpec;
 }
 
-export const TypographyDisplay = ({ theme }: TypographyDisplayProps) => {
+export const FontDisplay = ({ theme }: FontDisplayProps) => {
     return (
         <ThemeProvider theme={theme}>
             <Display>
@@ -53,7 +53,7 @@ export const TypographyDisplay = ({ theme }: TypographyDisplayProps) => {
                     <div>Line height</div>
                     <div>Letter spacing</div>
                 </HeaderRow>
-                <TypographyCollection
+                <FontCollection
                     tokens={[
                         "header-xxl-light",
                         "header-xxl-regular",
@@ -64,7 +64,7 @@ export const TypographyDisplay = ({ theme }: TypographyDisplayProps) => {
                     lineHeightToken="header-lh-xxl"
                     letterSpacingToken="header-ls-xxl"
                 />
-                <TypographyCollection
+                <FontCollection
                     tokens={[
                         "header-xl-light",
                         "header-xl-regular",
@@ -75,7 +75,7 @@ export const TypographyDisplay = ({ theme }: TypographyDisplayProps) => {
                     lineHeightToken="header-lh-xl"
                     letterSpacingToken="header-ls-xl"
                 />
-                <TypographyCollection
+                <FontCollection
                     tokens={[
                         "header-lg-light",
                         "header-lg-regular",
@@ -86,7 +86,7 @@ export const TypographyDisplay = ({ theme }: TypographyDisplayProps) => {
                     lineHeightToken="header-lh-lg"
                     letterSpacingToken="header-ls-lg"
                 />
-                <TypographyCollection
+                <FontCollection
                     tokens={[
                         "header-md-light",
                         "header-md-regular",
@@ -97,7 +97,7 @@ export const TypographyDisplay = ({ theme }: TypographyDisplayProps) => {
                     lineHeightToken="header-lh-md"
                     letterSpacingToken="header-ls-md"
                 />
-                <TypographyCollection
+                <FontCollection
                     tokens={[
                         "header-sm-light",
                         "header-sm-regular",
@@ -108,7 +108,7 @@ export const TypographyDisplay = ({ theme }: TypographyDisplayProps) => {
                     lineHeightToken="header-lh-sm"
                     letterSpacingToken="header-ls-sm"
                 />
-                <TypographyCollection
+                <FontCollection
                     tokens={[
                         "header-xs-light",
                         "header-xs-regular",
@@ -119,7 +119,7 @@ export const TypographyDisplay = ({ theme }: TypographyDisplayProps) => {
                     lineHeightToken="header-lh-xs"
                     letterSpacingToken="header-ls-xs"
                 />
-                <TypographyCollection
+                <FontCollection
                     tokens={[
                         "body-baseline-light",
                         "body-baseline-regular",
@@ -130,7 +130,7 @@ export const TypographyDisplay = ({ theme }: TypographyDisplayProps) => {
                     lineHeightToken="body-lh-baseline"
                     letterSpacingToken="body-ls-baseline"
                 />
-                <TypographyCollection
+                <FontCollection
                     tokens={[
                         "body-lg-light",
                         "body-lg-regular",
@@ -141,7 +141,7 @@ export const TypographyDisplay = ({ theme }: TypographyDisplayProps) => {
                     lineHeightToken="body-lh-lg"
                     letterSpacingToken="body-ls-lg"
                 />
-                <TypographyCollection
+                <FontCollection
                     tokens={[
                         "body-md-light",
                         "body-md-regular",
@@ -152,7 +152,7 @@ export const TypographyDisplay = ({ theme }: TypographyDisplayProps) => {
                     lineHeightToken="body-lh-md"
                     letterSpacingToken="body-ls-md"
                 />
-                <TypographyCollection
+                <FontCollection
                     tokens={[
                         "body-sm-light",
                         "body-sm-regular",
@@ -163,13 +163,13 @@ export const TypographyDisplay = ({ theme }: TypographyDisplayProps) => {
                     lineHeightToken="body-lh-sm"
                     letterSpacingToken="body-ls-sm"
                 />
-                <TypographyCollection
+                <FontCollection
                     tokens={["formlabel-baseline-semibold"]}
                     fontSizeToken="body-size-baseline"
                     lineHeightToken="body-lh-baseline"
                     letterSpacingToken="body-ls-baseline"
                 />
-                <TypographyCollection
+                <FontCollection
                     tokens={["formlabel-lg-semibold"]}
                     fontSizeToken="body-size-lg"
                     lineHeightToken="body-lh-lg"
@@ -218,6 +218,6 @@ const HeaderRow = styled(Row)`
 `;
 
 const TextPreview = styled.div<TextPreviewProps>`
-    ${(props) => Typography[props.$token](props)}
+    ${(props) => Font[props.$token](props)}
     margin-right: 3rem;
 `;
diff --git a/stories/theme/doc-elements/index.ts b/stories/theme/doc-elements/index.ts
index a5c9ffdcc..ab8335dba 100644
--- a/stories/theme/doc-elements/index.ts
+++ b/stories/theme/doc-elements/index.ts
@@ -1,7 +1,7 @@
 export * from "./doc-border-display";
 export * from "./doc-breakpoint-display";
 export * from "./doc-motion-display";
+export * from "./doc-font-display";
 export * from "./doc-primitive-colour-display";
 export * from "./doc-semantic-colour-display";
 export * from "./doc-spacing-display";
-export * from "./doc-typography-display";
diff --git a/stories/theme/typography/a-typography-introduction.mdx b/stories/theme/typography/a-typography-introduction.mdx
index cccb03ebc..5ff1e7e93 100644
--- a/stories/theme/typography/a-typography-introduction.mdx
+++ b/stories/theme/typography/a-typography-introduction.mdx
@@ -6,10 +6,10 @@ import { DocInfo, DocNote } from "stories/storybook-common";
 # Typography
 
 ```tsx
-import { Font, Typography } from "@lifesg/react-design-system/theme";
+import { FontSpec, Font } from "@lifesg/react-design-system/theme";
 ```
 
-The **font** tokens define these font styling properties:
+The **font spec** tokens define these font styling properties:
 
 -   font family
 -   font size
@@ -17,7 +17,7 @@ The **font** tokens define these font styling properties:
 -   line height
 -   letter spacing
 
-A **typography** token is a combination of these font tokens.
+A **font** token is a combination of these font spec tokens.
 
 ## Collections
 
@@ -30,28 +30,26 @@ A **typography** token is a combination of these font tokens.
 
 ## Usage
 
-{/* TODO: update link to Typography component docs */}
-
-<DocInfo storybookLink={"../?path=/docs/general-text-introduction--docs"}>
+<DocInfo storybookLink={"../?path=/docs/core-typography--docs"}>
     In most cases, you can simply use the `Typography` component to render text
     elements
 </DocInfo>
 
-The `Typography` namespace provides tokens to apply text styling within style
-declarations. You will rarely need to use the `Font` tokens directly.
+The `Font` namespace provides tokens to apply text styling within style
+declarations. You will rarely need to use the `FontSpec` tokens directly.
 
 ```tsx
-import { Typography } from "@lifesg/react-design-system/theme";
+import { Font } from "@lifesg/react-design-system/theme";
 import styled, { css } from "styled-components";
 
 // A common use case is to initialise text style in a parent container to be inherited by child elements
 const Container = styled.div`
-    ${Typography["header-xxl-bold"]}
+    ${Font["header-xxl-bold"]}
 `;
 
 // A common use case is to match an image, such as an icon, to the text size
 const Icon = styled.svg`
-    height: ${Font["header-size-xxl"]};
+    height: ${FontSpec["header-size-xxl"]};
 `;
 ```
 
@@ -62,12 +60,12 @@ const Icon = styled.svg`
 
 ## Overriding
 
-When you modify a font token, any typography token referring to it will also
+When you modify a font spec token, any font token referring to it will also
 reflect the new specification.
 
-Font tokens should be `rem`-based to scale with the user's preferred font size.
+Font spec tokens should be `rem`-based to scale with the user's preferred font size.
 
-While not recommended, typography tokens can be overridden separately. You are
+While not recommended, font tokens can be overridden separately. You are
 responsible for ensuring all relevant properties are included.
 
 ```tsx
@@ -76,10 +74,10 @@ import { LifeSGTheme } from "@lifesg/react-design-system/theme";
 const customTheme: ThemeSpec = {
     ...LifeSGTheme,
     overrides: {
-        font: {
+        fontSpec: {
             "header-size-xxl": "5rem", // specify a custom value
         },
-        typography: {
+        font: {
             "header-body-light": css`
                 font-family: serif;
                 font-size: 1rem;
diff --git a/stories/theme/typography/b-typography-lifesg.mdx b/stories/theme/typography/b-typography-lifesg.mdx
index 3266b39cb..851840a2c 100644
--- a/stories/theme/typography/b-typography-lifesg.mdx
+++ b/stories/theme/typography/b-typography-lifesg.mdx
@@ -1,10 +1,10 @@
 import { Meta } from "@storybook/blocks";
 import { LifeSGTheme } from "src/theme";
-import { TypographyDisplay } from "../doc-elements";
+import { FontDisplay } from "../doc-elements";
 
 <Meta title="Foundations/Typography/LifeSG" />
 
-# LifeSG typography
+# LifeSG font
 
 This is the font set used when the `fontScheme` is `"lifesg"`.
 
@@ -15,4 +15,4 @@ const theme: ThemeSpec = {
 };
 ```
 
-<TypographyDisplay theme={LifeSGTheme} />
+<FontDisplay theme={LifeSGTheme} />
diff --git a/tests/theme/theme-font.spec.tsx b/tests/theme/theme-font.spec.tsx
index 31c019dde..e0193e400 100644
--- a/tests/theme/theme-font.spec.tsx
+++ b/tests/theme/theme-font.spec.tsx
@@ -3,18 +3,18 @@ import { render } from "@testing-library/react";
 
 import { ThemeSpec } from "../../src/theme/types";
 import "jest-styled-components";
-import { Font, Typography } from "../../src";
+import { Font, FontSpec } from "../../src";
 
-const StyledTypographyTest = styled.div`
-    ${Typography["header-xxl-bold"]};
+const StyledFontTest = styled.div`
+    ${Font["header-xxl-bold"]};
 `;
 
-const StyledFontSet = styled.div`
-    font-size: ${Font["header-size-xs"]};
+const StyledFontSpecSet = styled.div`
+    font-size: ${FontSpec["header-size-xs"]};
 `;
 
-describe("StyledTypographyTest", () => {
-    it("should apply correct typography styles based on the theme", () => {
+describe("StyledFontTests", () => {
+    it("should apply correct font styles based on the theme", () => {
         const mockTheme: ThemeSpec = {
             colourScheme: "lifesg",
             fontScheme: "lifesg",
@@ -32,7 +32,7 @@ describe("StyledTypographyTest", () => {
 
         const { container } = render(
             <ThemeProvider theme={mockTheme}>
-                <StyledTypographyTest />
+                <StyledFontTest />
             </ThemeProvider>
         );
 
@@ -45,7 +45,7 @@ describe("StyledTypographyTest", () => {
         );
     });
 
-    it("should apply correct typography styles when overriding typography token", () => {
+    it("should apply correct font styles when overriding font token", () => {
         const overrideTheme: ThemeSpec = {
             colourScheme: "lifesg",
             fontScheme: "lifesg",
@@ -55,7 +55,7 @@ describe("StyledTypographyTest", () => {
             radiusScheme: "lifesg",
             breakpointScheme: "lifesg",
             overrides: {
-                typography: {
+                font: {
                     "header-xxl-bold": {
                         "font-size": "4rem",
                         "font-weight": "800",
@@ -73,7 +73,7 @@ describe("StyledTypographyTest", () => {
 
         const { container } = render(
             <ThemeProvider theme={overrideTheme}>
-                <StyledTypographyTest />
+                <StyledFontTest />
             </ThemeProvider>
         );
 
@@ -86,7 +86,7 @@ describe("StyledTypographyTest", () => {
         );
     });
 
-    it("should apply correct font styles based on the theme", () => {
+    it("should apply correct font spec styles based on the theme", () => {
         const overrideTheme: ThemeSpec = {
             colourScheme: "lifesg",
             fontScheme: "lifesg",
@@ -101,7 +101,7 @@ describe("StyledTypographyTest", () => {
 
         const { container } = render(
             <ThemeProvider theme={overrideTheme}>
-                <StyledFontSet />
+                <StyledFontSpecSet />
             </ThemeProvider>
         );