Drop #428 (2024-02-27): Typography Tuesday

The Typographic Heresy Of The Drop; AIGA Typography Crash Course; The Figma Files


(Apologies for the late arrival. Tuesday was a bear of a day.)

The Typographic Heresy Of The Drop

We’ve had dozens of these Typography Tuesday Drops, so far, and I feel compelled to do a mea cupla on a bit of heresy that’s been committed in almost every one of them.

In the discipline of typography — and, sadly, in these Drops — the terms “typeface” and “font” are often used interchangeably, yet they signify distinct concepts. Understanding the difference between these two is kind of important for anyone exploring the typographic universe, whether for web design, graphic design, publishing in general, or simply to appreciate the nuances of textual presentation.

typeface is essentially the design of the lettering, the artistic creation that gives a set of characters their distinctive appearance. It’s the overarching theme that unifies a collection of letters, numbers, and symbols. When we refer to “Times New Roman” or “Helvetica”, we’re speaking about typefaces. These are the creative works that embody a particular visual aesthetic, much like a family name encompasses individuals with common traits.

As we’ve covered in more than a few editions, the history of typefaces is deeply rooted in the history of printing. The term itself hails from the days when individual characters were cast in metal for printing presses. Each typeface was a set of these characters designed to be used together, sharing common design features that made them recognizable as part of the same family.

font, on the other hand, is a subset of a typeface. It refers to the specific characteristics that determine how a typeface is rendered. This includes size, weight (such as bold or light), and style (like italic or condensed). For example, within the “Helvetica Neue” typeface, “Helvetica Neue 35 Ultra Thin” and “Helvetica Neue 45 Light” are different fonts, distinguished by their weight.

As we’ve also noted before, the term “font” comes from the Middle French word “fonte,” which referred to the process of casting metal. In traditional printing, a font would be a complete set of metal characters in one size and style of a typeface. With the advent of digital typography, the concept of a font has evolved. Now, a font is a digital file that contains the scalable description of the typeface’s design, allowing for the creation of various sizes and weights with a few taps. In fact, these digital versions are actually considered to be pieces of software.

For web designers and typographers, the distinction between typeface and font is more than pedantic. It’s a reflection of the craft’s history and the precision required in the design field. While modern software often blurs the lines by using the term “font” to refer to what are technically typefaces, professionals in the field maintain the distinction to honor the complexity and artistry involved in typography.

In practical terms, when selecting a typeface for a project, you’re choosing the general aesthetic you want to convey. When you choose a font, you’re specifying the exact size, weight, and style that will best suit your message and design context.

The difference between a typeface and a font is sort of like the difference between a musical composition and a specific performance of that piece. The composition is the typeface, the abstract design that can take many forms, while the performance is the font, the physical manifestation of that design in a specific context. Understanding this distinction is essential for anyone involved in creating or working with text, as it affects legibility, mood, and the overall effectiveness of communication.

I will likely continue to use the terms interchangeably, but I wanted to make sure any newcomers to the world of typography know that there are reasons for the different terms, and offer an apology to all the other very forgiving readers to putting up with my laziness.

AIGA Typography Crash Course

NOTE: Don’t go trying to figure out what “AIGA” stands for. It was originally the “American Institute of Graphic Arts”, but their mission — to advance design as a professional craft, strategic advantage, and vital cultural force — just became a bit more general purpose. I wonder if they kept it because they couldn’t afford to toss all their printed and branded letterhead.

The Minnesota chapter of AIGA put together a pretty spiffy graphic design curriculum that is designed to help instructors teach design fundamentals to folks at a high school level. It has an entire section of guides on typography that cover (the descriptions, below, are all theirs):

  • Introduction: Typography incorporates all the visual components of the written word. It is the art (and also technique) of arranging type to make written language legible and readable, with the goal of (typically) making it appealing.
  • Typography in Action: Typography has been in a state of constant evolution throughout time. It is still evolving as technology and methods change.
  • The Language of Type: Part of being a graphic designer is understanding the language of typography in order to use it expressively, improve understanding, and communicate more effectively.
  • Font Pairing and Hierarchy: Now that students have some experience with typography, it is time to take on a bigger typographic challenge. But first, they need some background in font pairing and hierarchy.

Each of those links goes directly to the PDF lesson/guide. Each of them lays out the:

  • National Visual Art Standards covered by the lesson
  • Guiding questions which help direct the flow of the lesson
  • Learning objectives for the lesson
  • Term definitions
  • Materials required, and
  • Art context, cultural connections and relevancy

As one might expect, the design of each PDF is impeccable.

While these are more geared towards the person teaching the curriculum to students, you can 100% go through each on your own, and even have some fun with the assignments. They also make for great reference material to keep around.

Just be a bit careful when following embedded links in the PDF. These resources were created back in 2016, and linkrot is real. The ones that are “broken” don’t seem to go to “bad” places, but, perhaps, copy each link and use the Wayback machine to view them.

The Figma Files

Lots of text in today’s tome, so we’ll keep this section short.

I was thankful that Adobe failed to successfully acquire Figma, since everything Adobe touches becomes 3x more expensive, and generally seems to decline in value and function.

Figma isn’t just a tool. It’s also a community hub for designers, and many of those folks create Figma “boards” that share inspiration and knowledge. While I haven’t, yet, curated a specific list of the best typography-centric resources there, I’m confident y’all are more than capable of panning through the ones focused on type to find some genuine gold nuggets.

FIN

Remember, you can follow and interact with the full text of The Daily Drop’s free posts on Mastodon via @dailydrop.hrbrmstr.dev@dailydrop.hrbrmstr.dev ☮️

4 responses to “Drop #428 (2024-02-27): Typography Tuesday”

  1. richardcareaga Avatar
    richardcareaga

    National Visual Art Standards covered by the lesson, is NOT what I would call impeccably designed. The rest of the links do qualify.

    Like

  2. hrbrmstr Avatar

    Oh that poster is def atrocious!

    Like

  3. mollyrealized Avatar
    mollyrealized

    (The “Manage your email settings or unsubscribe” text is simply text, and not a hyperlink.)

    Like

    1. hrbrmstr Avatar

      I’ll see what I can do to machinate that on the WP side (it’s part of the default template)

      Like

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.