Add this to your CSS now
Ever struggled choosing the right typeface for your users. Yup, here is the solution.
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif
Let me quickly talk you through this.
-apple-system — This targets sans-fransisco on iOS and MacOS devices
system-ui — This targets any platform’s system font
BlinkMacSystemFont — This targets the apple sans-fransisco font on MacOS Chrome
"Segoe UI” — This targets windows computers and phones
Roboto — This is for Android users
Arial, sans-serif — Generic fallbacks
Where is this used?
This combination is widely used, even on Medium itself. It is used by Github, Wordpress and many more sites, so don’t miss out on your site.
Thanks for reading. If you liked this article, please follow me on twitter and I’ll give you a DM.