Last active
March 31, 2021 01:56
-
-
Save ricealexander/0e8b031bce0f772733d4409599de4d2f to your computer and use it in GitHub Desktop.
system fonts across platforms
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
:root { | |
--system-sans-serif: | |
system-ui, /* detect system font automatically */ | |
-apple-system, /* Safari (Mac OS X and iOS) and Older Mac OS X */ | |
BlinkMacSystemFont, /* Chrome<56 (Mac OS X) */ | |
"Segoe UI", /* Windows and Windows Phone */ | |
"Roboto", /* Android and Chrome OS */ | |
"Oxygen", /* KDE - Linux environment */ | |
"Ubuntu", /* Ubuntu - Linux distribution */ | |
"Cantarell", /* GNOME - Linux environment */ | |
"Fira Sans", /* Firefox */ | |
"Droid Sans", /* Older Android */ | |
"Helvetica Neue", /* Older Mac OS X */ | |
sans-serif, | |
"Apple Color Emoji", /* Mac OS X Emoji fallback */ | |
"Segoe UI Emoji", "Segoe UI Symbol"; /* Windows Emoji fallback */ | |
--system-serif: | |
"Apple Garamond", | |
"Droid Serif", | |
"Source Serif Pro", | |
serif, | |
"Apple Color Emoji", /* Mac OS X Emoji fallback */ | |
"Segoe UI Emoji", "Segoe UI Symbol"; /* Windows Emoji fallback */ | |
--system-monospace: | |
"SFMono-Regular", | |
"Menlo", | |
"Consolas", | |
"Courier New", | |
"Courier", | |
monospace, | |
"Apple Color Emoji", /* Mac OS X Emoji fallback */ | |
"Segoe UI Emoji", "Segoe UI Symbol"; /* Windows Emoji fallback */ | |
} | |
body { | |
font-family: var(--system-sans-serif); | |
} | |
/** SYSTEM FONTS ACROSS PLATFORMS | |
* This font stack detects system fonts across operating systems. | |
* | |
* This is faster than downloading new fonts, making it a viable option for a default font. | |
* Matching system fonts is alleged to give users a "comfortable" feel. | |
* These also fall back to emoji fonts for characters outside the standard unicode range. | |
* | |
* https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/ | |
* https://css-tricks.com/snippets/css/system-font-stack/ | |
* https://v4-alpha.getbootstrap.com/content/reboot/#native-font-stack | |
**/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment