Typographic Design Patterns And Current Practices (2013 Edition)

Advertisement

Good typography has always been a defining aspect of effective Web design, and this holds true especially for websites in which the emphasis is on presenting a large amount of content — specifically, articles, news and stories. Whether for a magazine or international newspaper, the designer of any website that distributes a lot of content has always had to consider typographic details as seriously and thoroughly as a print designer would.

In 2009, we conducted a survey of then current typographic practices1. Since then, responsive design techniques have clearly gained momentum and established their place in the landscape of CSS layout. With the advent of mobile, new modes of browsing websites and reading text have emerged.

Online publications have had to reevaluate how their content is presented on mobile devices. Web typography is as rich, versatile and accessible as ever before. Yet new opportunities introduce new complexity; and with new implementation challenges, we are all spurred to reconsider our practices.

Now, three years later, we’ve reviewed the original study and explored how Web typography has changed over these years. We spent countless hours between February and April of this year collecting new data and exploring common developments and trends in Web typography.

How Did We Conduct The Study?

We have compiled relevant data from over 50 well-respected websites to address these questions. For this study, we selected a wide variety of international newspapers, magazines and blogs, all of whose typographic choices should have been carefully and thoroughly weighed. We chose publications and organizations that have a very large readership (such as The Boston Globe and The Financial Times) as well as specialized magazines with smaller yet often more demanding readerships (such as A List Apart and UX Booth).

These websites focus primarily on text-based content rather than on generic environments such as Instapaper2 and Readability3. As such, they need to be highly legible in order to ensure that users continue visiting and reading on their websites. Because readability of content is (or rather should be) the main design goal of these publications, the techniques they follow could be considered good practices. However, the results presented in this study should be taken with a grain of salt.

Issues We Were Interested In

The questions asked in our first study nearly four year ago remain relevant but need to be complemented by questions about the challenges of mobile devices. How widely has responsive design been adopted by publications, if at all? Has there been any change in the typographic choices of big and small publications? How many weights of a large font family should we deliver to mobile devices? How large should the font size of body copy be? How should the font size change on a responsive website? Optimizing readability could require changing the font’s style, size and spacing according to the viewport’s width and height.

The second article in this series will address the growing diversity of eBook readers and mobile apps whose purpose is to give users a pleasant, improved or enhanced reading experience — from desktop readers down to smartphone readers. We were curious about the specifics of design and typographic choices that make reading articles in these applications more pleasing than reading on the original websites.

Note: For the sake of continuity, we have stayed close to the format of the original study from 2009. This article is meant to update the data, and hopefully detect new trends and reach new conclusions.

Typography In Online Publications

After carefully analyzing the style sheets in the publications in this study, we compiled a comprehensive spreadsheet of typographic points and collected the relevant data. You can view a spreadsheet of the raw data4, which contains more data than was pertinent to this article.

Not limiting ourselves to the questions in the original study, we will broach issues that have arisen since then as a result of responsive design techniques, and we’ll examine whether such techniques are being applied at all. This led us to the following questions:

  1. How popular are serif and sans-serif typefaces in body copy and headlines?
  2. Which fonts are used most frequently?
  3. What is the average font size (on narrow, mid-sized and large screens)?
  4. What is the average ratio of the font sizes of headlines to the font sizes of body copy?
  5. What is the average line height of body copy?
  6. What is the average ratio of line height to font size in body copy?
  7. What is the average ratio of line height to line length in body copy?
  8. What is the average amount of space between paragraphs?
  9. What is the average ratio of paragraph spacing to line height in body copy?
  10. How are links styled?
  11. How many characters per line are common in body copy?
  12. How often are links underlined?
  13. How often are font fallbacks used?
  14. How often are responsive design techniques implemented?
  15. Which ratios of display sizes are discernible?
  16. How do websites deal with the performance of Web fonts?

To answer these questions, we collected more than 40 data points, all of which can be found in the aforementioned spreadsheet. We can extract several rules of thumb from this data. We wouldn’t recommend acting on the data from this study blindly; the statistical data, however, will no doubt yield useful insights.

Popular Serif And Sans-Serif Fonts

“Which typeface to use?” Obviously, this is one of the most important questions a designer has to answer when considering Web typography. The typeface will set the tone for the entire website, and a poor choice could send the wrong message or thwart the intended atmosphere. The argument for either serif or sans-serif hasn’t been won yet. Interestingly, looking back to the results of the 2009 study, sans-serif typefaces seemed to be more popular in body copy and headlines. The last four years have seen a tiny shift away from that.

Diagram serif vs. sans-serif in headings
Serif and sans-serif are almost equally popular in headlines.

The motivations of designers likely haven’t changed much. Serif fonts apparently stand out in headlines, but arguments have been made for serifs’ ability to guide the reader and for its readable structure in body copy as well. Still, contrasting a serif body with a sans-serif headline or vice versa can improve the overall visual appeal and readability of a website.

