5 rules for better typography in UI design
While typography is a whole discipline in itself, there are five things you can check to ensure text in your UI design is readable, accessible and as clear as possible:
1. Check your font size
Using too small a font size can make things hard to read. Most browsers have a default font size of around 16px, but often the actual font you are using can make a real difference in legibility - some fonts are harder to read at certain sizes than others.
I usually start with a default body size of 18-20px and work my way up from there.
2. Check your line length
If your line length is too wide, it can be tiring for users to scan as their eyes have to travel further from the start to the end of a paragraph when scanning lines.
Conversely, if your line length is too narrow, users have to scroll and scroll to read something.
A good rule of thumb is to use approximately two alphabets in judging max-width for body text for good readability.
"abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz"
A bit over or under is fine.
3. Check your white space
White space between lines of text (also known as leading) is essential to get right. White space calms our reading experience, letting the words "breathe".
Fun fact: the word "leading" comes from the days of the printing press, where lead blocks were used to create space between lines of text.
The right amount of leading lets the reader distinguish the letter shapes more easily.
On the web in CSS we use line-height and can be specified in points or percentage sizes.
I usually use 1.3 to 1.5 depending on the size of the font. Roughly, if you can fit a lowercase letter in the whitespace between lines, then your text will be readable.
Design tools like Sketch or Figma try to be smart about it, but usually are a little conservative, so you usually have to increase it a bit.
4. Use the right leading for headlines vs body copy
Headlines can use much tighter leading (as text is usually much larger) whereas body copy needs to be much looser. If you increase the font size, you'll need less leading.
5. Look elsewhere for inspiration and test with users
While these are good guidelines, it's always worth testing with real users - get a second opinion. What works on a desktop web browser may not work on a phone, due to the distance someone is reading from.
While there are definitely cases where more dense small copy makes sense (such as controls in more complex UI) broadly the more text someone has to read, the more they need the right spacing to make sense of things.
If you haven't anyone to test with, step away from your design and come back to it later with fresh eyes, look at examples online you think are well designed, and see what they use in comparison.
Resources