Picking a good user interface typeface is not a task a designer takes lightly. Imagine the product as if it is a person, the font is the example of what they wearing. Sure someone’s outfit is not a direct representation of someone’s true self, but most of the times it’s a good indicator of their personality, more formal or casual, familiar, irreverent, you get the point. Also, for an app, you can’t really compromise legibility, versatility, in favor of personality and style. It has to work great at small sizes, large sizes, retina, non-retina, upper and lowercase, etc … And since we live on the web load times and file sizes have to be prioritized. ## Enter Native System Fonts Recently we have seen great efforts from companies trying to craft and improve their Operative System’s fonts: Google with [Roboto](https://fonts.google.com/specimen/Roboto), on their second version now, Apple has [San Francisco](https://developer.apple.com/fonts/), even Mozilla had Erik Spiekermann design their own system font — [Fira Sans](http://mozilla.github.io/Fira/). We have also seen companies making the switch from custom to system fonts on their apps, companies like [Medium](https://medium.design/system-shock-6b1dc6d6596f), [Booking](https://booking.design/implementing-system-fonts-on-booking-com-a-lesson-learned-bdc984df627f), and GitHub. System fonts come with a few advantages: - We don’t have to host them ourselves; - We don’t have to keep the font files up to date; - There’s no need for the user/client to download, and load them; But… Each OS has their own, so that means that it could be a bit unpredictable. It requires you to design with all fonts in mind and testing **_a lot_**. ## Implementation `--fontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";` `--fontMono: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", Courier, monospace;` That’s it. # San Francisco macOS accounts for the majority of users using Netlify, so if we’re going with system fonts, we should prioritize San Francisco. San Francisco UI is a font family composed of two different fonts: SF UI Display and SF UI Text. - SF UI Display is designed for larger type, such as headers, and it doesn’t scale well to smaller sizes. - SF UI Text is designed for smaller sizes, and it’s probably the font that you are reading this right now if you’re on a Mac or iOS device. The cool thing about this is the macOS is smart enough to automatically switch between the two fonts depending on the size of the text. For text larger than 20pt(≈ 26px) the OS will switch automatically from SF UI Text, to SF UI Display. There’s also a slight variance in available weights of the two fonts, for example, you can’t add a **8px** text in **Thin** weight. ![San Francisco weights](/v3/img/blog/type-weights.png) Prioritizing doesn’t mean we will neglect the others, it just means that anywhere I will need to pick just one font, I’ll pick SF, like for a design mockup. If you want to use San Francisco in Sketch: 1. Download the font files directly from Apple; 2. Download and install this handy plugin to automatically fix the character spacing to match Apple’s (if you use Text Styles you’ll only have to run it once per style). 3. Use SF UI Display for text size > 26, SF UI Text for the rest (again, if you use Text Styles you’ll only have to keep this in mind when creating them). ![SF in Sketch](/v3/img/blog/type-sketch.png) **[Source Sans Pro](https://fonts.google.com/specimen/Source+Sans+Pro), by Adobe** [Link](https://fonts.google.com/specimen/Source+Sans+Pro?selection.family=Source+Sans+Pro) A widely used font nowadays, so we would risk being a bit boring, but it’s a solid font. ![Font Exploration with Source Sans Pro](/v3/img/blog/image-6.png) **[Roboto](https://fonts.google.com/specimen/Roboto), by Google** Oh Roboto, Google’s font. Since Google updated it last year it really matured into a solid and great font for UI. Being used nowadays for all Google things. It’s also as you may know, the font that we’re currently using in our marketing site. ![Font Exploration with Roboto](/v3/img/blog/image-8.png) **[San Francisco](https://developer.apple.com/fonts/), by Apple** [Link](https://developer.apple.com/fonts/) macOS, iOS and all things Apple nowadays. A solid font designed for screens that performs like a champ. ![Font Exploration with San Francisco](/v3/img/blog/image-10.png) * * * And lastly here’s just a couple of side by side examples: ![Side by side comparison with Cards](/v3/img/blog/image-2.png) ![Side by side comparison of buttons](/v3/img/blog/type-buttons.png) ### Share - [X (fka Twitter)](https://twitter.com/intent/tweet?text=Design Series: Typography&url=https://www.netlify.com/blog/2017/05/23/design-series-typography//) - [LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.netlify.com%2Fblog%2F2017%2F05%2F23%2Fdesign-series-typography%2F%2F) - [Facebook](https://www.facebook.com/sharer.php?u=https://www.netlify.com/blog/2017/05/23/design-series-typography//) - [Bluesky](https://bsky.app/intent/compose?text=Design Series: Typography+https://www.netlify.com/blog/2017/05/23/design-series-typography//) * * * ### Tags - [Design](/blog/tags/design/) - [typography](/blog/tags/typography/) ## Keep reading ![](/_astro/cfdc437592ee2bf75a62690af707d52533d08063-1600x900_2njoni.webp) Opinions & Insights May 14, 2026 [ ### How we built Netlify Database for AI-native development ](/blog/how-we-built-netlify-database-for-ai-native-development) - ![Profile picture of Eduardo Bouças](/_astro/52958f21e8450baf6d8e60302341a984e220c0cd-512x512_13VDlu.webp) Eduardo Bouças ![](/_astro/97a103abeebc73c01640f04a5c7555c1d10469aa-1200x675_Z8E0d4.webp) Opinions & Insights May 6, 2026 [ ### My experience building and deploying a project with Netlify Agent Runners ](/blog/my-experience-building-and-deploying-a-project-with-netlify-agent-runners) - ![Profile picture of Conor Martin ](/_astro/d1f759333090a4801940b47bf8701c441c6bd4a4-375x375_Bsg02.webp) Conor Martin ## Recent posts News & Announcements June 25, 2026 [ ### Netlify Functions, designed for Agent Experience ](/blog/netlify-functions-designed-for-agent-experience) - ![Profile picture of Eduardo Bouças](/_astro/52958f21e8450baf6d8e60302341a984e220c0cd-512x512_13VDlu.webp) Eduardo Bouças News & Announcements June 24, 2026 [ ### How we measure Netlify’s Agent Experience ](/blog/how-we-measure-netlify-agent-experience) - ![Profile picture of Sean Roberts](/_astro/bbf2243f8171dbddd80ab2103622106cef84d125-512x512_Z1d2LKE.webp) Sean Roberts Guides & Tutorials May 15, 2026 [ ### How to build a real-time AI chatbot in minutes with Netlify Agent Runners (no backend) ](/blog/how-to-build-a-real-time-ai-chatbot-in-minutes-with-netlify-agent-runners-no-backend) - ![Profile picture of Nahrin Jalal](/_astro/f0e7c8f227a03fe58340c99ef5439d5a896c0733-272x272_Z23kDpD.webp) Nahrin Jalal ![](/_astro/3f255b372fa958df35802666ee33b4609b2d71bd-1200x1586_1VtE2D.webp) ### How do the best dev and marketing teams work together? [Access the report](https://www.netlify.com/reports/2024-leadership-trend-report/access/)