The Perfect Paragraph

Advertisement

In this article, I’d like to reacquaint you with the humble workhorse of communication that is the paragraph. Paragraphs are everywhere. In fact, at the high risk of stating the obvious, you are reading one now. Despite their ubiquity, we frequently neglect their presentation. This is a mistake. Here, we’ll refer to some time-honored typesetting conventions, with an emphasis on readability, and offer guidance on adapting them effectively for devices and screens. We’ll see that the ability to embed fonts with @font-face is not by itself a solution to all of our typographic challenges.

A Web Of Words

In 1992, Tim Berners-Lee circulated a document titled “HTML Tags1,” which outlined just 20 tags, many of which are now obsolete or have taken other forms. The first surviving tag to be defined in the document, after the crucial anchor tag, is the paragraph tag. It wasn’t until 1993 that a discussion emerged2 on the proposed image tag.

Bursting with imagery, motion, interaction and distraction though it is, today’s World Wide Web is still primarily a conduit for textual information. In HTML5, the focus on writing and authorship is more pronounced than ever. It’s evident in the very way that new elements such as article and aside are named. HTML5 asks us to treat the HTML document more as… well, a document.

It’s not just the specifications that are changing, either. Much has been made of permutations to Google’s algorithms3, which are beginning to favor better written, more authoritative content (and making work for the growing content strategy4 industry). Google’s bots are now charged with asking questions5 like, “Was the article edited well, or does it appear sloppy or hastily produced?” and “Does this article provide a complete or comprehensive description of the topic?,” the sorts of questions one might expect to be posed by an earnest college professor.

This increased support for quality writing, allied with the book-like convenience and tactility of smartphones and tablets, means there has never been a better time for reading online. The remaining task is to make the writing itself a joy to read.

What Is The Perfect Paragraph?

As designers, we are frequently and incorrectly reminded that our job is to “make things pretty.” We are indeed designers — not artists — and there is no place for formalism6 in good design. Web design has a function, and that function is to communicate the message7 for which the Web page was conceived. The medium is not the message.

Never is this principle more pertinent than when dealing with type, the bread and butter of Web-borne communication. A well-set paragraph of text is not supposed to wow the reader; the wowing should be left to the idea or observation for which the paragraph is a vehicle. In fact, the perfect paragraph is unassuming to the point of near invisibility8. That is not to say that the appearance of your text should have no appeal at all. On the contrary: well-balanced, comfortably read typography is a thing of beauty; it’s just not the arresting sort of beauty that might distract you from reading.

Archaic Typographic Implements9
(Image: Marcin Wichary10)

As a young industry that champions innovation and rates its practitioners based on their ability to apprehend (sorry, “grok”) the continual emergence of new technologies, frameworks, protocols and data models, we are not particularly familiar with tradition. However, the practice of arranging type for optimal pleasure and comfort is a centuries-old discipline. As long ago as 1927, the noted typographer Jan Tschichold11 spoke of the typesetting “methods and rules upon which it is impossible to improve” — a set of rules it would be foolish to ignore.

So, please put your canvas element and data visualization API to one side just for a short while. We are about to spend a little time brushing up on our typesetting skills. It’s called “hypertext,” after all.

Setting Your Paragraphs

The Typeface

Your choice of font is important, but the kind of “family” you choose is project-specific, and we won’t discuss it here except to make one point: the conventional wisdom among Web designers that only sans-serif12 fonts are suitable for body text is just a rule of thumb. Although serif fonts, with their greater complexity, may tend to be less effective at small sizes, there are many other factors to consider. A diminutive x-height13, for example, could impair the readability of a font from either camp. Some serif fonts are highly legible and attractive for paragraph text if they are set properly. Matthew Carter’s14 screen-sympathetic Georgia15 is a case in point.

Typographic Anatomy16
X-height is the distance between the baseline and midline — a measure of lowercase character height. (Image: adactio17)

Having dispensed with the subject of preference, let’s cover some important technical issues relating to one’s choice of typeface.

The first thing to consider when choosing a Web font (read: @font-face font) is the breadth of the family. Does the font include all of the necessary bold, italic (or even better, semi-bold and bold-italic) styles? One style is fine for headings, but paragraphs need greater variety. Without these variations at your disposal, not only will your text look insipid, but the lack of proper emphasis will make your writing difficult to follow.

bitstream18
I personally don’t like Bitstream19, but it is fully functional for paragraph text

With the full gamut of stylistic variations at your disposal, you will not have to rely on the unsatisfactory “faux” styles that are applied to a regular font when font-style: italic or font-weight: bold is called. Typefaces are not designed to be contorted in this way. Using the proper styles provided by a family like Bitstream (above) will make your typography not only more attractive but more accessible: dedicated italic glyphs have a much clearer intent than text that is simply “leaned over a bit.”

