Typography Matters: 6 Timeless Tips

Typography matters—as in it is something to pay attention to, and then there are typography matters—the things that make up typography like typeface and font.

Typography Matters—It IS Important!

Typography matters whether you are just building your own website or building websites for clients. Using typography correctly can be a big deal. Knowing and applying some basic rules, or guidelines, when choosing your website font can make your visitor’s experience better by adding a layer of sophistication and pizazz to your site.

It used to be a lot harder to find a font to use to make your site look different and unique because there were only nine basic fonts that were “web-safe” and millions of websites online.

In today’s web design world, things are very different and typography matters, it really does. Google offers over 600 free font-families and Adobe offers an additional 500+. In addition to Google and Adobe’s free fonts, there are many paid font type services like Typekit, Cloudtype, MyFonts, and Fontdeck, to name a few.

Typography Matters—Typeface and Font

In traditional typography matters, a font is a particular size, weight and style of a typeface. Typeface, which is also known as the font family, is a set of one or more fonts that share common design features.

The distinction between font and typeface is that a font designates a specific member of a type family such as roman, boldface, or italic type, while typeface designates a consistent visual appearance or style which can be a “family” or a related set of fonts.

Typefaces can be divided into two main categories: serif and sans serif.

A serif is a small line attached to the end of a stroke in a letter or symbol, such as when handwriting is separated into distinct units for a typewriter or typesetter and typeface with serifs is now categorized as serif.

A sans-serif typeface is one that does not have the small projecting features called “serifs” at the end of strokes. It may also be referred to as sans serif, gothic, san serif or simply sans.

Serifs

A great visual to show the difference between the sans-serif and serif lettering. Sans-serif lettering (black only). Letting becomes serif when serifs (red) are included.

 

Serif font Classifications – Old World, Transitional, Modern and Slab

The Adobe Garamond typeface, an example of an old-style serif.Old World (Serif)

An example of an old world serif typeface: Adobe Garamond (pictured).

Old style faces are subdivided into Venetian (or humanist) and Garalde (or Aldine). Examples of Venetian old style typefaces include Adobe Jenson, Arno, Berkeley Old Style, Centaur, Cloister, Fairfield, Legacy, and Trinité. Examples of Garalde old style typefaces include Bembo, Caslon, Galliard, Garamond, Goudy Old Style, Granjon, Janson, Palatino, Renard, Sabon, and VandenKeere.

 

Transitional SerifTransitional (Serif)

An example of a transitional serif typeface: Times New Roman (pictured)

Other transitional serifs include Bookman, Century, Georgia and Plantin.

 

 

Modern SerifModern (Serif)

An example of a modern serif typeface: Bodoni (pictured).

Other common examples include Didot, Computer Modern, and Walbaum.

 

 

Slab SerifSlab (Serif)

An example of a slab serif typeface: Rockwell  (pictured).

More examples of slab serif typefaces include Clarendon and  Courier.

 

 

Sans-serif font Classifications – Grotesque, Neo-grotesque, Humanist and Geometrical.

Grotesque Sans-SerifGrotesque (Sans-Serif)

An example of a grotesque sans-serif typeface: Franklin Gothic (pictured) and Akzidenz Grotesk.

 

 

 

Neo-grotesque Sans-SerifNeo-grotesque (Sans-Serif)

An example of a neo-grotesque sans-serif typeface: Helvetica (pictured).

Other modern designs such as Standard, Bell Centennial, MS Sans Serif, Univers, Highway Gothic, and Arial are the most common sans-serif fonts.

 


Humanist Sans-Serif
Humanist (Sans-Sarif)

An example of a humanist sans-serif typeface: Tahoma (pictured).

In addition, Antique Olive, Calibri, Johnston, Lucida Grande, Segoe UI, Gill Sans, Myriad, Frutiger, Trebuchet MS,  Verdana and Optima also fall into the humanistic classification. The humanistic typefaces are the most calligraphic of all the sans-serif typefaces.

 

Geometric Sans-SerifGeometrical (Sans-Serif)

An example of a geometric sans-serif typeface: Futura (pictured), ITC Avant Garde, Century Gothic, Gotham, and Spartan.

The geometric typeface seems to be the least useful for body text.

 

 

How to Ensure Your Typography Matters

When you are building your website, the big question is how do you choose what to use and where? We can establish our best practices by evaluating all of the uses and measuring how and where history has proven that typography matters.

Most books and printed material use a serif typeface because it has been proven to be easier for people to read, although this is not always the case. Even now, you will find that the body text in most printed formats are still using this technique. This shows us that typography matters in printed material.

At the same time, it is commonly believed that sans-serif fonts are easier than serif fonts to read on a computer screen. Therefore, it is common to see the more modern sans font being used online. This shows us that typography matters on computer screens.

There has long been the Rule of Three principle used in various aspects of design. You will often see it applied in architecture, graphic design, and photography. You can apply this same visual concept in website design when choosing fonts.

The Rule of Three principle also goes hand in hand with odd numbers. The basic concept is that objects or details that are arranged, grouped or displayed in odd numbers are more appealing, memorable, and effective than even-numbered pairings. Granted, it is easier to create symmetry by balancing elements in twos and using even numbers, odd numbers create harmony, force movement and visual interest.

A growing trend, especially because of the variety within a single font, is using only that single font family throughout a website. By applying different weights to a single font in your design, you can create the visual interest needed to guide your visitors to the areas of the page in order to take action.

Interestingly, an exception to the two design guidelines above that still works well is combining two completely different font styles (like serif and sans-serif). When using this technique, you must be careful though. Try to establish a consistency with its application, using one for headlines and titles and the other for the body or content text. This technique can work well but is a bit more difficult to “get it right.”

Typography Matters Timeless Tips

  1. Use serif typefaces for printed material like magazines, newspapers and books.
  2. Use sans-serif fonts for website body text.
  3. Use no more than three different fonts in any given design.
  4. Use font-weight to provide visual differences when using a single font.
  5. Use different font styles consistently if combining them.
  6. Pay attention to licenses and copyrights.

Joel Goodman recently presented “Typography Matters” during the 2014 Austin WordCamp. If you would like to see the slides that Joel used during his WordCamp presentation, please visit: Typography Matters by Joel Goodman. And just in case you are wondering, Sorts Mill Goudy is the free open-source font that Joel used during his Typography Matters presentation. During his presentation, Joel provided some neat resources to check out for font and typography, both print and web. You can find them below.

We have come a long way from the days of nine font choices in web design. The beautiful thing about having so many font options is that now, when you are designing and developing websites, you can use the font to vividly describe the feel that you wish your visitors to have when they visit your website. It is almost as though your website has feelings. We are now able to inject emotion into our websites just by using combinations of font and typeface.