Mobile-First Typography:
Designing for Small Screens (Without Making Your Users Squint)
The Client Who Read on the Train
A few years ago, I launched a beautiful website for a client. The typography was perfect — elegant serifs, perfect line heights, balanced margins. On my desktop, it was a masterpiece.
Then the client emailed me a photo. He was on a train, trying to read the site on his phone. The text was so small he had to zoom in to read each paragraph. The elegant line lengths meant he was scrolling horizontally after every two words. He looked frustrated. I looked incompetent.
That photo is still on my phone. It reminds me that mobile isn't an afterthought — it's where most people will experience your work. This article is everything I learned after that train ride.
1. Why Mobile Typography Is Different (It's Not Just Smaller Screens)
When I started designing, I thought mobile typography was just "desktop but smaller." Scale everything down, and it should work, right? Wrong. Here's what's actually different:
- Distance: People hold phones closer to their face. A 16px font on desktop is about 2 feet away. On mobile, it's 12 inches away. Same size, different experience.
- Motion: People read on phones while walking, on trains, in cars. Your text needs to be readable even when the reader is moving.
- Lighting: Phones are used in bright sunlight, dark rooms, and everything in between. Contrast matters more.
- Attention: Mobile users are often distracted. Your typography needs to guide them, not fight for attention.
2. The 14px Rule (And When to Break It)
For years, I used 16px as my base font size on desktop. When I switched to mobile-first, I tested smaller sizes and found something surprising: 14px is often more readable on phones than 16px.
❌ Too Small
12px — only for captions and fine print
✅ Just Right
14px — ideal for most body text
🔹 Sometimes Better
16px — for accessibility or senior audiences
My rule of thumb: Start with 14px for body text. Test with real users. If anyone squints, bump it up to 15px or 16px. If you're designing for an older audience, start at 16px. Never go below 12px for anything you expect people to actually read.
3. Line Height: The Most Overlooked Setting
I ignored line height for years. I'd set it to 1.2 and move on. Then I realized that on mobile, tight line heights make text feel cramped and hard to follow.
❌ Too Tight
✅ Just Right
My rule: For body text on mobile, use line-height between 1.5 and 1.7. For headings, you can go tighter — 1.2 to 1.3 works well. Test it on your own phone. If it feels cramped, add space.
4. Measure: Why 45-75 Characters Matters More on Mobile
There's a classic typography rule: lines should be between 45 and 75 characters. Shorter than that feels choppy. Longer than that, and readers lose their place. On mobile, this rule becomes even more critical.
❌ Too Long (Mobile Nightmare)
✅ Just Right (Comfortable)
/* The CSS fix that changed everything */
.container {
max-width: 650px; /* Keeps lines at comfortable length */
margin: 0 auto; /* Centers on larger screens */
padding: 0 20px; /* Adds breathing room on mobile */
}
My rule: Set a max-width of 650-700px on your text containers. Add generous padding (16-24px) so text never touches the edge of the screen. Test with real content, not lorem ipsum.
5. Touch Targets: Not Just for Buttons
Here's something I learned from watching users try to click links on my sites: fingers are bigger than mouse cursors.
Apple's Human Interface Guidelines recommend a minimum touch target of 44x44 points. That's not just for buttons — that's for any interactive element, including text links.
❌ Too Small
✅ Good
/* Make links tappable */
a {
padding: 8px 4px; /* Adds tap area without changing layout */
display: inline-block; /* Required for padding to work */
}
/* For navigation links, use larger targets */
.nav-link {
padding: 12px 16px; /* Easy to tap */
min-height: 44px; /* Meets Apple guideline */
}
6. Responsive Font Sizes (With Actual CSS)
Here's the system I use now. It's simple, it scales well, and it's worked on dozens of projects:
/* Base styles (mobile first) */
html {
font-size: 14px; /* Comfortable on mobile */
}
body {
font-size: 1rem;
line-height: 1.6;
}
h1 {
font-size: 2rem; /* 28px */
line-height: 1.2;
margin-bottom: 0.5em;
}
h2 {
font-size: 1.5rem; /* 21px */
line-height: 1.3;
}
/* Tablet adjustments */
@media (min-width: 768px) {
html {
font-size: 15px; /* Slightly larger on tablets */
}
}
/* Desktop adjustments */
@media (min-width: 1024px) {
html {
font-size: 16px; /* Back to classic desktop size */
}
h1 {
font-size: 2.5rem; /* 40px */
}
h2 {
font-size: 2rem; /* 32px */
}
}
7. How I Test Now (The "Train Ride" Test)
After that embarrassing client photo, I built a testing workflow. Here's what I do for every project:
- Start in Chrome DevTools — Set the viewport to 375x667 (iPhone SE size). Design everything here first.
- Test with real text — Not "Lorem ipsum." Real headlines, real paragraphs. If it works with real content, it's solid.
- Test on an actual phone — Emulators lie. I use a cheap Android phone and an old iPhone to test everything.
- The "train ride" test — I literally take my phone outside, stand in sunlight, and try to read the site. If I squint, I adjust.
- Test with zoom — I set browser zoom to 150% and make sure nothing breaks. Vision-impaired users will thank you.
8. Common Mobile Typography Mistakes (I've Made Them All)
- Using the same font size as desktop — 18px body text on mobile takes up too much space and feels overwhelming.
- Not enough contrast — Light gray text that looks subtle on desktop becomes invisible on a bright phone screen.
- Justified text — On small screens, justification creates awkward gaps. Stick to left-aligned.
- Centered paragraphs — Centered text is harder to read on mobile because your eye has to find the start of each line.
- No max-width — Without limiting line length, you get the "across the whole screen" problem.
- Ignoring touch targets — Links that are easy to click with a mouse are hard to tap with a finger.
Mobile Typography Quick Reference
I still have that photo of the client on the train. Every time I start a new project, I look at it and remind myself: design for the phone first. If it works there, it'll work everywhere. If it doesn't work there, nothing else matters.
The good news: Once you build a system for mobile typography, it becomes automatic. You stop guessing and start knowing what works. And your users — especially the ones reading on the train, in the sun, or with older eyes — will never know how much thought you put into it. They'll just know it feels right.
📚 More from Afsar
Still designing on desktop first? I did that for years. Try mobile-first once. You won't go back.