Typographic Design Patterns and Best Practices

Advertisement

Even with a relatively limited set of options in CSS, typography can vary tremendously using pure CSS syntax. Serif or sans-serif? Large or small font? Line height, spacing, font size and padding… The list goes on and on.

To find typographic design patterns that are common in modern Web design and to resolve some common typographic issues, we conducted extensive research on 50 popular websites on which typography matters more than usual (or at least should matter more than usual). We’ve chosen popular newspapers, magazines and blogs as well as various typography-related websites.

We’ve carefully analyzed their typography and style sheets and searched for similarities and differences. We have also put together a spreadsheet of the study1 that displays the websites’ various values (for example, the ratio between the line height and line length).

Ultimately, we identified 13 general typographic problems and issues related to typographic design and tried to find answers to them through our research:

  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?
  4. What is the average ratio between the font size of headlines and body copy?
  5. What is the average line height of body copy?
  6. What is the average ratio between line height and font size in body copy?
  7. What is the average ratio between line height and line length in body copy?
  8. What is the average amount of spacing 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 is font replacement (sIFR, etc.) used?

We ended up with solid data, which we evaluated and prepared for this article. Based on the statistics, we have identified several “rules of thumb” for working with type. Please note that these rules can often, but not always, be considered best practice.

1. Serif vs. Sans-serif

Whether designers should use serif or sans-serif fonts for body copy is one of the most discussed and unresolved questions about typesetting on the Web. Some designers prefer to give their headlines serifs (which are short, decorative lines at the end of letter strokes) to give them more appeal. The main reason to choose a serif font for your headlines is that, at a large size, serif fonts are easy to read and look great. The contrast between a serif font for headlines and a sans-serif font for body copy can be interesting, too.

Some designers prefer serif fonts for body copy because they believe the lines at the end of letter strokes help guide readers from one letter to the next, making scanning and reading more comfortable.

Sans vs. Sans-Serif in headlines.

According to our study, sans-serif fonts are still more popular than serif fonts for headlines, although they seem to have dropped in popularity in recent years.

  • 60% of websites use sans-serif typefaces for headlines, mostly Arial, Verdana, Lucida Grande and Helvetica. Among them: CNN2, ArsTechnica3, Slate4, BBC5 and NewScientist6.
  • Only 34% of websites use a serif typeface for body copy. Among them: New York Times7, Typographica8, Time9, AIGA10 and Newsweek11.
  • The most popular serif typefaces for headlines are Georgia (28%) and Baskerville (4%).
  • The most popular serif typefaces for body copy are Georgia (32%) and Times New Roman (4%).
  • The most popular sans-serif typefaces for headlines are Arial (28%), Helvetica (20%) and Verdana (8%).
  • The most popular sans-serif typefaces for body copy are Arial (28%), Verdana (20%) and Lucida Grande (10%).

Two thirds of the websites we surveyed used sans-serif fonts for body copy. The main reason is probably because, despite the growing popularity of advanced font replacement techniques, such as Cufón12, most designers stick to the core Web fonts, which essentially give them only two viable options: Georgia and Times New Roman. And because of the stigma attached to Times New Roman (that it often makes a modern website look outdated), they’re left with only Georgia. Sans-serif fonts offer a wider variety of options for the Web.

Serif vs. Sans-Serif in Body Copy

2. Which Typeface Is Most Popular?

Surprisingly, despite the growing popularity of font replacement techniques and growing availability of new pre-installed fonts (e.g. Windows Vista and Mac fonts), designs in our study mainly used the traditional, core Web fonts, the only exceptions being Lucida Grande (which comes installed only on Macs), Helvetica and Baskerville.

Most popular typefaces

As one would expect, Arial, Georgia and Verdana are used for the majority of body copy today. In our study, around 80% of websites used one of these three fonts. For the remaining 20%, designers’ favorite Helvetica is a popular choice, as is Lucida Grande.

With options such as Verdana and Arial available as fall-backs, a designer really has no reason not to specify other non-standard fonts to achieve the best effect. You can learn more about advanced CSS font stacks in Nathan Ford’s article Better CSS Font Stacks13 and CodeStyle’s Build Better CSS Font Stacks14.

