A Small Design Study Of Big Blogs


We are quite curious; particularly when it comes to design and web-development we want to know just everything. Therefore, following our web form design survey1, we have decided to take a closer look at blog designs, analyze them and find out which design solutions are common and which solutions are not used at all.

Since we wanted to make the survey as objective as possible, we used Technorati Top Blogs2 and analyzed 50 most popular blogs which appear there. It doesn’t really matter if the Technorati list is correct or not — we wanted to find out what design solutions big players (aka most popular blogs) prefer. Popular blogs are often considered to be examples of effective and functional design (which is not necessarily the case).

Blog Design Survey

We have identified 30 design problems and considered solutions for each of the problems separately. We have posed 30 questions which we would like to answer with our blog survey. Below we present findings of our survey of popular blog designs — the results of an analysis of 50 popular blogs according to Technorati’s Top 100.

Considering Technorati’s top 50, we have filtered out social networks and blogs which have artificially become popular — e.g. via backlinks in released WordPress themes. The prize for the most cluttered CSS-code goes to Smashing Magazine — however, we are going to do something about it over the next weeks.

Please notice: the results presented below should not be considered as guidelines for an effective blog design. They are supposed to give you the intuition of which solution may be better than the other one. However, you need to consider the context you are working within as well — following our findings blindly won’t necessarily improve your design. Still it is useful to know what big players do and, more importantly, what they don’t do.

1. Layout

Let us start with the analysis of the layouts used on the most popular blogs in the blogosphere. Are there more 2-column-layouts than 3-column-layouts? Are layouts centered? Are they fixed, fluid or elastic? Are tables still used? In this section we are going to answer all these questions.

1.1. How many columns?

The question whether one should use 2 columns or 3 columns in a design layout is almost philosophical. Unfortunately, we weren’t able to find any results from usability studies which would prefer one solution over the other one. As usual, it depends on the context and on the target group you are dealing with. In some cases it is just impossible to find a proper balance between primary and secondary content with 2 columns. In these situations you may need to divide the second column (sidebar) into two parts — in fact this solutions is used quite often.

In both cases it is necessary to make the structure as transparent and clear as possible. A layout with 4 and more columns is often not a good idea.

According to our findings,

  • 58% use three and more columns in layouts
    (TalkingPointsMemo, CopyBlogger, Mashable, Lifehacker),
  • 42% use 2-column-layouts
    (Zen Habits, GigaOM, Google Blog, Seth Godin, Boing Boing).

TPM64 uses a multi-column layout. 58% of top blogs use the same design approach.

Apparently, 50 blogs are enough to find unusual layout solutions. Drudgereport5 uses something which we prefer to call “anti-layout”. And TPM64 uses sometimes 2, sometimes 3 and sometimes 4 columns. In the latter case we just don’t get why the titles of the articles are not clickable.

1.2. Centered or left-aligned layout?

Actually, one could observe the rising trend toward centered design layouts few years ago — often it was the attempt to find an optimal solution for readers with large and small screen resolutions. Since more and more users tend to switch to higher resolutions, one tries to balance the amount of space surrounding the layout by providing the same amount of white space on the left and on the right of the layout and thus focusing reader’s attention on the content by placing it in the middle of the browser window.

ReadWriteWeb8 with a centered layout. According to our survey, 94% of top blogs have a centered layout.

And apparently this trend has managed to become the standard approach over the last years. In fact, according to our survey, 94% of top blogs have a centered layout. Among them are CopyBlogger, Problogger, ReadWriteWeb, Mashable, Ars Technica, Techcrunch and Huffingtonpost.

1.3. Fixed, elastic or fluid?

To be honest, we haven’t expected such a strong trend toward fixed layouts (px-based layouts). It is truly remarkable that among 50 top blogs not a single one used an elastic layout (width of layout grows with the growing font size) and only a small fraction uses fluid elements (layout changes depending on the size of the browser window). Here are the exact findings:

  • 92% of top blogs used a fixed layout,
  • 8% used a fluid layout or a hybrid layout with fluid layout elements
    (Engadget, Smashing Magazine, Gigazine, Coorks and Liars).

Fluid layouts can better adapt9 to user’s preferences while fixed layouts make it easier for the designer to make sure that a certain design decision holds independent of the font size and the browser window size.

