“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. One detail about the definition of “dp” and “sp” vs. 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”. The only difference between “sp” and “dp” is that “sp” is for measuring font sizes, and “dp” is for measuring everything else. Both “dp”, or “density-independent pixel”, and “sp”, or “scaleable pixel” are basically the same as a “pt”, but for Android. What is a dp? What is an sp?Īs if it wasn’t bad enough, Google had to go and coin not one but two new units. You’re ruining all our fun.įortunately, as a designer, you basically only need to think about pts, because that’s what you type into the box.

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. starting with iPhone 4) – or even nine (e.g. What is a Point?Ī 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.Ī “point” is a nice unit for designers, because on the hardware level, sometimes one point becomes four hardware pixels (e.g. It’s the number you type into the box in Figma/Sketch/whatever when designing a website, and it’s the number the developer will put into CSS when they say font-size: 16px. That’s the unit of measurement in websites. Or it can refer to a unit of measurement in websites.įor the sake of clarity, this guide will always refer to “CSS pixels” when it says “pixels”. 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). It can refer to the smallest possible square of light on a screen. (There is one caveat here – you need to design If you don’t know what that means, don’t worry – you’re probably doing it already!) What is a Pixel? It doesn’t matter if the unit is called “pixels” or “points” or whatever – just type it into the box in Figma, and the font size will work OK. In this guide, I will always give you the number you type into the box. Whether you’re using Figma, Sketch, Adobe XD, etc, you’re specifying a font size by typing a number into a textbox. “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 The proliferation of HD screens has wreaked absolute havoc on designer terminology.

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). Three different platforms, three different sets of concerns, and two opposing design languages to follow? Someone tells you to use a typescale based on the golden ratio, and… is this even going to HELP me!? (Short answer: no) iOS… well, they don’t even have nice guidelines! And the web is (still) the wild west. Material Design has nice guidelines, but they’re like 50 pages long. (As you browse this guide, you can also navigate via the handy sidebar navigation!) One Central Resource These are up-to-date (2021) guidelines and best practices for font sizes across all major platforms – iOS 15, Android/Material Design, and responsive web. If you have, dear reader, bookmark the crap out of this page. 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.Įver wish someone had compiled all the rules in one place?

Change font size figma