Jon Tangerine15
Jon Tan16 uses serif typeface Baskerville for headlines and serif typeface Georgia for body copy.

Verdana is used minimally for headlines. Only 10 websites use it for body copy to begin with, and only four use it for headlines. The main reason is that Verdana puts a lot of spacing between letters, which makes it not as tidy to read at a large size. If you are going to use it for headlines, you may want to take advantage of the CSS letter-spacing property. Georgia and Arial are most popular fonts for headings.

Finally, we note that “alternative” fonts are used much more for headlines than for body copy. Designers seem more willing to experiment with their headings than with the main body. If you want to bring some typographic variation into your next design, headings may be the easiest place to start.

3. Light Or Dark Background?

We were curious to learn the extent to which designers were willing to experiment with dark background colors. We looked out for any typography-oriented websites that had a dark color scheme and were surprised to find not a single one.

New Yorker17
The New Yorker18 has a light color scheme, with Times New Roman used for headlines and body copy.

Pure white background for body copy won by a landslide. However, many of the designs avoid the high contrast of pure white on pure black; text color is often made a bit lighter than pure black. Designers clearly focus on legibility and avoid experimenting with background colors. The contrast of black on white is easy to read and is, at least among these websites, the status quo.

4. Average Font Size For Headlines

Of course, the choice of headline font size depends on the font used in the design. In any case, in our study by far the most popular font sizes ranged from 18 to 29 pixels, with 18 to 20 pixels and 24 to 26 pixels being the most popular choices.

Heading font size graph.

Our study didn’t yield any clear winners. The average font size for headings is 25.6 pixels. But note that any size between 18 and 29 pixels could be effective; it depends, after all, on how your headings fit the overall design of your website. Still, you could try experimenting with larger sizes, because displays are always getting larger, as are display resolutions.

An obvious outlier is Wilson Miner19 (screenshot below), who uses a massive font size of 48 pixels for his headlines. His website is a special case, though, because all of his posts have extremely short titles, only a few words.

Wilson Miner's website20

5. Average Font Size For Body Copy

Do you remember about seven years ago when Web designs had tiny, barely readable elements, and body copy was set to 8 pixels in Tahoma? Small font sizes are out, and more and more modern designers are turning to large font sizes. From our sample size, we saw a clear tendency towards sizes between 12 and 14 pixels. The most popular font size (38%) is 13 pixels, with 14 pixels slightly more popular than 12 pixels. Overall, the average font size for body copy is 13 pixels.

Body copy font size graph.

We noted (as one would expect) more and more attention being paid to the smallest typographic details. Dashes, quotes, footnotes, author names, introductory text and paragraphs have been carefully set, with optimal legibility in mind. Type setting is usually very consistent, with a lot of white space, leading and padding.

Large intro fonts on Typographica
Typographica21 uses a large font size for the introductory paragraphs of its articles, and then reverts to a normal size for the rest of text.

Heading to Body Font-Size Ratio

To better understand the relationship between heading and body font size, we divided each website’s heading font size by its body font size. We took the average of these ratios and derived a rule of thumb for you to work with:

Heading font size ÷ Body copy font size = 1.96

The overall value, then, is 1.96. This means that when you have chosen a font size for your body copy, you may want to multiply it by 2 to get your heading font size. This, of course, depends on your style; the rule of thumb won’t necessarily give you the optimal size for your particular design. Another option is to use a traditional scale (6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72) or the Fibonacci sequence (e.g. 16 – 24 – 40 – 64 – 104) to get natural typographic results.

6. Optimal Line Height For Body Copy

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

