diff --git a/scss/_variables.scss b/scss/_variables.scss
index ccc925837a..56a81be7fd 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -534,7 +534,7 @@ $aspect-ratios: (
 
 // scss-docs-start font-variables
 // stylelint-disable value-keyword-case
-$font-family-sans-serif:      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+$font-family-sans-serif:      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
 $font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
 // stylelint-enable value-keyword-case
 $font-family-base:            var(--#{$variable-prefix}font-sans-serif) !default;
diff --git a/site/content/docs/5.1/content/reboot.md b/site/content/docs/5.1/content/reboot.md
index bed4f599eb..033d5ea95b 100644
--- a/site/content/docs/5.1/content/reboot.md
+++ b/site/content/docs/5.1/content/reboot.md
@@ -63,11 +63,13 @@ $font-family-sans-serif:
   "Segoe UI",
   // Android
   Roboto,
-  // Basic web fallback
-  "Helvetica Neue", Arial,
+  // older macOS and iOS
+  "Helvetica Neue"
   // Linux
   "Noto Sans",
   "Liberation Sans",
+  // Basic web fallback
+  Arial,
   // Sans serif fallback
   sans-serif,
   // Emoji fonts