Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Size Matters: Balancing Line Length And Font Size In Responsive Web Design

As we refine our methods of responsive web design, we’ve increasingly focused on measure (another word for “line length”) and its relationship to how people read.


The popularization of the “ideal measure” has led to advice such as “Increase font size for large screens and reduce font size for small screens.” While a good measure does improve the reading experience, it’s only one rule for good typography. Another rule is to maintain a comfortable font size.

How People Read Link

People read online text to serve their own needs: to find the information they seek, to discover new ideas and to confirm their notions about life.

People Read in Three Ways Link

In 2006, the Nielsen Norman group released images of heat maps from eye-tracking studies. The areas where people looked at the most while reading are red, areas with fewer views are yellow, and the least-viewed areas are blue. As you can see below, the red and yellow areas form three variations of an F-shaped pattern. These variations aren’t surprising because people read in three different ways.

People read casually, skimming over text, reading words and sentences here and there to get a sense of the content. The heat map below shows the eye movements of someone casually reading about a product. The reader spent time looking at the image of the product, reading the first couple of sentences, then scanning through the bulleted list.

1-casual-reading-preview-opt1
The Nielsen Norman Group explored the F-shaped pattern for casual reading in 2006. (View large version2)

People also scan with purpose, jumping from section to section, looking for a particular piece of information. They might only read a word or the first couple of characters of a word as they scan the screen. The heat map below shows the eye movements of someone scanning the results of a Google search with purpose. The person read the first two results more slowly. Then, their eyes jumped from section to section, looking for the search term. Therefore, we do not see a strong vertical stroke along the left edge of the text.

2-scanning-with-purpose-preview-opt3
The Nielsen Norman Group explored the F-shaped pattern for purposeful scanning in 2006. (View large version4)

Finally, people read in an engaged manner. When they find an article or blog post they are interested in, they will slow down and read the whole text, perhaps even going into a trance-like state. The heat map below shows the eye movements of a person reading in an engaged manner. The tone is more continuous. There is more red (meaning more time spent reading) and less jumping around the page. When the intensity of reading dwindled because they lost interest (the corporate “About us” page might not have aligned with their interests), their eyes continued along the left edge of the text.

3-reading-preview-opt5
The Nielsen Norman Group explored the F-shaped pattern for reading in an engaged manner in 2006. (View large version6)


Reading Is a Complex Process Link

We know that people read in three different ways, but let’s look more closely at how people read — how the F-shaped patterns are formed.



We know that people. Don’t. Read. Each. Individual. Word. Instead, they use their foveal (or central) vision to focus on a word, while using their peripheral vision to find the next spot on which to focus.

4-reading-preview-opt

People don’t read each word individually.
5-reading-preview-opt
People use their foveal (central) and peripheral vision to read.


We also know that people don’t fixate on every word, but tend to skip words (their eyes take little leaps, called “saccades”) and fill in the rest. This is especially true of those who read casually or scan with purpose.

6-skipping-words-preview-opt

People skip words and fill in the rest.

Finally, we know that readers anticipate the next line while moving their eyes horizontally along a line; so, their eyes are drawn down the left edge of the text. This constant struggle between horizontal and vertical motion contributes to the F-shaped reading patterns.

7-F-shape-pattern-preview-opt
The constant struggle between horizontal and vertical eye movement results in the F-shaped patterns
.

Line Length (Measure) And Reading Link

Typographers have been writing about the relationship between horizontal and vertical eye motion for almost a century. In 1928, Jan Tschichold dismissed centered text and advocated for left-aligned text. He argued that this would assist readers by providing a consistent left (vertical) edge for the eye to return to after finishing each (horizontal) line.

The Ideal Measure: 45 to 75 Characters Link

We have multiple “rules” for facilitating a horizontal reading motion, one of which is to set text at a reasonable measure. As James Craig wrote in his book Designing With Type (originally published in 1971, now it its fifth edition):

Reading a long line of type causes fatigue: the reader must move his head at the end of each line and search for the beginning of the next line.… Too short a line breaks up words or phrases that are generally read as a unit.

If a casual reader gets tired of reading a long horizontal line, then they’re more likely to skim the left edge of the text. If an engaged reader gets tired of reading a long horizontal line, then they’re more likely to accidentally read the same line of text twice (a phenomenon known as “doubling”).

65 characters (2.5 times the Roman alphabet) is often referred to as the perfect measure. Derived from this number is the ideal range that all designers should strive for: 45 to 75 characters (including spaces and punctuation) per line for print. Many web designers (including me) apply that rule directly to the web. I’ve found, however, that we can reliably broaden the range to 45 to 85 characters (including spaces and punctuation) per line for web pages.

Measure and Web Type Link

Web designers have started to embrace a reasonable measure for text. Resources abound. Early writings include Mark Boulton’s more poetic approach to typography, which he refers to as “knowing your hanging punctuation from your em-dash” (“Five Simple Steps to Better Typography157”). Later writings include Harry Roberts’ more technical approach to typography (“Technical Web Typography: Guidelines and Techniques8”).

The most recent (and, dare I say, exciting) development in measure? Its role in responsive web design. More designers are using line length to help determine break points in a responsive structure! Chris Coyer recently developed his bookmarklet to test line length in order to help responsive web designers keep an eye on their measure (“Bookmarklet to Colorize Text Between 45 and 75 Characters9”).

But a good measure is only one rule for setting readable text.

Font Size And Reading Link

A good, comfortable font size is also necessary for setting readable text. This rule is old news. But given the number of responsive websites out there that make text too small or too big in order to achieve an ideal measure, the rule bears repeating.

Static Web Pages and Font Size Link

One benefit of a responsive web structure is readable text — text that people on hand-held devices don’t have to pinch and zoom to read. If a structure is static (like the two-column page shown below), then an ideal measure won’t do the trick. The text will simply be way too tiny to read on a small device such as a phone.

8-structure-preview-opt
Left: The main column has a good measure (45 to 85 characters are highlighted in yellow). But without a responsive structure, the text is too small to read on a small device without pinching and zooming. Right: The font size (13-pixel Verdana for the left column, 18-pixel Georgia for the introduction and 16-pixel Georgia for the article) is comfortable to read on a laptop.

Small Devices and Font Size Link

When designing a responsive website, start with a comfortable font size and an ideal measure to help determine break points. But when the time comes (as it always does), let the ideal measure go.

Text already looks smaller on hand-held devices than on larger devices. This is fine because people tend to hold small devices closer when reading. Current popular wisdom is to preserve the measure by further reducing the font sizes for held-held devices. In practice, retaining a comfortable font size as much as possible better preserves readability. The result will be a less-than-ideal measure but a more comfortable reading experience.

A responsive structure won’t help if small text on a hand-held device encourages readers to pinch and zoom!

9-font-size-preview-opt
Left: To retain an ideal measure, the font size is reduced to 12-pixel Verdana and 14-pixel Georgia for hand-held devices. The text is harder to read. Right: The font size is 13-pixel Verdana and 17-pixel Georgia for hand-held devices. The measure is no longer ideal, but the text is easier to read.


Large Devices and Font Size Link

When designing a responsive website, remember that measure and font size affect not only people using hand-held devices. The majority of people still use larger devices, such as laptops and desktop computers.

Some simple responsive structures keep text in a single column that expands and contracts with the size of the device. This can be an elegant, appropriate solution — except when the font size (instead of the column’s width) is used to preserve the ideal measure.

We’ve learned not to set text too small, but text that’s too big also poses a problem. When type gets too big, the reader’s eyes try to follow their usual pattern. But a font size that’s too large takes up more horizontal space, and it interferes with the horizontal flow that readers have established using their foveal vision and their pattern of skipping words.

We’re used to setting online text larger than printed text. This is fine because people tend to place large devices on their lap or on a desk while reading. But overly large text forces the reader to slow down and adjust how far they skip ahead as they read. Reading horizontally becomes cumbersome, and the reader will start to skip vertically down the left edge of the text.

