Understanding Typography: Moving Past Helvetica

For today’s post, we’re going to take a step away from marketing into the fiery underworld of design and the use of typography, because we believe the two fields are inherently related. Great design is a fundamental aspect of great marketing.

Street signs. They’re everywhere. They help guide us through the dangerous world of one-way streets and closed roads, let us find our way in life, and they tell us where we can and can’t park. But have you ever really noticed something about those signs, other than the words conveyed by them? Have you ever really looked at the font on the street signs you see every day?

After watching Gary Hustwit’s documentary, Helvetica, I couldn’t stop myself from analysing every form of typography I encountered. And I began to notice that everywhere I turned, there it was again: Helvetica. Helvetica. Helvetica.

And there’s a very good reason for this: quite simply, among designers Helvetica is known as the perfect font. It’s very easy to read at both close and far distances, it incorporates the ideal amount of negative space within its design, and it’s bold enough to catch your attention (hence its use in street signs). But, while Helvetica is known for its immaculate perfection, it has its purposes. And that’s the point of today’s lesson: specific font types have their specific purposes. I’ll give you a broad overview of the different types of fonts, and what good can come from each of them.
 

Typeface vs. Font

Typeface and font: same thing, right? Here’s where I wish I could harness the power of Family Feud’s giant red “X” because it’s not quite that simple. Let’s use one of those handy metaphors to think of it in a different way: a typeface is like the family of fonts, whereas the fonts themselves are like the children within the family. Let’s go through this with our good friend, Arial. There are lots of variations of the typeface, such as Arial Black, Arial Light, and Arial Italic. So in this case, Arial would be the typeface (the family of fonts), whereas Arial Black, Light, and Italic are the fonts within the typeface. To extend the family metaphor a little bit: think of the typeface as a family’s Last Name, the variation of font is like a First Name, and the Last Name comes before the First Name. So, if I were a font, I would be in the typeface of “Haslam,” the variation of font would be “Connor,” and I would get “Haslam Connor” as the name of my font within the Haslam typeface.
 

Serif

Serif fonts, as opposed to sans-serif fonts, are defined by, well, their serifs, which are the small lines or strokes that are connected to the ends of the letters or symbols within that font. The most classic example people would recognise is Times New Roman, and these fonts are ideal for reading large quantities of text within printed materials at small sizes. They’re quite often found in traditional publications like newspapers and magazines.
 

Sans-Serif

Growing up in Canada, I was blessed with having studied French as a requirement through our public school systems. Okay…I say blessed, but believe me, French was not one of my strengths; neither was English, actually – I was a numbers kid – so how I technically ended up in an English program in university must have baffled some of my high school teachers. I’m getting sidetracked… Where was I? Oh, yeah, learning French!

Luckily one of the seven words I managed to take away from my five years of required French classes – see: one, seven, five; I told you I was a numbers kid – was sans, and this simply means “without.” So, sans-serif rightfully translates to without-serif, which means that the letters within a sans-serif font won’t have any of the small strokes attached to the ends of them. And whereas serif fonts are considered more traditional, sans-serif fonts have frequently been described as modern in comparison. The font you’re reading right now is a sans-serif font.
 

Serif Forms

Bracketed

So we’ve distinguished between serif and sans-serif fonts, but we can also identify differences between the different styles of serif fonts. Bracketed serif fonts, like Times New Roman, contain serifs that have curved edges at their ends.

bracketed font
A bracketed font, Garamond.

Unbracketed

Unbracketed serifs, on the other hand, don’t contain curved edges at all. They still have serifs attached to the ends of their letters, but the serifs are constrained to 90-degree angles. Here’s an example of a bracketed serif font vs. an unbracketed serif font.

unbracketed font
An unbracketed (and also slab-serif) font, Rockwell.

Slab Serif

Similar in style to unbracketed serifs are slab serifs. But where these differ from un-bracketed serif fonts is that their serifs are the same (or close to the same) width as the thickness of the letter itself. Used properly (they’re very popular within ads) they convey strength and resilience, which might explain why they’re used fairly often in corporate logos. Check out IBM’s logo, designed with a Slab Serif font.

slab serif font
It might be a little hard to tell because of the negative space inserted into the design of the font, but the serifs are roughly the same width as the stroke of the letters themselves.

Sans-Serif Classifications

Gothic

These were the first classification of sans-serif to appear in the 19th and early-20th centuries and were primarily used for headlines (also known as display type) as well as advertisements. Fun fact: because of their popular use as attention-grabbers, early sans-serif fonts were not typically designed to include lower case or italic fonts. In fact, most of them avoid italic altogether in favour of an oblique design and believe me, there’s a difference between the two.
 

Geometric

You know how the names of things can sometimes describe what they are? For example, in the early days of Facebook, it was essentially an electronic book of faces (with this logic, what do you think it would be called now?), just like a W is literally two U’s. Well, the same convention applies here: geometric fonts are typically composed of geometrical shapes, such as perfect circles and squares. A good example of this is Google’s new logo: the company transformed their typography from a transitional serif font into a geometric sans-serif font, which was incidentally a creation of their own.

 

google old logo

google new logo
 

Humanist

Taking their inspiration from classical Roman square capital letters, humanist fonts represent a sort of middle-ground between serif and sans-serif fonts. While technically sans-serif, they frequently include calligraphic traits in their structure, which make them appear as if they have serifs, but in fact, they don’t have them at all. The key thing to remember about humanist fonts is that they’re the easiest font to read at small sizes in large quantities.
 

Other Classifications

Scripts

While these typically wouldn’t be included as text types (text types make up the body of your text), scripts can be very useful for display types (display types represent your headlines and titles). There are also plenty of large brands that use these in their logos (think Coca-Cola or Budweiser), but the designers will more often than not apply some sort of customization within the script font, such as removing unnecessary swashes from their design.
 

Blackletter/Fraktur

new york times logo

Just like scripts, blackletter fonts make for very bold and strong headlines but, because of their rigid and thick design, they’re usually difficult to read in large quantities. The most common place you’ll see these used are in the names of newspapers or publications because of their traditional, old-style feel. The New York Times is debatably the most famous of these examples, but if you did a poll on practically any university campus, they would probably mention Jägermeister or Corona first.

So that does it! I’ve given you a brief introduction into the world of fonts and typefaces, but just know that we’ve only scratched the surface of design (we didn’t even discuss serif classifications such as old-style, transitional, and modern). I guess you could think of this as roadmap for your journey into typography: just keep your eyes on the street signs, know why you’re going where you’re going (or, without the metaphor: know what font to use and why you’re using it), and be prepared to learn a thing or two along the way.

If you’re looking for more useful information that can help your business, check out our Twitter feed.
 

Understanding Typography: Moving Past Helvetica