UI Typography for Mobile: The Definitive Guide to Small Screens

Designing typography for a billboard is easy; you have infinite space. Designing typography for a 6-inch mobile screen is a war over pixels.

On mobile, typography is not just about reading; it is about interaction. A user doesn't just scan the text; they touch it, swipe it, and pinch it. The constraints are brutal: variable lighting conditions (bright sun vs. dark bedroom), limited real estate, and the clumsiness of human thumbs.

If your text is too small, users squint. If it is too big, you break the layout. If the line height is wrong, they click the wrong button.

This guide moves beyond general "web design" advice and focuses specifically on the rigorous mechanics of mobile UI typography, drawing from Apple's Human Interface Guidelines and Google's Material Design.

1. The "16px" Rule: Size Matters

For years, the web standard for body text was 12px or 14px. On mobile, those days are dead.

**The Golden Rule:** The minimum legible size for body text on a mobile device is 16px (11pt on iOS).

**The Physics:** We hold phones closer to our faces than laptops, but the screen resolution (pixel density) is much higher. A 12px font on a high-density Retina display renders incredibly sharp, but thin. It becomes a strain to read.

**The Exception:** You can go down to 12-14px for "secondary text" (captions, timestamps, legal disclaimers), but never for information the user must read to complete a task.

2. System Fonts vs. Custom Fonts: The Performance Trade-off

When designing an app, you face a critical choice: Use the phone's default font or import your own?

The Case for System Fonts (San Francisco & Roboto)

• - **iOS:** Uses San Francisco (SF Pro).
• **Android:** Uses Roboto (and increasingly Google Sans).

**Why use them:** They are optimized at the operating system level. They load instantly (zero latency), support dynamic sizing automatically, and feel "native." Users trust them because every other app uses them.

The Case for Custom Fonts

**Why use them:** Brand consistency. If you are Airbnb or Spotify, you need your app to feel like you, not like a generic Apple app.

**The Compromise:** Use a Custom Font for Headers (H1, H2) to establish brand vibe, and use the System Font for Body Text and UI Controls to ensure perfect legibility and native feel.

3. The "Thumb Zone" and Touch Targets

On mobile, text often acts as a button. This introduces a constraint that print designers never face: Fitts's Law.

**Fitts's Law** implies that the smaller the target, the longer it takes to hit it.

**The 44px Standard:** Apple recommends a minimum touch target area of 44x44 points.

**The Conflict:** Your text link might only be 16px high.

**The Solution:** You must add Padding. Even if the text is small, the invisible box around it (the hit area) must be large. Never place two text links closer than 20px apart, or the user will inevitably "fat finger" the wrong one.

4. Hierarchy: Weight Over Size

On a desktop monitor, you can use a 60px H1 and a 16px Body. You have room for massive contrast.

On mobile, if you use a 60px headline, it will break into three lines and push your content "below the fold."

**The Mobile Strategy:** Create hierarchy using Font Weight and Color, not just size.

• - **Bad Mobile Hierarchy:** H1 (32px), Body (16px).
• **Good Mobile Hierarchy:** H1 (24px Bold), Body (16px Regular, Dark Grey), Caption (14px Medium, Light Grey).

By using weight (Bold/Semibold) and Greyscale (Black/Grey), you distinguish sections without eating up valuable vertical screen space.

5. Line Height (Leading) is Critical

Mobile screens are narrow (portrait mode). This means your text will wrap much more frequently than on desktop.

**The Problem:** If lines are too close together, the eye loses track when jumping from the end of one line to the start of the next.

**The Standard:** Mobile requires looser leading than desktop.

• - **Body Text:** Aim for 140% to 150% (e.g., 16px font / 24px line height).
• **Headlines:** Keep it tighter, around 110% to 120%, so the header holds together as a single unit.

6. Alignment: The Death of Justified Text

Never, ever use text-align: justify on mobile.

**The Reason:** Because mobile lines are short (often only 40-60 characters wide), justified alignment creates massive, ugly gaps of white space between words (called "rivers").

**The Fix:** Always use Left Align (ragged right). It is easier for the eye to track, and the uneven right edge gives the eye a visual anchor for line jumping.

7. Contrast and Environmental Factors

Mobile devices are used in the real world—in direct sunlight, in shaky subway cars, and in dim rooms.

**The Contrast Ratio:** Adhere strictly to WCAG AA standards (4.5:1 minimum).

**The "Grey" Trap:** Designers love light grey text (#999999) because it looks sleek on a calibrated MacBook Pro in a dark studio. On a phone screen in sunlight, that grey text becomes invisible.

**Rule:** If the information is important, make it #333333 or darker. Save the light grey for things that don't matter.

Conclusion: Empathy for the Thumb

Great UI typography is invisible. When it works, the user flows through the app, tapping buttons and consuming content without friction. When it fails, the user feels frustrated, squinting at the screen and mis-tapping links.

Designing for mobile is an exercise in restraint. It is not about how many fancy fonts you can fit; it is about how much friction you can remove. Keep it legible, keep it tappable, and keep it native.