The trick is to make sure that the declaration of, for example, font-style: italic requests the italic resource rather than triggers the faux style. It should be as effortless as using a system font family such as Georgia. This is probably best explained, like so many things, in commented code. For brevity, we’ll set up just a regular font and an italic (not bold) style variation.

@font-face {
   font-family: 'MyWebfont';  /* Change this to whatever you like. */
   src: url('mywebfont-regular.ttf') format('truetype');  /* The "regular" font resource. */
   font-style: normal;  /* Associates values of "normal" with this resource. */
   font-weight: normal;  /* As above for weight. */
}

@font-face {
   font-family: 'MyWebfont';  /* Importantly, the same as in the above block; the family name. */
   src: url('mywebfont-italic.ttf') format('truetype');
   font-style: italic;  /* Associates values of "italic" with this resource. */
   font-weight: normal;  /* ... It's not a bold-italic font style. */
}

body {
   font-family:'MyWebfont', georgia, serif;  /* Provides a system font fallback. */
}

em {
   font-style: italic;  /* If @font-face is supported, the italic Web font is used. If not, the italic Georgia style is lifted from the user's computer. Either way, a faux style is not allowed to creep in. */
}

Our second typeface consideration relates to rendering. Some fonts, replete with beautiful glyphs and exceptional kerning20 as they may be, simply don’t render very well at small sizes. You will have noticed that embedded fonts are often reserved for headings, while system fonts (such as Verdana21 here) are relied on for body text.

One of the advantages of Verdana is that it is a “well-hinted” font. Delta hinting22 is the provision of information within a font that specifically enhances the way it renders at small sizes on screen. The smaller the font, the fewer the pixels that make up individual glyphs, requiring intelligent reconfiguration to keep the font legible. It’s an art that should be familiar to any Web designer who’s ever tried to make tiny icons comprehensible.

Hinting is a tricky and time-consuming process, and not many Web fonts are hinted comprehensively. Note the congealed upper portion of the bowl23 in the lowercase “b” in the otherwise impressive Crimson24 font, for instance. This small unfortunate glitch is distracting and slightly detracts from a comfortable reading experience. The effect is illustrated below and can be seen in context as a demo25.

Unsatisfactory Hinting
Slightly unsatisfactory hinting for the Crimson Roman style. I love Crimson all the same.

The good news is that, as font embedding becomes more commonplace, font designers are increasingly taking care of rendering and are supplying ever better hinting instructions. Typekit26 itself has even intervened by manually re-hinting popular fonts such as Museo27. Your best bet is to view on-page demonstrations of the fonts you are considering, to see how well they turn out. Save time by avoiding, sight unseen, any fonts with the words “thin” or “narrow” in their names.

Font Size and Measure

As a recent Smashing Magazine article28 compellingly attests, you put serious pressure on readability by venturing below a 16-pixel font size for paragraph text. All popular browsers render text at 16 pixels by default. This is a good enough indication (given the notorious tendency among browser makers to disagree) that 16 pixels is a clear standard. What’s more, the standard is given credence by an equivalent convention in print typography, as the article points out.

We often express 16px as 100% in the declaration block29 for the body in our CSS reset style sheets. This makes perfect sense, because it is like saying, “100% the same as the browser would have chosen for you.” If you want the paragraph text to be bigger than 16 pixels, just edit this value in the body block using a percentage value that equates to a “whole pixel.” Why whole pixels? Two reasons. First, whole numbers are less ungainly and are easier to use as multipliers in style sheets. Secondly, browsers tend to round “sub-pixel” values differently, giving inconsistent results30. An 18-pixel font size expressed as a percentage is 112.5% (1.125 × 16).

Normalizing the size of default text (or “paragraph text,” if you’re being good and semantic) in such a way is extremely important because it sets us up to use ems31 as a multiplier for the size of surrounding headings and other textual elements. For instance, to render an h3 heading at 1.5 times the font size of the paragraph, we should give it the value of 1.5em. Because ems (pronounced as in “Emma,” not E.M. Forster) are relative units, they change according to the default font size. This makes it much easier to maintain style sheets and, more pertinently, ensures that the perceived importance of headings is not increased or diminished by adjusting the size of the paragraph text.

An illustration of optimal line length, or measure

The “measure” is the number of characters in a line of text. Choosing a comfortable measure32 is important for usability, because if lines are too long, then scanning back to find the start of the next line can be awkward. Without conscious effort, the reader might miss or reread lines. In The Elements of Typographic Style33, Robert Bringhurst puts a good measure at somewhere between 45 and 75 characters. It is the main reason why we use the max-width property when designing elastic layouts.

