HTML Line Spacing: The Fine Line Between Good and Bad UX Design

HTML line spacing — the vertical space between two lines of text within a paragraph — isn’t the most exciting thing in the UX design world, but it matters more than you think. This styling element involves Experience Strategy and Interaction Design — two of the four UX design quadrants used to create an incredible user experience. But it goes much deeper than that. 

Here’s a quick lowdown on HMTL line spacing:

• It has the power to make a text more or less readable. Line-height has an enormous impact on readability, and if users can’t read content, they’re going to hit the ‘back’ button or exit the app.
• It’s super-important for accessibility, and with ever-increasing legal standards and requirements that govern this practice, you need to use the correct spacing or risk alienating users. 
• Good line spacing makes or breaks the success of a website or app. It’s that simple. 

In this guide, deep dive into HTML line spacing and discover how to get it right. 

How does HTML line spacing make a design more readable?

Line spacing isn’t a font thing. It’s a UX design thing. But when was the last time you heard designers talk about it? Line height matters because it makes text readable or unreadable. 

• If line spacing is too large, there’s too much white space. The text looks awkward. 
• If line spacing is too small, letters appear all squished together. The text looks awkward.

Most UX designers learn line spacing of 130-150 per cent is best for readability (1.3-1.5), with 140 per cent (1.4) the golden ratio, but that formula won’t benefit all users. Your client might have a style guide with a line spacing requirement that ranges anywhere from 120 per cent to 200 per cent, but someone might have written the style guide decades ago, long before anyone considered web accessibility. Consider changing the status quo if it improves readability. (More on accessibility in the next section.)

Unfortunately, there’s no magic number that designers agree on, so it’s all down to trial and error on CSS. Some calculators claim to work out the perfect line spacing and font size, like this one, but as a designer, you’ll make the final decision. Use a design tool like UXPin, which lets you experiment with line and character spacing before you go live. World-famous UX designers use it for a reason, so why not join us with a free trial?

Why HTML line spacing matters for accessibility

Accessibility is a big deal in UX design right now, and rightly so. A good designer designs products that provide meaningful experiences to all users, including people with disabilities. Over 60 million adults in the United States alone have some kind of disability. That’s around one in four of the population. Still, few UX designers consider their requirements when creating prototypes and products. This needs to change. Now.

The World Wide Web Consortium (W3C), the international community that develops accessibility standards for the web, says:

• Line spacing should be at least a space-and-a-half within paragraphs. So around 150 percent or 1.5 times the font size.
• Spacing following paragraphs should be at least two times the font size.
• Spacing between letters should be at least 0.12 times the font size.
• Spacing between words should be at least 0.16 times the font size. 

These are just guidelines, not laws, and the W3C can’t make UX designers do anything, but accessible design principles provide a moral obligation for design teams. Some people with disabilities still can’t engage with websites and apps for years, and the shift towards more accessible design all starts with UX designers like you. So be the change you want to see in the world. 

HTML line spacing makes or breaks UX design

HMTL line spacing might not be noticeable to users (unless it’s really bad), but this subtle style element drives the success of your prototypes and completed designs. Discuss this issue with your team at the start of a UX design project and consider the client’s brief, style guide or design system, demographic, and all the other design elements you plan to implement. Nothing’s set in stone: You can always adjust line spacing later on. 

Always consider other typography elements. Font size, text length, and character spacing are all linked to line height, and it’s your job to get these components correct. As a general rule:

• Larger fonts look better with less line spacing. Especially headers. 
• Smaller text sizes work best with larger line-heights.
• Wider paragraphs work best with more spacing.
• So do longer paragraphs.

A recent eye-tracking experiment saw 104 people read text on Wikipedia, where the researchers changed the line spacing of the text from 0.8 to 1.8 to measure readability and comprehension. The results? Line spacing at the two extremes, 0.8 and 1.8, impaired readability, suggesting text-heavy websites should use more conservative spacing. Adjusting your spacing to somewhere toward the middle of this range proves the most successful. Again, there’s an argument for line spacing of around 1.3-1.5, but it depends on context.

Summary

While there’s no golden ratio for HTML line spacing, consider readability, accessibility, and overall aesthetics when incorporating text into your next prototype. Few UX designers think about this styling element, so you’ll be on the front lines of a design revolution. Discover the perfect line and character spacing on UXPin, the No.1 UI design and prototyping tool that turbocharges typography and streamlines styling. Try it for free.