diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9b550f94e..f61ca14a7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -24,6 +24,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
     -    take Markdown rendering into account before testing the maximum preview length
 -   `<NodeContent />`
     -   header-menu items are vertically centered now
+-   `Typography`
+      -   adjust displaying fallback symbols in different browsers
 
 ### Changed
 
diff --git a/src/components/Tabs/stories/TabTitle.stories.tsx b/src/components/Tabs/stories/TabTitle.stories.tsx
index c4124754d..c9a502b0c 100644
--- a/src/components/Tabs/stories/TabTitle.stories.tsx
+++ b/src/components/Tabs/stories/TabTitle.stories.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { Tabs, TabTitle as TabTitleOrg } from "./../../../";
+import { Tabs, TabTitle as TabTitleOrg, TabTitleProps } from "./../../../";
 
 export default {
     title: "Components/Tabs/TabTitle",
@@ -9,7 +9,7 @@ export default {
     argTypes: {},
 } as Meta<typeof TabTitleOrg>;
 
-const TabTitle = (args) => {
+const TabTitle = (args: React.JSX.IntrinsicAttributes & TabTitleProps) => {
     return (
         <Tabs
             id="titledemo"
@@ -31,3 +31,8 @@ TabTitleElement.args = {
     titlePrefix: "[",
     titleSuffix: <span>]</span>,
 };
+
+export const TabTitleSymbolElement = TemplateFull.bind({});
+TabTitleSymbolElement.args = {
+    text: "★",
+};
diff --git a/src/components/Typography/_reset.scss b/src/components/Typography/_reset.scss
index a620cd2b8..c853b4020 100644
--- a/src/components/Typography/_reset.scss
+++ b/src/components/Typography/_reset.scss
@@ -7,6 +7,7 @@ select,
 input,
 textarea {
     font-family: inherit;
+    font-size-adjust: inherit;
     border-radius: 0;
 }
 
diff --git a/src/components/Typography/typography.scss b/src/components/Typography/typography.scss
index 87d20c595..d264df1c4 100644
--- a/src/components/Typography/typography.scss
+++ b/src/components/Typography/typography.scss
@@ -17,6 +17,11 @@ body {
     text-rendering: optimizelegibility;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
+    // User-facing text may contain Unicode symbols (e.g. "★") that fall outside the primary font stack.
+    // Browsers pick different system fallback fonts for such characters, causing glyphs to render at
+    // different optical sizes (smaller in Firefox). font-size-adjust normalises the fallback font size
+    // by matching the primary font's x-height, reducing the visual size discrepancy across browsers.
+    font-size-adjust: from-font;
 }
 
 code {