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

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

• By Laura Franz


• September 29th, 2014


• FontsTechniquesTypography


• 1 Comment

As we labour a methods of manageable web design, we’ve increasingly focused on measure (another word for “line length”) and a attribute to how people read.


The popularization of a “ideal measure” has led to recommendation such as “Increase rise distance for vast screens and revoke rise distance for little screens.” While a good magnitude does urge a reading experience, it’s usually one sequence for good typography. Another sequence is to contend a gentle rise size.

How People Read

People review online calm to offer their possess needs: to find a information they seek, to learn new ideas and to endorse their notions about life.

People Read in Three Ways

In 2006, a Nielsen Norman organisation expelled images of feverishness maps from eye-tracking studies. The areas where people looked during a many while reading are red, areas with fewer views are yellow, and a least-viewed areas are blue. As we can see below, a red and yellow areas form 3 variations of an F-shaped pattern. These variations aren’t startling since people review in 3 opposite ways.

People review casually, skimming over text, reading difference and sentences here and there to get a clarity of a content. The feverishness map subsequent shows a eye movements of someone incidentally reading about a product. The reader spent time looking during a picture of a product, reading a initial integrate of sentences, afterwards scanning by a bulleted list.

¹
The Nielsen Norman Group explored a F-shaped settlement for infrequent reading in 2006. (View vast version²)

People also scan with purpose, jumping from territory to section, looking for a sold square of information. They competence usually review a word or a initial integrate of characters of a word as they indicate a screen. The feverishness map subsequent shows a eye movements of someone scanning a formula of a Google hunt with purpose. The chairman review a initial dual formula some-more slowly. Then, their eyes jumped from territory to section, looking for a hunt term. Therefore, we do not see a clever straight cadence along a left corner of a text.

³
The Nielsen Norman Group explored a F-shaped settlement for eloquent scanning in 2006. (View vast version⁴)

Finally, people review in an engaged manner. When they find an essay or blog post they are meddlesome in, they will delayed down and review a whole text, maybe even going into a trance-like state. The feverishness map subsequent shows a eye movements of a chairman reading in an intent manner. The tinge is some-more continuous. There is some-more red (meaning some-more time spent reading) and reduction jumping around a page. When a power of reading dwindled since they mislaid seductiveness (the corporate “About us” page competence not have aligned with their interests), their eyes continued along a left corner of a text.

⁵
The Nielsen Norman Group explored a F-shaped settlement for reading in an intent demeanour in 2006. (View vast version⁶)


Reading Is a Complex Process

We know that people review in 3 opposite ways, though let’s demeanour some-more closely during how people review — how a F-shaped patterns are formed.



We know that people. Don’t. Read. Each. Individual. Word. Instead, they use their foveal (or central) prophesy to concentration on a word, while regulating their marginal prophesy to find a subsequent mark on that to focus.


People don’t review any word individually.

People use their foveal (central) and marginal prophesy to read.


We also know that people don’t fixate on any word, though tend to skip difference (their eyes take little leaps, called “saccades”) and fill in a rest. This is generally loyal of those who review incidentally or indicate with purpose.


People skip difference and fill in a rest.

Finally, we know that readers expect a subsequent line while relocating their eyes horizontally along a line; so, their eyes are drawn down a left corner of a text. This unchanging onslaught between plane and straight suit contributes to a F-shaped reading patterns.

The unchanging onslaught between plane and straight eye transformation formula in a F-shaped patterns
.

Line Length (Measure) And Reading

Typographers have been essay about a attribute between plane and straight eye suit for roughly a century. In 1928, Jan Tschichold discharged centered calm and advocated for left-aligned text. He argued that this would support readers by providing a unchanging left (vertical) corner for a eye to lapse to after finishing any (horizontal) line.

The Ideal Measure: 45 to 75 Characters

We have mixed “rules” for facilitating a plane reading motion, one of that is to set calm during a reasonable measure. As James Craig wrote in his book Designing With Type (originally published in 1971, now it a fifth edition):

Reading a prolonged line of form causes fatigue: a reader contingency pierce his conduct during a finish of any line and hunt for a commencement of a subsequent line.… Too brief a line breaks adult difference or phrases that are generally review as a unit.

If a infrequent reader gets sleepy of reading a prolonged plane line, afterwards they’re some-more expected to slick a left corner of a text. If an intent reader gets sleepy of reading a prolonged plane line, afterwards they’re some-more expected to incidentally review a same line of calm twice (a materialisation famous as “doubling”).

