Type Systems Part 2

Getting down to the nitty gritty of Type Systems.

The reason we call them type systems and not simply type selections are because like a fine wine with medium rare steak (or a hot dog and a bud light), text is meant to be paired to create hierarchy.

Imagine for a second that everything you read on every page of the internet was only black type, in Arial, and 12 pt. in size.  Pretty boring, right? Further imagine that everything was one line height, line length, and one weight (how heavy or light the font appears.) It would be difficult for many people to read (since screens strain the eye and 12pt is relatively small), and impossible to distinguish importance – everything would look uniform.  Our eyes evolved to notice when things are different from our expectations so one font, at one length, line-height, weight, and size would result in a block of text that our eyes would really have a difficult time reading.

How we solve this problem is by defining what kind of type is appropriate for what kind of information.  Generally speaking for web, there are three basic kinds of information:

  1. Display – the dominant text on a page
  2. Heading – orients the eye to start there
  3. Body – The main text of a page.

A display may or may not be a heading element; headings may or may not be a part of the body copy, but body copy is always going to be a primary determining factor.  After all, this is the “steak” of a site – people go to sites to read something or complete actions. If there’s one place to focus on,  it’s body copy.

Interesting tangent here; the importance of your selection is inversely related to the amount of copy you plan to have.  It’s a simple principle, really – the less copy, the more perceived importance of any given word, sentence, paragraph.

From there it’s deciding what pairs well with the body copy type.  “Well” here is obviously subjective and depends on the project.  For instance,  you may need a much higher contrast between body and heading text and so picking two relatively different fonts may make sense.  Here’s an example:  Proxima Nova – a very popular Sans font – paired with Adelle, a popular serif font. The contrast between the two creates an interesting and inviting read.   Or, you may decide that you need a lot of harmony between  body and heading text, so picking a pre-designed pair like FF Meta Serif and FF Meta (a sans-serif version meant to pair with FF Meta Serif) makes sense.

Last,  with Display text,  I’d urge caution and lots of discretion.  These elements are going to be big, bold, and visually dominant,  so it’s vital that one uses restraint in only using them when and where the design calls for them. On many projects they may not even be necessary. But you may have to incorporate display type if it’s consistent with branding guidelines.  An excellent example of display type is Playfair Display,  which is versatile enough to be used for headings but not a great body copy type.