The most popular sans-serif typefaces for headlines are Arial (28%), Helvetica (20%) and Verdana (8%).The most popular serif typefaces for body copy are Georgia (32%) and Times New Roman (4%).

The most popular serif typefaces for headlines are Georgia (28%) and Baskerville (4%).Among them: New York Times, Typographica, Time, AIGA and Newsweek. Only 34% of websites use a serif typeface for body copy.Among them: CNN, ArsTechnica, Slate, BBC and NewScientist. 60% of websites use sans-serif typefaces for headlines, mostly Arial, Verdana, Lucida Grande and Helvetica.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.Īccording 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. The contrast between a serif font for headlines and a sans-serif font for body copy can be interesting, too. 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. Some designers prefer to give their headlines serifs (which are short, decorative lines at the end of letter strokes) to give them more appeal. 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. Please note that these rules can often, but not always, be considered best practice. Based on the statistics, we have identified several “rules of thumb” for working with type. We ended up with solid data, which we evaluated and prepared for this article. How often is font replacement (sIFR, etc.) used?.How many characters per line are common in body copy?.What is the average ratio of paragraph spacing to line height in body copy?.What is the average amount of spacing between paragraphs?.What is the average ratio between line height and line length in body copy?.What is the average ratio between line height and font size in body copy?.What is the average line height of body copy?.What is the average ratio between the font size of headlines and body copy?.How popular are serif and sans-serif typefaces in body copy and headlines?.Ultimately, we identified 13 general typographic problems and issues related to typographic design and tried to find answers to them through our research: 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). We’ve carefully analyzed their typography and style sheets and searched for similarities and differences. We’ve chosen popular newspapers, magazines and blogs as well as various typography-related websites. 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). Serif or sans-serif? Large or small font? Line height, spacing, font size and padding… The list goes on and on. Even with a relatively limited set of options in CSS, typography can vary tremendously using pure CSS syntax.

Most popular new sans serif typefaces