[BUGFIX] Scale default TYPO3 backend font to user agent preference

bnf · bnf · commit 7f9233f4babf · 2025-11-13T13:16:43.000+01:00
The TYPO3 backend already implicitly respects browser font size settings by using `rem` unit for some specific elements that specify explicit font sizes, but the main backend font-size (as inherited from `<body>`) still uses a fixed px unit, causing user agent font settings like "small" or "large" to be ingored, which results in a mixture of font sizes in some elements to be scaled to the user preference, while others kept at "medium". With this patch – applied only to v14 – we want to start rolling out relative units for all font sizes. There will likely be placed that require further adaption, but we believe that changing the base already provides a more harmonized experience for users with custom font size defaults. Font sizes for users with a default browser font size (e.g. "medium") are not changed. Releases: main Resolves: #104044 Resolves: #107743 Change-Id: Ie920260635ced50785a858aa307dde53fc4f3617 Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/91364 Reviewed-by: Benjamin Kott <benjamin.kott@outlook.com> Reviewed-by: Benjamin Franzke <ben@bnf.dev> Tested-by: Benjamin Franzke <ben@bnf.dev> Tested-by: core-ci <typo3@b13.com> Tested-by: Benjamin Kott <benjamin.kott@outlook.com> Tested-by: Benni Mack <benni@typo3.org> Reviewed-by: Benni Mack <benni@typo3.org>
diff --git a/Build/Sources/Sass/component/_module.scss b/Build/Sources/Sass/component/_module.scss
@@ -19,7 +19,7 @@
     --module-docheader-bg: var(--typo3-surface-container-high);
     --module-docheader-border-color: color-mix(in srgb, var(--module-docheader-bg), var(--module-color) 10%);
     --module-docheader-border-width: 1px;
-    --module-docheader-bar-height: 28.5px;
+    --module-docheader-bar-height: calc((28.5px - 16px) + 1em);
     --module-docheader-scroll-offset: calc(-1 * (var(--module-docheader-bar-height) + var(--module-docheader-padding-y)));
     --module-docheader-height: calc(var(--module-docheader-bar-height) * 2 + var(--module-docheader-padding-y) * 2 + var(--module-docheader-spacing-y) + var(--module-docheader-border-width));
     --module-body-padding-y: 1.5rem;
diff --git a/Build/Sources/Sass/component/_root.scss b/Build/Sources/Sass/component/_root.scss
@@ -25,10 +25,15 @@
 :root {
     color-scheme: light dark;
     scroll-behavior: smooth;
+    // Respect user agent font size setting, but require at
+    // least a minimum font-size of 14px, as we're scaling
+    // <body> by 75% and any base font size below 14px would
+    // become less than 10px for default text.
+    font-size: max(1em, 14px);
 
     // General
-    --typo3-font-size: 12px;
-    --typo3-font-size-small: 11px;
+    --typo3-font-size: .75rem;
+    --typo3-font-size-small: .6875rem;
     --typo3-font-family-sans-serif: #{$font-family-sans-serif};
     --typo3-font-family-monospace: #{$font-family-monospace};
     --typo3-font-family: var(--typo3-font-family-sans-serif);
diff --git a/Build/Sources/Sass/component/scaffold/_scaffold.scss b/Build/Sources/Sass/component/scaffold/_scaffold.scss
@@ -49,6 +49,7 @@ body {
 
 body {
     min-height: 100%;
+    font-size: var(--typo3-font-size);
 }
 
 iframe {
diff --git a/typo3/sysext/backend/Resources/Public/Css/backend.css b/typo3/sysext/backend/Resources/Public/Css/backend.css

Original file line number	Diff line number	Diff line change
`@@ -49,6 +49,7 @@ body {`
`49`	`49`
`50`	`50`	`body {`
`51`	`51`	`min-height: 100%;`
	`52`	`+ font-size: var(--typo3-font-size);`
`52`	`53`	`}`
`53`	`54`
`54`	`55`	`iframe {`