10-horizontal-rhythm-preview-opt
When type gets too big, the reader tries to follow their usual horizontal rhythm. This forces them to read parts of words instead of entire words and to slow down and adjust their reading pattern.



Current popular advice is to preserve the measure by increasing the font size for large devices. For example, the one-column structure below has an ideal measure. But to achieve this ideal measure on large devices, we’ve had to set the text to 19-pixel Verdana, 22-pixel Georgia for the article, and a whopping 26-pixel Georgia for the introduction!

11-layout-at-hundred-percent-preview-opt10
In the layout above, details show the text at 100% size. The text on this web page is way too big for comfortable reading! Simple one-column responsive structures should use a narrower column on large devices, keeping the font size smaller and easier to read. (View large version11)

In practice, retaining a comfortable font size as much as possible and simply narrowing the column’s width instead are better. Look at what happens to A List Apart12 when it’s viewed on a hand-held device and on a laptop.

12-alistapart-example-large-opt13
A List Apart is perfectly readable on a hand-held device. But on a laptop, the text gets too big to be comfortably read. A shorter measure and a smaller font size would help people follow their usual horizontal rhythm. (View large version14)

Bonus Section: Line Height And Reading Link

So far, our focus has been on the relationship between font size and measure in responsive web structures. But line height also affects how people read.

Line Height Affects Horizontal Motion Link

Because readers scan content both horizontally and vertically, lines of text should feel like horizontal lines, not like woven fabric.

A line height that is too tight could undermine horizontal eye movement and encourage scanning down the left edge. It could also force people to reread lines of text. On the other hand, a line height that is too loose could make lines of text visually “float away” from each other. The lines will no longer feel like a cohesive unit, and vertical scanning becomes more difficult.

While there is no perfect line height, a good rule of thumb is to set it at approximately 150% of the font size.

15-line-height-preview-opt
While there is no perfect line height, a good rule of thumb is to set it at approximately 150% of the font size.
14-tight-height-preview-opt
Top: When the line height is too tight, it undermines the horizontal reading flow and increases doubling. Bottom: When the line height is too loose, lines of text visually float away from each other.

Line Height and Font Size Link

Setting line height is a complex balance of variables (font family, measure, font size, language). The most important variable when creating a responsive web structure is — surprise! — font size.

Smaller type tends to need more line height, not less. A generous line height helps the eye to recognize small word shapes more easily, and it encourages horizontal motion when the eye gets tired of reading small text.

16-line-height-at-hundred-fifty-percent-preview-opt
Left: A line height set at 150% is a bit too tight on an iPhone. Right: The exact same text with a slightly looser line height promotes horizontal movement and helps the reader to recognize word shapes.

Look Closely, Break Rules Link

When we design a responsive structure, testing it on a large device is easy; we can change a desktop browser’s size quickly. But designing on a desktop or laptop browser means that we are spending most of our time at an arm’s length from the text, and we don’t spend much time seeing how the text renders on small devices.

If you’re using measure to find break points in your responsive website, then you probably care about type and reading. Keep using measure! It’s a great starting point. But to see whether your type truly works, spend some time looking at it closely, on a smaller device. Balance measure, line height and font size as needed.

Remember that all rules are meant to be broken. Heck, Jan Tschichold broke his own rule and used centered text for much of his career. When the time comes, sacrifice measure for a comfortable font size. A good font size (not too small) is readable. A good font size (not too big) promotes horizontal eye motion. A good font size with the proper line height will help your readers find what they’re looking for.

Further Resources Link