The data suggests that serifs have gained in popularity in recent years, leading almost to a reversal in common usage in the last four years, at least where body copy is concerned.

Diagram serif vs. sans-serif in body
Serifs have strongly gained in popularity in body copy.

  • Half of the websites analyzed use serifs in their headlines, the other half sans-serifs. The two most popular typefaces are Georgia — used on such websites as The Guardian5 and the Financial Times6 — and Arial — found on Zeit.de7 and the BBC8’s website.
  • Only 37% use a sans-serif typeface for body copy.
  • The most popular serif typefaces for headlines are Georgia (14%) and Chaparral Pro (6%).
  • The most popular serif typefaces for body copy are Georgia (20%) and Chaparral Pro (4%).
  • The most popular sans-serif typefaces for headlines are Arial (10%) and Freight Sans Pro (4%).
  • The most popular sans-serif typefaces for body copy are Arial (14%) and Helvetica (6%).
  • However, 66% of headline typefaces and 39% of body copy typefaces are found in only one instance.

So, in summary we can state that nearly two thirds of the websites analyzed use serifs for body copy, and Georgia and Arial are still the most common primary typefaces. However, our most surprising find is that a majority of websites use non-standard fonts as their primary typeface — 39% of body copy and 66% of headlines. This development is truly interesting, because it shows that typography has become an important element in establishing brand identity and character. These numbers indicate growing typographic diversity on the Web — which we should probably expect anyway.

Diagram most popular typefaces
A majority of websites use non-standard fonts as their primary typeface.

The growth of “bulletproof” font-delivery services such as Typekit and Fontdeck likely explains the increasing variety of primary typefaces. Fallback typefaces are predominantly standard core Web fonts. Times, Times New Roman, Georgia, Helvetica and Arial are most often used in CSS font stacks. Mobile platform fonts such as Droid Sans, Palatino and Cambria are almost never used.

Ironically, a consequence of the resurgence in serif typefaces is that Times and Times New Roman, which had almost been written off as too old-fashioned in the last study, have made kind of a comeback as the two most popular fallbacks. Roughly 11% of headline and body copy fallbacks have Times, and another 11% have Times New Roman.

There is much literature on typography in Web design, most of which discusses the applications of serif or sans-serif typefaces. Increasingly, the argument for better readability combined with artistic value supports a judicious use of both styles. Douglas Bonneville discusses the benefits and best practices of combining serifs and sans-serifs9, and Simon Pascal Klein discusses the intricacies of font families and makes further typographic considerations in his article “Achieving Good Legibility and Readability on the Web10.”

Screeenshot 'The Great Discontent'11
The Great Discontent12 combines both the Stratum and Meta Serif Web Pro fonts to generate a dynamic yet respectable feel.

Compared to the previous study’s results, Verdana and Lucida Grande are the big losers. Verdana is used only twice as a primary font, and neither is used more than once as a fallback font. Chaparral Pro and Helvetica have risen in prominence. The increasing diversity and individuality in design is due to both the increased use of font foundries and the wider range of Web fonts.

One discovery of the previous study, that “alternative” fonts are more common among headline typefaces, is still proving accurate. No doubt, the general belief that experimentation is best applied to small details still stands. The look and feel of a page can be adjusted just enough by changes to the font family of headings, rather than by drastic changes to body copy. However, the overall use of alternative fonts for body copy has increased dramatically, creating a much richer and more diverse typographic landscape on the Web.

Light Or Dark Background?

The previous study concluded that a large majority of websites favored dark on light color schemes. Not much has changed, although the websites surveyed this time are more varied in their light background tones.

Screenshot 'An Event Apart'13
An Event Apart14 demonstrates the readability of a subdued color scheme.

Several websites have a less aggressive contrast of an off-white or even beige background with dark-gray text. The off-white is often chosen to lower contrast. The designers in this case have clearly opted for a comfortable, lengthy reading experience.

Black text on a white background is a common pattern for body copy. The contrast is easy on the eyes and is, at least among these websites, the status quo.

Average Font Size For Headlines

Generally, the font size of headlines is chosen according to the typeface of the body copy. Still, it’s interesting to see what common ranges designers prefer for body copy and headlines. In this study, the headlines for large display sizes average at roughly 38 pixels. Of course, we made sure that the text always displayed at the actual size, without any zoom.

Diagram heading font sizes
The most popular sizes range from 20 to 32 pixels.

You can easily notice the increase in font size since the last study. Not only did the average increase by more than 10 pixels (!), but the range of headline sizes starts further up, at 20 pixels, and tops out at an impressive 212 pixels in the case of The Great Discontent1715. This publication is an exception, with its magazine-like headlines and smaller font sizes for headings.

Font size heading 'The Great Discontent'16
We’re going further up. The Great Discontent1715 shows an impressive 212 pixels font size.

Average Font Size For Body Copy

With readability as the determining criterion, the average pixel size of body copy has increased in four years as well. Back then, most of the websites were between 12 and 14 pixels in font size. Now, 14 pixels is as popular as 16 pixels; each is used on 13 websites.

Diagram body copy font size

Body font size on 'The Verge'18
14 pixels is also The Verge’s19 font size. While some websites offset the first paragraph of an article with a larger font size, many, like The Verge, follow a uniform size.

Ratio Of Headline to Body Font Size

We’ve updated our rule of thumb based on the current average ratio between headline and body font size. Don’t follow this rule blindly; rather, just keep it in mind as you make decisions in your projects.

Headline ÷ Body Copy = 2.5

According to our study, on average, the ratio between the headline and the body copy is around 2.5. The traditional scale (6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72) and the Fibonacci sequence (16, 24, 40, 64, 104) are still relevant, of course, and represent a more naturalistic approach. The golden ratio (1.618) might also yield an organic effect, too.

Optimal Line Height For Body Copy

Leading (or line-height in CSS) will always depend on your font size and measure (or line length). But in general, the longer the measure, the longer the leading should be. Therefore, presenting a chart of the most popular leading values in pixel units wouldn’t make sense here. More appropriate for you would be to use a relative unit, such as an em or percentage value, that determines the ratio between leading and measure and between leading and font size.

This latest study reveals the following:

  • line height (pixels) ÷ body copy font size (pixels) = 1.46
    Classic typography books recommend 1.5, a value backed up by this and our last study. Very few websites use anything less than that. The number of websites that go above 1.48 decreases as you get further from this value.
  • line length (pixels) ÷ line height (pixels) = 24.9
    The average line length (570 pixels, excluding margins and padding) has grown comparatively less than font size and line height have since 2009 (the latter averaging 22.9 pixels). The average line lengthened by approximatively 5% (from 538,64 pixels in 2009), while the average line height has increased from 12 pixels in 2009 to 13 pixels in 2013.
  • space between paragraphs (pixels) ÷ line height (pixels) = 1.39
    In the first study, it turned out that paragraph spacing (i.e. the space between the last line of one paragraph and the first line of the next) rarely equaled the leading (which would be the main characteristic of a perfect vertical rhythm). According to our results, paragraph spacing is around 1.39 × the paragraph leading. Paragraphs are more clearly delineated with this increased ratio, thus increasing readability.

Multiplying the value of your body’s font size by 1.46 would give you the optimal line height, which you could then adapt to your font style. Multiplying this new value by 24.9 should give you the optimal line length. Note that the layout would also need gutters, margins and padding to let the body copy breathe.

Characters Per Line

As explained by Robert Bringhurst, the classic rules of Web typography dictate that the optimal number of characters per line is 55 to 75. Our data shows that at their actual size (i.e. with no zoom and at the default font size), most websites average 83.9 characters per line at a widescreen resolution (in our case, a browser width of 1100 pixels).

While this average fluctuates quite significantly when the browser is at various other widths — between 83 and 86 characters per line at display widths of 700, 950 and 1600 pixels — only in smaller views of 500 pixels this average comes close to the classic rule. At that width, the average lies around 77 characters per line.

This is most likely the result of an attempt among designers to balance the font size with the amount of text displayed on narrow screens. With more characters displayed per line, the font size would have to become small, making the reading experience a bit more difficult on the eyes.

Diagram characters per line

The highest number is, of course, much higher, but in general most designers stay in the range of 75 to 90 characters. In the most extreme cases, SB Nation20 has 55 characters per line, and Polygon21 averages 118 for the introductory paragraph. A more exact average could be derived by averaging several lines. But such an in-depth analysis probably would not vary greatly from the average that we calculated here. Still, the discrepancy between the number of characters at different widths is peculiar.

Characters per line22
Polygon displays more characters per line in the introductory paragraph than in the rest of the article. However, the font size of that paragraph is larger as well.

Web Typography And Responsive Design

A burning issue we wanted to explore was the impact of of responsive design in Web typography today. The results were surprising: 22 out of 52 (i.e. 42%) of the websites we analyzed show (minor or major) changes when the browser size changes. Considering that responsive design has been around for two years, that number is quite impressive. We calculated the number of characters per line, the body font size and the headline font size at five browser widths (and experimented with the height as well): 500, 700, 950, 1100 and 1600 pixels. The font sizes for those three metrics do not differ greatly across the screen sizes — except at the 500-pixel view.

Unexpected, though, were the visual changes that occurred as we resized the browser. Changes in layout, image scaling, content and font size were evident to varying degrees on 22 websites. The changes are as minimal as images being scaled down to suit the display width. In some cases, however, the websites display other minor and expected changes. At the 500-pixel view, for example, the menu is often replaced by an icon; design components are moved from a multi-column layout to a single column; and both images and fonts are scaled.

