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.

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Why the world’s largest railway operator relies on a car parking map to reach notorious drivers

Weekly Micro-Interactions #29

Design Systems Are Bullsh*t

Illustration of a man in a straitjacket with an overlaying pattern of robots covering the whole image.

What to watch on Netflix: a UX case study

Phone screen with a hi-fi wireframe for the new Netflix feature

Ironhack’s Prework: Paula Gómez_Challenge 2

Surprise and Delight or Forget Effortlessly

Week 12: UXD720 UX Design

Challenge 01: Design Thinking

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Siddharth Chaudhary

Siddharth Chaudhary

More from Medium

HOW CSS TRANSITION WORK

Getting Started with CSS — Beginner Roadmap!!

CSS, the silent beautifier.

Recreating Dribbble’s Page Layout with HTML + CSS

Dribbble’s Landing Page