So you’re designing a website and want to know (roughly) what font size to use? Perfect. This is the page for you.
If you’re more concerned with mobile or desktop, you can skip straight to those sections. But – hey – it’s 2019, and websites are getting pretty responsive these days. Best to read it all? Let’s dive in.
Mobile Web Typography Guidelines
If you’re designing a website or app that can be viewed on mobile devices, there is only one hard and fast rule:
- Use a text input font size of at least 16px. If your text inputs have a smaller font size than that, iOS browsers will zoom in on the left side of the text input, often obscuring the right side and forcing the user to manually zoom out after using the text box.
Here’s an example of that happening, by the way:
Everything else I have to say about mobile web font sizes is basically a guideline:
- Use a body font size around 16px. You want the body text on your phone (when held at a natural distance) to be as readable as the text in a well-printed book (when held at a natural – usually slightly farther – distance)
- For secondary text, unimportant labels, and captions, use a size a couple notches smaller – such as 13px or 14px. I don’t recommend going down just one font size, since then it’s too easy to confuse with normal text. When text is less important, you want to style it so that you’re clearly communicating the lesser importance.
- The gold standard will be viewing your designs on an actual device. I can’t recommend this practice highly enough, since the feel of an mobile app design on your laptop screen is way different than when you’re holding it in your hand. As a beginning designer, I was shocked almost every time I opened on mobile a page I designed on desktop. Font sizes, spacing… everything was off. So use Sketch Mirror or Figma Mirror or whatever app makes sense for you, but view your designs on-device.
- Finally, for any other questions you have about mobile web font sizes, refer to the Material Design guidelines which are clear, consistent, and ingenious (though not concise). The older I get as a designer, the more convinced I am that even though Apple has all the design cred, Google is currently walking all over them. But don’t tell the design snobs I said so.
Desktop Web Typography Guidelines
When picking a base size for a desktop website or web app, you can break down most designs into one of two types:
- Text-heavy pages. Articles, blogs, news, etc. These are pages where the primary purpose the user has on the page is to read. There is very little in terms of interaction – perhaps just clicking a few links.
- Interaction-heavy pages. Apps that involve more hovering, clicking, searching for an item in a list or table, editing, typing, etc. There may be plenty of text on the page, but it’s not stuff you read straight through like a book.
Need an example or two? This page is a text-heavy page. Your Facebook feed is an interaction-heavy page. Each has slightly different concerns, so I’ll handle them separately. Keep in mind that both will probably be useful. The “About” page of a crazy web app is still text-heavy. The “Contact” page on a vanilla blog is still interaction-heavy.
Long story short, for text-heavy pages, you want larger font sizes. If folks are reading for long periods of time, be nice: don’t make them strain their eyes. Now, each font is different, even at the same size, but we’re talking:
- 16px – absolute minimum for text-heavy pages
- 18px – a better font size to start with. You’re not printing out a single-spaced Word document; you’re writing for people sitting a couple feet from their decade-old monitors.
- 20px+ – may feel awkwardly large at first, but is always worth trying out in your design app. The best-looking text-heavy site on the web, Medium.com, has a default article text size of 21px.
Similar to what I mentioned in the mobile web section, there’s a great rule of thumb here: your website’s text (viewed at typical monitor distance) should be as readable as a well-made book (viewed at typical book-holding distance). This is actually a really annoying and dorky exercise to perform, because you have to shut one eye and squint at a book you’re holding up like a moron. But find a nice, solitary place, and sanity-check: is my font size readable even at a couple feet? Even adjusting for my young and powerful eyes? OK, you get the idea.
Now, for interaction-heavy pages, smaller text sizes are perfectly acceptable. In fact, depending on the amount of data your user is taking in at once, even 18px text is uncomfortably large. Look at your (web) inbox, look at twitter, look at any apps you use that require scanning over reading, look at apps that show you data – you’re going to be hard-pressed to find sustained paragraphs of 18px text. Instead, 14px-16px is the norm. But there won’t be just one font size. There will likely be smaller sizes for less important things, and larger sizes for more important things (titles and subtitles and sub-subtitles, etc.), and it’ll all be blended together in a giant hodgepodge.
Now here’s the important part: for any interaction-heavy page, the font sizes are driven LESS by some top-down decrees (“type scales”, I’m looking at you) than the specific needs of each piece of text and the interplay between them.
- The event names are in 12px medium, which is a font style entirely absent from the Material Design guidelines. Yet given they need to fit 7 columns on a screen that’s only 1440px wide, and many events are quite short, this is an ideal font size choice. Any smaller and legibility suffers. Any bigger and the event names will be cut off too frequently. Design is tradeoffs, kid. If you can’t name the tradeoff you’re making, you’re probably making it in the wrong place.
- The hours of the day labels (“12pm”, “1pm”, etc) are font-size: 10px. That’s another style missing entirely from the Material Design guidelines. Yet horizontal space is at a premium. Each event is labelled with its start time anyways. Why not make the left-hand labels smaller?
- The dates are 48px. Again, not found in Material Design guidelines. Now, in this case, I don’t know why they didn’t use 45px, which is the official “Display 2” size, but I’ll say this: if it had been me designing, I probably would have made the 48px size bold, and here, bold would be an issue. It would attract too much attention. So I would’ve modified the style anyways.
When you’re designing your interaction-heavy desktop website, keep this in mind. You need to modify text styles on a case-by-case basis. Consistency is wonderful, but no one gets mad when a font size is one px too small – they get mad when they can’t easily find what they’re looking for.
Continue to Chapter 4: Principles & Resources
One Final Note 😎
If this is your first time here, you might also be interested in:
- Learn UI Design, my full-length online video course on user interface design
- The Design Newsletter, a 20,000+ person newsletter with original design articles aimed at giving you tactical advice to improve your UX/UI skills.
Some people have some really nice stuff to say about the newsletter.
Thank you for your newsletter. It’s possibly the best newsletter I’ve received since 1999, when I started freelancing.
Each time I receive an email from you, I'm like ‘Damn, this is a long email! No way will I read all of this’, then I began to read and I'm like ‘Damn, this is so freaking brillant’ and read it all.
UX Strategist, Freelance
The Design Newsletter
Over 20,000 subscribed.
No spam. Unsubscribe anytime.