No sign of responsive design was evident on 30 websites, including major publications such as The Financial Times23 and The Economist24. At least some, if not all, of these websites seem to opt for a separate mobile website or application. The Financial Times immediately invites mobile visitors to use its FT app. At the moment, large online publications seem to prefer to invest in an app than in responsive design. If this trend continues, then the question becomes, how much will users be annoyed by being prompted to download an app for every single publication they’re interested in.

Despite this, we were happy to find that the layouts of the large majority of websites do not break when being zoomed in.

Some Numbers on the Implementation of Responsive Design

42% of websites implement responsive design changes, including for layout, image scale, content and font size.

At a display width of 500 pixels:

  • Average line height: 28 pixels
  • Average font size of body: 15 pixels
  • Average number of characters per line: 77

At a display width of 700 pixels:

  • Average font size of headlines: 36 pixels
  • Average font size of body: 15.6 pixels
  • Average number of characters per line: 82.7

At a display width of 950 pixels:

  • Average font size of headlines: 37.9 pixels
  • Average font size of body: 16.1 pixels
  • Average number of characters per line: 84.8

At a display width of 1600 pixels:

  • Average font size of headlines: 40.7 pixels
  • Average font size of body: 16.2 pixels
  • Average number of characters per line: 86.8

These averages might be somewhat skewed because of the mixture of responsive and non-responsive websites. But they show how little the body font size and characters per line change over varying widths. The only exception is the 500-pixel width, which have a lower number of characters per line.

Performance Considerations

While embedded fonts are slowly becoming a de facto standard in Web design, they also introduce overhead in performance because, well, they have to be loaded. Chris Coyier recently discussed the idea of loading Web fonts only on large screens25 to avoid the performance hit. You could also load Web fonts into AppCache or LocalStorage first and show them on subsequent page loads.

Moreover, you could use Google’s WebFont Loader26 to ensure that the content is displayed in fallback fonts even before the Web fonts have loaded, and then switch to the Web fonts once they have completely loaded (this is what we’re implementing in this very moment).

Our study shows that Web fonts are indeed a heavy bottleneck in performance, with 5.7 font files being loaded on average, totalling an average of 133.5 KB of extra bandwidth. In cases such as a page being loaded on a slow mobile connection, the user would initially see no text other than the underlining of links (apparently due to the use of the border-bottom property). Only once the fonts have loaded would the text be visible — and even then, elements would appear one by one (headings, then subheadings, then body copy). We can avoid this suboptimal experience by properly adjusting the CSS font stack, as Richard Rutter explains in his talk “Responsive Web Fonts27” (slidedeck).

Other Findings

  • 45% of websites underline the links in body copy. The others do so only on hover or not at all.
  • 71% of websites highlight links with color. The rest do not or only on hover.
  • 99% of websites left-align text.
  • No website uses hyphenation.
  • 84% of websites use the same fonts in the print and standard style sheets.
  • The loading weight of home pages averages around 1.346 MB. Article pages are marginally less, at around 1.146 MB.
  • The websites average 119 HTTP requests!

Conclusion

This study has revealed a set of common practices in Web typography. These results should not be interpreted as law. They should not be interpreted as “best” practices; rather, just as rough guidelines that we encountered in current Web design.

For example, the performance hit introduced by Web fonts and the (huge) number of HTTP requests should be reduced as far as it’s possible, while the content-out approach in responsive design would dictate how the font size would need to adjust depending on the settings in which it’s used. These findings are no doubt just a snapshot of current trends and may very well be outdated in a year’s time.

  • Serif fonts are more popular than sans-serifs for both headlines and body copy. There is, however, a trend to mix sans-serifs and serifs to contrasting effect.
  • The most common fonts for headlines are Georgia, Arial and Chaparral Pro. But the majority of websites are individualized and use less common fonts.
  • The most common fonts for body copy are Georgia, Arial and Helvetica. But, again, the majority of websites are individualized and use less common fonts.
  • The most popular font size for headlines is between 29 and 32 pixels.
  • The most popular font size for body copy is between 14 and 16 pixels.
  • headline font size ÷ body copy font size = 2.4
  • line height (pixels) ÷ body copy font size (pixels) = 1.47
  • line length (pixels) ÷ line height (pixels) = 24.8
  • space between paragraphs (pixels) ÷ line height (pixels) = 1.43
  • The optimal number of characters per line is between 55 and 75, but 75 to 90 is more popular.
  • Body text is left-aligned. Hyphenation is not used at line endings. And links are underlined and/or highlighted with bold or color, sometimes only on hover.
  • Mobile devices are mostly adapted to via responsive design, although some publications opt for a dedicated app.