According to our study:

  • line height (pixels) ÷ body copy font size (pixels) = 1.48
    Note that 1.5 is a value that is commonly recommended in classic typographic books, so our study backs up this rule of thumb. 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) = 27.8
    The average line length is 538.64 pixels (excluding margins and paddings) which is pretty large, considering that many websites still use 12 to 13 pixels for their body copy font size.
  • space between paragraphs (pixels) ÷ line height (pixels) = 0.754
    We were surprised by this result. It turns out that paragraph spacing (i.e. the space between the last line of one paragraph and the first line of the next) rarely equals the leading (which would be the main characteristic of perfect vertical rhythm). More often, paragraph spacing is just 75% of the paragraph leading. The reason may be that leading usually includes the space taken up by descenders, and because most characters do not have descenders, additional white space is created under the line.

Paragraph spacing size graph.22

AIGA23 is a perfect example of optimal leading. Its font size is 13.21 pixels (converted from ems) and its line height is 19.833 pixels (conversion from ems). In fact, 19.8333 ÷ 13.2167 = 1.5011.

So, once you have decided on your body copy font size, multiplying this value by 1.5 will give you the optimal line height. Once you’ve got that, you can multiply this new value by 27.8 to get your optimal line length. Note that the layout will also need gutters, margins and padding to let the body copy breathe.

20.1px paragraph spacing

The New Scientist24 has 20 pixels of spacing between paragraphs.

7. How Many Characters Per Line?

According to a classic rule of Web typography, 55 to 75 is an optimal number of characters per line. Surprisingly, our study shows that most websites have a higher number. We counted how many characters could fit on one line using the design’s default font size. The result, which is an average of 88.74 characters per line (maximum), is extremely high. Of course, this maximal number is different from the average number of characters per line, which in general ranges between 75 and 85 characters per line. Still, the range is way above the conventional range — quite peculiar.

Number of characters per line.

Between 73 and 90 characters per line is a popular choice among designers, yet we also found outliers: Monocle2725 (47 characters per line) and Boxes and Arrows26 (125 characters per line). To get a more exact reading for each website, you would need to take an average character count from multiple lines.

Other Findings

  • 46% of websites underlined the links in their body copy, while the others highlighted only with color or a bold font weight.
  • 6% of websites used some kind of image replacement for headings or body copy (e.g. Monocle2725, New Yorker28, Newsweek29).
  • 96% of websites do not justify text.
  • Websites gave their text a left padding of on average 11.7 pixels (counting from the left content area border).

Conclusion

The study shows a clear set of common practices and guidelines for setting type in Web design. Note, though, that these findings are not scientific and should serve only as rough guidelines:

  1. Either serif or sans-serif fonts are fine for body copy and headings, but sans-serif fonts are still more popular for both.
  2. Common choices for headlines are Georgia, Arial and Helvetica.
  3. Common choices for body copy are Georgia, Arial, Verdana and Lucida Grande.
  4. The most popular font size for headings is a range between 18 and 29 pixels.
  5. The most popular font size for body copy is a range between 12 and 14 pixels.
  6. Header font size ÷ Body copy font size = 1.96.
  7. Line height (pixels) ÷ body copy font size (pixels) = 1.48.
  8. Line length (pixels) ÷ line height (pixels) = 27.8.
  9. Space between paragraphs (pixels) ÷ line height (pixels) = 0.754.
  10. The optimal number of characters per line is between 55 and 75, but between 75 and 85 characters per line is more popular,
  11. Body text is left-aligned, image replacement is rarely used and links are either underlined or highlighted with bold or color.

Of course these “rules” aren’t set in stone. Rather, they are a set of rough guidelines that you can use as a basis for setting typography. Every website is unique, and you may want to modify your choices at each stage of your design to suit your layout. You can also take a look at the spreadsheet of the study30 and export its data for further analysis.

Related posts

You may be interested in the following related posts:

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)

↑ Back to topShare on Twitter

