Getting your head around choosing and using type
Welcome to my rough guide to the terminology of type, of choosing typefaces, and the use and detailing of doing things with type.
This is a presentation I prepared for my Spatial Type class, which is a group of awesome students who include visual communication majors who are familiar with typography, but also spatial designers who might not be.
It might be dead boring for editorial design old hands, and it might be a bit much for those who don’t stray far from Myriad Pro or whatever the PC serves up as a default, but hopefully it’s a reminder for some, and a taster or prompt for others. It’s adapted from a print perspective, but these things generally hold true regardless of medium.
Typefaces vs. fonts
Let’s start with some disambiguation. Typeface and font get used as synonyms, and usually that’s ok, but there is a difference. A typeface is the collective name for a family of related fonts (so here, we have Adrian Frutiger’s famousfamily designed in 1957),while fonts refer to the weights, widths, and styles that constitute a typeface. So each of Univers’ weight and width and style combinations is a font. It’s a bit pedantic, but you never know, it might come up in a pub quiz.
But let’s take a step back. There are various ways of classifying typefaces. Typeface classifications reflect history and the technology that made type at that time possible, from the pen, metal type, paper quality, etcetera. Nowadays, mostly we render type via a computer, but people still refer back to the classifications because they tell us something about the characteristics, so are a kind of expert shorthand. Above is theclassification system, and it’s probably more exhaustive than you need to know on a day to day basis, but here’s what you do need to know…
Serif and sans serifs
A very useful classifications poster by
At the top level, there are serif and sans serif typefaces. Serifs are the pointy bits, so serif typefaces have the little pointy feet. Sans just means without, so without serifs.
These are the kind of typefaces you can read, so are your go to for book text, sign text, web text… any time quick transformation of information into cognition is required. And then there’s everything else:
These are typefaces that are used for display or decorative purposes. You might use them for headlines or titles, or for expressive elements, or as part of themed project:
So for instance, the type in our library stairwells at is deliberately ambiguous because it’s supposed to suggest dynamism rather than be read. Or this sign system by Pentagram uses blackletter for headlines, because its a bit of a themed joke. It’s in the grounds of a cathedral – blackletter says historical and formal and the sign is set as a commandment. You can see it is augmented with a clean sans serif. You couldn’t swap these round though and have the blackletter for the smaller detail text because it would be too hard to read.
There are a few ways we talk about type to describe some of its attributes. When printing type was first invented, the notion of having a family of type hadn’t occurred to anyone. All fonts were simply roman (regular) designs. In the early 16th century italic type became increasingly widespread, and by the late 1700s, foundries began to release fonts in families – pairing roman and italic designs that matched each other in style. Later the concept of typeface weights and proportions was added to the typeface family mix. In the 20th century, type families were enlarged even further with the introduction of different designs such as condensed, and expanded.
In 1957, when our Swiss friend Adrian Frutiger designed Univers, he proposed a logical, systematic numbering scheme covering weights, italics or romans, and compressed to extended.Some other families like Neue Helvetica and Serifa use this numbering system, but it’s not a standard. Many others have different terms in the mix like ultrafine, fine, medium, semibold, heavy… Look at what your family has to offer – you might have more than regular and bold at your disposal!
You’ll also have some other ways of talking about type with which you’re no doubt familiar. The specification of size –which will vary from print (points) to screen (ems, pixels) (and it’s worth noting that point sizes will vary across fonts, so a 12pt for instance isn’t a universal size) – and also the
UPPER CASE (all caps)
lower case (all small letters)
Sentence case (first word capitalised)
Title Case (everything but joining words capitalised)
There are many resources that cover these, and hopefully you remember most of them from English class!
The anatomy of type
The terminology of how we talk about letterforms is a presentation in its own right, so this is a mere nod to an area of expertise you might want to delve into. Now there are a whole heap of these, and plenty of resources to use to get familiar, a couple of which I have linked to here. There are some key ones it is worth getting your head around:
I’d suggest learning the lines: baseline, x height and cap height, which are fairly self explanatory, but note that rounded characters will dip slightly below the baseline so they look optically like they sit on it.
Other key ones are stroke, which is simply one of the lines that comprise any given letter. A stroke can be straight or curved, and open or closed. For example, in the lowercase k, there are three strokes, both vertical and diagonal.
A subset of stroke is the stem, which is the main vertical stroke or strokes in a letter, highlighted in the N above.
Serifs, as we know, are the little feet connected to the ends of strokes in letters or symbols, and these can have a curved or wedge-like connection between the stem and serif called a bracket. Where a stroke which doesn’t terminate in a serif, there is a terminal, shown on the K.
Counters are the insides of closed strokes, as in the lower case A above. I’ve included ear on the lower case g, as it is my personal favourite!
There are some other spatial terms worth knowing that we will touch on a little later in terms of how these should be managed. Obviously we have text size, but the spacing between lines of text is also carefully controlled, and that’s called the leading. If we manage the spacing between all letters in a block of text, that’s called tracking. If you need to manage the spacing between individual letters, that’s called kerning. Tracking and kerning are things you’ll usually only need to do to feature or heading text that’s at scale.
Type anatomy resources:
Animated terminology tool at
Cheat sheet at
What's your type? Choosing typefaces
So how do you choose typefaces? How do you know what will work?
One of the things I find helpful to nail down near the start of a project is what you want your design output to feel like – the personality you want it to have. This will have a lot to do with the audience and the purpose of the artefact you are producing.
Typefaces are the clothes that words wear, and like clothes, they can express different qualities. Think about your project’s output and the typefaces you will use in terms of certain characteristics like if it’s human or mechanical; hard or soft. Also bear in mind if it has a specific emotional tone, or connotations relating to history. Is it possible to personify your project (‘this is totally Don Draper in Mad Men…’) and choose a typeface that feels the same, or appropriate?
I would suggest trying this: you’ve got your brief, you’ve though about where your project might be, so you should be able to articulate:
- The subject matter
- The medium
- What are the colours (literal or emotional)?
- Who is the audience?
- What will appeal to them?
In essence you have thought about the experience you want the user to have. Then, list five words that describe the subject as you want to interpret it. Can you say it’s any of these things?
is a Zero Waste fashion system. The typeface and materials (including an exhibition space) needed to embody a systematic feeling, it wanted to be designerly, to feel dynamic (in the sense that it’s contemporary and non-traditional), it needed to feel approachable, and suggest modification. We designed the typeface to suggest these things (and supported it with a clean, legible open source (which was important tho the philosophy if the project) sans serif, ). From a material point of view, the publication was formed of four sheets that could be repurposed into a garment pattern, and could also be assembled into a broadsheet newspaper. Hence, the typeface choices embodied the qualities we wanted the project to have:
by Simon Garfield
Profile Books, 2010 is a great quirky introduction to type through stories about history and use. Recommended!
These books and I designed were for kids so they needed to be clear and friendly, but they also needed to appeal to the adult readers, so they aren’t super-childish, and have a designerly quality. The type is bold and a bit bouncy looking, and is set in sentence case rather than caps. Add colours that are jolly too, and it all adds up to a distinct personality:
Some typefaces have very obvious personalities. Take Cooper Black for example. A straw poll in class generated words like playful, friendly, bouncy:
If you check out Cooper Black on
Like Garfield, Cooper Black is informal, chunky and round, comedic, and laid back. So here, typeface personality closely matches the subject.
But, despite its emergence in the 1920s, Cooper Black had a big moment in the 60s and 70s, so it has a kind of retro vibe too, which this other design on Fonts in Use picks up on:
On the left,
So the ‘personality’ of typefaces isn’t an exact science, and is very much informed by where we have seen fonts used before, so it’s worth testing assumptions, and actually, typefaces like people can adapt to different environments too. T
Gotham is a rounded geometric sans serif. Originally conceived for GQ magazine, who wanted a typeface with a "geometric structure" that would look "masculine, new, and fresh" for their magazine (source:especially the sign on the Eighth Avenue façade of the Port Authority Bus Terminal. These kind of municipal buildings have a certain authority and credibility, and if we look at where Gotham has been used, we can perhaps see it is tapping into similar need:
). Designer Tobias Frere-Jones took inspiration from type on New York buildings,
Above we can see Gotham working for a contemporary art magazine where it’s fresh and dynamic, for Shepard Fairey’s iconic Obama poster where it is confident and suggests a new political possibility, and also for Pukeahu Park, where designer Neil Partington used it as an elegant wordmark and within wayfinding, so along with the understated and high quality material palette it comes across as elegant, refined, and with a quiet authority.
Are you saying what you think you're saying?
I believe there’s a credibility dimension to this as well. Some things just say believable and have authority, others don’t!
So if you have a war memorial to build, the words that come to mind might be serious, authoritative, classic, orderly, thoughtful…
However, in Geffen, The Netherlands they ended up with a war memorial set in which isn’t inherently poor, it’s just probably a poor choice when you want to be a considered and serious and respectful. There was an (inevitable) backlash. It seems the rationale was it was comfortable to read at a distance, but as plenty of people retorted, so are plenty of other fonts that aren’t childish comic book scripts.
Typefaces and styles have connotations, some of which are obvious (or should have been to the people of Geffen), some of which are less so. It’s worth testing this, and even digging into the history of use (and even the designer too – I love Gill Sans, but when I
, I didn’t feel like using it any more…)
Purpose: information or expression?
If you remember the shape of your spoon at lunch, it has to be the wrong shape. The spoon and the letter are tools. One to take food from the bowl, the other to take information off the page.
This is one of my colleague Fay McAlpine’s favourite quotes. What it is alluding to is that if type is supposed to be read as body copy, you shouldn’t even be aware of its presence; it should just do its job. So as a designer, you need to be aware of what you’re trying to do: convey information seamlessly, or evoke something more? Does it want to be expressive, or informational?
Above are some examples from my work where you can clearly see both expressive and informational type in both. On the poetry book cover, the dots make up the number 18, and Make/Use uses symbols from the zero waste garment system to form a modular typeface, but both are supported by carefully set text you’re supposed to read with no problem, carefully set on a grid system.
In these examples above, the purpose is more single-minded. Paula Scher uses expressive, vibrant place names to decorate a building, giving it a distinct playful personality. Margaret Calvert and Jock Kinneir’s design of the UK’s road signing system (including the design of the lettering ‘Transport’) which came into effect in 1965 and still remains in place today is a thoroughly tested example of type that’s meant to be quickly absorbed and understood.
So in short, when you choose typefaces, choose with purpose. Avoid novelty, buy well crafted typefaces (and there are a lot of affordable options –is all open source and has some great type from some excellent foundries, and if you’ve had to fork out for an Adobe Creative Cloud account you’ll have access to Adobe Fonts with your – so when I say buy, I really mean don’t steal). Also, limit your palette and avoid using more than three typefaces in a system without really good reason. But look for useful families that have the weights you need.
And if you’re still feeling a bit lost? Here’s my top tips:
- first up think about the personality and functionality you want your project to have
- look at good examples that have a similar flavour and analyse what works and why
- don’t copy, but do look for similar qualities in typefaces that you might use
- test multiple options – you’ll soon get a feel for subtle variation
- test on other people just to check they get the same vibe
- You’ll end up with favourite fonts that become solid go-to workhorses
Now you’ve nailed the choosing, let’s look at the using in part two!
to look at in use examples
for trending fonts
and to identify fonts