The main disadvantage of fluid layouts is their growth in width when used with a wide screen resolution: the line length becomes to big (here in the example Engadget11 with 150 characters per line). One can counter it using the max-width-attribute.

1.4. Width of the fixed layout?

As we have observed a strong trend toward fixed, pixel-based design layouts, we have decided to take a closer look at these layout and try to detect common attributes of such layouts. In particular, we have considered the width of the fixed layout which usually corresponds to the width of #container or #wrapper. Apparently,

  • 9% used ≤ 800px
    (PostSecret, Seth Godin, Google Blog, BeppeGrillo.it),
  • 15% used 801 – 900px
    (Neatorama, Kottke, DailyKos, Perezhilton, TUAW, Yanko Design, Scobleizer),
  • 20% used 901 – 950px
    (Huffington Post, BoingBoing, TreeHugger, Dooce, Blogoscoped, SearchEngineLand),
  • 56% used 951 – 1000px
    (ars technica, Lifehacker, TechCrunch, ProBlogger, A List Apart, TMZ, Wired, GigaOM, Joystiq, Zenhabis, Copyblogger, Consumerist, Slashfilm).

Conclusion: one can identify a clear trend toward wide fixed layouts of the width 951 – 1000px.

1.5. Proportion between the content area and layout? (if fixed layout)

As you’ve seen above, each layout requires at least one sidebar which contains secondary content and provides navigation options to the users. However, what is the best way to provide users with a comfortable reading while clearly presenting all available navigation options? Or, put differently,
what proportion should one choose between the main content area and overall site layout? The less space the main content area takes, the more dominant the sidebar becomes and vice versa. Where does the balance lie?

The layout width on BoingBoing13 is 870px wide, the main content area is 550px wide. This results in a ratio 0.63.

According to our survey,

  • 96% use at least a half of the whole layout to display the main content
    (exceptions: CopyBlogger (0.48), SlashFilm (0.48),
  • 54% used 50 – 60% of the layout for the main content
    (Mashable, Lifehacker, Kottke, Blogoscoped, A List Apart, BoingBoing, DailyKos, TreeHugger, Scobleizer, Problogger, TUAW, bits.blogs.nytimes.com)
  • 46% used 60 – 70% for the main content
    (ars technica, TechCrunch, GigaOM, Dooce, Zenhabits, CNN Political Ticker, CrunchGear)
  • on average, 58% of the overall site layout is used to display the main content.

1.6. CSS-layout or table-based layout?

It is almost obvious that popular blogs, which are updated many times a day, should prefer CSS-solutions as these allow for better and easier maintenance and reduce load times. Consequently it is no wonder that

  • 90% of the top 50 blogs used CSS-based layouts,
  • 10% used tables or a combination of tables with CSS
    (PerezHilton, Neatorama, CNN Political Ticker, Beppe Grillo, TreeHugger).

Furthermore, TreeHugger used the legendary onMouseOut-Javascript-event to imitate hover-effects — a design solution we have successfully managed to forget over the last years.

2. Typography

Content is king. This holds for “usual” web-sites as well as for blogs. Furthermore, it is designer’s job to make sure that the readers feel comfortable with reading or at least scanning the posts. And here is where typography comes into play. How can you achive best readability of your content? What font to use? Which font size to select? Our survey may provide you with some useful starting points for your design decisions.

2.1. Dark on light or light on dark?

As one would expect, 98% of the top blogs used dark text on a white background. Only PostSecret1614 had a dark background color with light text displayed on it. However, this design decision is likely to be strongly related to the topic of the site.

Among top 50 blogs PostSecret1614 is the only blog which uses dark background color with a light text on it.

2.2. How many characters per line?

To ensure best readability one needs to ensure comfortable reading. While some research results claim that an optimal line length is 52 – 68 characters per line (including punctuation marks and empty spaces), other studies show that even if the lines are getting longer it does not significantly affect usability. Since no rules of thumbs are provided, designers experiment with a variety of different line lengths.

To compute the max. number of characters per line we have used default setting of the browser as well as default typographic settings provided by the style sheets.

  • 10% used 65-74 characters per line
    (PostSecret, Beppegrillo, Perez Hilton, Scobleizer, Blogoscoped),
  • 18% used 75-84 characters per line
    (Dooce, Blogs.nytimes.com, Joystiq, CopyBlogger, TUAW, Slashfilm),
  • 34% used 85-94 characters per line
    (Lifehacker, Huffington Post, Kottke, ars Technica, Huffington Post, BoingBoing, Seth Godin, Treehugger, Problogger),
  • 18% used 95-104 characters per line
    (Mashable, ReadWriteWeb, Smashing Magazine, Google Blog, A List Apart, Search Engine Land),
  • 16% used over 105 characters per line
    (Engadget, TechCrunch, GigaOM, Wired, TMZ).

Based upon our findings we feel confident to suggest that the most usual (not necessarily most user-friendly) line length lies between 80 and 100 characters.

It is interesting to remark that not a single blog used justified text-alignment — 100% of the blogs used left text-alignment.

2.3. Primary typeface for body text?

Sans-serif fonts have become the de facto standard for body text on-screen, especially online. It has been suggested that this is because the small size of the font causes serif fonts to appear excessively cluttered on the screen. How is this suggestion reflected in the body text of popular blogs?

According to our survey,

  • 34% ot top blogs use Verdana (sans-serif) for body text
    (A List Apart, Kottke, TUAW, CopyBlogger, Dooce, ars technica, TechCrunch, Smashing Magazine),
  • 24% used Lucida Grande (sans-serif, included with Mac OS X)
    (Zenhabits, Mashable, Lifehacker, CrunchGear, Thinkprogress),
  • 18% used Arial (sans-serif)
    (ReadWriteWeb, Engadget, Google Blog, CNN Political Ticker),
  • 14% used Georgia (serif)
    (Scobleizer, GigaOM, Wired, BoingBoing, Huffington Post),
  • 6% used Trebuchet MS (sans-serif)
    (Andrew Sullivan, Seth Godin, Postsecret),
  • Helvetica Neue (ProBlogger) and Times New Roman (TPM) were used only once.

ars technica18 uses 85-94 characters per line and 12px Verdana for body text.

2.4. How large is the font size of body copy? (if em then convert and round)

The larger the font size is, the easier it is for readers to actually read the text presented on a given web-page. However, with a growing font size it becomes harder to read large blocks of text as one needs to scroll more frequently — and the eye needs to jump from one place to the other more often. So where does the optimum lie?

Here are the most common font sizes according to our research:

  • 34% of the sites use 12px
    (SearchEngineLand, TUAW, Mashable, ars technica, Engadget, Smashing, DoshDosh, TreeHugger),
  • 30% use 13px
    (Consumerist, CopyBlogger, Zenhabits, Valleywag, Lifehacker, Huffington Post, BoingBoing, Seth Godin, Google Blog),
  • 14% use 14px
    (TPM, GigaOM, Wired, ReadWriteWeb, Gigazine, ProBlogger),
  • 12% use 11px
    (A List Apart, Kottke, Neatorama, Dooce, TechCrunch, Dailykos),
  • 4% use 15px
  • the rest used 10px, 16px and 17px (each was used by exactly one site).

Zen Habits20 uses 13px Lucida Grande for its body text. Most blogs use 12px Verdana.

2.5. Primary typeface for headlines?

While sans-serifs are usually used for body text, it was often considered that designers tend to emphasize the headlines by using serif typefaces to present them. Does it hold true?

  • 30% of the top blogs use Arial (sans-serif)
    (CNN Political Ticker, Scobleizer, TPM, Crooksandlliars, Joystiq, Dooce, PerezHilton, ReadWriteWeb, Engadget, Google Blog, TreeHugger),
  • 22% use Georgia (serif)
    (A List Apart, Andrew Sullivan, Blogs.nytimes.com, GigaOM, Wired, Huffington Post, BoingBoing),
  • 8% use Lucida Grande (sans-serif)
    (Tuaw, ThinkProgress, Lifehacker, Crunchgear),
  • 8% use Helvetica (sans-serif)
    (Zenhabits, Mashable, ars technica, Smashing Magazine),
  • 6% use Verdana (sans-serif)
    (Blogoscoped, Neatorama, DailyKos),
  • 6% use Trebuchet MS (sans-serif)
    (Slashfilm, Postsecret, Seth Godin),
  • 4% use Helvetica Neue (sans-serif)
    (CopyBlogger, ProBlogger),

Besides, Calibri (SearchEngineLand), American Typewriter (Valleywag), Lucida Sans Unicode, Franklin Gothic Medium, Tahoma (TechCrunch) and no headline at all (Kottke) are used exactly once.

Darren Rowse uses Helvetica Neue for Problogger’s headlines. Most designers prefer Arial and Georgia (52%).

2.6. How large is the font size of headlines?

Finally, let’s take a look at font size of headlines. The larger the headline is, the more weight it is given to. However, if too many headlines compete for user’s attention the cognitive load increases and it is becoming harder to the users to actually consider the navigation options. In this context less sometimes can be more. The rule of thumb: if you have many posts presented on the start page, don’t forget to decrease the font-size of the header and highlight it visually, for instance with an eye-catching color.

  • 24% use 20-22px
    (BoingBoing, PerezHilton, Blogoscoped, Google Blog, TechCrunch, ReadWriteWeb),
  • 22% use 23-25px
    (CopyBlogger, ProBlogger, Lifehacker, Mashable),
  • 22% use 17-19px
    (Tuaw, Scobleizer, TreeHugger, A List Apart, Gizmodo),
  • 16% use 14-16px
    (YankoDesign, Dailykos, ars technica, Seth Godin),
  • 6% use 26-29px
    (Engadget, GigaOM, Wired, Dooce),
  • 0% use 10-13px to highlight the headline.

Furthermore, 0% use 30-31px; Huffington Post uses 32px, Zenhabits 34px and Kottke has no headlines at all. Smashing Magazine is the definitive winner in the category “Biggest Headline Size”: our font size is 44px.

We conclude that it seems to work best to use headlines with the font size between 17 and 25px.

Bottom line

Let’s conclude the first part of the survey results with a brief overview of the main findings. Please keep in mind that the results of the survey should not be considered as guidelines for an effective blog design — this is a topic for another article.

  • large blogs require a multi-column layout solution (usually 3 columns suffice) (58%);
  • layouts are usually centered (94%),
  • layouts usually have a fixed width (px-based) (92%),
  • the width of the fixed layout varies between 951 and 1000px (56%),
  • 58% of the overall site layout is used to display the main content,
  • CSS-layouts are used (90%),
  • the background is light, the body text is dark (98%),
  • the most usual (not necessarily most user-friendly) line length lies between 80 and 100 characters,
  • Verdana, Lucida Grande, Arial and Georgia are used for body text (90%),
  • the font size of body text varies between 12 and 14px (78%),
  • Arial and Georgia are used for headlines (52%),
  • headlines have the font size between 17 and 25px.

Please stay tuned and subscribe to our RSS-feed22 Subscribe to our RSS-feed23, we’ll present the second part of our findings next week.


  1. 1 http://www.smashingmagazine.com/2008/07/04/web-form-design-patterns-sign-up-forms/
  2. 2 http://www.technorati.com/pop/blogs
  3. 3 http://www.talkingpointsmemo.com/
  4. 4 http://www.talkingpointsmemo.com/
  5. 5 http://www.drudgereport.com/
  6. 6 http://www.talkingpointsmemo.com/
  7. 7 http://www.readwriteweb.com/
  8. 8 http://www.readwriteweb.com/
  9. 9 http://www.smashingmagazine.com/2008/06/26/flexible-layouts-challenge-for-the-future/
  10. 10 http://www.engadget.com/
  11. 11 http://www.engadget.com/2008/07/24/switched-on-net-enabled-movies-pit-a-blue-ray-versus-a-true-way/
  12. 12 http://www.boingboing.net/
  13. 13 http://www.boingboing.net
  14. 14 http://postsecret.blogspot.com/
  15. 15 http://postsecret.blogspot.com/
  16. 16 http://postsecret.blogspot.com/
  17. 17 http://www.arstechnica.com
  18. 18 http://www.arstechnica.com/
  19. 19 http://www.zenhabits.net
  20. 20 http://zenhabits.net/
  21. 21 http://www.problogger.net
  22. 22 http://www.smashingmagazine.com/wp-rss.php
  23. 23 http://www.smashingmagazine.com/wp-rss.php

↑ Back to top Tweet itShare on Facebook

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops, online workshops and loves solving complex performance problems in large companies. Get in touch.

  1. 1

    Great! Very useful resource!

  2. 52

    michel basilieres

    July 25, 2008 9:43 am

    well, this is certainly a big step forward in conformity.

  3. 103

    Great Grreat, i really like this post, very useful, facts are in fact, very important! :-)

  4. 154

    This is pure win! >:3

  5. 205

    You guys did it again! I love these articles. Packed full of useful facts.

  6. 256

    you know what’d be real cool? if you followed these up with a CSS/XHTML template that followed the strongest trends.

  7. 307

    Interesting, and a great bit of research, but there’s not necessarily a correlation between the design of a blog and its popularity. The content is obviously king, and the design may reflect factors such as trends in design, the designer’s own quirkiness and conventions that have arisen over all blogs (WordPress’s structure encourages a header/content/sidebar/footer structure, for example).

    Depressing to see that small fonts still rule, though. Thought Georgia would be more popular too.

  8. 358
  9. 409

    I love you.

  10. 460

    Very good and informative topic. I love your blog and find your posts interesting and helpful.

    In this post, I found several very interesting blogs that you linked to.

  11. 511

    welllll done!! really helpful! thanx

  12. 562

    …that’s a great article, indeed… Bravo! :)

  13. 613

    Who cares about blog design? I read them through RSS. One visit to subscribe and once in a blue Moon to comment. Take off the logo of blogs I read and change the text written will I not know what blog it is.

  14. 664

    My upcoming blog is going to be real cool, thanks to you, Smashing :-)

  15. 715

    Very good… Thanks SM!

  16. 766

    There are tons of articles giving advice on blog design, but this is the first one I’ve seen that uses empirical evidence to demonstrate what “works” in the current blogosphere. Thanks for putting it together!

  17. 817

    Whith Firefox 3 (on Mac, I suppose Linux and Windows to) every site is perfectly fluid. Every element stays in proportion. A very good experience. I can lean back, zoom in and on my 24 inch and read your magazine even more comfortable.
    The browser is the last key in the chain.

  18. 868

    wow, very informing

  19. 919

    Very very useful. I’m happy to discover that my blog adheres to the majority of common design trends… but is this a good thing????

  20. 970

    Great and very useful survey. Thanks !

  21. 1021

    Excelent and useful resource!

  22. 1072

    yeaahhh… cool stuff, really helpfull. Honestly.. Smashing is ROCK!!!

  23. 1123

    Great study…. thank you for sharing that with us.

  24. 1174

    Awsome! I am gonna bookmark this

  25. 1225

    Nice and useful! Thanks!

  26. 1276

    Coorks or Crooks?

  27. 1327

    Thanks smash. Ill be a loyal smasher especially after reading this study.

  28. 1378

    This is a incredible read. Great job !!!

  29. 1429

    great.. wonderful survey.. can i repost this…?? in my blog, in Indonesian language?

  30. 1480
  31. 1531

    I don’t even know,fellow!) continued to write in the same vein, it is interesting people!

  32. 1582

    Really worth to view this article.Thanks for sharing


  33. 1633

    Great study! Thank you!

  34. 1684

    Чего-то я не могу понять, что за тема у вашего блога? o_O

  35. 1735

    Интересная статейка, но сильно многобукф)

  36. 1786

    Сильно мало постов размещено в блоге, по чаще обновляйте;)

  37. 1837

    Very usefull post for Designer

  38. 1888

    Massive post!

  39. 1939

    Прикольно у вас получается, так быстро интересные посты и основательные статьи клепать, респект и уважуха!

  40. 1990

    WOW..That was fantastic case study…Thank you soo much..

    Bharath Reddy

  41. 2041

    Very nice & helpful article

  42. 2092

    I like to share a jobs opening with you guys. had seen on PakJobs.pk . apparently looks a very nice and pure Pakistani jobs portal.
    link http://www.pakjobs.pk

  43. 2143

    Super valuable resource! I plan to take all of these tips into consideration if/when I updated my blog :)


↑ Back to top