(il, al)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/wp-content/uploads/2014/09/1-casual-reading-large-preview-opt.jpg
  2. 2 https://www.smashingmagazine.com/wp-content/uploads/2014/09/1-casual-reading-large-preview-opt.jpg
  3. 3 https://www.smashingmagazine.com/wp-content/uploads/2014/09/2-scanning-with-purpose-large-opt.jpg
  4. 4 https://www.smashingmagazine.com/wp-content/uploads/2014/09/2-scanning-with-purpose-large-opt.jpg
  5. 5 https://www.smashingmagazine.com/wp-content/uploads/2014/09/3-reading-large-opt.jpg
  6. 6 https://www.smashingmagazine.com/wp-content/uploads/2014/09/3-reading-large-opt.jpg
  7. 7 http://www.markboulton.co.uk/journal/five-simple-steps-to-better-typography
  8. 8 https://www.smashingmagazine.com/2011/03/14/technical-web-typography-guidelines-and-techniques/
  9. 9 http://css-tricks.com/bookmarklet-colorize-text-45-75-characters-line-length-testing/
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/2014/09/11-single-column-large-opt.jpg
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2014/09/11-single-column-large-opt.jpg
  12. 12 http://alistapart.com
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2014/09/12-alistapart-example-large-opt.png
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2014/09/12-alistapart-example-large-opt.png
  15. 15 http://www.markboulton.co.uk/journal/five-simple-steps-to-better-typography
  16. 16 https://www.smashingmagazine.com/2011/03/14/technical-web-typography-guidelines-and-techniques/
  17. 17 http://webtypography.net/2.1.2
  18. 18 http://alistapart.com/article/how-we-read
  19. 19 http://css-tricks.com/bookmarklet-colorize-text-45-75-characters-line-length-testing/
  20. 20 http://jordanm.co.uk
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Laura Franz is a Pro­fes­sor at UMass Dartmouth, where she teaches a wide range of type classes — including a Web Typography class in The Grad­u­ate Cer­tifi­cate In Web and Inter­ac­tion Design. Inspired by the intersection of tradition and technology, Laura shares her web font recommendations on goodwebfonts.com and her typography knowledge via “Typo­graphic Web Design: How to Think Like a Typog­ra­pher in HTML and CSS” (Wiley), “Typog­ra­phy for Web Design­ers”, and “Choosing and Using Web Fonts”.

  1. 1

    Thank you for writing this article. I think it’s an important discussion for responsive design.

    I was hoping you would get more into the technical details of creating the ideal line length and text size using responsive CSS.

    For example, I would love to see some code that:

    1. Kept the line length between 45 and 85 characters depending on the current column width (more chars for wider columns?).
    2. Kept the text at a readable size no matter what device you’re on.
    3. Automatically adjusted the line-height to best suit the sizes of things decided in #1 and #2. Should it always stay at 150%? Or be a little bigger when there are more characters?

    Maybe some of this would be done better with Javascript, since it depends on knowing the column width instead of just the page width.

    16
    • 2

      Thanks Laura, this is exactly what I’m searching for.

      @Stephen, what you are asking for is far more involved then the research outlined in the article. It will require more than just good html/css/javascript skills, but also a strong grasp on the concepts of responsive design, media queries, fluid layouts, and relative font sizes. There are probably some jquery plugins that can help you out but at the end of the day you are probably better off just playing with the (media queries, font size %) settings till it hits the sweet spot.

      1
      • 3

        @ Rob I disagree. This is a platform for technical discussion and when discussing typography the two should go hand-in-hand. What good is knowing line measure, etc. in the context of web design if people don’t know how to implement it?

        This should be more of a two-part series (or more) in order to cover the complete picture. It’s important for people to understand how one works with the other and not separately.

        4
  2. 4

    Thank you for posting. Spacing is really important where your eyes can rest and be comfortable.

    4
  3. 5

    Great cover of the subject – one of my pet peeves!
    As a typesetter in the early 90’s I learned/was taught/practiced that If you stay between 35 and 55 characters (em) per line your (body) text will always be optimized for legibility. Headlines have other rules. In some “extreme” cases you can as low as 25-30em and as high as 60-65em but your text is no longer as legible as it could be. Above 65em the eye has to travel too far to get a pleasant reading experience.

    2
    • 6

      Hi Tomas, Thanks for sharing your experience. I was lucky enough to learn some basic typesetting back in the 80’s, and the importance of measure has always stayed with me!

      We can go above 65em on screen now… I’m not sure if it’s because people are already prepared to scan, or if it’s because many devices are held farther away than a traditional book. But, just like you said, we still have to make sure the eye doesn’t travel too far.

      2
  4. 7

    I was generally with you until that last illustration of line heights on the iPhone. I find the image on the left easier to read, and perhaps the line height is even too loose there. The very loose setting on the right is more like an item list, not a paragraph of text.

    Optimal line height is not only affected by font size; it is also affected by line length. The shorter the line, the less line height required — and desired. Overspaced line heights are a common problem in web design where this relationship is often ignored, and it is exacerbated by websites that respond to narrow viewports without adjusting line height. Molten Leading is a tool that will help make that responsive adjustment automatically.

    7
    • 8

      Hi Stephen,
      Thanks for your comment on this. I find that line-height, as long as it is comfortable, often has more wiggle room than size or measure.

      I absolutely see your point of view regarding the line-height here. In fact, in print, I often feel that lines of text set too loose feel like they are “floating” away from each other. The looser lines does look/feel more like a list (so the Meta read is incorrect). However, when it comes time to slow down and read, many find a looser line-height helps. The tighter line-height is not terrible though, and if the meta read (I am text, not a list) is more important, then the tighter line-height is your friend!
      –Laura

      0
  5. 9

    Ruben Pieraerts

    October 2, 2014 1:12 pm

    Thank you for this article. It’s a shame that it is not enough taught at schools ! I give web design courses for already graduated students (sort of post master). A large majority don’t understand at all typography. It is scary.

    I really like your content because it is some basic rules that apply most of the time. But we should never forget that our eye must be our only guide ! Sometimes columns with more than 85 characters can be good and sometimes smaller than reasonable font size or line height could make the job.

    Ruben.

    2
  6. 10

    Excellent article, thank you.

    0
  7. 11

    Shameless promotion, but I wrote a bookmarklet that is supposed to help with type setting. It shows the measure and lets you live-adjust it, I even use it for real from time to time. If it helps someone else: http://yannick-lohse.fr/TypeMotion/

    1
    • 12

      Hi Yannick, A nice bookmarklet to add to my collection. I particularly like the ability to adjust size and line-height for quick reference. It’s faster than my other tools.
      –Laura

      0
  8. 13

    Bernie McGrail

    October 3, 2014 9:36 am

    Really great and informative article. Thank you.

    0
  9. 14

    Nice! For sure this article would be very helpful to those who are aspiring to become web designers creating responsive website. This could also make existing designers better as they would be further guided on their works. #success

    0
  10. 15

    Rafał Cieślak

    November 2, 2014 10:08 am

    Very interesting post, I’m just put off a little bit (really, just a little ;) by the lack of linking to appropriate research papers near the “We know that people (…)” sentences.

    Maybe they’re treated as axioms in this field, but it’s already pretty hard to verify certain assumptions. That’s why it’d be nice of authors to simplify this process as much as possible for their readers and future authors who will base their work on top of existing articles.

    0
  11. 16

    Kamal Thobhani

    January 7, 2015 12:37 pm

    Excellent article

    -1
  12. 17

    Nick Germanakos

    January 16, 2015 11:32 pm

    Unfortunately based on my online profession I rarely end up on a good article to read
    and most of times especially leaving behind a comment.

    I am happy to be in the position to say a big thank you for this article and regarding
    to the point about responsive sites … I can ensure whoever has no experience with them
    that they are a big pain when you want to structure your website in a way to look cool
    in every possible device or screen resolution with typography to be the biggest of all the pains!

    Thanks again for such an informative article again !

    Keep up the good work

    0
  13. 18

    Flavio Lamenza

    April 28, 2015 7:11 pm

    Great article!!

    0
  14. 19

    Thank you so much for your insight. I’m sticking with a font size of 15px for now and a line height of 1.5em. My line height might be a little too big but I think it gives my website a more casual feel. Mine is a history website so I figure people are casually reading it for fun, not hard information. I think the line height complements this feeling.

    0

↑ Back to top