Michael Martin writes about Web design, WordPress and coding at Pro Blog Design. You can subscribe there for advice on making the most of your blog's design, or follow him on Twitter.

  1. 1

    Interesting!!

    0
  2. 2

    Some unexpected results. I was thinking that Arial and Verdana had a much larger marketshare on webpages than Georgia. Nice article though.

    0
  3. 3

    Good article, was looking something like that! Have to read it again tomorrow (at work ;-) )

    0
  4. 4

    Excellent analysis on the typographic environment of the internet. Lot’s of useful information that I will put into practice with my own designs for sure.

    0
  5. 5

    Fantastic article. :)

    I concur with the person below. I hope that as CSS3 becomes more widely adopted that we begin to see a far greater use of font replacement.

    Particularly in the bodies.

    0
  6. 6

    Great post. It’s really astounding how limited our font choices are as web-designers. Imagine if magazine (or any other form of media) layouts were as limited?

    Hopefully CSS3 will help change that.

    0
    • 7

      The questions is how long will we have to wait before we can use CSS3 based on the fact that IE6 is still holding on strong and it was released in 2001. Right now I don’t see many companies or older individuals giving up on the old browsers and until that happens… css3 is just sitting on the sidelines.

      0
  7. 8

    Great article, tks!

    0
  8. 9

    Excellent article, one of your best yet – and that’s saying something!

    0
  9. 10

    I would describe the increasing popularity of ‘Lucida Grande’ as the Facebook effect. Also, since it’s installed with Safari on Windows, which in turn is usually installed by the iTunes software updater, that’s a lot of Windows PCs that have this font installed (as well as practically all Macs obviously).

    0
  10. 11

    I LOVE this sort of post!! Absolutely awesome!

    0
  11. 12

    Very interesting stuff :) Good to see some data from now and then! Keep up.

    0
  12. 13

    Bruno Henrique Stein

    August 20, 2009 4:20 pm

    AMAZING!

    0
  13. 14

    really unexpected and interesting stuff. nice…

    0
  14. 15

    whoaaa its cool article

    0
  15. 16

    I love these types of articles! I was just wondering and actually doing a mini-study like this on my own the past few days. Thanks!

    0
  16. 17

    Like a pair of Christian Louboutin shoes, typography makes my heart skip a beat. I am in the small majority for type style for I love a great serif. Adore the the baskerville, but please do not show me Verdana. In print or online, I LOVE The New Yorker, it is pure style and class. Thanks for a great article, not only for my own passion, I will share this when I emphasize the importance of typography with my clients on their websites.

    0
  17. 18

    Nice research, very handy reference and interesting insight for now.

    0
  18. 19

    Great read !! I found it very interesting that most people don’t use a form of image replacement. I also found strange that on the “Characters per Line” graph, that the longer lines were as popular as they are.

    0
  19. 20

    What about TAHOMA? Great 18px use

    0
  20. 21

    Very interesting. Very useful too. Thanks.

    0
  21. 22

    Increible post!!! muy buenos estos estudios, son lo mejor de SM.

    Martin Brumana
    Drumania.com.ar

    0
  22. 23

    What do you think of the font choice on LINK

    0
  23. 24

    Nice change of pace. Definitely more studies, maybe some on blogs?

    0
  24. 25

    Very interesting, thanks for doing this.

    I think it is important to reiterate that your study was on a certain category of sites rather than saying that the findings would be the same on ALL modern sites. So before your readers go off making these conclusions the rule for all their sites, they should take into consideration the type of site they are creating.

    In fairness you did mention this in the start of your article.
    [Quote]we conducted extensive research on 50 popular websites on which typography matters more than usual,,,,,

    We’ve chosen popular newspapers, magazines and blogs as well as various typography-related websites.[Quote]

    I strongly believe if your study was a general study (all types of sites) your results would have been much different.

    In my experience looking at a more broader range of sites, Arial is by far the most popular font with Verdana (used for more corporate type sites) holding a strong second place. It is also my experience that most sites use size 11 or 12 over size 12 and 13 like your study shows.

    My studies also show that the most popular heading sizes are 13 and 14 which is very different from the results of your study which shows these sizes to be the least common.

    You did say “sites where typography matters more than usual”, so my comments don’t really mean much,,, I just thought I would throw in my 2cents.

    0
  25. 26

    Great resource! Can you do this for print projects (magazines) too?

    0
  26. 27

    cool, comparing this data to a similar study on big corporate/government ‘standardised’ websites would be really interesting

    0
  27. 28

    Another great bookmark! Thanks!

    0
  28. 29

    I found this study extremely interesting — thanks! I would also like to see studies of current practices in web design for small businesses, non-profits, clubs/organizations, political sites — all manner of web sites besides “corporate,” or the very large companies. Many of your readers do design work for businesses and organizations other than Apple, GM, MacDonald’s, etc., so it would be helpful to us to see what others are doing with all the other kinds of design work out there.

    0
  29. 30

    interesting post, very inspiring for common and new web designer

    i hope i could see more on research like this :D, like average web color pair chosen, popularity between dark and light design, how many they use javascript, etc

    0
  30. 31

    Excellent article, one of your best

    0
  31. 32

    Interesting. But I think the highest percentage of body text should be 12px instead of 13px.

    0
  32. 33

    I am a big fan of typography related articles. And this has been an excellent article. Also good writeup Michael. Your writing is making me to follow you. :-)

    0
  33. 34

    Thanks, that’s awesome to see the overall practice.
    What would you say of Tahoma though? Here in Russia that’s a very common choice for body copy.

    0
  34. 35

    This is brilliant. Bookmarked.

    0
  35. 36

    Hello there… great article…

    but didn’t it means
    serifs vs. sans-serifes?

    greez from switzerland

    0
  36. 37

    This is superb…

    0
  37. 38

    Nice job.

    BTW – The link for “New Scientist” under heading #6 is actually pointing to “The New Yorker” website.

    0
  38. 39

    I’m sorry – but how in the world should this info be used as “guidelines”.
    Just because “majority is doing it like that..?”

    I’d say, very interesting findings, good to know what most of designers think is good.
    However, who says this is how it should be for the users perspective?

    1
  39. 40

    How does the Fibonnaci sequence involve 16?

    It’s 1, 2, 3, 5, 8, 13, 21, 34, …

    Does typography use a “different” version of Fibonnaci?

    0
    • 41

      The example given in the text uses inaccurate numbers but what I think the author means is that the Golden Ratio (1 : 1.61803399…) can be used to extrapolate relative font sizes. If you begin by choosing the size of your body text (whatever you feel is the most readable) e.g. 16px, the “golden” heading size would be 25.888… rounded up to 26px, the next size up would be 41.888… rounded up to 42px, etc.

      1 : 1.618… is the ratio that numbers in the Fibonacci Sequence tend towards – the ratio between each number and its predecessor gets closer to this figure as the numbers get larger.

      0
  40. 42

    Let’s make a webpage with using just the “winners” :)

    0
  41. 43

    I am so glad you are posting more and more studies like this. They really are useful and interesting :D

    0
  42. 44

    Whatever happend to Tahoma :’)
    With love, from holland.

    Phil
    VetGaar.nl

    0
  43. 45

    good article, but shouldn’t we be encouraging use of em’s for fonts for accessibility reasons?

    0
  44. 46

    Nice post. I love web typography. Would the golden ratio work in the realm of typography; font size to heading ratio or line-height, for example. Time to experiement.

    0
  45. 47

    Smashing Editorial

    August 21, 2009 12:53 am

    Tahoma seems to have lost its popularity. It wasn’t used as a primary font on any of the analyzed sites.

    0
  46. 48

    Nice. I, personally, love the use of Lucida Grande on sites. It’s a nice font :-)

    0
  47. 49

    Finally!
    I’ve been looking for some formulas soooo looooong :)

    0
  48. 50

    The inability to find dark layouts surprised me, so I thought I would have a quick bit of digging around tp see if I could re-find the ones I already knew were out there.

    - Carsonified
    - A particular post by Jason Santa Maria -> What’s Golden
    - Black Estake Vineyard

    0
  49. 51

    Smashing Editorial

    August 21, 2009 1:41 am

    @Simon Willans (#48): Good point, but these are sites are not typography-related; they use typography for a solid visual presentation, but we focused explicitely on the content-heavy ones in which typography matters for legibility.

    0
  50. 52

    An interesting article, thanks. I was checking a site I’m coding today, and it fits in quite well with the ‘recommended’ numbers… I was just designing the spacing by what looks ‘right’. :)

    0
  51. 53

    Ah fair enough. Either way, good post.

    0
  52. 54

    I have to say that is certainly an eye opener but it also makes a certain amount of sense. I wasn’t too surprised with the results after thinking about it. It is amazing though when you think about the fact that a lot of use the same font’s in the same exact ways.

    0
  53. 55

    Another webiste with a typography-based design I found via webcreme.com is Filmaster.com.

    Very original, although a bit inconsistant at times (the headers for articles seem a bit too large to me).

    0
  54. 56

    Good Work

    0
  55. 57

    This is a fantastic post. I have really tried to engross myself in typography recently. I like the various correlations in the figures. Very useful.

    0
  56. 58

    excellent!!!!! thank you smashingmagazine, merci beaucoup!

    0
  57. 59

    Sweet! Now I can actually say I know what it means to do typographic design!

    0
  58. 60

    Interesting. I was taught just the opposite for print design — that serif type is easier to read as body copy, and sans serifs make better headlines. Maybe that’s why the Web versions of some publications (New York Times, New Yorker, Time, Newsweek) use serif fonts for body copy.

    0
  59. 61

    thanks I was waiting something like this!

    0
  60. 62

    Tahoma not popular? Interesting…

    0
  61. 63

    Matěj Grabovský

    August 21, 2009 5:24 am

    @Peter Craddock (#39): Fibonnacci doesn’t always have to begin with 1.

    0
  62. 64

    Jewen Soyterkijns

    August 21, 2009 5:28 am

    I guess I am the only fan of “Trebuchet MS” for both body and heading copy.

    0
  63. 65

    Great article, typography is something I really need to work on more in my designs. So some of these finds are great and I will use them on my current site I am creating right now.

    0
  64. 66

    so much to read.. really good stuff here.. @Jewen , i too am a fan of trebuchet and developing it as the copy in my upcoming site… i think it will catch on more and more.

    0
  65. 67

    Definitely some interesting research here. One thing to keep in mind when reading this is that these stats are based on content heavy sites. The sites you and I work on may or may not fit into this category so what’s best for content heavy sites may not be best for more graphical or stylistic sites.

    This makes sense, though, because I’m guessing that if you picked fifty popular sites from the design/portfolio/media arena you’d get a much greater diversity of fonts, font sizes, leading, etc.

    Great round up – thanks for the research!

    0
  66. 68

    Very good article, thanks for putting this together. I usually reference the alistapart.com CSS file for my typography questions, but it’s really nice to see all the data in one place like this and know how the community is dealing with it. Thanks Michael, nice read.

    0
  67. 69

    Great article!

    I would like to see something on well-designed service-oriented websites (government, non-profit, etc). If you can find any, that is.

    0
  68. 70

    Fascinating that not a single site was found to use MS Trebuchet for body copy OR headlines?

    0
  69. 71

    sshhweet – The top one says sans vs sans serif in the graph area, it should be serif vs sans serif

    0
  70. 72

    Nice studie… Learn about it & make the difference !

    0
  71. 73

    Great study. Thanks for the detailed info. Regarding the future studies, I would be interested to see analysis of social networking sites.

    0
  72. 74

    Trebuchet MS for the win. I can’t believe this wasn’t used by any of those websites! It’s a great font and a nice change for any designer/developer from the same ol’ Arial/Verdana.

    0
  73. 75

    Very helpful, and reassuring. But, thanks to this, I decided to beef up my headlines (H1) a bit, change the font and switch to italic. Thankfully, I’m using CSS, so it was just a simple tweak.

    0
  74. 76

    How did you select the sites to examine?

    0
  75. 77

    Very very intersting!!
    Tks SM!

    0
  76. 78

    This was a cool Post.. learned some great points here, really informative ! :)

    About answer to the Poll:
    I’d like to study about UI Design. A Good long article please ! :)

    0
  77. 79

    Just what I was looking for. Thanks SM.

    0
  78. 80

    This may be the best post I’ve read on Smashing Mag so far. It will defiantly influence my blogs redesign.

    0
  79. 81

    very informative…

    0
  80. 82

    Alejandro leijnse

    August 22, 2009 1:37 am

    This cant get better. Exactly the type of reserach i needed to kick some good articles on my recent booklet about typography. Thanks a lot

    0
  81. 83

    Trebuchet MS will be on my next design in body copy too. That’s a pretty lovely font!
    French web standards reference uses it, for example.
    Nice article, SM =]

    -1
  82. 84

    Brilliant! Well – written and incredibly fascinating!
    way to go!

    2
  83. 85

    This was a very good read, thank you.

    0
  84. 86

    Hey,
    Thanks for conducting this study and putting it up.
    Now i very much wish to break all the popular practices ;)

    0
  85. 87

    Great article. Very in-depth and actually sets some guidelines to typography rather than leaving it vague.

    0
  86. 88

    Why is one section described as a rule of thumb, then another seems to be presented as gospel and yet another has no guides execpt a batch of random numbers obtained from a batch of sites.

    Each section could have a rule of thumb/gospel bit as well as trends.

    0
  87. 89

    Great post! Thanks for this information. As a non-designer I find it very interesting to know the industry standards.

    1
  88. 90

    Some really neat figures there.. It would be good to see a more extensive survey with a few more sites… and also, as other people have mentioned, other types of sites.

    One big problem with some of the data, though… the title to body ratio for ex.. you absolutely need a table for that or some indication of whether the 2.03 is anywhere near the mode or the median.. would be nice to know if that average is just random.. there were some other entries that would ahve beena lot more useful with some elaboration.

    0
  89. 91

    Great article! just what i was looking for. This kind of studies are so usefull when we have to explain or argue our decisions at designing.
    thanks!

    0
  90. 92

    Very nice article. It is always nice to see some great typography. It still to this day is the most underrated tool in a web designers arsenal.

    0
  91. 93

    Very interesting………..

    0
  92. 94

    Interesting read. I always tend to favor Sans Serif type when it comes to web design.

    0
  93. 95

    Very interesting study, I wish however it would’ve involved a slightly larger sample of sites, as well as a more general selection. Still, even with those limitations there are some very interesting tidbits of info here. Thanks.

    0
  94. 96

    Great study. Must read for all web designers. It would be interesting to open it up to more sites. Thanks for sharing.

    0
  95. 97

    Would love to see how to create Job Arregators sometime soon :)

    0
  96. 98

    Great post.

    Here’s a another example of great typography on the web using CSS text-rotation. Too bad it only works on the newest broswers. Link

    0
  97. 99

    love it much…

    0
  98. 100

    looks like a good articles…i’ll save it for later

    0
  99. 101

    kelvinwebdesigner

    August 28, 2009 2:51 pm

    sweet article for and present and future reference!
    CG

    0
  100. 102

    I appreciate to study the philosophies of classic typographers and learn from their ways to handle typefaces. Studies like this here lead to more stereotype websites because too many people will misunderstand this as an encompassing description for “good typographic design”.

    To know about the motives of famous designer like jan tchitchold, adrian frutiger or otl aicher is not a duty to get good typographic results but you’ll feel better with the typographic descisions you make.

    0
  101. 103

    Nice article!
    However I’m quite shocked by the long lines that these websites uses. I think your own recommendation of 55-75 characters per line works well for print (it’s “classic” rules), but not on the web. I’d rather go with 45-55 characters to make the text really fast-reading!

    1
  102. 104

    Awesome study! The way Wilson Miner explain why it’s reasonable the use of big font sizes it’s as clever as simple.

    But the way, can you tell me wich tool have you used to get CSS info of the web in the image of point 6?? I use firebug but this seems interesting too. Thanks!!

    0
  103. 105

    Excellent findings! @davido The CSS tool is CSS Viewer, its handy.

    1
  104. 106

    Recently I’ve been experimenting with using large type similar to Wilson Miner. I find that it reduces eye strain for me, and enables one to sit further away from the screen. It also helps when I want to have text as one or two columns fill up the 970px grid layout I make use of on my personal site.

    I dunno… responses from my clients and some other designers have been good so far. I’m going to try and roll with it.

    0
  105. 107

    I should also mention that using large type also makes it possible to view a site comfortably on an iPhone without an independently coded iPhone version of the site. (;

    0
  106. 108

    I think the findings are helpful. It’s always good to see trends so that we can (as designers) find ways to move away from them, break the rules, intelligently, once we know what they are. I would like to see a study on mobile sites, or mobile apps, if there are any trends forming, what are they, etc. And navigation or UI for sites would be great as well. I know that’s a large study, so possibly several broken down UI studies.
    thanks.

    0
  107. 109

    The ‘characters per line’ findings don’t surprise me that much. Despite most designers being aware of what is comfortable for a user to read, a lot tend to use type as light space filler rather than considering if it’s actually readable!

    Georgia was a bit of a shock, I’ve used it but (naively) thought I was being a bit edgy at the time. Turns out, we’re all being edgy together.

    0
  108. 110

    I would like to see studies of logo make-overs and also business stationary make-overs (letter stationary, envelopes, business cards, etc.).

    Newsletter make-overs would also be of interest to me.

    0
  109. 111

    Would be amazing to read a study about the portfolio! Yet cool and interesting article! Thumbs up!!

    0
  110. 112

    never know all of this, now know this really will increase my knowledge.

    0
  111. 113

    Nice article … a good depth of trends followed on the internet today.

    Would have also enjoyed if we can capture the user mouse movements over these links or content.

    0
  112. 114

    Can anybody tell me what the hover overlay telling you font-size line-height etc is in the article?

    http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/images/type-survey/aiga.gif

    -2
  113. 115

    very interesting study!

    0
  114. 116

    Great article. I appreciate the research, and that you shared the data.

    Two corrections (as a couple other commenters noticed, but persist, 8 months after initial publication): The titles for the two pie charts in section 1 should match the section header, “Serif vs. sans-serif”, not “Sans vs. sans-serif”. (yeah, we know what you MEAN, but…)

    0
  115. 117

    Interesting! Great study!

    0
  116. 118

    I’d like to see a study of magazine/editorial sites.

    0
  117. 119

    Ni-i-i-i-c-e! Thank you! Conclusion is so useful! :)

    0
  118. 120

    How come I did not notice this post before? What a great effort and great study SM keep those coming!
    Thanks Michael Martin

    0
  119. 121

    Sounds like a lot of math to accommodate a design. And if we were all this obsessive, everyone’s website will soon use text-align; justify. LOL!

    But it was definitely helpful to note about the line-height formula and paragraph spacing. :)

    0
  120. 122

    Very intresting Article.

    But could you please state in a more clearer way wich site you analized?

    «We’ve chosen popular newspapers, magazines and blogs as well as various typography-related websites.»
    That is not very specific.

    Due to this lack of information, the article suffers quite a lot in my opinion.

    0
  121. 123

    michelle cooper

    May 26, 2011 1:21 am

    The images are not loading up for me.. is there something wrong with the page? I am really interested in seeing the images whilst reading this article.

    0
  122. 124

    Woah! So much good infos! Thanks for sharing the result of your research!

    0
  123. 125

    Thank you for sharing the information. It would be interesting to

    *guess what are the changes in typography since the survey was conducted in 2009
    *do a research and find out what the actual changes are.

    Anyone interested. Please let me know if you are willing to collaborate.

    0
  124. 126

    The picture at 6. Optimal Line Height For Body Copy
    shows a Firefox addon, What’s the name of that addon ??
    I had it once but forgot al about it.

    1
  125. 127

    Came across this article to look for tips on readability, and standard css for text.

    Great post!

    However I noticed something about the graphics for #1 ,.. that should say “Serif vs Sans-serif” right?

    ;)

    0
  126. 128

    The 1.5 ratio for line height seems awfully loose and gappy to me. A developer reference at Mozilla said that the default for most desktop browsers is closer to 1.2.

    0

↑ Back to top