Whatever your page’s ideal maximum width, it is likely much narrower than what you are used to seeing. According to an in-depth study34 of typographic design patterns published on Smashing Magazine, the average website exhibits a measure of 88.74 characters, far exceeding the optimal range.

Leading and Vertical Rhythm

Glyphs made from lead35
(Image: andrechinn36)

Leading37 (pronounced “ledding”) is the spacing between consecutive lines of text. Leading has a similar impact on readability as “measure,” because it helps to define and demarcate the rows of glyphs that one must traverse from left to right and back again. The trick with leading is to avoid adding too much: text with lines that are too far apart appears fragmented, and the intent of a judicious use of leading is undone by a negative result.

In mechanical typesetting, leading was set by inserting strips of lead metal (hence the pronunciation) between lines. In CSS, the line-height property is the tool we use, and exposure to it is much less likely to make you go mad.

Instead of accounting for space between lines, as with leading, line-height is a vertical measure of the whole line — including the text itself and any spacing to follow. There are three ways to set it: the wrong way, the redundant way and the right way.

The wrong way to set line-height is in pixels. By introducing an absolute value, we would undo all of the good work from the previous section. As the font-size increases (either in the style sheet or the user’s browser settings), the line-height would persist. This produces an interesting effect:

An illustration of optimal line length, or measure
Absolute and relative values do not mix.

So, should we use the same em multipliers that we saw in the last section? This is the redundant way. Although the method would work, providing an em unit is not necessary. Rather, a value of 1.5 for the line-height that is 1.5 times that of the font size will suffice. The line-height property belongs to an exclusive club of CSS properties that accept unit-less numeric values.

p {
   font-size:; /* Silence is golden; implicity 1em. */
   line-height: 1.5;
}

The attentive among you will have noticed that so far I have only mentioned font sizes that are even numbers. The reason is that I favor a line height of 1.5. So, a font size of 18 pixels means lines with a height of 27 pixels or, if you prefer, lead strips that are 9 pixels thick. Using even numbers is another bid to maintain whole pixel values — I know that any even number multiplied by 1.5 will result in a whole number. A line-height stated in whole pixels is particularly important, because it is the key value used to achieve “vertical rhythm.”

a vertical rhythm illustration
All components on the page should have a height divisible by the height of one line of paragraph text.

Maintaining vertical rhythm (or composing to a baseline grid38) is the practice of making sure that the height of each textual element on the page (including lists, headings and block quotes) is divisible by a common number. This common number (the single beat in a series of musical bars, if you will) is typically derived from the height of one paragraph line. You should be able to see by now why an impossible value like 26.5 pixels would be a mistake for such an integral measure.

The benefits of vertical rhythm to readability are much subtler than those of hinting, measure or leading, but they are still important. Vertical rhythm gives the page decorum. Because we have made sure so far that all of our measurements are co-dependent and relative, altering the font size for the body (all the way up at the top of the cascade39) will not damage the page’s vertical rhythm.

It is worth noting that, although a line height of 1.5 is fairly dependable, not all fonts are made equal. Fonts with a tall x-height or long descenders40 might benefit from more generous, separative leading. When basic readability is at stake, adopting a more complex vertical rhythm algorithm is worth it.

Word Spacing and Justification

Without intervention, paragraph text on Web pages is set “ragged right” (text-align: left in CSS): the start of each line is flush with the left margin, but the lengths of the lines vary, giving an uneven “ragged” effect on the right side. If you’re like me, you prefer the tidiness of full justification41 (illustrated below). But implementing justification without impairing readability is not as straightforward in HTML as it is by using desktop-publishing software.

justified
Fully justified text necessitates, arguably, a narrower measure than text set ragged right.

The problem with justified text in HTML (text-align: justify) is word spacing. In print media (such as newspapers), hyphenation is used to break up long words. This results in more components (words or part words) per line, thus improving distribution and curbing aggressive word spacing. Browsers do not hyphenate automatically, and the soft hyphen42 (­) is implemented inconsistently. Besides, imagine having to manually insert ­ all the way through your copy. CSS3’s text-justify43 property, which aims to give us more control over text-align: justify, could ease the problem by enabling inter-character distribution. Bizarrely, it is currently available only with Internet Explorer.

Hyphenator44
Hyphenator.js4845

Thankfully, Firefox and Safari now support46 the CSS3 property hyphens, which can automatically insert hyphens much as you would manually with ­. In fact, you can revert to manual hyphenation in a document set to hyphens: auto by using the hyphens: manual override. Browser prefixes are required, but Lea Verou can help47 you with that.

Until the other browsers catch up, a consistent cross-browser solution is currently possible only with JavaScript. Hyphenator.js4845 is a powerful tool that takes a library of syllabic patterns specific to each language and uses them to dynamically insert soft hyphens in the correct places. It is a bit pricey (two scripts at a total of 72 KB uncompressed just for the English implementation), but it does work. Its effect is shown in the first screenshot for this section.

Finishing Touches (Styling Contextually)

Now that we have dealt with the important business of sizing, setting and distributing our paragraphs compellingly, you may wish to apply a few small enhancements and decorations for the purpose of signposting the document. These nuances concern only certain paragraphs, and choosing which paragraphs to set off is a question of context49. With the help of special selectors and combinators, we are able to target specific paragraphs depending on where they appear on the page, making sure that the difference in their design is consistent with their intended role and meaning.

Indent
Paragraphs separated with a margin (such as margin: 0 0 1.5em;) do not require indentation. With paragraphs, margins and indentation serve the same purpose.

Let’s use indentation50 as an introductory example. Although less common in Web typography than in print, indenting the first line of each paragraph is a conventional method of grouping paragraphs into chunks of information. In terms of rhythm, it is also a sort of punctuation: the reader is invited to pause briefly before each paragraph. Because no indentation is required for the first paragraph — why pause before we’ve even started? — we should exclude this paragraph from our CSS rule. Using the adjacent sibling combinator51, we are able to target only paragraphs with a preceding paragraph, and so the convention that has been familiar to book typography over the centuries is ably reproduced.

p + p {   
   text-indent: 1.5em  /* I like to keep the indentation length equal to the line height. */
}

In the next example, I have combined the adjacent sibling combinator with the :first-letter pseudo-class52 to create a pronounced introductory glyph or “elevated cap”:

h1 + p:first-letter { 
   font-size: 2em;
   line-height: 0;  /* The line-height must be adjusted to compensate for the increased font size, otherwise the leading for the overall line is disrupted. I find that any values below 0.4 work. */
}

Example of an elevated cap

The beauty of adding these refinements (many more of which are demonstrated by Jon Tan53, including “drop caps” and “outdents”) contextually is that they are activated only when semantically meaningful and appropriate. For instance, our :first-letter style above is appropriate only for introductory copy. Because the introductory paragraph is always (in this particular schema) preceded by an h1 heading, we have a way to bind its style to its particular role in the document’s flow. In other words, we can honor its meaning through its design.

As long as we rigorously adhere to semantic HTML54, we can employ many nuances that are impervious to both the rearrangement of the page itself and the introduction of dynamic content.

Conclusion

Library isle55
(Image: primatage56)

Walking down an aisle in a library, I no more than glance at the vast majority of books shelved on either side of me. Only a madman would suggest that my disregard of these books should sanction their pages being torn out. Nonetheless, because research has shown57 that visitors don’t read the average Web page in full, and because the “success” of a page is more easily measured by user action than cognition, we are often encouraged to marginalize our writing in favor of visual signifiers or action cues.

Sure, most people will “bounce” your content, but if you really have something to say, don’t alienate the people who are willing to give your writing a chance. Good typography does justice to your words, and good wording does justice to your ideas. If readers are comfortable reading your type, then they will more likely be comfortable with what you are writing about.

