CYRIN Metrics Part 1

Typography has a rich history of wide, specific and sometimes confusing terminology. Today I’m going to focus on terms related to readability that are important to understanding why CYRIN recommends what it does, so we can get by with a much smaller set.

Font Size

A good default font size will be readable without need for adjustment.

Font size is probably the most familiar metric I’ve included here: it’s the measure of the height of your text. This won’t be an exact match for all glyphs, but they’ll all be proportionate to this basic measurement for the same font. Most of the following metrics are based upon multiples and factors of the font size, so it’s important to get this right (or use a measurement like em’s when expressing the others, which are inherently relative to this baseline).

CYRIN recommends 12 points for body text, where a point is 1/72 of an inch. This is in some ways a holdover from print design where everything eventually has a predictable physical dimension and would be read from a similar distance when printed in a book. For web design things get more tricky as the equivalent number of pixels will differ from screen to screen and may be held different distances from form factor to form factor (computer screen to mobile device). All this to say that when you’re in doubt that your users can read your font size, go larger.

Line Length

When line length of text gets too long, it makes text harder to read.

Also called “measure,” optimal line length is laregely a matter of taste, within certain bounds. It’s also one of the most overlooked aspect of typesetting by casual web designers, who may leave lines stretching across an entire screen. Long lines make it more difficult to keep your place in a passage of text, but short lines require too much motion as you make progress.

CYRIN only starts to give negative ratings when the text greatly under- or over-shoots the commonly given range of 45-75 characters per single column line. Multi-column designs like those found in print newspapers and magazines can be thinner and readable, but are uncommon on the Web.

Line Leading

The space between each line of text should be large enough to make visual separation of lines easy without creating an awkward amount of space.

Leading refers to bars of lead that used to be placed vertically between the lines of text when preparing to print. Saying this the correct way (like the element Pb) will keep you from being immediately ejected from the next typography conference you sneak into. I’d imagine.

The advice I give in CYRIN is that leading should be about 1.5 times the height of the text, but if the chosen line length is wide (more than 80 characters per line) or the font is “dark” (bold or having thick lines) then larger leading is probably needed. The key is being able to effortlessly transition from line to line while reading.

More to Come

The four remaining metrics in CYRIN are:

  • Text Color Contrast
  • Margin & Padding
  • Justification
  • Percentage of Text Stylized

More like this to follow. Until next time.