Web Dev Notes

Blog about web development by Robert Dawson

Is there an optimal typography equation?

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)
    • Width
    • Height
  • Font
    • Face (e.g., Arial, Georgia)
    • Size
    • Leading (i.e., line height)
    • Tracking (i.e., character spacing)
    • Style (e.g., serif, san-serif)
    • Color
  • 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%)

Performance Considerations

  • Average of 5.7 font files at 133.5 KB

Other Findings

  • 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!