How to Style Body Text

What makes body text legible?

Legibility means that the glyphs (characters) of your typeface are easily identifiable. Several attributes influence this:

• X-height: A larger x-height helps lowercase letters appear more readable.

• Counters: Open counters in letters like “e” and “o” make text easier to scan.

• Weight: A balanced font-weight feels more readable.

• Character differentiation: It should be easy to tell apart an uppercase "I" and a lowercase "l".

• Letter spacing: Adequate spacing helps users distinguish words and characters.

• Organic shapes: Less square-ish characters feel more natural and readable.

Remember that sometimes, the more legible font isn’t obvious at first glance, and that’s okay. With practice, you’ll begin to recognize subtle differences that enhance legibility.

Font size and line height

The font size should be at least 16, with anything up to 24px being acceptable depending on the typeface and use case.

Generally, you will stay on the lower end for smaller screens and web applications, while large screen sizes and more editorial and blog-oriented products require larger font sizes.

Line-height shouldn’t be left to auto settings, which is a common beginner mistake. Most often, the ideal line-height for body text is somewhere between 130 and 170 percent. The best value to try out first is 150 percent.

Again, there is no one right way to do it that will work for all use cases and typefaces. It takes a bit of adjusting. But this range should give you a great head start!

Line length and textbox width

Line-length should ideally be somewhere between 45 and 75 characters. It’s the optimal length of a line of text for readability. Anything less breaks the flow of reading too often, while longer lines become too hard to read. Keep in mind that on smaller screen sizes, line length will more often than not be smaller than 45 characters, and that’s okay. It’s better to have a legible font size then trying to squeeze in 45 to 75 characters per line. 

Textbox width will be influenced by the desired number of characters per line and your grid, if you use one. If you change the font size, you will have to adjust the line height and the number of characters per line will change too. All of these are related so take special care of adjusting each one as soon as you change one.

Character spacing and all-caps use

Character spacing isn’t something you will necessarily change for body text. You might make some minimal adjustments, but if you’re just starting out, we recommend skipping this completely, as it’s easy to ruin the legibility of the typeface.

You will generally want to increase the character spacing if you’re using all caps, or if you’re working with a really tight typeface and small font sizes.

For larger font sizes, you might look into decreasing the character spacing.

Choosing a typeface for body text

When choosing a typeface, legibility is your top priority. Typefaces with “Text” in their name are often optimized specifically for body use.

And remember, the more flexibility a typeface has – the better.

Paragraph spacing

A common mistake is pressing “Enter” and calling it a day. But this can create awkward gaps that either look like a formatting mistake or make paragraphs feel unrelated. Paragraph spacing needs to be clearly visible without being so big you can squeeze in another line.

For example, if a font size is 16, a good line-height for most typefaces would be 24. Paragraph spacing would then be 12, half of 24. It’s big enough to be noticeable, not big enough so that one more line of text fits in between paragraphs, and it’s divisible by 4.

Indents as an alternative

Another alternative to paragraph spacing are indents. We don’t see it often in UI design, but we want to note that it is a solid alternative you might be better off with for some types of projects.

Final thoughts

We hope you’re feeling a lot more confident in styling your body text now. There are a lot of elements that impact the user’s experience with body text, but there are awesome defaults you can use until you master the craft of styling the body text!