Web Typesetting Basics

A list of some good, basic, easy to implement practices.

Web Typesetting

Body

  • Set body copy first, and make sure you set it relative to REM (so we can make other measures on our site relative too).
  • Acceptable sizes for body copy range from 12-21px. When in doubt, use 16px.
  • Pick a scale, and let that set the sizes for your headings.
  • Enforce line lengths of 75 characters, max. 45 is a good character count
  • Line heights for body copy will range between 1.2 and 1.55, if using acceptable line lengths.
  • on larger screens and for larger type (19-22px), line heights between 1.6-2 become useful.
  • The longer the line length, the taller the line height
  • Use the regular variation and regular weight of a font for body copy, unless there’s a compelling reason not to.

Color

  • Establish distinct, clear, and consistent anchor styles
  • Unless there’s a compelling reason not to, design for your body copy to be dark gray as the base color. ┬áIf you want to use completely black text, try using an off-white background.
  • Avoid using light text on a dark background for body copy (though this is just fine for buttons, calls to action, and navigation elements where there’s less to compete with)
  • Always check to see that your color choices are WCAG compliant (AA is a 4.5:1 ratio).

Headings

  • Make sure there’s enough variation between your heading styles that a user can tell what is an H1, an h2, etc. at a glance
  • Reserve H1’s for page titles
  • Header sizes can get quite large but most H1s range from 30px to 72px.
  • Line heights for headers generally range from 1 to 1.4 – the bigger the Heading size, the smaller the line-height.
  • As screens get smaller, both the size of the headings and the line heights ought to shrink.

Rhythm

  • use the equation of (element size * line-height) + margin = multiple to establish a baseline grid height
  • When every element that you’d use in an article has a multiple that is divisible by the baseline grid height, you should have vertical rhythm for the majority of your content.

Performance

  • Keep your font kits to 5 total variations or less, or 100kb or less.
  • Use web fonts to ensure a consistent, attractive and meaningful design effect.
  • Even if you use a “system font” instead of web fonts, set type with care and be aware your design may vary from device, browser, and operating system.
  • Consider using a font loading strategy, and when I say to consider, I mean, implement a font loading strategy.
  • Use a fallback font. You don’t need to go overboard here, 2-3 fonts, max.