How to Make Your Website’s Text Look Professionally-Designed
Why do some text layouts look beautiful and easy to read while others are a struggle to look at?
A really common problem I hear from folks creating their own website is that their text just doesn’t look professionally designed.
This is more than just an aesthetic problem: When text isn’t easy to scan, people are less likely to actually read it — no matter how great the words actually are.
Often the fix folks try is to change the font size. I’ll hear, “I’ve made the fonts bigger and smaller and neither looks good!”
So what’s the problem? Well, font size is only a piece of the puzzle.
There are actually three key factors that play into how readable text is:
Font Size — how big or small the letters are
Line Width — how long a given line of text is before it wraps to the next line
Line Height — how much vertical space exists between each line of text
These three factors need to be in perfect balance. When you try to read a block of text and it doesn’t quite look right to you, you’re recognizing that the balance of these factors isn’t quite right… look at you with an eye for design!
Matej Latin, a type designer whose work I adore, describes this as the Equilateral Triangle of a Perfect Paragraph.
Via Matej Latin
Font Size
Do you ever come across really tiny type? Yeah, it’s hard to read, isn’t it!
If you’re old enough to remember the early internet, you’ll remember that font sizes in the year 2000 averaged about 12 pixels (px), which was largely taken from the standard for print.
It’s taken a couple decades, but the internet is finally coming around to larger font sizes. The most common font size for paragraph text on a website these days is about 16 px, though it could honestly still be larger in most cases.
I’m a fan of web paragraph text of at least 18 px — for reference, the text you’re reading now (if you’re on a desktop computer) is about 19.2 px.
So the first rule is simply this: Don’t be shy. Let your words sing with a large-ish font.
Line Width
Ever wonder why newspapers (remember those?) and magazines organize their articles into columns of text?
It makes sense when you imagine reading a single line of text that extends the entire width of a newspaper page. It’s basically impossible and your eyes will get exhausted in no time flat.
On the flip side, if we create columns of text that are too narrow, then
we’re constantly
jumping to the
next line and it’s
very disorienting!
So where’s the sweet spot for line width? The ideal width of a line is 45 to 75 characters, including spaces.
For most paragraphs on the web, 75 characters seems to be the magic number. I’ll even dare to go between 65 and 85 characters wide before I drop much below 65. For instance, the text you’re reading now is about 75 to 80 characters wide.
So our second rule is simple: Pick a couple lines in your text and count the characters. If you’re close to 75 — maybe a little bit under — you’re in great shape.
Line Height
Line height is the amount of space above and below each line of text.
Via Matej Latin
Even a paragraph with the perfect font size and line width will be hard to read if the text is vertically squished together. It can also be disorienting to try and read if the text is super spaced out.
So we ask again: What’s the sweet spot for line height? In general, you want your line height to be between 130% to 160% of your font size. So if you’ve got a font size of 18 px, you’d like your line height to be between 23.4 px and 28.8 px.
For another example: The text you’re reading now has a line height of 133% of the font size.
Get the Complete Guide to Fonts
Including my favorite 48 font pairings, a full list of fonts available in both Squarespace and Canva, and more.
The Key Idea: When changing one variable, adjust the others accordingly!
Quick Tip: Whatever font size you use, choose a line height that’s 130%-160% of your font size and a line width that allows for 45 to 75 characters (but closer to 75 if possible).
For example, if we were to increase our font size, we’d also want to:
Potentially make our line sidth longer to keep it at a 45-75 (but closer to 75) character length
Make our line height taller to keep it within 130% to 160% of our font size.
Or, let’s say we were decreasing our line width to fit content into a tight space. We’d also want to:
Make our font size smaller to keep it at a 45-75 (but closer to 75) character length
Make our line height shorter to keep it within 130% and 160% of our smaller font size.
Lastly, let’s imagine we’re increasing our line height. That means we’d also want to:
Increase our font size to keep the line height at between 130% and 160% of the font size
Increase our font width to keep it at 45-75 (but closer to 75) character length.
Test your font triangle skills with Matej Latin’s Perfect Paragraph game
If it wasn’t clear already, I’m a huge fan of Matej Latin. His book, Better Web Typography for a Better Web was instrumental to making me a better designer, and is something I use as a reference to this day.
Via Matej Latin
If that weren’t enough, he’s also created an interactive game to test your skills at matching font size, line width, and line height.
Get the Complete Guide to Fonts
Including my favorite 48 font pairings, a full list of fonts available in both Squarespace and Canva, and more.