Footnotes

  1. 1 http://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/Tags.html
  2. 2 http://1997.webhistory.org/www.lists/www-talk.1993q1/0182.html
  3. 3 http://googlewebmastercentral.blogspot.com/2011/04/high-quality-sites-algorithm-goes.html
  4. 4 http://www.alistapart.com/articles/thedisciplineofcontentstrategy/
  5. 5 http://googlewebmastercentral.blogspot.com/2011/05/more-guidance-on-building-high-quality.html
  6. 6 http://en.wikipedia.org/wiki/Formalism_%28art%29
  7. 7 http://www.lukew.com/ff/entry.asp?232
  8. 8 http://speakerdeck.com/u/smashingmag/p/the-invisible-side-of-design
  9. 9 http://www.flickr.com/photos/mwichary/2251302479/sizes/l/in/photostream/
  10. 10 http://www.flickr.com/photos/mwichary/2251302479/sizes/l/in/photostream/
  11. 11 http://en.wikipedia.org/wiki/Jan_Tschichold
  12. 12 http://en.wikipedia.org/wiki/Sans-serif
  13. 13 http://en.wikipedia.org/wiki/X-height
  14. 14 http://en.wikipedia.org/wiki/Matthew_Carter
  15. 15 http://www.will-harris.com/verdana-georgia.htm
  16. 16 http://www.flickr.com/photos/adactio/5739318101/sizes/l/in/photostream/
  17. 17 http://www.flickr.com/photos/adactio/5739318101/sizes/l/in/photostream/
  18. 18 http://www.fontsquirrel.com/fonts/Bitstream-Vera-Sans
  19. 19 http://www.fontsquirrel.com/fonts/Bitstream-Vera-Sans
  20. 20 http://type.method.ac/
  21. 21 http://en.wikipedia.org/wiki/Verdana
  22. 22 http://www.fontshop.com/glossary.php?def=Delta%20hinting
  23. 23 http://www.fontshop.com/glossary.php?ltr=b
  24. 24 http://www.fontsquirrel.com/fontfacedemo/Crimson
  25. 25 http://www.fontsquirrel.com/fontfacedemo/Crimson
  26. 26 http://blog.typekit.com/2011/01/20/new-and-updated-fonts-from-exljbris/
  27. 27 http://new.myfonts.com/fonts/exljbris/museo/
  28. 28 http://www.smashingmagazine.com/2011/10/07/16-pixels-body-copy-anything-less-costly-mistake/
  29. 29 http://www.blooberry.com/indexdot/css/syntax/declaration.htm
  30. 30 http://ejohn.org/blog/sub-pixel-problems-in-css/
  31. 31 http://en.wikipedia.org/wiki/Em_%28typography%29
  32. 32 http://webtypography.net/Rhythm_and_Proportion/Horizontal_Motion/2.1.2/
  33. 33 http://www.amazon.com/Elements-Typographic-Style-Robert-Bringhurst/dp/0881792063/ref=sr_1_1?ie=UTF8&qid=1317888735&sr=8-1
  34. 34 http://www.smashingmagazine.com/2009/08/20/typographic-design-survey-best-practices-from-the-best-blogs/
  35. 35 http://www.flickr.com/photos/andrec/6067541623/sizes/l/in/photostream/
  36. 36 http://www.flickr.com/photos/andrec/6067541623
  37. 37 http://en.wikipedia.org/wiki/Leading
  38. 38 http://www.alistapart.com/articles/settingtypeontheweb
  39. 39 http://reference.sitepoint.com/css/cascade
  40. 40 http://www.fontshop.com/glossary.php?ltr=d
  41. 41 http://en.wikipedia.org/wiki/Justification_%28typesetting%29
  42. 42 http://en.wikipedia.org/wiki/Soft_hyphen
  43. 43 http://www.css3.com/css-text-justify/
  44. 44 http://code.google.com/p/hyphenator/
  45. 45 http://code.google.com/p/hyphenator/
  46. 46 http://blog.fontdeck.com/post/9037028497/hyphens
  47. 47 http://coding.smashingmagazine.com/2011/10/12/prefixfree-break-free-from-css-prefix-hell/
  48. 48 http://code.google.com/p/hyphenator/
  49. 49 http://robertwalkeronline.com/2008/09/22/importance-of-context/
  50. 50 http://en.wikipedia.org/wiki/Paragraph#Paragraph_breaks
  51. 51 http://eriwen.com/css/css-adjacent-sibling-selectors/
  52. 52 http://css-tricks.com/5762-pseudo-class-selectors/
  53. 53 http://jontangerine.com/silo/typography/p/#continuous
  54. 54 http://en.wikipedia.org/wiki/Semantic_HTML
  55. 55 http://www.flickr.com/photos/primatage/4590087621/sizes/l/in/photostream/
  56. 56 http://www.flickr.com/photos/primatage/4590087621/sizes/l/in/photostream/
  57. 57 http://www.useit.com/alertbox/percent-text-read.html

↑ Back to topShare on Twitter

