studio1c

10 Rules for Using Type on the Web

Typography Etiquette for the Web
Seasoned designers know that proper typography can lend so much aesthetically to a design and increase readability if used properly. With the advent of the internet, it seems as though everyone is on the net publishing their own site, posting on social sites. Type etiquette making it difficult for visitors to read or navigate. Most of these rules apply to building or maintaining your own website, however these can and should be followed whenever posting on the web.

  1. UPPERCASE TEXT USAGE – it’s okay to use it SPARINGLY to make a point. Too much will appear as though you are yelling at your visitor. Experienced designers know that readers of English use the visual shape of the upper/lower case letter forms to read faster.
  2. Font Selection – Times New roman - yes, it’s a “safe” web font found on all PC and Macs, but there are other choices. It SHOULDN’T be used, except maybe on headings, and very few sites are successful at incorporating this. Reasons NOT to use it:
    1. Outdated, overused and screams amateur web designer
    2. The nature of serif fonts are more difficult to read on a monitor. Using Times for print media is okay, but again – It’s outdated...
    3. Add Comic Sans to this list of don’t use fonts unless you are using it on a website for preschoolers.
  3. Underlining Text – inexperienced designers will underline text, not realizing that visitors will interpret that as a link - that simply doesn’t work.
  4. Bold AND Italicized textdesigners use one OR the other. Not both on the same text.
  5. Type hierarchy (heading largest, subheading, bold items, body copy, captions smallest, etc) a hierarchy is essential in defining the visual structure of the site
  6. Ellipses’ are 3 periods… that’s it, no more... not 4, not 5... just 3...
  7. Centered text - unless it's a website displaying a wedding invitation or a using it as a heading of the article, don't center an entire body of text. This makes the text really difficult to read.
  8. One space after periods. Not two. With the advent of computers and proportional spacing, two spaces are no longer necessary. If you're using a typewrite, then use two spaces after a period since all the letter-forms take up the same horizontal space to assist with reader legibility.
  9. Mixing it up – multiple usage of various fonts, various colors, etc. Designers know that generally 2 type families make a design stronger, but having more as well as a pleasing color scheme, will cause visual chaos. Keeping things simple and consistent is key to a strong design.
  10. Dashes – use proper dashes depending on the situation.
    1. A standard hyphen is used to hyphenate compound words and between non-continuing numbers, e.g., phone numbers.
    2. The en dash (ALT and 0150) is used to "connect continuing, or inclusive, numbers dates, time, or reference numbers." [Chicago Manual of Style, sec. 5.115] Think of the en dash as connecting items.
    3. The em dash (ALT and 0151) - think of it as separating items, such as a break in thought or causing an abrupt change in sentence structure.
 
You are here: Home Website Design Blog 10 Rules for Using Type on the Web