diff --git a/_sass/support/_variables.scss b/_sass/support/_variables.scss
index d5df8fbb92b5cafc2d4a5305d9a1152c2f0bfc16..a185e5e96a5a6940bf67af7b13ad36eabe7dc548 100644
--- a/_sass/support/_variables.scss
+++ b/_sass/support/_variables.scss
@@ -2,8 +2,8 @@
 // Typography
 //
 
-$body-font-family: -apple-system, BlinkMacSystemFont, "helvetica neue",
-  helvetica, roboto, noto, "segoe ui", 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 2838a795fff7a83c2250204d8e83e1a1969b489d..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", helvetica, roboto, noto, "segoe ui", arial, sans-serif
+system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
 ```
 
 ABCDEFGHIJKLMNOPQRSTUVWXYZ