Finding a common style of typographic design patterns in web design and its common issues has been a research topic since the coming age of digital media. One conducted extensive research on websites that are popular across the internet, starting from popular newspapers, blogs, magazines, and other types of related typography websites.
Among all those websites, it has been found that there are many differences and similarities. It is starting from line height and line length ratio and the typeface or fonts used by the websites.
Therefore, there are 13 identified common typographic issues and problems related to typographic design as follows:
- How frequently are headlines and body copy written in sans-serif and serif typefaces?
- What typeface or fonts are most used?
- What is the average font size used?
- What is the common ratio between body copy font size and headlines
- What is the common line height of the body copy used
- What is the common ratio in body copy between font size and line height?
- What is the common ratio in body copy between line length and line height?
- Between paragraphs, what is the common amount of spacing
- What is the common ratio of paragraph spacing to line height in the body copy?
- How are the links commonly styled?
- How many characters per line are commonly used in a body copy
- How frequently are links underlined
- How frequently is font replacement (sIFR, etc.) used?
1. Sans-Serif vs. Serif
Some of the most debatable topics within typesetting are whether designers should use sans-serif or serif for their body copy. Some designers prefer using serifs for headlines because the typeface is easy to read at a larger size. It also gives the headline more appeal, with decorative lines at the end of each letter stroke.
Some designers also prefer a serif typeface for the body copy because the end strokes can guide the readers from one letter to the next. Therefore, making reading and scanning even more comfortable. Even so, according to a study conducted in recent years. Sans-serif is more popular for headlines than the serif typeface.
- About 60% of popular websites like Verdana, Helvetica, Arial, and Lucida Grande use sans-serif typefaces for their headlines. Examples: NewScientist, Slate, ArsTechnica, CNN, and BBC.
- As for the serif typeface, only 34% of popular websites use it for their body copy. Examples: Newsweek, Typographica, AIGA, Time, and New York Times.
- Serif typefaces that are popularly used for body copy are Georgia (32%) and Times New Roman (4%).
- Serif typefaces that are popularly used for headlines are Georgia (28%) and Baskerville (4%).
- Sans-serif typefaces that are popularly used for body copy are Arial (28%), Verdana (20%), and Lucida Grande (10%).
- Sans-serif typefaces that are popularly used for headlines are Arial (28%), Helvetica (20%), and Verdana (8%).
About two-thirds of the websites surveyed used sans-serif typefaces for their body copy. The speculated reason is that most designers continue to use core web fonts that only provide two options: Times New Roman and Georgia. Also, due to the stigma of Times New Roman making websites look old and outdated, the only option available is to use Georgia.
2. What Typeface Is Most Commonly Used?
It turns out that even with the wide availability of new fonts preinstalled in a system (Mac and Windows fonts) and the many techniques for finding font replacements on the internet. Many websites stick to web core fonts, except Baskerville, Helvetica, and Lucida Grande.
As the research was conducted, it turns out that 80% of the websites use Verdana, Georgia, and Arial to choose fonts for the body copy. The remaining 20% uses Helvetica, which is also as popular as Lucida Grande. With Arial and Verdana available as fall-back options, a designer does not have a valid reason not to use other non-standard typefaces or fonts to obtain the best-looking effect.
Verdana is minimally used for headlines. Only a few websites use it as a body copy, and only a slight use it as headline fonts. The main reason is the line spacing between the letters, which results in an untidy look when used at a large size. If you insist on using it for headlines, take advantage of the CSS letter-spacing property. Arial and Georgia are the fonts that are most commonly used as headlines.
Lastly, it is noted that “alternative” typefaces or fonts are used more frequently for headlines rather than the body copy. It indicates that many designers are willing to experiment with the headings more than the main body. Therefore, the headings or headlines can be the first place to start if you want to try typographic variation styles in your upcoming design.
3. Dark Or Light Background?
The researcher was also curious if there are designers that are willing to experiment with dark-colored backgrounds. Out of all the popular website samples, no typography-oriented websites used a dark color scheme.
The pure white background body copy won without a contest. However, it was seen that more designers tend to avoid high-contrast combinations, such as pure black text on a pure white background. The color is often lighter than the pure color. It indicates that designers avoid experimenting with background colors and focus more on legibility. The main reason is probably that the black-on-white is easier to read.
However, as generations come and go. There may be a demand for a “dark schemed” website layout. It is due to the upbringing of “dark mode” on many websites, as many demands it. It shows that each generation’s tastes are different and will continue to change as new generations are born.
4. Average Headline Font Sizes
Yes, the choice of headline font sizes highly depends on the font used for the design. In the same research or study used as the scope of this article, the font sizes ranged from 18 to 29 pixels. The most popular choices were 24 to 26 and 18 to 20 pixels. The study did not announce any clear winners, and the average heading font size is 25.6 pixels.
Then again, as mentioned before, it is highly dependent on the type of font used to fit into the overall desired website design properly. However, you can still try experimenting with larger sizes because as technologies evolve, there will also be larger displays and resolutions. One sample website used 48 pixels for the headline, and it can be seen here. Though it can be classified as a special case, the titles were short, with only a few words.
5. Average Body Copy Font Sizes
When the internet became available and web designs were starting to flourish, it was the time when they were still using tiny and barely readable body copy using Tahoma that was set on 8 pixels. Nowadays, tiny fonts are out of the equation. Modern designers are leaning more towards large font or typeface sizes. From the same scope of the study, there was a clear common use of font sizes between 12 to 14 pixels.
Almost 38% of the websites used 13 pixels, making it the most popular typographic design pattern choice for body copy, while 14 pixels won slightly over 12 pixels. The average size of the font for the body copy also lands at 13 pixels.
It was also noted that more attention is shifting to the smallest typographic details, like quotes and dashes. The footnotes, introductory text, author names, and paragraphs are also carefully set with optimal legibility when planning the design. The typesetting is also very consistent, using a lot of white space, padding, and leading.
6. Font Size Ratio of Heading to Body Copy
To better understand the relationship between heading to body copy font size ratio, the study divided each sample website’s heading font size by its body copy font size. Then, the average ratios are taken and result in a rule of thumb that can be followed:
The font size of heading ÷ font size of body copy = 1.96
The overall value of 1.96 means that when you have decided on your body copy’s font size, you can multiply it by 2, which is the font size for your heading. This rule of thumb is still situational. Depending on your design, it may or may not give you your preferred optimal size.
Another option is to use the Fibonacci sequence (e.g., 16, 24, 40, 64, 104) or the traditional scale (11, 12, 14, 16, 18, and so on). Try experimenting with those methods to get your desired natural-looking typographic results.
7. Optimal Leading for Body Copy
Line Height (leading) always depends on your preferred font or typeface size and line length (measure). Generally, the longer the line length, the longer the line height should be. Because of that, presenting an example of popular line height choices in pixels will not make any sense.
It is more appropriate to use a relative unit, such as a percentage value or an em, that can determine the relation between font size and line height and also between line height and line length.
Here are the main points, according to the study mentioned above:
- Line height or leading (pixels) ÷ font size of body copy (pixels) = 1.48. It was noted that a value of 1.5 is frequently recommended in classic typographic books. Therefore, it backs up the rule mentioned. There were very few websites that used any value less than that. As for websites that went above 1.48, it decreases as it gets further from this value.
- Line length or measure ÷ line height or leading (pixels) = 27.8. Excluding paddings and margins, the average line length or measure is 538.64 pixels, which is pretty large considering many websites still use 12 and/or 13 pixels as their font size for the body copy.
- Space between paragraphs (pixels) ÷ line height or leading (pixels) = 0.754. The result was shocking because it turns out that the space between the last line of a paragraph and the first line of the next one (paragraph spacing) rarely equals the line height (leading). The paragraph spacing is often 75% of the paragraph line height. It is likely because the line height usually includes the space taken by descenders, and due to most characters not having descenders, there are additional white spaces under the line.
Therefore, once the font size of the body copy is decided, multiply the value by 1.5, giving you the optimal leading. After you acquire the optimal leading, multiply that value by 27.8 to get the optimal measure. Note that the design layout will need padding, gutters, and margins to make the body copy breathe.
8. The Number of Characters in One Line
Based on web typography’s classic rule, around 55 to 75 is the optimal amount of characters per line. However, the popular websites chosen as the study’s sample shows that most used a higher number. Using the default font size, an average of 88.74 characters could fit in one line (maximum), which is extremely high.
However, this maximum number is not the same as the average number of characters in one line, between 75 and 85 characters. Of course, the range is above typographic design patterns and common practices. The popular choice among designers is between 73 and 90 characters in one line.
Even so, outliers were found: Monocle (47 characters in one line), also Boxes and Arrows ( 125 characters in one line). It is recommended to take an average character count from more than one line to obtain an exact reading on each website.
Further Findings
- 46% of websites use underlining to mark the links in the body copy, while the others use a different highlighted color or add font-weight by using bold.
- 6% of websites use an image to replace the body copy or headings (e.g., New Yorker, Newsweek).
- 96% of websites do not justify their text.
- Websites gave left padding with an average amount of 11.7 pixels on their text (counting from the left border of the content area).
Conclusion
All those mentioned above are typographic design patterns and common practices that can be used as web design type settings guidelines. Remember that this article is not classified as scientific. Therefore, here is a summary of the common practices of typography design:
- Both sans-serif and serif typefaces are applicable for headings and body copy. Still, sans-serif typefaces are even more popular for headings and body copy in one web design.
- Lucida Grande, Arial, Georgia, and Verdana are common typeface choices for body copy.
- Common typeface choices for headings are Helvetica, Arial, and Georgia.
- The recommended size for headlines is in between the range of 18 to 29 pixels.
- The most popular range of font sizes for body copy is between 12 to 14 pixels.
- The most popular range of font sizes for headings is between 18 to 29 pixels.
- The font size of the heading ÷ font size of the body copy = 1.96.
- Line height or leading (pixels) ÷ font size of body copy (pixels) = 1.48.
- Line length or measure ÷ line height or leading (pixels) = 27.8.
- Space between paragraphs (pixels) ÷ line height or leading (pixels) = 0.754.
- The recommended optimal number of characters in one line is between 55 to 75. However, 75 to 85 characters per line are even more popular.
- The body text is most often left aligned and not justified.
- Using images to replace headings and body text is very uncommon.
- Links marked with underlining are more popular than bold or using different colors from the body text.
- Pure white background on pure black text is still way more popular than vice-versa. However, this may need to be reconsidered in the future as many websites offer “dark mode”.
Once again, all of the above findings are not “sacred rules” that you must follow. Rather, they are rough guidelines that can be used as a base for your typographic setting. You are free to edit and personalize to your preferred website design. Every website has its unique selling point, and there are many options available for you to experiment with.
You may have found a formula that suits your website layout. Typography design will keep evolving in the upcoming times to adapt to new tastes, as each living generation is shown to have different ones. It is not a crime to look for references to keep up with the latest trend as long as you are not copy-pasting. Take them as inspirations and adapt them to your website design.