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?


12 Answers 12


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.

  • 3
    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. Commented Feb 23, 2013 at 0:07
  • 4
    @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
    Commented Feb 23, 2013 at 0:20
  • 4
    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
    Commented Feb 23, 2013 at 0:52
  • For the curious: html5boilerplate specifies line-height: 1.4; (github.com/h5bp/html5-boilerplate/blob/master/css/main.css#L23). Commented Feb 23, 2013 at 3:35
  • 6
    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.
    – Chris Calo
    Commented Mar 1, 2013 at 13:15

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.


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 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 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, the Amazon Kindle lets you choose line height from a number of variants (and will increase spaces between paragraphs accordingly).

  • 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. Commented Apr 3, 2014 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.

  • 4
    Very good point about line height varying depending on the width of the line.
    – JonW
    Commented Feb 22, 2013 at 12:06
  • 4
    That's getting close to the Golden Ratio at 1.61803398875.
    – Joel B
    Commented Feb 22, 2013 at 15:35
  • 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. Commented Dec 22, 2014 at 3:26

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.

  • 1
    What does RWD stand for?
    – user
    Commented Feb 22, 2013 at 15:29
  • 1
    @MichaelKjörling RWD is an abbreviation of Responsive Web Design.
    – JonW
    Commented Feb 22, 2013 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.


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.

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):

  1. line width.
  2. x-height/font-size.
  3. 1/font-size.
  4. font weight.

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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