The Internet of Things is kind of exploding and designing web pages by form factor seems increasingly untenable. As a start, could there be an elegant equation, like e=mc^2 (but prescriptive), for optimal typography?
Suppose there could be. What variables should be included?
- Ground (i.e., display)
- Face (e.g., Arial, Georgia)
- Leading (i.e., line height)
- Tracking (i.e., character spacing)
- Style (e.g., serif, san-serif)
- Characters per line
I don't immediately see an intuitive calculation approach. Should the end result be a set of ratios?
To get us started, we already have a ton of information! For instance, Smashing Magazine conducted a popular 2009 study on typographic design patterns across 50 popular websites and recently revisited their findings. Here is a summary of what they found as of late 2013:
Popular Serif And Sans-Serif Fonts
- Serif and sans-serif are almost equally popular in headlines, while serifs have strongly gained (two-thirds use them) in popularity in body copy.
- Surprisingly, 39% of body copy and 66% of headlines use non-standard "Web-safe" fonts.
- Most popular serif for headings and body copy: Georgia
- Most popular sans-serif for headings and body copy: Arial
- Verdana and Lucida Grande are losing popularity.
Light Or Dark Background?
- Not much change since 2009 as black text on a white background continues to prevail.
Average Font Size For Headlines
- Heading sizes have increased with a current average of 38px.
Average Font Size For Body Copy
- Body copy is larger today with 16px being the most common size, followed closely by 14px.
Ratio Of Headline to Body Font Size
- Updated suggestion: HEADLINE ÷ BODY COPY = 2.5
Optimal Line Height For Body Copy
- line height (pixels) ÷ body copy font size (pixels) = 1.46
- line length (pixels) ÷ line height (pixels) = 24.9
- space between paragraphs (pixels) ÷ line height (pixels) = 1.39
Characters Per Line
- 83.9 characters per line at 1100px display width
Web Typography And Responsive Design
- Surprisingly, 42% of analyzed websites incorporate responsive design.
- 500px wide display width averages:
- Line height: 28px
- Body font size: 15px
- Characters per line: 77
- 700px wide (140%) display width averages:
- Headline font size: 36px
- Body font size: 15.6px (104%)
- Characters per line: 82.7 (107%)
- 950px wide (136%) display width averages:
- Headline font size: 37.9px (105%)
- Body font size: 16.1px (103%)
- Characters per line: 84.8 (103%)
- 1600px wide (168%) display width averages:
- Headline font size: 40.7px (107%)
- Body font size: 16.2px (101%)
- Characters per line: 86.8 (102%)
- Average of 5.7 font files at 133.5 KB
- 45% underline links. The rest do on hover or not at all.
- 71% highlight links with color. The rest do on hover or not at all.
- 99% left-align text.
- No website uses hyphenation.
- 84% use the same fonts for print and screen CSS.
- Home pages average 1.346 MB load time. Article pages average 1.146 MB.
- Average number of HTTP requests is 119!