Type Part 1: Categories

Typography Categories
This article was originally written by me for Hubze, a former Social media news and tutorial source.

Attention Hubze Nation!

Today we’re beginning our excursion into the world of typography!

Learning what makes good type good and bad type bad may be the most important skill in design to master.

Think about it. What is the purpose of design? To communicate. How do we communicate? Through language. How do we write our language? With type. If you know how to master the presentation of type, your communication will be stronger, more consistent, and more effective.

While the study of typography is quite extensive, what we are going to focus on is the relationship between typefaces, and how to best create dynamic relationships with text. In almost any design, there are multiple elements on a page. Deciding which typefaces to use for each of these elements can be confusing and intimidating. This is what we will be learning to overcome, and actually enjoy. Let’s begin, shall we?

Relationships in Typography

When comparing things in life, we need to define the relationship between two elements. Not surprisingly, the same holds true in typography. When two typefaces are present on a page, they can form one of three types of relationships:

  • Concordant – in a concordant relationship only one type family is used, and in very similar sizes, weights, styles, etc. The page is harmonious, but many times very uninspiring and dull.
concordant example
The same typeface is used throughout the piece, and even the other design elements share the same look and feel. This works, but is safe and uninspiring.
  • Conflicting – in a conflicting relationship, typefaces are similar, but different. We know from our study of contrast that conflicting is bad. If things are different, but not different enough, your design suffers, and peoples’ eyes get angry. Angry Eyes may be a great song by Loggins and Messina, but it has no place in our designs.
  • Contrasting – A contrasting relationship occurs when you combine separate typefaces that are clearly distinct from each other. High contrast is much more visually stimulating and interesting. Obviously adding interest on a page is what we want, so contrasting relationships are what we should strive for.

Categories of Type

While type can be broken down into dozens of categories, for our purposes we are going to concentrate on 6 major classifications. By recognizing these six classifications, we’ll be able to make decisions and solve typographical problems in all of our designs.

  • Oldstyle
  • Modern
  • Slab Serif
  • Sans Serif
  • Script
  • Decorative/Display

Oldstyle

The name Oldstyle refers to how long the design of these typefaces has been around…a long time. Oldstyle typefaces are based upon the handwritten letters of scribes way back in the day. These letters were written with a wedge tipped pen, which accounts for the varying widths of their letterforms, also known as the “thick/thin transition.”

Oldstyle fonts have serifs which are the little doohickies on the tops and bottoms of the letters. Oldstyle fonts have slanted serifs on lowercase letters. Also, if you were to draw a line through the thinest parts of the letter, the line would be diagonal. This is called the stress.

 

Oldstyle diagramOldstyle fonts probably look very familiar to you; this is because most printed documents use them for long areas of text. They choose Oldstyle fonts due to their relative “invisibility,” meaning their designs are usually pretty nondescript, and it  takes a keen typographical student (like yourself) to notice the difference between them.

The characteristics of Oldstyle fonts make them perfect for long areas of body copy, especially on a printed page (for online areas of body copy, see sans-serif).

Oldstyle typefaces

Modern Fonts

Much like the way fashion, architecture and art evolve, as time passed, so did type. In the 1700s technical advancements such as smoother paper and advancements in the printing press brought a more sophisticated and delicate type design, which we categorize as Modern typefaces.

Modern typefaces are known for their drastic thick/thin transitions and their horizontal serifs. The stress is vertical, as opposed to the diagonal stress of the Oldstyle fonts.

Modern type diagram

Modern typefaces have a striking appearance and give your designs an elegant look. While the impact of modern typefaces can be described as “dazzling,” it’s best to use them for headlines or short bursts of text. Due to their thick/thin nature, long areas of body copy do not suit modern typefaces well, as the “thins” tend to disappear, making it rough on the eyes.

Modern typefaces

Slab serif

Continuing our history lesson, we fast forward to the times of the Industrial Revolution. During this time period, advertising saw its rise to popularity, and the need for readable, attention-grabbing type became necessary.

We know that Oldstyle fonts are readable, but not very exciting or attention-grabbing, and the makeup of Modern typefaces leaves the text hard to read at distances. For this reason, Slab Serif fonts were born.

Slab serif fonts borrow the horizontal serifs from Modern typefaces, but nearly remove any thick/thin transition whatsoever. The result is monoweight fonts that are bold, recognizable and “dark.”

slab serif typeface diagram

Slab serif fonts are great for headlines due to their thick nature, but many can also be used for body copy because of their clean, direct style. You may recognize slab serif fonts from many children’s books, as these typefaces are easy to see and identify.

Slab serif typefaces

Sans Serif

“Sans” is a French word meaning, “without,” and Sans Serif typefaces are just that, type without serifs. Sans serif fonts are usually of the monoweight variety, and can come in many different thicknesses.

sans-serif diagram

Sans serif typefaces are extremely versatile and can be used for headlines and body copy alike. Sans serif fonts have been shown to be easier on the eyes in digital forms of body copy (you’ll notice most websites use sans-serif fonts). A handful of sans serif font families containing multiple weights will significantly open up your options when designing for both print and web.

sans-serif typefaces

Script

Script fonts are fairly easy to identify in that these typefaces appear to have been drawn using a calligraphy pen, brush, fine-pencil, etc. This category is vast and could certainly be divided into many sub-sections, but for our purposes, we will lump them all together.

Scripts are stylish and elegant and should be used sparingly. Think of script fonts like a really nice watch or purse that you only take out on special occasions. They’re not meant for their utility, rather their aesthetic value.

Due to the nature of scripts, their beauty can look good at very large sizes. Their form can be used as art in itself and should be taken into consideration when creating your designs.

On the same token, however, their elegance and beauty make them ill-suited for long stretches of body copy and are not all that readable. In addition, scripts should never be used as all-caps. NEVER.

Script type examples

Decorative/Display

Decorative fonts are usually immediately identifiable, due to the fact that they are artistic, unconventional and many times contain frivolous design elements. Decorative fonts are meant for exactly as their name implies, decoration or display.

Decorative fonts carry emotional connotations and can be great to induce a certain feeling in your work. They should never, however, be used for body copy or large area of type.

Decorative type examples

Identify your type

Now that you know the main categories of type, see if you can recognize where these are used in your everyday life. What categories of type are used on packaging? What typefaces does your favorite website use? What type categories are used in movie trailers to evoke emotion? Now that you have power over these categories, identify and use them in your own life and work. You’ll be amazed at the new perspective it can give you.

Font Resources:

http://www.google.com/webfonts/

http://www.fontsquirrel.com/

http://fontpark.net/

http://www.dafont.com/

Read part 2 of the series, Contrasting Typefaces