Heydon has a love/hate relationship with CSS and a lust/indifference relationship with javascript. He writes a lot and makes fonts.

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    Justification of text is a strict no no by any design standard unless typography is intended to denote any graphical form. It is almost like murdering of design principles

    • 2

      I agree, this is a definite no.

    • 3

      I did it. I murdered design. AND I’D DO IT AGAIN.

      Seriously, though: My recommendations were for the enhancement of full justification; not an advocation of its use per se.

      I just picked up 2 books at random (A Short History of Tractors in Ukranian by Marina Lewycka and Soil Ecology by Ken Killham). Guess what? Fully justified with hyphenation.

      Am I missing something?

      • 4

        I just picked up 2 books at random (A Short History of Tractors in Ukranian by Marina Lewycka and Soil Ecology by Ken Killham). Guess what? Fully justified with hyphenation.

        Am I missing something?

        Well for one they’re books, not web pages. I know that’s a bit facetious but they’re different reading environments, with different requirements for legibility.

        Moreover, books automatically inherit hundreds of years of typographic tradition rooted in page-based media. Why exactly was text originally set justified? It sure looks nice, as a whole, no denying that, but as the commenters in this article say, it often comes at the expense of readability, especially when hyphenation is brought into the equation. At best hyphenation has only a small negative impact on the readability of a text. At best.

        If I have to make a choice between ‘nicer looking’ and ‘easier to read’, I’m going to go with the latter.

        • 5

          Hi Andy,

          The point of the article was to champion readability over aestheticism. I like justified text because I find it eminently readable, at least in cases where indentation is used or the measure is suitably narrow. I agree with Fontdeck that, under these circumstances, hyphenation increases rather than diminishes readability.

          Could you possibly elaborate on the differences between the screen and manifest page that make justified text suitable for one and not the other? I can’t think of any differences that are not arbitrary in regard to this specific matter.

  2. 6

    Larger fonts on the web for the win. 16px is on the large side for certain fonts, but 12px is starting to look tiny *cough cough*Smashing Mag*cough cough*. I find I’m using 14px as my default inoffensive size and 16px as my ‘this forward-thinking client can handle embiggening!’ size.

  3. 8

    It’s great to see someone start teaching with the basics. A good article to get people into web typography. I haven’t seen Jon’s demo on paragraph styles yet, this is a great companion.

    In this context let me shamelessly advert a jQuery plugin of mine to handle hanging punctuation aka outdenting.

    For the font selection I agree (in terms of taste) with the author, that Bitstream Vera is solid, but not my favorite, while Crimson is great as a font, but has its glitches in web typography. I recently started to use Droid more and more, which is my current first choice beyond the web-safe fonts.

    • 9

      ’16 pixels is a clear standard’

      Really? what fonts are you using.

      • 10

        Jokerman.

      • 11

        16 pixels MIGHT have a chance of being the clear standard in 5+ years when resolutions have increased dramatically. But in what current world is 16px the standard?

        I’d bet my wallet that 12px is still the majority of the web’s paragraph font size, though 13px/14px is much more readable.

        • 12

          I think the point that the original article was making (not mine, “16px For Body Copy…”) was that we should adhere to a minimum of 16px at current screen resolutions. Just because the use of smaller text is prolific does not mean it is a standard.

    • 13

      Thanks, Manuel. Have you tried Roboto by the ‘Droid folks?

      • 14

        Not a big fan of Roboto from looking at it right now. Seems to lack form. Words turn into boxes very quickly as you flow through the paragraphs.

  4. 16

    you do realize the first line of the article is 112 caracters, right? (you know what they say about the mote and the beam…)

  5. 17

    Your shout out to E.M. Forster literally made my day.

  6. 19

    A lot of people forget that design is a means of accomplish the goal of communication. Great post.

  7. 20

    interesting read.

    I do agree on your 16 pixel preference for body text. Not only makes this for a better readability on computer screens, it is perfect for tablets and iPhones too.
    16 px text is easy to read on an iPhone, without “pinching” or zooming.

    And yes, vertical rhythm makes your pages look good but I am not too keen on the widespread habit of giving an equal top and bottom margin on a heading, like in your example (which says “second level heading”)

    I think there is far too much space on both top and bottom side of the second level heading, and that the page would look much better if you not only reduce that space, but lower the heading half a line height so that it sits closer to the next paragraph, where it belongs to.

    And Bitstream is a type foundry, or a software company, not a typeface.
    The name of the typeface you point out is Vera.

    • 21

      I agree with your prescription, andre; headings should be more proximate to the text to which they are referring. Good point.

      Quite right about the Bitstream reference too. I used to work in a pub offering a vast array of beers and got quite frustrated when people ordered using the brewery name rather than the name of the beer. We had 4 or 6 beers on by our local brewery Adnams at any one time.

      • 22

        Please give me an advice about headings in vertical rythm balanced page, where heading is e.g. 24px and line-height is only 21px.

        Do you treat it mathematically (heading will have ledding 2*21=42px) no matter if it does not look well – especially when heading break in two lines -or do you treat it visualy and break the vertical rythm? Or, is there any clever solution?

        • 23

          Hi Tomas,

          I hope Heydon doesn’t mind me replying to this; I usually do apply your equation to my works, as I find it to be the only way to maintain the vertical rhythm in multiple columned layouts, by taking up an exact multiple of line spaces you don’t break the layout – as long as you ensure that you are compensating your paddings, margins and borders when applied to the top of bottom of the element.

          Though personally if I’m using a single columned layout I tend to position the heading slightly closer to the text it is heading as it looks tighter.

      • 25

        That’s *our* local beer, Norwich boy.

        Love, Ipswich x
        (non-East Anglians will be confused by this)

        Good article by the way, text justification is a no-go area at the moment though for accessibility reasons, the choppy word spacing leads to “rivers of white space” that make it difficult for dyslexic readers. On this point I do advocate leaving no one behind until we have consistent, extensive browser support.

        All the best, Karl

        • 26

          I am truly surprised that the East Anglian banter has come out on SM of all places, I thought I had found a refuge from it, clearly not… I feel right at home now

        • 28

          Nice!

          I agree with the sentiment of “leaving no one behind”. Often we neglect certain users and browsers for the sake of increased complexity; complexity that rarely benefits even the users who have access to it.

          KISS (Keep It Simple Stupid)

        • 29

          Martin Silvertant

          November 30, 2011 7:03 am

          Is justification still a no-go? I personally don’t understand why we keep clinging to that concept while advanced hyphenation and justification is possible in programs like Adobe InDesign, and Hyphenator.js is a tremendous improvement on web typography.

          Justification won’t be best for just any project or context though, but I do tend to justify my text. If you do it right, you won’t have any rivers of white space in your text.

          Besides, 95% of my book collection features justified text. It’s notable however that my books about type design and typography tend to use unjustified text but I actually suspect that’s the case because it’s still a myth that unjustified text is easier to read. I mean, it really was an issue in web typography, but not anymore.

          Also notable is that although my type books feature unjustified text, my fiction books are all justified. My conclusion from this is that justified text is more a matter of preference, because if justified text were so hard to read, all my fiction books (and 95% of my books in general) wouldn’t use justification.

          Those are my observations and conclusions, which might very well be wrong. In the end I could only share my personal experience which is that I find justified text (when set correctly without rivers of space or hyphenation set to the wrong language) EASIER to read. Whether justified text looks and reads well I think depends on the typeface, text size, spacing, column width and to a lesser extend maybe even the leading.

          • 30

            I agree that the choice is somewhat subjective and I happen to be a justification fan too.

            With hyphenation in place it’s a mystery to me why it is deemed a no-go. It’s an even greater mystery what this supposed relationship between justification and “art” is (see other comments).

            I went through a large number of books in my collection. All but a few, across a range of different genres and formats (in both fiction and non-fiction), used justified text.

            One advantage over ragged right that I enjoy is clearer demarcation via indentation. Indentation is a meaningful form of irregularity which is undermined – in my opinion – when the text is arbitrarily irregular on the facing side. Sometimes the combination of the two just looks a complete mess – especially in narrow columns.

          • 31

            Hyphenation breaks up word shape, which can make it difficult for dyslexics who recognise words by their shape. Justification often changes word spacing – most dyslexics find regular word spacing easier to read. It’s this group of readers that we don’t want to leave behind, as Karl says. This article summarises the subject
            FYI: Replies with “post author” inserted into a narrower measure seem to push the text and border down (in Firefox, Mac).

          • 32
  8. 33

    Interesting and very well explained.
    However, i recomend you to read “tipography” from Otl Aicher, he created the rotis font, the luftansa logo and the munich games visual identity. In his opinion, justification on text isn’t good for readability and should only be used in art executions. Just a recomendation.

    • 34

      Thank you, eleva. I will look it up.

      Could you possibly elaborate on this notion of “art executions”?

      Artwork based on text justification seems a little prosaic, if you’ll excuse the pun.

  9. 35

    Fantastic article Haydon, I thoroughly enjoyed reading it. The only issue I have is with your recommendations regarding measure. I agree with your suggestions for print, but the only studies I have found regarding the web actually suggest that a longer measure lends itself to increased readability. Do you have any statistics regarding web typography as opposed to print typography? I am very interested in the subject and am hoping to shed some further light on the matter.

    • 36

      Thank you for your kindness, Joshua.

      I just had a quick look at the paper and stumbled upon this: “A medium line length (55 characters per line) appears to support effective reading at normal and fast speeds.” This was in the context of the study’s findings relating to reading from screens.

      I would say that 55 was a pretty narrow measure – although not as narrow as responsive designs on smart phones in portrait orientation often allow.

  10. 37

    Great article. I have worked on InDesign over the past 5 years, but every once in a while I get the same problem in our PDFs: the quality of the text is too low, and we get this regardless of the level of compression of the PDF.
    Is that because of the ugly Arial? I’ve always have thought that there must be a group of fonts that are ideal for PDFs. Thank you!

    • 38

      I don’t know a lot about InDesign, although I have used it in anger, but I know what I like. I don’t like Arial.

    • 39

      Hi Jose, I think this has more to do with browser rendering than anything else, if you zoom in to 400% you’ll see that it displays fine.
      Either that, or you’re being punished for using Arial.

      • 40

        Thank you… Thank you.Especially coenidsring that Arial was just M$’s half-baked clone of Helvetica. Sans-serif is generally crap for readability anyways. I wonder if font choice plays into grades.

  11. 41

    Nice bite-sized article, well done.

    If only more people would pay attention to the fonts they use, the interweb would be 100 times easier to read than it is.

  12. 42

    Great article and I agree with all your points apart from one… regarding fully justified text. I agree that your approach makes it look very neat, but even at larger text sizes full justification still leads to some funky, varied word spacing (more so in some browsers over others, I’m sure) which on screen, makes for a harder reading experience.

    It’s great for print and hi-DPI devices definitely – but on typical desktop screens I personally would lean towards consistent word spacing for accessibility reasons.

    Other than that, I agree on everything else – nice article :)

    • 43

      Cheers, Tom.

      Hopefully, text-justify will remain in the spec and garner better support. It should help, I think.

  13. 44

    I thoroughly enjoyed reading your article, Heydon. It covered many points I have researched before and some I’d previously not considered, so thank you for that. In addition I like that you included pronunciation with some of the terminology, as someone who generally sits in the office learning things from articles like yours; it is very helpful for when these things inevitably come up in discussion.

    It’s also nice to see someone from my part of the world (East Anglia) authoring on SM too!

  14. 45

    Another Great Article!

  15. 46

    I’ve always been against justification in web text for obvious reasons. However I was unaware of hyphenator.js

    Thanks for mentioning it. I’ll consider justification in my future designs now that I have that in my bag of tools.

    Cheers!

    • 47

      Cheers, Norsewulf.

      I’d investigate the CSS hyphens property as mentioned as well. Much easier and burns less trees.

  16. 48

    Heydon,

    I copywrite for a local webdev stateside. I know little about code, but you reached out from under the esoteric umbrella to draw me in such that I must yell from the rooftops about this article that uses “how” to make my “what” bloom.

    Thank you kindly.

  17. 50

    I agree with Roberto, too many forget design has to work with more than one component to accomplish the goal of total communication. Content and design, by themselves, will not do justice to your ideas. Very good post!

    Kadee
    @produxs

  18. 51

    I’m on the development/SEO side of things so need this sort of article to learn more about what is visually appealing. Very well written and informative. Thanks.

    I’ve been seeing a trend towards larger font and spacing on websites. It’s contra to the “get everything above the fold” but I think it is towards making things more comfortable to read. If content is your selling method, how comfortable it is to read is paramount. People will scroll if they get engaged.

    Maybe you could follow this up with advice related to the new smart phone/pad world?

    • 52

      Thanks, Tiggerito.

      I think it is perfectly natural in all but the most obscure circumstances to make use of scrolling. The scroll bar belongs as much to browser controls as the fast forward button belongs to those of a DVD player.

      Arguably, there’s less to be said about smart phone and ipad scrolling because the gestural, touch-screen equivalent to the “bar” is more intuitive; it asks you to think about the interaction even less.

  19. 53

    Well done, Heydon, this is going into my bookmarks

  20. 54

    As a person with a hard copy background I must say I really love your article and your love for good typesetting.

    One aspect that I remember from hard copy typesetting is that the space above a heading was always greater than the space below. This means that the heading doesn’t hang in the middle but positions itself closer to the text it refers to.

    I never see this in stock standard word processing templates and I wonder if it is possible online.

    When one talks about finessing the quality of typesetting I do feel that having the heading closer to what it precedes rather than equal distance between what comes before it is another point of quality typsetting.

  21. 55

    I am graphic designer learning web design so I am still new styles.

    I know you spoke of leading style but I didn’t see anything on tracking.

    I looked it up in case anyone else is interested the style for tracking is

    h1
    { letter-spacing: 5px;
    }

  22. 56

    One of my favorite articles on web typography I’ve read recently… Thanks Heydon!

  23. 57

    I find it amazing how these typographic basics basics have got lost in the mix of uploading and downloading design. Its like mediocre typesetting is now the norm and we all except it as the way things are today. To hell with that! What ever happen to basic typography standards? Todays generation of designers have to realize this, but oct can’t see the difference. That’s exactly why we thought it was necessary to publish a book that teaches you all those basics that made graphic design great in the past and so in demand. Get your copy at Amazon at amazon.com/How-Succeed-Graphic-Designer-ebook/dp/B007FUX1PY You be amazed at the difference our insights bring to you in your day to day performance! Great article. We need to spread the word…

  24. 58

    Really informative article in terms of styling and design. I will certainly try to follow this tips when formatting my content on the site.

  25. 59

    I recall a U. S. Army study way back when, to determine best readability and comprehension for printed Army field manuals. The authors tested troops with the same text, set ragged right versus fully justified. It was 551 pages, with samples, charts, graphs, data tables, etc. The conclusion, if you persevered to the end of the report, on page 551: No significant difference.

    Few read that far, since the conclusion was echoed in the Executive Summary at the front of the study! And in answer to many requests, the report was set in two columns, fully justified. Oh well.

  26. 60

    Thanks for the great article. I’m trying to choose a suitable paragraph body font for my site. What are you using here? Thought there was a reference to Verdana but it doesn’t look like Verdana to me.
    Thanks

  27. 61

    Bitstream isn’t a font. Bitstream is a company. Bitstream Vera is a font.

↑ Back to top