65 characters (2.5 times a Roman alphabet) is mostly referred to as a ideal measure. Derived from this series is a ideal operation that all designers should essay for: 45 to 75 characters (including spaces and punctuation) per line for print. Many web designers (including me) request that sequence directly to a web. I’ve found, however, that we can reliably enlarge a operation to 45 to 85 characters (including spaces and punctuation) per line for web pages.

Measure and Web Type

Web designers have started to welcome a reasonable magnitude for text. Resources abound. Early papers embody Mark Boulton’s some-more superb proceed to typography, that he refers to as “knowing your unresolved punctuation from your em-dash” (“Five Simple Steps to Better Typography¹⁵⁷”). Later papers embody Harry Roberts’ some-more technical proceed to typography (“Technical Web Typography: Guidelines and Techniques⁸”).

The many new (and, brave we say, exciting) growth in measure? Its purpose in manageable web design. More designers are regulating line length to assistance establish mangle points in a manageable structure! Chris Coyer recently grown his bookmarklet to exam line length in sequence to assistance manageable web designers keep an eye on their magnitude (“Bookmarklet to Colorize Text Between 45 and 75 Characters⁹”).

But a good magnitude is usually one sequence for environment entertaining text.

Font Size And Reading

A good, gentle rise distance is also required for environment entertaining text. This sequence is aged news. But given a series of manageable websites out there that make calm too little or too vast in sequence to grasp an ideal measure, a sequence bears repeating.

Static Web Pages and Font Size

One advantage of a manageable web structure is entertaining calm — calm that people on hand-held inclination don’t have to splash and wizz to read. If a structure is immobile (like a two-column page shown below), afterwards an ideal magnitude won’t do a trick. The calm will simply be approach too little to review on a little device such as a phone.




Left: The categorical mainstay has a good magnitude (45 to 85 characters are highlighted in yellow). But though a manageable structure, a calm is too little to review on a little device though pinching and zooming. Right: The rise distance (13-pixel Verdana for a left column, 18-pixel Georgia for a introduction and 16-pixel Georgia for a article) is gentle to review on a laptop.

Small Devices and Font Size

When conceptualizing a manageable website, start with a gentle rise distance and an ideal magnitude to assistance establish mangle points. But when a time comes (as it always does), let a ideal magnitude go.

Text already looks smaller on hand-held inclination than on incomparable devices. This is excellent since people tend to reason little inclination closer when reading. Current renouned knowledge is to safety a magnitude by serve shortening a rise sizes for held-held devices. In practice, maintaining a gentle rise distance as many as probable improved preserves readability. The outcome will be a less-than-ideal magnitude though a some-more gentle reading experience.

A manageable structure won’t assistance if little calm on a hand-held device encourages readers to splash and zoom!

Left: To keep an ideal measure, a rise distance is reduced to 12-pixel Verdana and 14-pixel Georgia for hand-held devices. The calm is harder to read. Right: The rise distance is 13-pixel Verdana and 17-pixel Georgia for hand-held devices. The magnitude is no longer ideal, though a calm is easier to read.


Large Devices and Font Size

When conceptualizing a manageable website, remember that magnitude and rise distance impact not usually people regulating hand-held devices. The infancy of people still use incomparable devices, such as laptops and desktop computers.

Some elementary manageable structures keep calm in a singular mainstay that expands and contracts with a distance of a device. This can be an elegant, suitable resolution — solely when a rise distance (instead of a column’s width) is used to safety a ideal measure.

We’ve schooled not to set calm too small, though calm that’s too vast also poses a problem. When form gets too big, a reader’s eyes try to follow their common pattern. But a rise distance that’s too vast takes adult some-more plane space, and it interferes with a plane upsurge that readers have determined regulating their foveal prophesy and their settlement of skipping words.

We’re used to environment online calm incomparable than printed text. This is excellent since people tend to place vast inclination on their path or on a table while reading. But overly vast calm army a reader to delayed down and adjust how distant they skip forward as they read. Reading horizontally becomes cumbersome, and a reader will start to skip plumb down a left corner of a text.

When form gets too big, a reader tries to follow their common plane rhythm. This army them to review tools of difference instead of whole difference and to delayed down and adjust their reading pattern.



Current renouned recommendation is to safety a magnitude by augmenting a rise distance for vast devices. For example, a one-column structure subsequent has an ideal measure. But to grasp this ideal magnitude on vast devices, we’ve had to set a calm to 19-pixel Verdana, 22-pixel Georgia for a article, and a whopping 26-pixel Georgia for a introduction!

¹⁰
In a blueprint above, sum uncover a calm during 100% size. The calm on this web page is approach too vast for gentle reading! Simple one-column manageable structures should use a narrower mainstay on vast devices, gripping a rise distance smaller and easier to read. (View vast version¹¹)

In practice, maintaining a gentle rise distance as many as probable and simply squeezing a column’s breadth instead are better. Look during what happens to A List Apart¹² when it’s noticed on a hand-held device and on a laptop.

¹³
A List Apart is ideally entertaining on a hand-held device. But on a laptop, a calm gets too vast to be absolutely read. A shorter magnitude and a smaller rise distance would assistance people follow their common plane rhythm. (View vast version¹⁴)

Bonus Section: Line Height And Reading

So far, a concentration has been on a attribute between rise distance and magnitude in manageable web structures. But line tallness also affects how people read.

Line Height Affects Horizontal Motion

Because readers indicate calm both horizontally and vertically, lines of calm should feel like plane lines, not like woven fabric.

A line tallness that is too parsimonious could criticise plane eye transformation and inspire scanning down a left edge. It could also force people to reread lines of text. On a other hand, a line tallness that is too lax could make lines of calm visually “float away” from any other. The lines will no longer feel like a cohesive unit, and straight scanning becomes some-more difficult.

While there is no ideal line height, a good sequence of ride is to set it during approximately 150% of a rise size.

While there is no ideal line height, a good sequence of ride is to set it during approximately 150% of a rise size.

Top: When a line tallness is too tight, it undermines a plane reading upsurge and increases doubling. Bottom: When a line tallness is too loose, lines of calm visually boyant divided from any other.

Line Height and Font Size

Setting line tallness is a formidable change of variables (font family, measure, rise size, language). The many critical non-static when formulating a manageable web structure is — surprise! — rise size.

Smaller form tends to need some-more line height, not less. A inexhaustible line tallness helps a eye to commend little word shapes some-more easily, and it encourages plane suit when a eye gets sleepy of reading little text.

Left: A line tallness set during 150% is a bit too parsimonious on an iPhone. Right: The accurate same calm with a somewhat looser line tallness promotes plane transformation and helps a reader to commend word shapes.

Look Closely, Break Rules

When we settlement a manageable structure, contrast it on a vast device is easy; we can change a desktop browser’s distance quickly. But conceptualizing on a desktop or laptop browser means that we are spending many of a time during an arm’s length from a text, and we don’t spend many time saying how a calm renders on little devices.

If you’re regulating magnitude to find mangle points in your manageable website, afterwards we substantially caring about form and reading. Keep regulating measure! It’s a good starting point. But to see either your form truly works, spend some time looking during it closely, on a smaller device. Balance measure, line tallness and rise distance as needed.

Remember that all manners are meant to be broken. Heck, Jan Tschichold pennyless his possess sequence and used centered calm for many of his career. When a time comes, scapegoat magnitude for a gentle rise size. A good rise distance (not too small) is readable. A good rise distance (not too big) promotes plane eye motion. A good rise distance with a correct line tallness will assistance your readers find what they’re looking for.

Further Resources

• “Five Simple Steps to Better Typography¹⁵⁷,” Mark Boulton


• “Technical Web Typography Guidelines and Techniques¹⁶,” Harry Roberts, Smashing Magazine


• “Choose a Comfortable Measure¹⁷,” The Elements of Typographic Style Applied to a Web


• “How We Read¹⁸,” Jason Santa Maria, A List Apart


• “Bookmarklet to Colorize Text Between 45 and 75 Characters (For Line-Length Testing)¹⁹,” Chris Coyier


• “How we Test Type and Layout²⁰,” Jordan Moore

(il, al)

Footnotes

1. 1 http://www.smashingmagazine.com/wp-content/uploads/2014/09/1-casual-reading-large-preview-opt.jpg


2. 2 http://www.smashingmagazine.com/wp-content/uploads/2014/09/1-casual-reading-large-preview-opt.jpg


3. 3 http://www.smashingmagazine.com/wp-content/uploads/2014/09/2-scanning-with-purpose-large-opt.jpg


4. 4 http://www.smashingmagazine.com/wp-content/uploads/2014/09/2-scanning-with-purpose-large-opt.jpg


5. 5 http://www.smashingmagazine.com/wp-content/uploads/2014/09/3-reading-large-opt.jpg


6. 6 http://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 http://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 http://www.smashingmagazine.com/wp-content/uploads/2014/09/11-single-column-large-opt.jpg


11. 11 http://www.smashingmagazine.com/wp-content/uploads/2014/09/11-single-column-large-opt.jpg


12. 12 http://alistapart.com


13. 13 http://www.smashingmagazine.com/wp-content/uploads/2014/09/12-alistapart-example-large-opt.png


14. 14 http://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 http://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

↑ Back to topShare on Twitter

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