font sizes in UI design: a practical guide

One of the questions new UI designers ask most often is simple:
What font size should I use?

Is it for a website? An Android app? iOS? iPad?

If you’ve ever wished someone would just lay all the rules out in one place—this is that page. These are current (2024) best-practice font size guidelines covering iOS, Android / Material Design, and responsive web design.

You’ll find breakdowns for:

• iPhone

• iPad

• Material Design — Mobile

• Material Design — Desktop

• Mobile Web

• Desktop Web

• Core principles

• Useful references

One Clear Reference Instead of Guesswork

Material Design technically has guidelines - but they’re buried in dozens of pages. Apple’s guidance is vague at best. And web design? Still the wild west. People suggest things like “use the golden ratio,” but that rarely helps in real-world UI work.

Three platforms. Different conventions. Conflicting design philosophies. That’s exactly why this guide exists.

You can either read it platform by platform or skip to the Principles & Resources section if you want to understand why certain sizes work the way they do.

Pixels, Points, sp, dp - What Actually Matters

High-resolution screens have turned typography terminology into a mess. “Pixel” can mean multiple things now. Then you’ve got points, scale-independent pixels, density-independent pixels…

Here’s what actually matters as a designer.

The Only Number You Need to Care About

When you set a font size in Figma, Sketch, or any design tool, you’re typing a number into a box.

That’s the number this guide uses. It doesn’t matter whether the unit is technically called pixels, points, or something else. If you type the number into your design tool at 1× scale, it will behave correctly.

(If you don’t know what 1× means, you’re probably already using it.)

Good design adapts seamlessly. Ensuring usability across all devices is paramount for reaching your entire audience effectively.

What “Pixel” Really Means

The word pixel is overloaded:

• It can mean a physical dot on a screen

• It can mean a logical unit used by software

• Or it can mean a CSS unit used on the web

In this guide, pixel always means CSS pixel - the value you type into Figma or into font-size: 16px in CSS. That’s the only definition that matters here.

What Is a Point?

A point (pt) is Apple’s version of the same idea. On modern iPhones, one point may equal multiple physical pixels, sometimes 4, sometimes 9 - depending on the screen density.

The good news: you don’t need to care.

You just use points in your design tool, and iOS handles the rest.

What Are dp and sp?

Android introduced two similar units:

• dp (density-independent pixels) – used for layout and spacing

• sp (scale-independent pixels) – used for text

They’re basically Android’s version of points. The reason for the split is accessibility: if a user increases their system font size, sp scales accordingly while dp does not. For designers, the takeaway is simple:

• Use sp for text

• Use dp for everything else