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).

Px, pt, sp, and dp: Explained!

The proliferation of HD screens has wreaked absolute havoc on designer terminology. “Pixel” now means about 3 different things – and now there are “points” and “scaleable pixels” and “density-independent pixels” to worry about too! As a designer, here’s the most important thing to know:

The Number to Type Into the Box

Whether you’re using Sketch, Figma, Adobe XD, etc, you’re specifying a font size by typing a number into a textbox. In this guide, I will always give you the number you type into the box. It doesn’t matter if the unit is called “pixels” or “points” or whatever – just type it into the box in Sketch, and the font size will work OK.

(There is one caveat here – you need to design @1x. If you don’t know what that means, don’t worry – you probably aren’t violating it)

What is a Pixel?

“Pixel” is an overloaded term. It can refer to the smallest possible square of light on a screen. Or it can refer to the smallest possible square of light that you can turn on in software on a screen (Yes, those things are sometimes different). Or it can refer to a unit of measurement in websites.

For the sake of clarity, this guide will always refer to “CSS pixels” when it says “pixels”. That’s the unit of measurement in websites. It’s the number you type into the box when designing a website, and it’s the number the developer will put into CSS when they say font-size: 16px.

What is a Point?

A point (“pt”) is Apple’s special term for “the number to type into the box”, so in the iOS chapter, I will speak in points.

A “point” is a nice unit for designers, because on the hardware level, sometimes one point becomes four hardware pixels (e.g. starting with iPhone 4) – or even nine (e.g. starting with iPhone X) – or, in an awful offense against all that is good and holy in the world, sometimes it becomes nine software pixels, but is then squished into 6.81 device pixels, and a crapload of aliasing is done to display even the simplest straight line. Dang it, iPhone 6+, 7+, and 8+. You’re ruining all our fun.

Fortunately, as a designer, you basically only need to think about pts, because that’s what you type into the box. Cool? Good.

What is a dp? What is an sp?

As if it wasn’t bad enough, Google had to go and coin not one but two new units. Both “dp”, or “density-independent pixel”, and “sp”, or “scaleable pixel” are basically the same as a “pt”, but for Android. The only difference between “sp” and “dp” is that “sp” is for measuring font sizes, and “dp” is for measuring everything else.

Why use two separate units there? Well, if a user is old and blind and sets their phone’s font size preferences to be 4x bigger than their grandkid’s, you can still refer to those font sizes as the same size in “sp”.

One detail about the definition of “dp” and “sp” vs. “pt” is – and this does NOT affect us in practice - Android wants a dp to be the same size across every device, so it’s actually locked at 1/160th of an inch. Of course, presuming the same font size user setting, the same could be said about “sp” – it’s 1/160th of an inch. The same cannot be said of iPhones – a “pt” on iPhone X is approximately 1/152nd of an inch. However, point on iPhone 8 is 1/163rd of an inch.

The more you know, eh? Don’t think to hard about it. For Android apps, just type “dp” into the box and call it a day.

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

Continue to Chapter 1: iOS Font Size Guidelines

You Might Also Like: