Typography

Typography is as old as the printing industry.

The printing industry started developing typography into an art and a science to make text have optimal impact as well as optimal readability.  Variable fonts brought in some new rules and opportunities and then, early computer screens brought in new limitations.  Remember green screens and pixelated mono-spaced mono fonts?  

As technology quickly caught up, computer limitations soon became new opportunities with cheap use of color, images and graphics.  Excepting for professionals, typography and all that the publishing industry knows, soon became ignored by everyone creating text on a word processor or a blog who are oblivious to the typographic principles they are violating. 

 

The average Web builder does not think enough about Typography

Typography became an insider’s secret.  The result is that today we see thousands of websites that are:

  • just plain ugly,
  • hard or impossible to read
  • definitely, challenge the reader’s attention span
  • full of distractions from the main message

Sometimes there are different rules for print than there are for the web.  They are all practical.

  • We tend to sit further away from a computer screen than from a printed page.
  • Text on wide computer screens can require double the amount of horizontal eye movement, forward and backward
  • Most computer screens are backlit and a pure white background can become eye straining
  • At one stage the advice was to reserve serif fonts (like this one) for print and use sans-serif fonts (like this) for the web.  This was because the pixel density of computer screens was not yet up to the level of print.
  • We hold our mobile phones closer to the eye than both printed media or big screens.

The rules keep changing as technology grows, but these are the finer points.  There are some age-old rules of thumb that will make your text infinitely more readable and lengthen the attention span of your visitor.

Quickly judge the following samples.

Sample Text 1 Sample Text 2

This is an example of large print that aims to stand out from the rest of the text and grab the reader’s attention. let’s also get rid of the right margin ragged edges and make the text justified. It looks much more symmetrical and fits neatly into our block wireframe mindsets. On a computer, this is easy to do. It takes no more than a click of one button to create uncomfortable text like this.

The above paragraphs can all be difficult to read or break the attention span of your reader and make her reach for the back button! If your reader has no use for your message, then typography will not help, but at least make it easy for her to get the message.

Here are some rules of thumb:

  • Choose a font size that allows for comfortable reading for the device your user is using.  16px to 18px for a laptop or desktop.  Fonts differ in size, so test it.  Here I use the “libre baskerville” font at 18px with 27px line spacing.
  • Limit line length to 50 to 90 characters per line.  Shorter makes our eyes ‘carriage return’ too often. Longer makes our eyes stretch. 

Here is a guide:

  • Line-height should be 1.4 to 1.8 the height of the font. It is easy to set a default in CSS as follows eg. P {line-height: 1.5rem}. This makes it easy to catch the next line even at 90 characters per line without the text looking disjointed.
  • Paragraph spacing should be a full line-height.
  • Break up long paragraphs to maximum 5 lines per paragraph.
  • Use a maximum of three fonts on your site, preferably stick to two, one for headings, one for text. Sans Serif and Serif fonts complement each other well for this purpose.  
  • AVOID ALL CAPS FOR EMPHASIS.  It is like shouting. Consider the following for Font-variations or emphasis:
    • Use bolding sparingly
    • Use italics for emphasis occasionally or in quoted text.
    • In headings use Small Caps as an alternative to ALLCAPS
  • Ease off on the #000000 jet black print color. We seldom see true black in print and it appears too black and somber on most devices.   Here I use #333333 in contrast to #000000.  Even #555555 can be very user-friendly depending on the style of your site.
  • Avoid overuse of exclamation marks!  One per page is enough.
  • Unless you’re a texting teenager, never us !! or !!!
  • Go easy on the ellipses…
  • Never center-align long paragraphs of text unless they are in columns and your columns look awkward with left alignment.
  • Avoid justified text.  It leaves unplanned word spacing and breaks the reading rhythm.
  • Give careful thought to the fonts you use. Avoid the default fonts that packages like Word or Web themes provide.  Fonts like Arial, and Georgia are over-used.  In a word, they look amateurish. Professional fonts can cost $100’s of dollars and are often worth it, but with Google fonts freely available you have a host of options to choose from.
  • Headings and sub-headings are for delineation of sections not for shouting at your user. Consider why you would use massive header styles when something smaller and more elegant will suffice.  Few sites need more than three header sizes and very few justify the oversized headers that come standard with most themes. 2x or 3x the font-size is normally more than enough and looks a lot more balanced.

Butterick’s Practical Typography is an excellent online eBook on typography by a recognized expert in his field.