diff --git a/_sass/support/_variables.scss b/_sass/support/_variables.scss
index bca9a71db397ce96aee4aa9d89d580eb171cd34d..d169ebac4c9fdb13d0ea1df15dd8ced1af9786a4 100644
--- a/_sass/support/_variables.scss
+++ b/_sass/support/_variables.scss
@@ -2,8 +2,8 @@
 // Typography
 //
 
-$body-font-family: -apple-system, BlinkMacSystemFont, "helvetica neue",
-  "segoe ui", helvetica, roboto, noto, arial, sans-serif !default;
+$body-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+  Roboto, "Helvetica Neue", Arial, sans-serif !default;
 $mono-font-family: "SFMono-Regular", Menlo, Consolas, Monospace !default;
 $root-font-size: 16px !default; // Base font-size for rems
 $body-line-height: 1.4 !default;
diff --git a/docs/ui-components/typography.md b/docs/ui-components/typography.md
index 3db988ca47e851fa9bdae41b5561a4e703e23fb2..b879c95299a0406bac8d5e4917bf3acd7e5e1d0a 100644
--- a/docs/ui-components/typography.md
+++ b/docs/ui-components/typography.md
@@ -21,7 +21,7 @@ nav_order: 1
 By default, Just the Docs uses a native system font stack for sans-serif fonts:
 
 ```scss
--apple-system, BlinkMacSystemFont, "helvetica neue", "segoe ui", helvetica, roboto, noto, arial, sans-serif
+system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
 ```
 
 ABCDEFGHIJKLMNOPQRSTUVWXYZ