User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
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?
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.
line-height: 1.4; (github.com/h5bp/html5-boilerplate/blob/master/css/main.css#L23).
Feb 23, 2013 at 3:35
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:
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.
An article Optimal Line Height says:
Typography references consistently put ideal line height at 1.2 ems (a measure of type equivalent to the the letter height or point size of a typeface).
The main purpose of defining a proper line height is to make the text paragraph look solid and be pleasant to read (if you 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 measure) notably longer than those recommended in typographic references. The increased line length demands increased line height to aide eye tracking.
Actually, it's subjective, so, for example, the Amazon Kindle lets you choose line height from a number of variants (and will increase spaces between paragraphs accordingly).
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.
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/
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.
I find this article by information architects inc. very interesting.
According to it (cf. section 3) 1.4em is a good value for legibility.
Here you can find some very good resources about this subject:
Best resource: https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
Very good example to see the difference between all values and why is prefered to use a number value.
https://codepen.io/anon/pen/ObxKjJ
In my opinion, I prefer to use between 1.5 to 2 because providing spacing between 1.5 to 2 allows them to start a new line more easily once they have finished the previous one.
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?
According to this brilliant post, there is no optimal fixed line-height/font-size ratio, as this ratio should vary with (given in decreasing order of importance):
The best font size is the default font size. Trust the browser which has chosen this value depending on the monitor DPI and their internal studies.
font-size: medium;
From :smashing magazine:
Note that 1.5 is a value that is commonly recommended in classic typographic books, so our study backs up this rule of thumb.
According to Eric Meyer's study, try also to avoid adding units, use only the absolute values.
line-height: 1.5;
1.5em is the minimum you should have. Most font do good at 1.6em. But it mainly depends on the type-family. Some need more while others need less. Sometimes the line-height can be as high as 1.8em.