The decision of whether to modify any typographic element always lies with the designer. Most of the results shown in these websites are likely the outcome of much trial and error. When designing a new website, you might want to stay close to these parameters, but with adjustments to suit your layout. Feel free to review the study’s spreadsheet28 for the raw data.

As we mentioned at the beginning, the second article in this series will deal with the intricacies of eBook readers and mobile apps. We don’t necessarily expect very different results. However, apps do offer more interactivity to the user. It will be interesting to see how much developers take advantage of the range of possibilities in mobile apps. Because there is not yet an inordinate number of readers on the market, we’ll accumulate data on as many readers as possible.

More Studies On Smashing Magazine?

Interested in more studies? Let us know what you’re interested in, and we’ll see what we can do!

(al)

Footnotes

  1. 1 http://www.smashingmagazine.com/2009/08/20/typographic-design-survey-best-practices-from-the-best-blogs/
  2. 2 http://www.instapaper.com/
  3. 3 http://www.readability.com/
  4. 4 https://docs.google.com/spreadsheet/ccc?key=0Atqua-tBbLCAdHVsTG1iazU4aXZWS1J6OE5hYUJvNEE
  5. 5 http://www.guardian.co.uk/
  6. 6 http://www.ft.com/home/uk
  7. 7 http://www.zeit.de/
  8. 8 http://www.bbc.co.uk/
  9. 9 http://www.smashingmagazine.com/2010/11/04/best-practices-of-combining-typefaces/
  10. 10 http://klepas.org/achieving-good-legibility-and-readability-on-the-web/
  11. 11 http://thegreatdiscontent.com/sarah-parmenter
  12. 12 http://thegreatdiscontent.com/sarah-parmenter
  13. 13 http://aneventapart.com/news/post/aea-2012-relaunch
  14. 14 http://aneventapart.com/news/post/aea-2012-relaunch
  15. 15 http://thegreatdiscontent.com/ike-edeani
  16. 16 http://thegreatdiscontent.com/ike-edeani
  17. 17 http://thegreatdiscontent.com/ike-edeani
  18. 18 http://www.theverge.com/2013/1/11/3866228/body-request-give-me-back-my-data
  19. 19 http://www.theverge.com/
  20. 20 http://www.sbnation.com/
  21. 21 http://www.polygon.com/
  22. 22 http://www.polygon.com/features/2013/1/10/3853198/ken-levine-bioshock-infinite-vgas
  23. 23 http://www.ft.com/home/uk
  24. 24 http://www.economist.com/
  25. 25 http://css-tricks.com/preventing-the-performance-hit-from-custom-fonts/
  26. 26 https://developers.google.com/fonts/docs/webfont_loader
  27. 27 http://webtypography.net/talks/rdo13/
  28. 28 https://docs.google.com/spreadsheet/ccc?key=0Atqua-tBbLCAdHVsTG1iazU4aXZWS1J6OE5hYUJvNEE
  29. 29 http://polldaddy.com/poll/7110396/

↑ Back to topShare on Twitter

Jan Constantin loves to spend time writing for Smashing Magazine and devouring science-related articles.

Advertising
  1. 1

    I must be a contrarian…I went with verdana for my site!

    0
  2. 2

    Daniel Schwarz

    May 17, 2013 5:31 pm

    I was very surprised to hear that serif fonts are making/have made a comeback, but what’s more surprising is when designers use both. To me, this is confusing. I think that the type can be one of the indicators of the “tone” of the website. Modern, old-fashioned? To me, this forms an unclear message, and I think it’s bad for UX. I really liked the research on embedded fonts and the “Google” way of doing it. When I built http://airwalk-design.com I had Arial and only Arial in mind, because I wanted performance to triumph design, especially since it’s mainly an image based platform. It’s nice to know that there have been advances in this area. Thanks for the many suggestions and alternatives, especially the localstorage example.

    Speaking of performance, 119 HTTP requests on average? To me. that’s rather large, no? I used Pingdom Tools to do a speed check on my Airwalk Design, and I received 66 HTTP requests. I did, however, get a 100/100 speed score. Does this indicate that other sites don’t invest as much time into speed and performance?

    Just some thoughts,

    -Daniel.

    -9
    • 3

      You can’t generalize and say using multiple font types is confusing and bad. There are several good examples of composition and there are also several bad use cases. It’s not a rule. Many would say going full Arial was a bad choice.

      I suggest you do some studies in typography and editorial design to learn some more about it.

      5
    • 4

      Honestly, Daniel, I’m puzzled about your comments on typography. There is nothing confusing about using both serif and sans-serif typefaces. There are a great many modern serif faces; moreover, a good typographer knows how to wed sans-serif with serif. You can’t just put any two together, of course.

      What surprises me is that people are choosing serif as the dominant partner for body copy. Screens are not like print, and at screen resolution, serifs do not fare nearly as well as sans-serifs. In general, I tend to use serifs more for headings or perhaps shorter text, and rarely for body copy.

      There are, however, no iron rules even there. Some content cries out to be set in a more “bookish” typeface.

      14
      • 5

        Daniel Schwarz

        May 18, 2013 5:50 pm

        Tim (and Chris below),

        I completely agree. I meant that it’s confusing when “any two are put together” as you described it. Of course, like in the example of Smashing Magazine, the contrast works wonderfully, however, in most cases, it’s like a case of eenie-meenie, and the contrast is thrown in for the sake of “jazzing it up a bit”, without any real thought about the art of typography.

        I agree with you on serif body text. It’s definately not like reading a book.

        Sorry for the confusion :)

        -2
      • 6

        Jan Constantin

        May 20, 2013 4:28 pm

        Hi Tim. Thanks for your comment. I think, one clue to the frequent use of serifs in body copy, lies in legibility. While, there has long been contention among typographers, as to which is more legible, serif or sans, it has been suggested that the serifs lead the eyes and thus make for a less tiring read.
        At the same time the average increase in body copy typefaces I observed would also solve resolution difficulties for serifs. These parallel development could both have lead to a better reading experience. Thus considering the change in the last few years it makes sense to assume that both trends were mutually reinforcing.

        0
    • 7

      Daniel, the use of both serif and sans-serif fonts together has a long history in design. Smashing does it on this page, even.

      One of the principles of design is Contrast. We can create contrast with size, colour and weight. But, it is also very common practice to create contrast with font seriffed and sans-seriffed.

      Whether the use of a seriffed font creates an old fashioned tone to the website is up to the designer. They can make a site look modern using seriffed fonts.

      3
  3. 8

    Claudia Hall Christian

    May 17, 2013 5:50 pm

    Typography can make or break an online serial fiction. We use the type to express the “character” of the story. Serious fonts for serious stories; fat happy fonts for happier stories. The type can set the mood of a fiction as much as any amount of character work. With embedded fonts, we’re now even able to allow the characters to “hand write” notes, giving the reader just one more look inside a character’s head.

    This is a brilliant piece of work – thanks! :)

    1
    • 9

      Jan Constantin

      May 20, 2013 4:36 pm

      I thoroughly agree with you’re description of the protagonistic character of typography. As any element that is observed influences the observer, type influences the perception of content. Like you said, fonts are the written word’s storyteller, the visible voice. Thank you for reading:-)

      0
  4. 10

    Interesting study. I’m surprised at the percentage of sites using san-serif for body copy. I wonder if this is a reaction to the dearth of decent san-serif screen fonts (especially on Windows) prior to the availability of web fonts, and will it balance out eventually?

    0
  5. 11

    Best article on time. I’m designing a new portfolio WordPress theme.

    -3
  6. 12

    I’m surprised at this one: “84% of websites use the same fonts in the print and standard style sheets.” I consider it to be fairly standard practice to use sans-serif for body text on screen and serif for body text in print. Interesting!

    1
    • 13

      @melanie s.

      I was surprised at that too. I wonder if it is just a result of the print style sheets not getting enough love.

      0
  7. 14

    As designers, what should we be doing with these average numbers reported in this article? Should we make our designs more average? Is the average number optimal for user experience?

    1
    • 15

      Vitaly Friedman (editor-in-chief of Smashing Magazine)

      May 17, 2013 10:35 pm

      Please notice that these results should not be interpreted as law. They should not be interpreted as “best” practices; rather, just as rough estimates of the trends in Web typography and how the landscape is changing.

      6
      • 16

        I’d like to think of them as a starting point, not the end point. It’s good to have a default set that you can expand on, or tweak as the need arises.

        0
    • 17

      You do raise a very interesting point. On one hand, this does imply that these figures indicate what constitutes as good UX, on the other, every design trend immediately becomes…well, law, as Mr. Friedman puts it.

      What to do?

      1
    • 18

      Jan Constantin

      May 20, 2013 4:53 pm

      I would have to strongly agree with Vitaly on this. This study is a snapshot of current practices. As such it may be useful as an inspirational tool in making typographic decisions. However, they should never limit you or even restrain you from trying something completely different, if for example the visual benefit of doing so makes the reading experience more enjoyable. And It is almost guaranteed that in another 4 year the same study will again deliver different results. Trends and practices change, and nowhere faster than in Web design.
      This said, if uniqueness is not the driving motivator for your websites design, these numbers can show you what seems to work at the moment.
      Of course design being a creative endeavor shouldn’t one always strive for the extraordinary? These numbers could just provide you with a starting point.

      0
  8. 19

    One surprising omission from this report is the prolific rise in slab serif fonts. e.g. Mashable, yourselves at Smashing Mag and so on.

    Popular ones are Bitter, Arvo, Museo, Skolar etc

    I think slab serifs is one of the reasons for the rise in serif usage.

    8
  9. 21

    As a designer, one struggle I have that frustrates me to tears is Windows and hardware.

    I design most often on a Mac – a retina one at that, so my beautiful typography suddenly looks crap on the average Windows PC – like they make me use at work! (work part-time, self employed part time)

    I find fonts that look great and are nicely readable, then view them on the Windows PC and they all “scratchy”.

    It’s very depressing and deflating.

    On my work site (a newspaper) I gave up and am using Windows’ own fonts, since they (should) give the best representation. But they still look crap.

    On my Mac, it still looks quite beautiful, almost like a printed page. On the Windows PC, it looks like it was generated with a dot matrix printer!

    And that’s a worry – because I have no control over the viewer’s hardware, so all my effort at beautification is getting screwed over by crappy monitors.

    -1
    • 22

      There are even some very different font issues depending on the Windows version used. Windows 8 for example seems to blur the fonts, while Vista’s ClearType anti-aliasing left the fonts rather sharp-edged and pixelisch. I have found blame assigned to anything from Hardware issues, such as the graphic cards to Windows’ font implementation itself being imperfect. It seems however that there are very different issues depending on the version of Windows run and the Browser a website is displayed on. I have yet to discover a fix-all solution. I would love to hear it if anybody knew of a font that is impeccable on all platforms.

      3
  10. 23

    Antonio Romero

    May 18, 2013 8:40 am

    Hello,

    Great article!

    FMHO, it would make more sense to use the median instead of the average for the following data:

    Average Font Size For Headlines
    Average Font Size For Body Copy

    and the rest of “size” factors. In fact is the value that we want here, the average is including some extreme cases like the 212 px in a heading. May be the difference is not huge in body text but in headings I believe it would make a difference.

    Another point is about the loading of the font. You suggest to use the Google one as you do here. In my case, it is “strange” when I load your site and it start to “refresh” once it is loaded. May be with the time people get used but right now, at least me, leaves me with an strage sensation and I am now reading you more in feedly.

    Regards

    0
  11. 24

    Antonio Romero

    May 18, 2013 8:43 am

    Hello,

    Great article!

    FMHO, it would make more sense to use the median instead of the average for the following data:

    Average Font Size For Headlines
    Average Font Size For Body Copy

    and the rest of “size” factors. In fact is the value that we want here, the average is including some extreme cases like the 212 px in a heading. May be the difference is not huge in body text but in headings I believe it would make a difference.

    Regards

    2
    • 25

      Jan Constantin

      May 20, 2013 4:59 pm

      Hi Antonio. Thanks for the advice. I will consider using the median for future statistics. The average really may be skewing the perspective with those really big Heading Font sizes.

      2
  12. 26

    I live these studies. They’re a must read everyone who developes the web! Well done once again!

    0
  13. 27

    Great article !!!. I’ve learned so much, thank you !!!

    0
  14. 28

    This is fantastic. About a week a go I started seriously trying to learn how to “logically” use typography – and this article is great.

    I dont seem to understand this : “Ratio Of Headline to Body Font Size”, in basic terms, is the the gap between the headline and the body font size?

    Hope someone could help me understand this
    Thanks

    1
    • 29

      Jan Constantin

      May 20, 2013 5:13 pm

      Hi Aurel. The Ratio of headline to body font size is the proportional size difference of headline font size to body copy font size.
      In the arts there have always been strong opinions on what constitutes the correct ratio of two related elements. For a long time the Golden Ratio which can be found everywhere in nature and consequently also in the arts (and more recently made a popular cameo in Dan Brown’s “Da Vinci Code”) was the last word in proportional distribution. And actually, because of its prevalence in and around us, it still is a good bet.
      I hope that helped.

      2
  15. 31

    It would be good to have access to the websites that this study was based upon. I am a lay-person in this field, and read with a hobbyists interest rather than that of a professional. In the opening paragraph the study is defined as websites where “the emphasis is on presenting a large amount of content”. Surely Facebook and Twitter are the paramount examples of this and I haven’t read any examples relating to them. I understand that the article is more interested in media reporting, but with the resources of Facebook and Twitter, as well as Reddit (in my opinion very poorly typographed)… their business model is very much based on consumer interaction so depends on interaction and therefore retention… surely their typography is relevant to an article such as this?

    0
  16. 32

    Great article! Been hunting for something like this for a bit now. Plenty helpful tidbits of wisdom in there!

    0
  17. 33

    tuna çağlar gümüş

    May 20, 2013 7:15 pm

    Wow. Just wow.

    This post is awesome!!! Thats why i’m a fan of SM.

    Thank you

    0
  18. 34

    Jan Constantin

    May 21, 2013 9:22 am

    Thanks a lot! I’m glad it’s useful:-)

    1
  19. 35

    Hi
    Thanks ! Great Article !
    The study for the online typography is really useful . The tips for using the fonts , headline are really helpful.

    Regards

    0
  20. 36

    themoonstarsun

    May 21, 2013 7:45 pm

    This makes typography even more exciting and not just informative. Lots to consider but also work with

    0
  21. 37

    veysel özdemir

    May 21, 2013 10:45 pm

    It’s really cool. I love it!
    Scientific work :)

    0
  22. 38

    Vida Soraya Verzosa

    May 22, 2013 2:29 am

    Where were you all my life?!

    I wrote a similar paper for my visual design class back in university… So many things have changed since then! Hehe!

    Thanks for keeping it fresh and relevant. I wonder what kind of typography practices would be in place ten years from now? Do you think these principles would also be applicable for, say, LiDar / holographic projections or augmented reality interfaces?

    0
    • 39

      Considering the exponential rate of technological evolution, I would not be surprised if we see something completely different in another 10 years.

      In regards to augmented reality and holographic projection, you most likely need to consider the current limitation of the technologies. Theoretically, there is no reason why the same principles that apply to conventional display technologies shouldn’t apply there as well. However, I have yet to see a holographic screen that doesn’t have major contrast and resolution issues. This could lead to major hardware-related typography problems. At least for now. In ten years, who knows. Maybe we’ll all wear EyeTap lenses that project crisp, clean type onto our retina :-)
      In the meantime, it might be a good idea to experiment to see what works best for current holographic and augmented screens. I imagine size increase and simpler sans-serif typefaces may increase legibility, there.
      I’ll be interested to see what happens in the years to come.

      0
  23. 40

    You’re right about what you mean about typography and its “law”. When I was in college my professor told me that the optimal length of a body of text should be around 1/2 of an alphabet and 1 & 1/2. Just today I found an article that talked about how the size should be around 40 – 60, then this article says something different. I believe the most important part of the picture is the type is readable to all types of people. Thanks for the article.

    0
  24. 41

    Great topic, yet you have not collected enough data to make statistical conclusions. Lines such as “You can easily notice the increase in font size since the last study” are misleading, and only believable because of graph formatting. An increase is not clearly visible if categories (in this case font size ranges) have counts below 15, 10 if data is normally distributed (which it is not because there is not enough data), and especially below five.

    Only in the “other” category of popular typefaces do any of your categorical counts exceed 15, creating so much sampling variation that your results really cannot prove anything significant.

    It appears as if a trend may exist, but your average differences do not offer statistically significant results until you increase your sampling size.

    0
    • 42

      Thank you for your input Nick!

      From an academic point of view you’re absolutely correct. I would never submit a Master or PHD thesis with such a varied data set. To accumulated enough data for a hypothesis on an academic level would require a much larger sample of websites. I wouldn’t feel confortable making definite conclusions with less than 300 data sets. However, for the purpose of this article – to see if certain trends can be seen – I find the dataset sufficient. After all, statistics are always subject to interpretation and inherently posit a certainty that is never actually there. But that is a discussion for another forum.

      What can be said is that the 60+ major websites I’ve analysed do show a trend towards diversification of type and a enlargement of font size, among others. Recovering data over such a wide data set from even more websites would be a large undertaking, on which, I’m sad to say, I wouldn’t be able to spend the time. However, I’m sure the results from a larger collection would be fascinating and would definitely enjoy reading about the results.

      0
  25. 43

    Thumbs up to Serif !
    Quite popular and beautiful ! :)

    0
  26. 44

    Thanks for sharing…

    0
  27. 45

    I found this artcle to be very interesting and didn’t know more serif fonts are being used. I almost never use them but I guess I should start doing more of the mix between fonts.

    Print styles are generally not used for many sites that don’t need it I guess.

    Great article!

    -1
  28. 46

    Great article!!

    1
  29. 47

    Great study indeed ! Thanks for the information. Will share this for sure

    0
  30. 48

    Fernando seminario

    June 11, 2013 6:53 pm

    Great article! So much useful data in one place.

    0
  31. 49

    This article is extremely useful to me.

    I’m wondering, though, how to determine the size of typography for the main navigation (the ususal suspects: Home, About Us, Contact Us, Resources, etc.)

    Should it be somewhere between body copy and headline copy?

    Any insight is appreciated.

    Thank you!

    0
  32. 50

    I feel like the writer didn’t look at the charts; there are several occurrences of the chart not matching the description. For instance:

    “Now, 14 pixels is as popular as 16 pixels; each is used on 13 websites” — While the chart shows 16 pixels to be 14 websites, not 13.

    Now I know that’s not a huge difference, but come on; it’s just wrong.

    0
  33. 51

    One simple thing – I am now fan of the author. It is really a great piece of research. I’ll using lot of information for further web page designing projects. Thanks a lot.

    0
  34. 52

    I have been working in the financial industry and using Arial as the standard fonts. Curious what the results could be if a similar study could be done for the financial industry websites. That will be a great help!

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top