Course Blog Newsletter Subscribe

Font Sizes in UI Design: The Complete Guide

One of the most common questions I receive from beginning UI designers is: what font size should I use for my project? Maybe it’s a website, maybe an Android app, maybe iPhone/iPad.

Ever wish someone had compiled all the rules in one place?

If you have, dear reader, bookmark the crap out of this page. These are up-to-date (2018) guidelines and best practices for font sizes across all major platforms – iOS 11, Android/Material Design, and responsive web. Here’s a handy table of contents for ya:

(As you browse this guide, you can also navigate via the handy sidebar navigation!)

One Central Resource

Material Design has nice guidelines, but they’re like 50 pages long. iOS… well, they don’t even have nice guidelines! And the web is (still) the wild west. Someone tells you to use a typescale based on the golden ratio, and… is this even going to HELP me!?

Three different platforms, three different sets of concerns, and two opposing design languages to follow?

Yeah, not anymore.

You can browse this guide by platform, or, for a deeper look into the larger rules at play when it comes to picking type sizes, check out the Principles & Resources section at the end (That section also covers a list of useful typography-related sites).

Pixels, Points, & SP Explained

The proliferation of HD screens has wreaked absolute havoc on design terminology. “Pixel” now means about 3 different things. As a designer, here’s what you should know:

  • “The number to type into the box”. In this guide, I will always tell you “the number to type into the box”. This is what you enter as the font size when designing in Sketch, Figma, Adobe XD, or other UI design programs.
  • Points are Apple’s special term for “the number to type into the box”, so in the iOS chapter, I will speak in points.
  • SPs (“scaleable pixels”) are Google’s special term for “the number to type into the box”, so in the Android chapter, I will speak in sp. Note: the general unit of measurement in Android is “dp” – ”density-independent pixels”, which is the exact same thing. The reason they use “sp” for typography is so the user can make the entire phone’s text bigger or smaller without resizing everything else, and the font size units still make sense.
  • Pixels (more specifically known as “CSS Pixels”) are a unit in CSS to specify font size. In the web chapter, I will list sizes in CSS pixels.
  • Always design @1x. And if you don’t know what that means – don’t worry, you’re probably not disobeying it ;)

Alright. Good to go? Let’s get started.

Continue to Chapter 1: iOS Font Size Guidelines

You Might Also Like: