Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

When styling text on web pages, both font size and line height can be set. For example, the text of this post will be displayed using a font-size of 14px and a line-height of (about) 18px, set using the value 1.3em.

Looking at other websites, it seems that a ratio around 1.2 is a common practice.

What is the best practice regarding this? What are some good resources from which I can learn more on the subject?

share|improve this question
    
I'm pretty sure the browser default is 1.3 in most cases. –  DisgruntledGoat Feb 22 '13 at 15:12
1  
Related reading: 24ways.org/2006/compose-to-a-vertical-rhythm –  feklee Feb 22 '13 at 18:57
2  
Good answer over on Graphic Design: graphicdesign.stackexchange.com/questions/9147/… –  DA01 Feb 23 '13 at 0:55
    
Agreed with @DA01. That is a far better answer than most posted here. –  Christopher James Calo Mar 1 '13 at 15:37
    
This is more of a visual design question than a UX question. –  Stewart Dean Jun 29 '13 at 14:01

8 Answers 8

up vote 17 down vote accepted

You want to look to sites such as W3.org for advice on this.

Many people with cognitive disabilities have trouble tracking lines of text when a block of text is single spaced. Providing spacing between 1.5 to 2 allows them to start a new line more easily once they have finished the previous one.

The W3C accessibility guidelines 1.4.8 state (emphasis mine):

Visual Presentation: For the visual presentation of blocks of text, a mechanism is available to achieve the following: (Level AAA)

Foreground and background colors can be selected by the user.

Width is no more than 80 characters or glyphs (40 if CJK).

Text is not justified (aligned to both the left and the right margins).

Line spacing (leading) is at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing.

Text can be resized without assistive technology up to 200 percent in a way that does not require the user to scroll horizontally to read a line of text on a full-screen window.

share|improve this answer
2  
That's great if your goal is maximum accessibility, but surely such wide spacing is actually more difficult for most people? It'll certainly entail more scrolling, if you have a nontrivial quantity of text. –  Jon of All Trades Feb 23 '13 at 0:07
3  
@JonofAllTrades you may have to make compromises, yes, but accessibility in general shouldn't be a 'goal' it should just be how you do things. Good accessibility is very closely related to usability anyway. If you have text that requires scrolling then surely is better to make the text readable while you scroll, rather then cramped and less readable but with less scrolling? –  JonW Feb 23 '13 at 0:20
2  
I don't knock the W3 for accessibility suggestions, but don't take them verbatim, either. Visual presentation goes a long way towards accessibility as well and to say that '1.5' is some universal safe number ignores the wide variety of page layouts and type styles. –  DA01 Feb 23 '13 at 0:52
    
For the curious: html5boilerplate specifies line-height: 1.4; (github.com/h5bp/html5-boilerplate/blob/master/css/main.css#L23). –  David Murdoch Feb 23 '13 at 3:35
2  
I wouldn't take advice from the W3C on topics such as typography and graphic design. The answer to this question is far more nuanced than they let on. –  Christopher James Calo Mar 1 '13 at 13:15

An article Optimal Line Height says:

Typog­ra­phy ref­er­ences con­sis­tently put ideal line height at 1.2 ems (a mea­sure of type equiv­a­lent to the the let­ter height or point size of a typeface).

The main idea of defining a proper line height is to let text paragraph look solid and be pleasant to read (if you will choose a bigger line height the difference between paragraphs and lines will become indistinguishable and it will be hard to read). Line height also depends on line length (from the same article):

The designs require line lengths (or mea­sure) notably longer than those rec­om­mended in typo­graphic ref­er­ences. The increased line length demands increased line height to aide eye track­ing.

Actually, it's subjective, so, for example, Amazon Kindle let you choose line height from a number of variants (and will increase spaces between paragraphs respectively).

share|improve this answer
    
This depends on what element is being treated. Sure for paragraphs a line height of 1.2x - 1.5x type size makes sense. But for large headings - it might get unwieldy. And even paragraphs come in different shape, sizes and styles. –  firedrawndagger Apr 3 at 0:02

I think this is influenced by personal preference and the width of the block of text. The wider the block of text, the bigger the line-height should be in order to keep your eyes on the same line while reading it.

Personally, I like the line-height to be 1.5em or 1.6em.

This Interactive Guide to Blog Typography has a section about line-height which also suggests a line-height of 1.5em.

share|improve this answer
2  
Very good point about line height varying depending on the width of the line. –  JonW Feb 22 '13 at 12:06
3  
That's getting close to the Golden Ratio at 1.61803398875. –  Joel B Feb 22 '13 at 15:35
    
Wow, I hadn't looked at it like that Joel. Nice! –  Kristof Claes Feb 22 '13 at 18:49
    
I tend to go for 1.4 for body text, perhaps that's because it's close to √2 = 1.4142135+. Other times I go for 1.5 because it seems neater. –  Bennett McElwee yesterday

Here is an extract from a very handy article on this:

Unfortunately, just knowing the optimal line height for a given font size is not enough.

All 3 typographical dimensions—font size, line height, and line width—affect one another. Therefore, you cannot talk about line height or font size without also considering the line width.

Based on this reasoning, there must also be an optimal line width that corresponds to the optimal line height from the equation above.

Problem is, you don’t know the exact relationship between line width and line height. All you know for sure is that the line width is significantly greater than the line height.

With the help of basic mathematical modeling, you can make an educated guess that the relationship between the optimal line height and line width is exponential.

It gets a lot more complicated, so here a link to a calculator which handles the math for you. http://www.pearsonified.com/typography/

share|improve this answer

No single answer

Unfortunately, there's no single value of line-height (leading) that is optimal for all situations. An optimal range is probably roughly 1.3–1.7, but to select an optimal value requires we look at the specific font in use and the width of lines of text (among other things).

In Troy Templeman's excellent article Basic Rules of Good Typography, he says (emphasis mine):

Leading (or line-height) is the amount of vertical space between lines of type. The default leading in page layout programs is usually sufficient but there are a few factors that may require it to be adjusted. A font may have long ascenders and descenders that touch each other between lines of type, causing a distraction. If a font has a high x-height, it reduces the negative space between lines of type that gives the illusion of tight leading. Tight leading makes it difficult for the reader to find the start of the following line of type which is particularly noticeable in long lines of type. Therefore, for wide columns of type, a generous line height results in better readability. For body copy, I usually set the leading so that the height of captital letters fit perfectly between lines of type, which is around 1.5 times the font size.

Two fonts of the same size will not necessarily appear to be the same size. For text of mixed case, the apparent size of the font is heavily influenced by the x-height, as is clear in the following graphic:

Comparison of x-heights between fonts.

When a font has a larger x-height, it appears to have less space between lines, so it will need more leading to read comfortably. (As you might guess, for text set in all caps, the cap height is what matters, not the x-height.)

The second aspect to consider is the width of lines of text, also know as the measure. As the eye moves left to right along a line of text, when it reaches the end of a line, it needs jump back to the beginning of the next line. As the line width gets longer, our eyes have more trouble correctly finding the beginning of the next line if the line height is tight. (That is, we make more mistakes such as starting to read the same line twice or skipping a line.)

Mark Boulton's article Five simple steps to better typography states:

Your leading should increase proportionally to your Measure. Small Measure, less leading. Wide Measure, more leading. It’s a simple but effective rule.

(If you're curious to read on, he later discusses how color choices also affect optimal line height.)

As you can see, it's impossible to choose a single optimal line height. Rather, you must primarily consider your font's x-height and the length of lines in your text. Be sure to read Alan Gilbertson's excellent answer to a very similar question on the Graphic Design Q&A site.

share|improve this answer

Please refer to this article: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/ - a very interesting one, describing also some other aspects of text on websites.

Please do remember that it always depends on the device as well, due to resolution, screen size and the distance from which user is viewing the screen (significantly closer in case of mobile phones than in case of desktops, while using a smaller screen). RWD (Responsive Web Design) is crucial here.

share|improve this answer
1  
What does RWD stand for? –  Michael Kjörling Feb 22 '13 at 15:29
1  
@MichaelKjörling RWD is an abbreviation of Responsive Web Design. –  JonW Feb 22 '13 at 15:36

I find this article by information architects inc. very interesting.

According to it (cf. section 3) 1.4em is a good value for legibility.

share|improve this answer

Most of the answers I see here are geared more toward print than the web. Reading printed materials is different than reading on the web.

As far as text sizes go, instead of using fixed font sizes, you should always let users decide with defaults they have set in their browsers. 1.5 is a good, readable line height when reading text on a screen. This makes it easier for people with sight impairments who use screen magnifiers to read the content on your site.

When web developers go against the web standards, they make it harder, if not impossible, for some people to navigate their sites. There are many folks who have different abilities who use assistive technologies to experience your sites and adhering to web standards ensures these folks can actually use your site. People access and use the web in many different ways and going against the standards not only makes you look like a hack that doesn't know his/her craft, but you also narrow your web audience, and really, isn't the purpose of being on the web to reach the widest possible audience?

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.