Is there an optimal font size / line height ratio?

  • 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?

    I'm pretty sure the browser default is 1.3 in most cases.

    Agreed with @DA01. That is a far better answer than most posted here.

    This is more of a visual design question than a UX question.

  • JonW

    JonW Correct answer

    8 years ago

    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.

    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.

    @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?

    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.

    For the curious: html5boilerplate specifies `line-height: 1.4;` (https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css#L23).

    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.

    I agree, 1.5 is a guideline as it depends on the font and other considerations. I generally find line-height of 130% to 140% to be optimal, depending on the situation.

    If you look at the w3.org website, at least personally, that is how I find it quite difficult to read. The main index page as well as this page for example. Less is more, meaning the cognitive system in place in a human can digest information more easily when the text is presented with enough white space and enough space between lines. But this might just be me, though I hear users being happy about larger font, more line-height and enough white space, it is easy on the brain.

    How well do the settings for this current page stack up to that advice? Its measure is set around 100 characters, and its leading is 1.3x the font size; this is true in the body text used for paragraphs and also in the smaller comments. ***Is that considered good UX for readability according to these guidelines, or poor UX?*** This is set in Arial, but what if it were in a face with a different x-height: shouldn't one manually adjust the leading commensurately? This post suggests that it should.

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM