Typographic Design Patterns and Best Practices

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 study 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:

    How popular are serif and sans-serif typefaces in body copy and headlines?
    Which fonts are used most frequently?
    What is the average font size?
    What is the average ratio between the font size of headlines and body copy?
    What is the average line height of body copy?
    What is the average ratio between line height and font size in body copy?
    What is the average ratio between line height and line length in body copy?
    What is the average amount of spacing between paragraphs?
    What is the average ratio of paragraph spacing to line height in body copy?
    How are links styled?
    How many characters per line are common in body copy?
    How often are links underlined?
    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.
[Editor's note: A must-have for professional Web designers and developers: The Printed Smashing Books Bundle is full of practical insight for your daily work. Get the bundle right away!]

You can give comment, Reviews or mail me at artistideablogspot@gmail.com Here you can also mail your work for add you work on this blog and our WebSite http://artistidea.co.cc

Please Select Embedded Mode To Show The Comment System.*

Previous Post Next Post