diff --git a/.changeset/smooth-rings-mate.md b/.changeset/smooth-rings-mate.md
new file mode 100644
index 0000000000..f46ef2cb5c
--- /dev/null
+++ b/.changeset/smooth-rings-mate.md
@@ -0,0 +1,5 @@
+---
+'@backstage/theme': patch
+---
+
+Added support for string `fontSize` values (e.g. `"2.5rem"`) in themes in addition to numbers. Also added an optional `fontFamily` prop for header typography variants to allow further customization.
diff --git a/packages/theme/api-report.md b/packages/theme/api-report.md
index d6380ee6e8..4ab05e8770 100644
--- a/packages/theme/api-report.md
+++ b/packages/theme/api-report.md
@@ -117,32 +117,38 @@ export type BackstageTypography = {
   htmlFontSize: number;
   fontFamily: string;
   h1: {
-    fontSize: number;
+    fontFamily?: string;
+    fontSize: number | string;
     fontWeight: number;
     marginBottom: number;
   };
   h2: {
-    fontSize: number;
+    fontFamily?: string;
+    fontSize: number | string;
     fontWeight: number;
     marginBottom: number;
   };
   h3: {
-    fontSize: number;
+    fontFamily?: string;
+    fontSize: number | string;
     fontWeight: number;
     marginBottom: number;
   };
   h4: {
-    fontSize: number;
+    fontFamily?: string;
+    fontSize: number | string;
     fontWeight: number;
     marginBottom: number;
   };
   h5: {
-    fontSize: number;
+    fontFamily?: string;
+    fontSize: number | string;
     fontWeight: number;
     marginBottom: number;
   };
   h6: {
-    fontSize: number;
+    fontFamily?: string;
+    fontSize: number | string;
     fontWeight: number;
     marginBottom: number;
   };
diff --git a/packages/theme/src/base/createBaseThemeOptions.ts b/packages/theme/src/base/createBaseThemeOptions.ts
index bca56114d7..f0c8ab5fe9 100644
--- a/packages/theme/src/base/createBaseThemeOptions.ts
+++ b/packages/theme/src/base/createBaseThemeOptions.ts
@@ -57,7 +57,7 @@ export function createBaseThemeOptions<PaletteOptions>(
     throw new Error(`${defaultPageTheme} is not defined in pageTheme.`);
   }
 
-  const defaultTypography = {
+  const defaultTypography: BackstageTypography = {
     htmlFontSize,
     fontFamily,
     h1: {
diff --git a/packages/theme/src/base/types.ts b/packages/theme/src/base/types.ts
index 3e34a0abb7..d62d944741 100644
--- a/packages/theme/src/base/types.ts
+++ b/packages/theme/src/base/types.ts
@@ -124,32 +124,38 @@ export type BackstageTypography = {
   htmlFontSize: number;
   fontFamily: string;
   h1: {
-    fontSize: number;
+    fontFamily?: string;
+    fontSize: number | string;
     fontWeight: number;
     marginBottom: number;
   };
   h2: {
-    fontSize: number;
+    fontFamily?: string;
+    fontSize: number | string;
     fontWeight: number;
     marginBottom: number;
   };
   h3: {
-    fontSize: number;
+    fontFamily?: string;
+    fontSize: number | string;
     fontWeight: number;
     marginBottom: number;
   };
   h4: {
-    fontSize: number;
+    fontFamily?: string;
+    fontSize: number | string;
     fontWeight: number;
     marginBottom: number;
   };
   h5: {
-    fontSize: number;
+    fontFamily?: string;
+    fontSize: number | string;
     fontWeight: number;
     marginBottom: number;
   };
   h6: {
-    fontSize: number;
+    fontFamily?: string;
+    fontSize: number | string;
     fontWeight: number;
     marginBottom: number;
   };