1

Typography matters

Text is the main way we communicate our message, so we need to make sure we’re conveying it in the best way possible.

There are some people who think that typography doesn’t really matter — most people, perhaps. They might think that it’s not worth fussing over all these seemingly tiny details because the average person is never going to notice. In fact, something a lot of designers ask me is, “how do I convince my boss or client that it’s worth spending time and money on typography?”

John Boardley,¹ in his foreword to the first issue of my magazine 8 Faces,² said that “typography matters because words matter” and likens the typographer’s role to that of a chef, adding “just a pinch of this, a dash of that; indeed, perhaps so little that most but the informed gourmand would not detect their inclusion.” I’ve found the food analogy pretty useful: just as you can take great ingredients but completely ruin a meal by not focusing on the proportions and the relation of one ingredient to another, you can give your readers a terrible reading experience by taking great type and setting it without careful consideration.

While explaining all of this can be helpful, my suggestion is usually to show rather than tell: take some text and do some typography on it! Nothing special. In fact, the subtler, the better. Tweak the line height of a paragraph to make it a little more readable. Adjust the measure of a text block to ease the eye. Improve the appearance of all-caps type by adjusting the leading. And make all of these changes in as lo-fi a manner as possible, perhaps even using a word processor or a slide-creation app. Seeing the difference even small changes make in everyday context will pave the way for your boss or client investing in even bigger changes.

I’ll quote John Boardley from 8 Faces again:

“Good typographers and good type designers obsess over the detail, so that readers don’t have to.”

He concludes by saying that the details’ perceived invisibility actually “confirms their efficacy.” Saying you don’t care about typographic details means you don’t care about any details. Now, is that a good message any boss or client ever wants to send?

2

There’s no excuse for setting bad type

We’ve got it so good, and we have such great defaults to work from, all we need to worry about is finessing.

In a book on typography, it's essential to define what type is. Simply put, type refers to mechanized writing — an invention that made recreating text easier and faster than handwriting. This innovation required numerous decisions about type’s organization, usage, and optimization, leading to the practice of what we now call typography.

Typefaces describe the design — the aspect that exists somewhat conceptually — while fonts represent their physical application (explored further on this page). Since its inception, type has evolved through various forms: initially as wood type, followed by metal type; then the short-lived phototypesetting era, before transitioning into digital fonts with the age of desktop publishing, and then the internet.

Interestingly, the people working with type have evolved drastically, too. Not long ago, it was the printer who held the knowledge about typography, and the average person had no way of setting type; or at least anything that resembled a professional design. Typewriters bridged this gap somewhat, but before commercial availability of desktop typewriters, most keyboards were used by the highly specialized operators of the Monotype and Linotype machines.

My point is this: these days, anyone can set type, and therefore we’re all typographers. And, because setting type is so easy — when compared to previous methods in type’s history — there’s no excuse to set bad type, is there?

3

A font isn’t the same as a typeface

It might seem pedantic, but the distinction is important when we’re talking about type.

Okay, let’s get this one sorted once and for all, because it’s not just about being a pedantic type nerd. Well, maybe it’s a little bit about being a pedantic type nerd. But this stuff is important to get right! Especially at the beginning of a book about typography. Most people — even quite a few type people, actually — use the words “typeface” and “font” interchangeably, but there is a subtle difference.

First, let’s think of a typeface as the slightly ephemeral, intangible “thing” that is dreamed up. A bit like a song. You can record a song, you can remix it, you can re-record it, but the original composition is still a thing that exists in the ether — that’s like the typeface. To experience the song, you need a vessel: an MP3 file, a stream, a video, a performance — that’s like the font.

Now, this analogy isn’t watertight. After all, the act of designing type digitally also includes a lot of font production decision-making that means that the two processes are very much linked. But that’s also perhaps like the creation of electronic music, where the sound design of that particular moment in time is integral to what makes up the composition. At least that’s how I view my own musical experiments.¹

So the typeface is the design, the font is the carrier.

Got it?

Great.

But this does highlight one extra definition that’s worth getting right: a weight or style is a font of a particular typeface. For instance, OT Miniature (see here) is a typeface; OT Miniature Bold is a font. How does this work if there’s only one weight or style of a typeface — is Despeinada (also here) a typeface and a font? Yes, but again, it comes back to that original definition and the context: we’ll likely say “typeface” when we’re discussing the use of Despeinada for our brand’s blog headings, and “font” when we’re talking about handing font files to our developer colleagues. The same is true when discussing variable fonts, where the traditional delineations of weights and styles no longer apply.

In practical day-to-day use, font and typeface are often interchangeable, and validly so, but it’s good to keep the subtle difference in mind.

4

Characters are different from glyphs

The character is the concept. The glyph is the thing we actually use.

Even the most experienced designer can be guilty of using the terms “character” and “glyph” interchangeably, but there’s a difference worth remembering. You might not get any applause for it at dinner parties, but you’ll avoid looking silly in branding meetings.

A character is the somewhat abstract concept connected to an elemental part of a script or writing system. Consider the way we draw a lowercase “a” — in the Latin script, it has an accepted core structure, despite subtle differences in typefaces, lettering, and handwriting. It doesn’t even matter that in some languages and dialects, its pronunciation differers. What’s important is that there’s an agreed-upon way to visually express the “a” character. The uppercase “A” is its own character, with a totally different structure, but the two are connected by the concept of a single letter.

A glyph, on the other hand, is the concept of the character manifested in the real world. This is slightly harder to grasp with digital type, so perhaps it’s easier to think back to the days of metal or wood type, where you could actually hold each glyph in your hand as a block of type. Digitally, a glyph is what’s shown to the end user as they type words in a document, and it’s those glyphs that we then manipulate typographically, from changing the font size (effectively, the size of the glyph’s em square), to adjusting the tracking (the additional horizontal space either side of each glyph).

Importantly, a single character can have multiple glyphs. Thanks to the power of OpenType, we might type the lowercase “a” character with a font that contains alternate glyphs, and then choose to use those other versions manually (as when selecting a particular stylistic set) or automatically (via contextual alternates). And the reverse is true, too: a single glyph can contain multiple characters, as in the case of ligatures. The common “fl” ligature, for instance, contains both the “f” and “l” characters.

Each font contains a database known as a glyph table, and each glyph takes up one space in that table. This table’s structure is standardized according to Unicode recommendations, so that when we want to insert an “a” character into our text, it’s always found in the same place, regardless of the font.

5

Understand type anatomy

The shapes and the shapes inside those shapes all have names.

There are some basic terms that relate to the anatomy of type that it’s useful to know when discussing certain features of different typefaces. Metrics are probably the terms many people encounter first, even if they don’t know that they’re metrics, and they’re especially useful because they’re relevant to many typographic changes we make (such as the x-height affecting leading). We explore metrics in detail on the next page.

Other terms are a little more specific to discussing letterforms and are more useful when analyzing type during the typeface-choosing process (such as the shape of the serifs on typeface A versus typeface B). Here’s a very quick overview of type anatomy, and please note that these are specific to typefaces for the Latin script.

6

Become familiar with your font’s metrics

They’re useful to know because they affect the type’s perceived size and how it interacts with other type around it.

All fonts have vertical metrics, which correspond to the proportions shared across the glyphs in the font file. These measurements are used to determine how the glyphs are rendered on screen, and letterforms’ adherence to these metrics is what makes a typeface feel cohesive. However, they are effectively just guidelines, as the type designer is free to position the shapes as they see fit (as they might in an informal design intended to look like messy handwriting).

Starting from the top down, these are the vertical metrics we commonly encounter (and which are made visible in type design software), along with some average values, assuming a typical em square height of 1000 UPM (units per em):

• Ascender height: the height of the ascenders in lowercase characters (800)
• Cap height: the height of uppercase characters (700)
• X-height: the height of lowercase letters, not including any ascenders (500)
• Baseline: the line upon which all characters appear to rest (0)
• Descender depth: the depth of descenders in lowercase letters (-200)

Although the order of these almost never changes, it’s not completely uncommon to see ascender height and cap height sharing the same value in some typeface designs, such in sans serifs. Type design software usually provides customizable visual references for overshoots and undershoots, too.

We focus a lot on the vertical metrics, but let’s not forget the horizontal metrics that also exist in a font, and that vary for each glyph. When discussing a well-spaced font, we typically refer to the designer or font engineer’s adjustments to the side bearings (horizontal spaces) that achieves an optimal balance of readability among the majority of glyph combinations.

This shouldn’t be confused with kerning, which serves as the exception to those rules by providing specialized spacing adjustments for occasionally problematic character pairings, such as the need for reduced spacing between “A” and “V”.

7

At the heart of it all: the em square

The invisible (and sort of magical) containing box.

Each glyph in a font sits inside an invisible bounding box known as the em square (or em box). Inside this container, the type designer places the design of the character (whether that’s a letter, number, punctuation, or symbol) and defines how much horizontal space (known as side bearings) should sit either side of the letterform. The vertical metrics — ascender height, cap height, baseline, and ascender depth — are also defined in the em square, although obviously these are shared across the font.

The em square is so called because in the days of metal type, it was the width of the uppercase “M” in any font. Although this is no longer the case, it’s important to note that an em is a measurement relative to the current size of the font — it’s this container that gets resized whenever we change the font size. One em at 16 pt is 16 points wide. One em at 72 pt is 72 points wide.

However, it’s perhaps the vertical dimensions contained within an em square that require the most consideration when we’re setting type. Although we rarely have access to the specific measurements contained within a font file’s em square, these details still have a huge impact on our work when it comes to choosing typefaces, and even more so when pairing them.

What if we’re choosing a new typeface for a brand redesign, replacing the current font in a design system? Cycle through a few different fonts from an app’s Font menu and you might notice that the type shifts around, despite the font size remaining the same. The reason for this is that the vertical metrics inside the em square can be wherever the type designer chooses, and if the baseline is in a different place in one font to another, the type move up and down within that box.

Shifting aside, though, the potential for every typeface to have its vertical metrics sitting at different points inside the em square also explains why switching between typefaces can often result in the new typeface appearing to be much larger or much smaller the previous choice: in most of these cases, the size of the x-height is what’s changing. A typeface with a larger x-height is not actually bigger, but can appear bigger, simply because the overall height of the lowercase letterforms occupies more vertical space inside of the em box.

8

X-height is our secret weapon

It’s everyone’s favorite measurement but it wields more power than you might think.

X-height is one of several vertical metrics in a typeface — the others (in Latin typefaces) being ascender height, cap height, baseline, and descender depth. Not specifically concerned with the height of the lowercase “x” character itself, the term is so-called because that character offers a useful way of representing the overall height — measured from the baseline — of all lowercase characters, given the (usually) flat top parts of the “x” letterform.

Typefaces with large x-heights are typically easier to read at small sizes. But what does having a large x-height actually mean? Inside the em square, the invisible box that contains the letterform in each glyph, a large x-height means that the lowercase characters take up a bigger percentage of this box; the ascenders and descenders, in turn, occupy a smaller area.

Therefore, a typeface with a large x-height can appear bigger when compared to one with a small x-height — something that’s especially noticeable when swapping out one font for another, or when positioning two typefaces in close proximity. The type isn’t actually bigger, unless the font size is changed, but the proportion of the em box filled by the x-height may very well be larger.

Generally speaking, typefaces with a small-caps style are usually designed so that the top of those particular letterforms sit around the x-height, therefore allowing the small caps to sit more comfortably alongside the lowercase text. Proportional numerals also tend to be make use of the x-height, unlike lining numerals, which adhere to the cap height.

9

Type classification can be useful — and useless, too

Being able to classify different typefaces helps us choose and use them, but don’t get too bogged down by outdated models.

Classifying type is useful because it gives us a framework to discuss certain styles of design. At the very simplest level, a design brief that specifies the use of a sans serif font gives us some clear parameters to work within, and without even the most basic classification, we wouldn’t have that.

But classifications can be overly restrictive, too.

One reason is that to really understand the multiple subcategorizations of type, a fair degree of knowledge is required, including an understanding of the type design trends that marked various periods in history. Designers with an understanding of exactly what to look for when tasked with finding a Neo-Humanist Sans should be rewarded for their expertise, of course, but the learning curve is steep. Besides, historical accuracy isn’t all it’s cracked up to be. In her talk, Upping Your Type Game,¹ Jessica Hische opines the benefits of historical accuracy, but admits that our popular perception of a particular era might be evoked using typefaces that weren’t actually released at that time.²

Another reason is that type classification has generally been very Latin-centric (and in many cases Anglo-centric), and scripts from around the world are not just underrepresented, but worse: they’ve often been made to squeeze into classifications that don’t make for logical groupings. In recent years, much has been done to rectify this with ATypI unadopting the Vox-ATypI typeface classification system in 2021.³

All that said, classification in any form does offer us some useful guardrails, serving as a tool to help us choose type and to evaluate it. The online typography resource (and, more recently, font retailer) I Love Typography introduced the CEDARS™ system with the launch of its shop. Co-creator Dr. Nadine Chahine said in ILT’s launch announcement that “the name is the acronym for Contrast, Energy, Details, Axis, Rhythm, and Structure. CEDARS+ is a set of type descriptors that can describe any typeface in any script based on its formal qualities.”⁴ Of course, CEDARS™ is not a classification system, per se, but a way of filtering a type catalog, created by a font distributor. But, crucially, it groups type based on its physical traits. Combining this awareness with some knowledge of “traditional” classifications can be helpful in selecting type for our projects.

10

Know where your type is from: the serif

A very brief historical overview of serif typefaces.

The serif grouping of typefaces is so-called because those faces all share a common design element: the small mark or line at the end of some letterforms’ stroke: the “serif” itself.

The underlying design of what we now call serif typefaces — and therefore, by derivation, the underlying design of all Latin typefaces — was established in Italy in the mid- to late-15th century, when lowercase forms, inspired by the Carolingian minuscule, were combined with capitals inspired by Roman inscriptions into one “roman” script (in direct contrast to the earliest Western types that mimicked Blackletter calligraphy) and then evolved into a Humanist model (see here) by Nicholas Jenson that rejected the Gothic aesthetics of the past. As the popularity of the so-called roman typefaces evolved and France became a printing epicenter, Claude Garamont and his contemporaries in the mid-16th century further evolved roman types to introduce higher contrast and a more refined modulation of stroke. These serifs are so closely related to those in use today that it’s easy to see why modern reinterpretations of typefaces from this period are still so popular.

You might’ve heard people say that serifs are easier to read for long-form text, and so should always be used for body copy, but this theory has been debunked. While it’s true that the serif marks in letterforms can be a legibility aid, there are many other factors at play (see pretty much any other page in this book) when it comes to overall legibility and readability. Although it’s true that you probably don’t want to set entire paragraphs in a script typeface, a sans serif or slab serif will be just fine.

11

Know where your type is from: the sans serif

A very brief historical overview of sans serif typefaces.

They say less is more, and if that’s true, then surely there’s nothing better than a sans serif — a typeface without serifs. This theory has not yet undergone scientific rigour. You know what else is not actual science? The idea that serifs are better suited to long-form reading, and that you should only use sans serifs for short passages. You can just totally ignore that. Use a sans serif whenever you want.

With that off my chest, let’s talk about one of the primary classifications in Latin type. The first sans serif typefaces appeared in the 19th century. William Caslon IV (what a dynasty!) designed a typeface called English Egyptian that was published in a type specimen book in 1816, but it wasn’t until Vincent Figgins created several sans serif designs in the 1830s that the term “sans serif” — coined by Figgins himself — came into use. William Thorowgood was the first typefounder to create both an uppercase and lowercase sans serif design, and referred to them as Grotesque — so-called, it’s believed, because they just looked a bit, well, odd.

Berthold’s Akzidenz-Grotesk — on which Neue Haas Grotesk (the original version of what would become Helvetica) was based — was released in 1898 and is described as a Neo-grotesque. Futura’s geometric design in 1927 and DIN 1451’s industrial design in 1931 further rationalized the sans serif style into something all its own, and by the late 1950s and early 1960s, it had finally become a first citizen of type, propelled into the public consciousness with the release of Helvetica, Univers, and Folio, and the popularity of the International or Swiss design aesthetic.

12

Know where your type is from: the slab serif

A very brief historical overview of slab serif typefaces.

It would be unkind to dismiss a slab as a sans with serifs on, but let’s be honest: it’s not entirely innaccurate as descriptions go, is it? If you were to create a new slab serif typeface today, you’d certainly make your life easier by making the sans version first.

However, slab serifs — originally (and sometimes still) known as Egyptians or Clarendons — predate their sans siblings, having first appeared in the early 1800s. And no, they have absolutely nothing to do with Egypt, except that their rise in popularity coincided with the general cultural fascination with Egypt at the start of the 19th century.

Early slab serif typefaces, also known as Antiques, were closer to their more established serif cousins with features such as ball terminals. Clarendons brought increased contrast and a smoother movement from the stems into the slabs. French Clarendons reversed the contrast so that the slabs themselves became heavier than the stems. (Think of a “wanted” poster in any Wild West movie and you’re there.) Perhaps one of the best-known contemporary slab serifs is Courier, a monospaced typeface originally created by IBM for typewriters in the 1950s.

Because of the visual similarities between contemporary slabs serifs and Neo-grotesque sans serifs, many could be considered to be Neo-grotesque slab serifs, but — as I mentioned on this page — sometimes it’s not healthy to get too bogged down by type classification.

13

Handwriting, calligraphy, and lettering aren’t type . . . are they?

It’s useful to distinguish between them, although the lines can definitely blur.

Although this book deals exclusively with the arrangement and manipulation of type, lovers of type are often lovers of letters in all forms. Let’s make sure we’ve got some definitions correct.

Handwriting is what we do when we — surprise, surprise — write by hand, most often with a pen or pencil. Most people’s handwriting is casual (mine is illegible).

Calligraphy is the practice of writing with a deliberate and artistic style; a sort of halfway point between handwriting and lettering. Most expert calligraphers are able to achieve a consistency that in many ways is somewhat like type. However, even if it looks like type, it isn’t type, because it’s not mechanized.

Lettering is less about writing letters and more about drawing them. Think of a bespoke arrangement, like a logo, some food packaging, a tattoo, or the cover of a magazine. This collection of letterforms exists for an explicit context or brief. Type can be turned into lettering by starting with a font, manipulating it (see here), and then outlining it so that its actual curves can be tweaked further still.

Type can mimic handwriting or calligraphy in its design, and indeed “Handwritten” and “Calligraphic” filters can be found on most websites that supply fonts. Type can also mimic lettering thanks to the swapping in and out of alternate glyphs via OpenType. More on that from here onwards.

14

There’s evidence of the human hand in most typefaces

Contemporary type still wears its pen- and brush-based heart on its sleeve.

You might’ve noticed that this book doesn’t list all of the various classifications and sub-classifications of Latin type. This is very intentional and I went into exactly why on this page, but one I do want to call out specifically is Humanism, because it could be argued that evidence of the human hand is present in almost all type. The very first typefaces mimicked Blackletter calligraphy, and the construction of the letterforms was informed by the marks made by those tools: the angles, stresses, and contrast that occur naturally when using a brush or a pen.

Even when we take the most rational contemporary interpretation of something like a Didone, the points at which the stroke modulates from high to low contrast still mimic ancient penmanship in some way.¹

When we think of Humanist typefaces, we tend to think of serifs, but it’s completely possible for a sans serif to be regarded as Humanist, and even those not directly categorized as such may still incorporate Humanist elements into their designs. Whereas the original sans serifs (“grotesques”) were a deliberate attempt to move away from the more humanist serif types of the time, and this was taken further still by the geometric sans serifs such as Futura in the early part of the 20th century (and again in the 1970s), many contemporary sans serifs dial back the geometry in favor of more Humanist proportions, which gives the type a sense of warmth and friendliness.

15

It’s okay to just love type for no discernible reason

Is it evidence of the human hand that triggers our emotional response to type?

Before we start delving into some of the more technical considerations around type, and before we even start to consider actually using fonts, I want to interject with a message: if you’re excited about a typeface you see, and you just want to set some type with it, you should. We’ll explore choosing type for specific purposes later in the book, but I think it’s important to state that a typeface’s very existence can be enough to get you fired up about creating — and that’s a wonderful thing.

Sometimes a typeface just has that . . . je ne sais quoi . . . that thing that just hits you when you see it, and you think, “ah, I’ve just got to use that in a design!” Or better yet: you set some type with it, and your readers are overcome with that sense of something special. Not so much that they’re distracted from the reading experience, of course — that would mean the type has failed in its job, on fact. But just enough personality to gently elevate the content, like putting on a nice jacket that makes you feel fancy.

Although it’s hard to identify exactly what contributes to this feeling, I have a suspicion that contrast (the difference between the thicks and thins in a letterform’s strokes) plays a major role, along with modulation (how that contrast changes in the letterform). Exactly where that movement from thick to thin happens is dictated by the angle of stress. The visual style of early typefaces mimicked calligraphy and lettering, with modulated strokes (strokes that are thicker in some places than other places) that referenced the way a pen or brush might behave when more or less pressure is applied. And despite hundreds of years of type evolution, we still see evidence of this in many contemporary typeface designs, especially serifs. The angle of stress (also known as an axis, although that can be confused with an axis in variable fonts) forms a huge part of a typeface’s personality, and is often a direct reference to a particular tool and therefore historical period (see here). So again we have this ongoing connection to the human hand.

Whatever the reason, if you see a typeface you love, find a way to use it.

16

Type should be legible at the very least

There’s no point doing anything typographic if the words can’t be understood.

Legibility should be the most basic concern when it comes to type, right? You’d think so. And yet you might be surprised to discover just how illegible some very famous and successful typefaces can be.

Before we go there, let’s make sure we’ve got the term properly defined. Legibility is about how a reader can correctly identify a typeface’s glyphs as distinct characters, and therefore how well they can be identified as words once combined. A good legibility test when analyzing type is to look at the characters “1lI” — is it obvious which one is a numeral “1”, an uppercase “I”, and a lowercase “l”? And how about “0Oo” — is the difference between a numeral “0”, uppercase “O”, and lowercase “o” obvious enough? There are many characters that at first glance appear to be mirrored — “q” and “p”, “d” and “b”, etc. — and a typeface that takes legibility seriously will often adjust the letterforms’ designs to make sure that they’re visually unique, which can be a huge aid for readers with visual or cognitive challenges.

Beyond the design of the typeface, legibility can be affected by the typographic changes we make. Font size is perhaps the most obvious one: if the text is too small, it won’t be legible — or at least not easily legible — but simply increasing the font size won’t necessarily result in more legible text if it’s hindered by the design of the typeface itself. One of the most common mistakes novice (and perhaps not-so-novice) typographers make is to use fonts intended for display sizes for body text. Switching to a body optical size might help, but some typefaces are just only ever intended for large sizes.

To aid legibility when we’re forced to work with a brand typeface that isn’t ideal, we can adjust our tracking, as well as our leading, or measure — parameters we’d employ whatever the font, of course, but ones that can especially useful when limited to a difficult typeface.

If at this point you’re either wondering why I haven’t mentioned readability, or how that’s any different from legibility, please do turn the page. Spoiler alert: although legibility does indeed affect readability, legibility is not the same as readability.

By the way, it’s totally okay to design an illegible logotype for a Black Metal band. In fact, the less legible, the better.

17

Making text readable is what typography is all about

It’s perfectly possible to make legible type unreadable with bad typography.

How readable is our text? That’s the primary question we should be asking ourselves as typographers. And if you feel like that’s too obvious to even state in this book, then please allow me to elaborate.

Readability is often confused with legibility, and understandably so. Both are concerned with how well readers understand text. But although readability is affected by legibility, there are many factors at play. Even if we’re working with a legible typeface, that doesn’t mean that the text it’s set in will be readable. That might be because of a typographic decision we’ve made, or it might simply be that the text is, well, boring. Think about legal terms and end user licenses and privacy policies — how readable do you find them? Probably not very. And then there are other factors out of our immediate control, such as visual or cognitive challenges the reader might face, or whether they’re interested in the subject.

So we’re off the hook? Sadly not. Apart from those parameters we can’t adjust, we can use our typographic know-how to make legible type more readable — just turn to any page in this book. But adjusting tracking, line height, and measure will always be a good start. Because don’t forget that it’s totally possible to make perfectly legible type unreadable, such as when the leading is so tight that there are clashes between the extenders. Or when all caps (which can’t be processed as easily due to their indistinct letter shapes) are used too generously.

For more information, see “How type influences readability” by Hilary Palmen.¹

18

Optical size lets us set size-optimized type

The design of letterforms can and should adjust according to the size they’re set at.

In the days of metal type and wood type, changing font size would mean using a distinctly different piece of type. Therefore a different size meant there could be a slight difference in the design of the type. To be more accurate, there should be a difference in the design: generally, more contrast between the thicks and thins for type intended for larger sizes, more open tracking for type intended for small sizes, and numerous tweaks to letterforms’ details for the sizes in between.

Once phototypesetting and then digital fonts came along, the notion of optical size went away — it was all too easy for the designer to simply resize the type at their whim, no longer with a need to physically locate and set separate blocks of type for each change in font size. But this new-found freedom meant that all of those size-specific adjustments disappeared, and with them, all of the subtle nuances that make type work better or worse at different sizes.

Thankfully, in recent years, type designers started creating unique fonts to cater for different optical sizes again, and the appetite of users has also increased. Once more, people started buying and using Display / Subhead / Text / Caption variants of their favorite fonts. When variable fonts became mainstream, many type designers started including an axis for optical size — one deemed so important, that it even made the cut as one of the five “registered” variable axes in CSS. At the same time, browsers have implemented a new part of the CSS spec that allows optical size be set automatically if the font contains a variable optical size axis that follows the font size:

font-optical-sizing: auto;

However, it’s easy to use our own custom optical size settings, too:

font-variation-settings: ‘opsz’ 48;

For more on this, see the chapters on variable fonts and the inheritance problem. For a detailed look into the history and benefits of optical sizes, be sure to read Shoko Mugikura and Tim Ahrens’s book Size-Specific Adjustments to Type Designs.¹

19

Try out the two-lines-of-type test

Working with just two words, over two lines, can teach you a lot about typography.

There’s a little exercise I like to run in my workshops that I call “the-two-lines-of-type test”. Not the most inventive of names, I know.

The exercise is based around creating a fictional logotype, with the only brief being that the two-word name of the brand has to be set on two different lines, both lines need to use the same typeface, and both lines need to be center aligned. From here, though, we have a load of options open to us, and it’s a great way of quickly exploring many aspects of typography, and understanding how one decision influences the next.

Try it out for yourself! Type “Stocks Industries” (or a much more original fictional brand name of your choosing) on two different lines. With this nearly blank canvas, we now have a few questions to ask ourselves:

• Are both words set at the same font size?
• How much vertical space should there be between both lines?
• Should they be justified? If so, in what way can we justify two lines of a different length? Font size? Weight? Tracking? Width?
• If not, what happens when one of the words is bigger?
• Should the bigger word use a lighter weight to balance out the overall color of the type?
• What if one or both of the words are set in all caps?
• Do any of these then require further adjustments to the line height?

The options are surprisingly plentiful, and they’re made even more so if you’ve chosen a typeface with multiple weights and/or widths. And if you’re using a variable font, there are effectively an infinite number of possibilities. If you tried to justify using different widths but they didn’t quite fit the space, and additional changes such as tracking were required, a variable width will probably be able to achieve the goal on its own. Have a look at a few potential solutions (opposite).

20

Adjusting line height is the easiest improvement to make

Avoid those clashes, but don’t get too generous with your leading.

Almost all typographic tweaks are related to spacing, and as a measure of vertical spacing, line height is perhaps one of the easiest improvements we can make. Most users’ first experience of line height is in setting the “line spacing” options in the humble word processor, which often provides values of 1.15, 1.5, and 2. (These are effectively 115%, 150%, and 200% of the font size.) Generally speaking, a line height value of 110% and 150% of the font size will result in a comfortable reading experience. But what actually determines a comfortable reading experience when we talk about line height?

Our first consideration should be to avoid clashes between letterforms on one line with those on the next, ensuring that descenders on the line above don’t collide with ascenders on the line beneath. Diacritics (or accent marks) usually sit above ascenders — especially so with uppercase characters — and below descenders, so we should avoid clashes with them, too.

However, being overly generous with our line height runs the risk of losing the reader as they move their eyes from the end of one line down to the beginning of the next, especially when we have a wider measure (line length). In fact, line height values should ideally be set with an awareness of the measure; designing responsively for screens, we should keep our measure narrow and line height open for mobile viewports, then tighten our line height as the measure grows to wider viewports such as tablet and desktop screens.

When working with uppercase text, line height can be considerably tighter, perhaps even straying into negative values when working with display type (i.e., where it will be seen at large sizes).

In the days of metal type, setting type meant inserting literal strips of lead between rows of type to control the vertical spacing between each line, and therefore the act of adjusting line height became known as leading. Line height in digital typesetting is not quite the same as “real” leading, however, mainly due to the way in which it’s calculated, and we explore the inconsistencies in these calculations across multiple platforms and environments on this page.

21

Don’t underestimate the power of measure

Unruly lines make reading so much harder than it needs to be, so keep them in check.

As is the case with line height, adjusting your line length — known as measure — is one of the easiest ways to improve the readability of your text. Narrow lines of text can be disruptive to the reading experience because they cause the reader’s eyes to jump to a new line too often; conversely, wide lines of text make it harder for the reader’s eyes to find the start of the next line. This was one of the main issues when responsive web design first became adopted: designers started letting their content flex to the container’s width, without any thought on what happened when that container became too wide.

In The Elements of Typographic Style,¹ Robert Bringhurst says that “anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size,” but of course this varies depending on the typeface used. Extended widths will need fewer characters per line; condensed widths will need more. And what about the tracking values, or the general style of the type? As with many things, this is just a guide. Other reliable sources, such as Google’s Material Design guidelines,² recommend approximately 40 to 60 characters per line. The wisest thing is to give it a try and see what works.

If you’re finding this hard to eyeball, a useful trick (suggested by Trent Walton back in 2012³) is to place asterisks before the 45th character and after the 75th character (referencing Bringhurst’s recommendation) and make an adjustment (like increasing the font size or shrinking the text box) any time both asterisks appear on the same line. This can be useful as you try to work out the optimum measure in responsive environments.

Interestingly, measure is not one of those things you can just set and forget. As your line height changes, so too should your measure. Longer lines — that is, wider measures — should be complemented by more generous (i.e., taller) line heights. This is worth keeping in mind if you’re working in a responsive environment, where you may need to adjust both in tandem.

In CSS, we can define an element’s width using the “ch” unit. 1ch is equivalent to the width of a “0” character at the current font size, so something like 60ch is usually a fairly safe width to set, but be aware of how that affects alignment.

22

A little tracking goes a long way

Optimize the spacing between letters based on their size and context.

Type designers have the freedom to space glyphs as they please, resulting in varying degrees of tightness or openness. One of the reasons most versions of Helvetica are unsuitable for long form text is that the type is spaced quite tightly by default. However, as end users of fonts, we typographers hold the power to make additional adjustments for an optimal reading experience. Tracking, or letter-spacing in CSS, is one of those powers.

In certain cases, opening up the tracking (i.e., assigning a higher value) can drastically improve readability. This is certainly true with very small text (in this way, we’re partly mimicking a small optical size) and it’s usually beneficial to positively track uppercase text if it’s rendered at a small size. But equally it can be a purely aesthetic choice — maybe it just looks good in a logo, or an advert, or on a button. As with anything in type, just how good the tracking looks will of course depend on the typeface, the length of the word, and the size of the font, amongst other factors.

Another aesthetic choice made by many designers is to negatively track type, although this should be approached with caution. Use very small negative values if you use them at all. Each font is different, but generally speaking, very tight tracking really only works in logos or display type.

Interestingly, tracking can play its part in optically optimizing text, too. For instance, in order for tracking to feel even across large type and small type, we can afford to track the large type much tighter. Technically the values will be different, but importantly, they’ll feel the same. Michan Wichary, in Typography Is Impossible,¹ explains that “letter spacing gets tighter much faster than the font size gets bigger.”

23

Create meaningful emphasis in your text

Be intentional with your use of bolds and italics.

One of the first typographic changes the average user will make is to embolden or italicize a word in their text to create emphasis. They might even set a word or two in all caps, or use an underline. Ah, the power of the word processor. What’s important to remember is that any obvious stylistic change to a word (or words) in text, whether as short as a title or as long as a book, makes the reader think. Specifically, it makes them register the change and assign meaning to it. The more obvious you can make that meaning, the less the reader will be wondering why something has changed. In other words, we aim to keep their cognitive dissonance to a minimum.

The easiest way to achieve this is to be consistent. It’s generally accepted that when reading text online or on a screen, an underline signifies a link. I know I’ve been caught trying to tap or click on an underlined word that doesn’t go anywhere — it’s so frustrating. In any medium, save all-caps text for acronyms, lest you make the reader feel like you’re shouting at them.

Excluding an actual change of typeface or something slightly unusual like a change in font size, that leaves just emboldening or italicizing as our main tools of emphasis. Technically, there’s nothing to say that you can’t draw attention to a word or phrase by applying either change — but your readers will be rewarded if you’re consistent. Be sure to reference any style guide you might be following, for sure, as there are some common uses of italic type — book titles, film titles, etc. — that are rarely substituted for bolds.

Also remember that just because something’s italicized doesn’t necessarily mean it’s emphasized; perhaps the typographic system dictates that all pull quotes are italicized in their entirety or maybe even headings. This could be a purely aesthetic choice.

And for whenever you do decide to use a bold weight, remember that you’re not actually tied to using the actual weight called “Bold.” If your typeface has a range of weights (and/or is a variable font), you’re not beholden to what’s commonly assigned a value of 700. Maybe try a 900 (usually a “Black” or “Ultra”) weight. In the interest of making your emphasis look obviously distinct from the surrounding text, it can pay to explore weights beyond the obvious.

24

You’re going to need italics

An italic style is required for almost all typesetting, and not just for emphasis.

Ah, the humble italic. Use it to emphasize a word (or words) in your body text. Use it for book titles or quotations, if that’s inline with your style guide. Use it for entire sections of text, like pull quotes, if it works. Use it for single words or characters in a logo (like “of” or “&”) if that adds a little visual flair.

The italic style (along with bold weight) is perhaps the very first typographic change many people will ever encounter — it offers instant differentiation from the surrounding text. However, unlike the use of an entirely different typeface, the italic shares a common foundation with its upright (or regular) counterpart, and therefore an underlying sense of harmony.

The first italics were based on cursive forms — that is, closer to handwriting — and looked notably different from the uprights. For italics in use today, some look very distinct from the regulars; others change their form only slightly. Italics are almost always slanted (again, like handwriting), but slanting alone doesn’t produce an italic — a slanted version of the upright is an oblique (commonly found in Grotesque faces), and even then, the letterforms are still tweaked by the type designer to account for the altered angle, and to stop some parts becoming too heavy or unbalanced. When this isn’t done — in other words, when upright glyphs are artificially slanted by software, we call this a faux italic. And this should be avoided at all costs. See my dedicated rant on this page.

Evaluating a typeface’s italic style is an important exercise when choosing type. Depending on the project, an italic that appears quite distinct from the upright form might add some much-needed flair to the text . . . or it could be way too distracting, and perhaps an oblique is needed instead. Of course, the italic or oblique should always be distinct enough from the main text (see “Balance distinction & harmony”) — otherwise what’s the point in using them?

You know what’s crazy? Not all fonts have italics! And that’s fine. But it’s worth checking if you’re going to be setting anything other than short headings.

25

Using weight is more than just making something bold

Look for as many weights as possible. You never know when they might come in handy.

Hitting that “B” button in a word-processing app might be the closest many people come to typography, and that simple act helps introduce even the novice to the concept of creating contrast within some text, using a Bold weight to create emphasis and perhaps some hierarchy. But for the typographer, there’s so much more to explore. Bold is just one of several (effectively limitless) weights to choose from. And exactly how lighter or heavier any weight is in relation to another is completely arbitrary and varies from typeface to typeface. A common mistake can be to select a weight that isn’t different enough from the body text. Just like pairing type, it’s all about balancing distinction and harmony — see here.

Some typefaces come with only one weight; some offer fonts from Hairline or Thin at the lightest end, to Black or Ultra at the heaviest; others come in the form of a variable font, where a slider for the weight axis allows the end user to set type at completely customized weight values, as well as the traditional instances. Perhaps one of the most interesting things about variable fonts with a weight axis is that the end user can decide exactly how much bolder a Bold actually is.

It’s worth remembering that using a heavier weight isn’t the only way to create emphasis or contrast — we could use use an italic style, small caps, or perhaps even a different typeface. And there’s absolutely no requirement for headings to use heavier weights, either. If set at an appropriately larger font size, a heading could even be set in a Thin weight.

26

Often, the more styles, the better

It negates the need to look for a secondary typeface.

The vast majority of typefaces come in several styles, in keeping with the idea that, when it comes to typography, you rarely need to be stuck with the default options. Different styles are usually contained in their own separate font files, although can be combined in the case of variable fonts. While weight (and arguably even width) could sit under the umbrella of what’s deemed a “style,” I personally find it more useful to keep them under their own banner, and use style as a way of referring to uprights, italics (or obliques), and small caps.

Uprights (also often called romans) are the default form for most typefaces. Italics and obliques exist to offer ways of emphasizing certain parts of the text from the upright forms, or to provide variation for aesthetic purposes. This is explored at length in “You’re going to need italics”. Small caps are uppercase glyphs that have been designed to sit neatly alongside lowercase type. This allows acronyms like UNESCO to sit in body copy without shouting at the reader (see here) — a bit like proportional oldstyle figures (see here).

In CSS, font-style is used to turn an italic or oblique style on and off. In variable fonts, it’s possible for type designers to use a slant axis (slnt) to let users control exactly how slanted an oblique appears, and these can even have both positive and negative values, allowing type to slant backwards as well as forwards. Some fonts have controls to adjust the cursive-like styling usually found in italics independently from the specific control over the angle of slant. This is can be found in Stephen Nixon’s Recursive typeface.¹

While usually grouped with OpenType features, stylistic sets are — as the name implies — variations on the default type styles, and can be useful to employ when seeking more beyond the default options made available to us. See here for more info.

27

Avoid faux (synthesized) styles

They’re mistakes, and you don’t want them in your designs. Ever.

Okay, a faux (or fake or synthesized or pseudo) italic never killed anyone. Let’s make sure the skeptics are happy. But a faux italic will certainly make you or your client look like you don’t care about doing things properly — and that’s rarely a message clients want to send.

Faux italics, faux bolds, or faux small caps occur when software tries to emulate a certain style (or weight) in lieu of the correct versions. This can happen for a variety of reasons. The most common reason is when we only have the regular font installed on a machine (or served from a website) and the application (or browser) attempts to simulate an italic for any text that should be italicized. This is especially rampant on the web, where CMS-controlled websites allow any editor to hit the big “I” button and expect (quite rightly) the selected text to be italicized.

The second and often overlooked reason is that an italic might simply not exist! As in: the type designer never drew (or released) an italic style. Nothing can solve this situation, and it’s always important to check that a true italic exists before making the decision to use a certain typeface on a popular website.

So what’s so bad about a faux italic? Well, true italics are always unique drawings in themselves that look notably different from their upright counterparts — especially so with serif designs. Note how the letterforms of most serifs’ lowercase “a” and “g” characters look radically different when italicized. This is why an artificial slant doesn’t even begin to accurately simulate a true italic design. And while it’s true that the slanted angle is indeed the defining feature of most italics — and is certainly the case with obliques, where the letterforms’ design remains largely unchanged — there are still subtle differences made to the strokes to compensate for the altered angle.

Faux bolds are slightly harder to spot because designs differ very little between small weights changes. However, because software adds an outer stroke to simulate a heavier weight, faux bolds usually look bloated, with spacing between characters too small.

Faux small caps are achieved by shrinking regular uppercase glyphs down to the size of the lowercase, which results in those capitals appearing notably thinner than intended. And that looks bad.

28

Use true obliques

Unlike italics, obliques are slanted versions of the upright forms — but that slant is still optically adjusted by the type designer.

I’m always keen to point out that proper italics are often pretty unique from their upright cousins — and that’s usually how to spot faux italics (see my rant on this page) — but in the case of obliques, they’re effectively slanted versions of the uprights. Not that they should be regarded as inferior in any way, of course! Obliques, rather than italics, are very often encountered in sans serif typefaces. However, it’s important to remember that true obliques are still created by the type designer, rather than artificially slanted by software, so the distortions to the letterforms caused by the slanting are optically corrected in true obliques, with the type designer adjusting the shape of the letterforms to ensure correct contrast is maintained when slanted.

Just like italics, obliques need not be reserved purely for emphasis, and can be used for aesthetic reasons, potentially communicating a sense of action or urgency, such as in a sports brand or poster for a car chase film. And, like italics, obliques are controlled in css by the font-style property.

In a variable font with a slant (slnt) axis, adjusting that slant means transitioning from an upright to an oblique, and all of the stages in between. This is notably different to an italic (ital) axis, where the italic is boolean (i.e., either off or on) and the act of switching to an italic usually means switching between two different font files. Note that it’s rare to have a slant axis present alongside an italic axis, but in theory there’s nothing to stop both being used.

29

Use typefaces with multiple widths

The freedom to occupy more horizontal space opens up so many more opportunities.

Width is a bit like the slightly smarter, older cousin of weight. Fonts with multiple widths (or variable fonts with a width axis) are not quite as common as those with multiple weights, but, when available, putting them to use for our typographic needs can be instantly rewarding. Unlike with weight, the stems of the letterforms themselves remain consistent — it’s the overall shape of the letterform that grows or shrinks as we adjust width.

Depending on how much differentiation there is between the narrowest and widest extremes, width can be a useful and subtle (or not so subtle) tool. For instance, in order to fit more words per line into a website’s article heading, using a Condensed width can really make a difference to the number of characters per line, therefore having the knock-on benefit of making the heading take up fewer lines. Condensed widths need not just be reserved for headings, either — an ever so slightly condensed font (and if we’re using the width axis of a variable font, we can get really specific) could be a useful trick to employ if we’re setting text in very narrow columns, perhaps like those in captions found in a book’s margin.

Width can also serve as a powerful means of painting with a broader typographic palette, such as when combining an Extra Wide with an Extra Condensed in a branding project to avoid pairing different typefaces.

30

Understand masters & interpolation

Type designers don’t have to draw every possible weight, width, or style.

When contemporary typefaces are designed, there’s no need for the type designer to manually create every single possible weight, width, style, optical size, etc. Instead, the type designer creates masters for the more extreme ends of the scale and the software interpolates between the masters to create the weights, widths, styles, optical sizes, etc. in between. These can then be exported as their own individual fonts, or named instances within a variable font, ready for the end user to control. Here, the end user can, in theory, create a potentially unlimited number of variants on the fly by manipulating the variable axes. And the more axes, the more potential outcomes, as the axes are combined.

Depending on the amount of variation required, it’s usually sensible to create additional masters for in-between stages where the automatic process of interpolation doesn’t quite cut it. These offer additional guides to ensure a smoother transition between the outlines of the glyphs.

Font-making software is also intelligent enough to create new instances from seemingly different masters. For instance, a Light master and a Bold master (for weights) could be combined with a Wide Light master (for width) to create a Wide Bold variant — see the bottom illustration, opposite. This process is called vector addition.

31

Employ multiplexed typefaces for interaction

Change the weight without affecting the horizontal space used by the type.

When you switch between different weights of a font, more often than not, you’ll notice that the width changes, too: heavier weights, with their thicker strokes, tend to take up more horizontal space, and the space around the letterforms usually needs to grow as well. However, multiplexed typefaces avoid this width change, so that a word set in a light weight will take up the exact same horizontal space as a word set in a heavy weight.

In many ways, the principle is related to monospaced typefaces, where every glyph has the exact same width, and tabular numerals, where every figure has the same width. However, unlike those, it’s not every glyph that shares one width: it’s every weight of an individual character that shares a width.

Multiplexed typefaces can be useful to employ in scenarios where different weights are required (perhaps for emphasis) but where positioning or alignment cannot be changed. An example might be in a table of text-based data where one row needs emphasizing in a heavier weight, or in an app where a button might switch to a heavier weight when hovered over or made active. For this latter reason in particular, multiplexed typefaces have gained popularity in recent years with user interface designers. Compare the top (nonmultiplexed) example with the bottom (multiplexed) example on the page opposite.

32

Punctuation & quotation marks aren’t just for copyeditors

At the very least, ensure that curly quotation marks are turned on by default.

Punctuation comes in many forms, and walks that fine gray line between something a typographer should handle and something a copywriter should handle. I’d argue that it’s a skill — no, responsibility — that should be shared by both. And, ideally, something that both are deeply passionate about upholding. It is, after all, up to us designers to make sure that the meaning of the text is conveyed in the most appropriate way, and that means using the correct symbols.¹

One of the main punctuation stumbling blocks comes in the form of the humble quotation mark and its related symbols, the apostrophe and prime. I say “related” as they’re only similar in their visual appearance, not their meaning — and ay, there’s the rub!

Straight double quotation marks and straight single quotation marks (the latter appearing identical to a straight apostrophe) are a hangover from the age of typewriters, where keyboard space was at a premium and, unfortunately, litter contemporary texts. When available, writing and design apps (even your smartphone’s messaging app, probably) will use the correct quotation marks — known as “curly quotation marks” or “typographer’s quotation marks” — but these can’t be relied upon, especially if we’re pasting in text from elsewhere.

Different languages and regions use different symbols and/or positioning for their quotation marks² — be sure to call in a regional exert to check your work!

• In German and Dutch, most non-typographers use „this“.
• German and Austrian typographers prefer guillemets, which — according to the style guide — can be used in »this« orientation or «this» one. In Switzerland, the only correct orientation is «this» one.
• In French, guillemets are used, but are accompanied by a hair space or a thin space.
• Single and double options exist in most languages that use the Latin script. American English favors double quotation marks, with singles used for a quote-within-a-quote, and the reverse is true in British English.

Single and double primes — which are usually designed to be slightly slanted — are used to denote measurements of time and distance, but just like quotation marks and apostrophes, often get substituted with their incorrect straight cousins. To be fair, though, they’re actually absent from a lot of font files.

When working with a quotation block that appears visually separate from the rest — or, if we’re being really diligent, any quotation that starts a paragraph — one of the many typographic improvements we can make is to use hanging punctuation: the act of moving the opening quotation mark, just outside of the text box so that the left margin appears optically aligned (see here). Yet another one to file under the banner of breaking the rules or optical trickery.

33

Differentiate between logo, logotype, and logomark

What part are we referring to while we’re designing a brand?

Let’s be honest: we’ve all been guilty of saying “logo“ when technically we mean “logotype,” haven’t we? And who hasn’t interchanged “logomark” and “wordmark” on occasion? We’re sinners, all of us. But forgiveness is on its way: as type is such an integral part of most logos — often, the only part — I think it’s probably worth being clear on the proper terminology. So let’s just get this sorted, shall we?

Erik Spiekermann is well-known for saying that if you have a typeface and a color, then you have a brand, and for many, this is indeed enough. However, for a brand to stand out from the competition, the addition of some kind of mark or symbol is a way of further differentiating it. Therefore, most logos are created by combining different elements — type and graphics — in a unique and (hopefully) recognizable way.

Depending on the brand and the context the logo sits within, the elements that constitute a logo can also exist separately. For example, a logomark (a graphic element, symbol, or icon that represents the brand) can be used as a stand-alone element on social media avatars or other promotional materials. A logotype (which is also known as a wordmark if it’s made up of just one word) is a specific lockup of the brand’s name and can be used when the logomark is absent.

Further differentiation to the logotype can be achieved by some sort of customization: perhaps a unique setting of a typeface (more open tracking, or perhaps a custom kern?), an altered version that actually changes the letterforms’ outlines, or a completely bespoke piece of lettering. And if you commission a bespoke typeface for your brand, well, first of all, hats off to you, because I really believe more brands should do that, but secondly, yes, that’s a great way of helping you to stand out.

34

Licensing is important, actually

You can even let the license help you narrow down your typeface choices.

Font licensing. Boring, right? I mean, why would we — creative people who love to make amazing things with type — want to read some dull document intended for lawyers? Just take me to the fonts!

The thing is, without licensing, we don’t have type. The whole industry wouldn’t exist, including — believe it or not — free fonts. From a total freebie to the most expensive fee a multinational pays to have all of its staff using a particular typeface, a license is attached to every font we use, whether we take the time to understand that license or not.

At a very simple level, no one should steal fonts, and the license is designed to protect against that. Yes, of course we all start out that way. But any font that’s sold should be paid for. And just because our employer paid for you to use it at work doesn’t mean we can use it for our freelance branding projects. You could show it to your client as an option, and you could use the font files already on your device for some mockups, but if your client goes for that option, you or they should then purchase the appropriate license for that typeface.

Licenses for paid-for fonts are usually priced according to three factors: the first is the number of weights and styles included in the price (often with a significant discount if you buy an entire family or some sort of multi-style bundle); the second, the media (usually desktop, web, and app/ebook); thirdly, the quantity of end users. This is almost always bracketed into actual numbers of people for desktop licenses, monthly page views for web licenses, and downloads for app/ebook licenses (see here). Generally, variable fonts are priced the same as a whole family.

Understandably, a lot of people gravitate towards free, open-source fonts — most of which use the SIL Open Font License¹ — like those found on Google Fonts or GitHub. But even those have an associated license, and there are different usage restrictions depending the type of license. I’m not going to cover all those intricacies here — it’s just important to understand that “free” doesn’t necessarily mean you can do anything with it.

35

Only ever use a well-spaced font

Beautiful letterforms mean nothing if the font’s not spaced properly.

Spacing in typography is, well, kind of everything. I mean, maybe not everything, but pretty much.

The space between individual glyphs (tracking and kerning), the space between lines (leading), the space taken up by a line of text (measure), the space inside the characters (counters), the space taken up by letterforms in different variants (weight and width) . . . the list goes on. The vast majority of the changes we make while typesetting are changes to space. Substituting glyphs — whether that’s choosing a new typeface, selecting a different weight or perhaps using some sort of alternate glyph via an OpenType feature — isn’t immediately about spacing, but even then, those changes affect space. A different typeface will take up a different amount of space, both in terms of its width and potentially where it sits vertically (see “At the heart of it all: the em square”, to explore some of the complexities this creates), most weights occupy different horizontal spaces, and alternate glyphs occupy different spaces, too. In the case of tabular versus proportional numerals, space is very much the reason for using one over another.

And then there’s the act of spacing in terms of type design: the manipulation by the type designer of the space either side of the letterform, known as the sidebearings. These are adjusted on a glyph-by-glyph basis so that the overall distance between characters feels just right. This is different from the act of kerning a font, where the type designer creates exceptions to the rule, manipulating spaces between specific combinations of glyphs (such as “VA”). The combination of this internal spacing, kerning data, and attention paid to the vertical metrics constitute what we commonly refer to as a “well-spaced font.” Veronika Burian and José Scaglione, in their article How to spot fonts worth your money,¹ say that “tuning the space inside and in between letters is as important as harmonising the black enclosing the white. They both exist in a permanent state of mutual dependency.”

36

Choose a typeface that suits the purpose of the project

Part one in a four-step process for choosing a typeface and its fonts.

I said in this book’s introduction that choosing type isn’t technically part of typography. In fact, you don’t need to choose type at all to practice good typography, because there’s plenty to do with taking an existing typeface choice and optimizing its font size, leading, measure, or any other parameter discussed in these pages But let’s face it, it’s not like we’re not going to talk about choosing type in a book called Universal Principles of Typography, is it? And because it needs addressing thoroughly, we’ve got four principles dedicated to choosing type.

I’ve established a four-step system, which is also available on GitHub,¹ that can be followed any time we need to choose a new typeface, and the first on that list is, “Choose a typeface that suits the purpose of the project.”

There are plenty of examples of typefaces that don’t suit the purpose they’re intended for. Consider a press release announcing a huge scientific breakthrough. You wouldn’t set it in Comic Sans, would you?!? (CERN did exactly that, by the way.²) But a poster stuck on the school gates to advertise an extra-curricular sports class? Sure, go for it.

You don’t have to know anything about type to have an emotional response to it. As typographers, it's important for us to be aware of what that emotional response could be — and to consider how that might change in different contexts or cultures. And, because all of us — design savvy or not — have emotional responses to type, it’s tempting to let emotions dictate our type choices. But emotional responses should be just one of many considerations.

Determining whether or not a typeface suits the purpose of the project also means making sure we’re not repurposing an elaborate typeface full of swashes — which might look great in a logo — for body copy. Emotionally, it might resonate correctly, but it’s going to make for a difficult reading experience. Realistically, we don’t usually know every possible context the type will be used in, but making some high-level decisions about its overall suitability can go a long way.

37

Choose a typeface with a comprehensive design

Part two in a four-step process for choosing a typeface and its fonts.

The next step in our four-part type-choosing process is to select a typeface with a comprehensive design. This is removed from the emotional considerations we spoke about in the previous principle; now, we’re starting to make more detailed judgements about a typeface’s technical suitability. However, we’re not evaluating the actual font file yet. First, we need to evaluate the design of the type itself.

A very common mistake many people make is to choose a typeface that doesn’t have decent language support; in other words, it’s missing characters used in other languages. When these missing characters are substituted and rendered in a different font, it can be very jarring. And even if it’s not immediately obvious, the slight change in, say, weight and x-height, causes a little cognitive dissonance for the reader.

All type should be legible, but some typefaces are certainly more legible than others. Some are guilty of containing characters that are potentially indistinguishable from each other, such as the numeral “1”, uppercase “I”, and lowercase “l”. For more on this, see here.

Comprehensively designed typefaces should include at least the basic weights and styles of Regular, Italic, Bold, and Bold Italic. It’s possible you might only need a typeface for a logo, and then if it’s only got one weight, that might be fine, but it’s worth thinking about its future extensibility — could that then be reliably used for the brand as a whole?

With the basics covered, it’s then time so start looking at what additional features have been considered by the type designer. Are there any alternate glyphs that open up more possibilities to us by allowing us to substitute the defaults? Are there additional weights and styles (or grades) beyond the usual delineations to offer more contrast across multiple scenarios and contexts? And how about additional widths, to make our type even more adaptable to the constraints and possibilities of our project? Optical sizes? These thoughtful considerations from the type designer about how the type might be optimized for different font sizes should absolutely be employed if they exist, if for no other reason than they make life a little more fun for us type nerds.

38

Choose font files that are reliable

Part three in a four-step process for choosing a typeface and its fonts.

Having settled on a typeface and feeling completely happy with its comprehensive design, we now need to turn our attention to the actual font files we’ll be using because not all font files are created equally.

There can be a few reasons the font files don’t necessarily have the same design. Older versions of the font might omit certain details or use previous versions of the design that the type designer has since improved upon. It could be that a font file contains a subset of the total glyphs available, perhaps if it’s a “lite” version of a font that also has a more expensive “pro” variant. This can be the case if a font is being served via a web font-delivery service, too. A font from Adobe Fonts, or Google Fonts, or from a foundry’s website aren’t necessarily all the same. It always pays to test your fonts to ensure that the features you need — the things that helped you choose this typeface in the first place — are present in the font file.

Any professionally created font should be well-spaced. In other words, the type designer should’ve adjusted the interior and exterior space around each glyph to optimize for legibility, as well as information (kerning data) to dictate the space between two or more specific glyphs. But it’s also possible that this metadata might have been stripped from a font file. This is rare and probably only occurs in pirated fonts or imitations, but it’s certainly possible that kerning data might need to be turned on specifically, depending on the environment. Some non-professional design apps — maybe one your client could be using — won’t necessarily have kerning turned on by default.

We’ve talked a lot about the potential drawbacks of some font files, so let’s also consider a potential benefit that might’ve not been immediately obvious: with an increasing number of typefaces being made available as variable fonts, it could be that the additional weights, styles, widths, optical sizes, etc. exist as axes within a newer, variable version. Then we’ve got even more options at our disposal!

39

Choose font files that are usable in the situation(s) required

Part four of the four-step process for choosing a typeface and its fonts.

Having followed the first three steps of our four-step process, you could be forgiven for wondering how it’d be possible to get this far and yet somehow find that the fonts aren’t usable, but it can happen. Before we give our type choice the thumbs up, there are a couple of final checks.

The first is to make sure that we have — or our client has — the appropriate font license for the desired use. If you have a desktop license to use the font in design work, you’ll probably need an additional license (and different font files, too) to use it in a web project. If the website has a large amount of traffic, you’ll likely need a higher-tier license to account for that. Some licenses cost considerably more if the font is to be embedded in an app. Whether the fonts are totally free or hugely expensive, we should always pay attention to the license, and we should always try to educate our clients about font licensing, too. In many scenarios, it’s the client who could be paying for the license.

The second thing to consider is applicable when we’re pairing typefaces. We could have a beautifully designed typeface, containing all of the comprehensive details we’ve said are required, and available in reliable font files, but it could still be unsuitable when it comes to how it works alongside a primary typeface. Together, do they successfully strike the balance between distinction and harmony (see here)? If not — perhaps the secondary typeface is different, but not different enough from the primary choice — then nothing else matters. For this reason, it’s worth considering this pairing scenario very early on in the type selection process; I’m only putting it here in the final step because it doesn’t need considering if we’re only thinking about our primary choice.

40

Keep things in the family

A shared skeleton and similar proportions take the guesswork out of pairing.

Type families are great. You know what you’re getting with a family. Each member of the family has a shared skeletal structure (common ground that makes them interact well together). I probably don’t need to use the “type families are like human families” analogy here, do I? You’ve probably heard that many times before. Besides, you’re never going to get a semirelated monospaced script version of a typeface spouting questionable political opinions at seasonal family get-togethers,are you?

What actually constitutes a family or superfamily is somewhat open to interpretation by different foundries and distributors. Is a serif and sans enough to call a family? When does a family become a superfamily? Can you call different optical sizes a family? Does adding a monospaced version of a typeface define it as a distinct family member? Are any — or all — of these considerations moot in the age of variable fonts, anyway, where you can potentially traverse the entire spectrum of a superfamily’s various traits with the gentle nudge of a slider?

I don’t spend too much of my time concerning myself with these arbitrary groupings or non-groupings, but instead continue to espouse the benefits of working with type families whenever possible, especially as this is one of those cases where “less is more” really does not apply. The more members of a family you’ve got to work with — Serif! Sans! Slab! Script! Mono! — the less need you have to employ a second family at all.

The two easiest hacks when it comes to type pairing are pair typefaces from the same family, and pair typefaces by the same designer or foundry. The interesting thing about that first hack is that you’re also getting the benefits of the second one: beyond the skeletal structure, you’re also getting the same ways of drawing type and building fonts, and that just makes life so much easier.

41

Make life easier and use a superfamily

With a superfamily at your disposal, there’s rarely a need for a secondary family at all.

You know what’s better than a family? A superfamily! Because type pairing can be kind of tricky, if you’ve got a load of extra options at your disposal, why not pick one of them instead?

A superfamily is a collection of typefaces that all share the same skeletal structure, proportions, and motifs. As mentioned in the previous chapter, the definition of exactly what a superfamily is and isn’t varies, and can even just be a collection of different weights and widths, but generally superfamilies tend to be larger groupings of different typeface classifications, like a serif, sans serif, and slab serif. Perhaps a monospaced version or maybe a script variant! The specifics matter less than the overall concept: a superfamily allows you to explore many more options outside of your default styles, but with the added bonus that any other typeface from within the superfamily will just work. Consider it a quick win. And with some superfamilies being so robust, there’s certainly an argument for never introducing a second typeface into your typographic system. Consider the Breve superfamily, shown opposite.

In terms of font technicalities, glyphs in a superfamily likely share the same or similar vertical metrics, and therefore proportions such as x-height are very likely in the same position in the serif, sans, slab, etc. Even if the position of the x-height within the em square shifts according to optical size, that shift should, in theory, remain consistent throughout the superfamily.

It’s possible for a superfamily — traditionally, taking the form of several individual font files — to all be accessible via one variable font file, if the type designer assigns different aspects of the design to variable axes. For example, a “monospace” axis could be used to turn a standard sans into a monospaced version, such as in Recursive;¹ similarly, a “serif” axis could turn a sans into a serif by adding serif marks to the sans’ letterforms, such as in VZWO VARIANZ.²

42

Pair type only if you have to

It might be that you already have a type family that does everything you need.

Before we start talking about combining one or more typefaces, it’s worth remembering that we should always ask ourselves: do we actually need another typeface? With all of the great type out there, the temptation to use it all can be huge. But we have to remember that there are many options open to us.

Combining typefaces can be a difficult task, because it requires us to make all of the decisions we made to settle on a primary typeface and then apply them again for the secondary typeface, except with the added pressure of it needing to play nice with the first. In many circumstances, we might inherit an existing design and need to add another typeface without necessarily knowing the requirements that lead to that initial choice. But with the right framework, we can take the guesswork out of pairing type, and apply that any time we need to add a second — or third or fourth — typeface to our project.

And because this framework is hard to cover in one chapter, we’ve got four dedicated to the subject of pairing type!

In his book, On Web Typography,¹ Jason Santa Maria suggests we “choose typefaces that don’t compete too much with each other, but aren’t so similar as to be indistinguishable.” Finding this balance between distinction and harmony is a challenge throughout design as a whole (we explore this in detail in “Balance distinction & harmony”), but perhaps none more so than when pairing type. So this is where we’ll start: our secondary typeface needs to be significantly different from our primary typeface, and yet there needs to be a relationship between the two. This harmony will be felt subconsciously by the reader; it’s our job as typographers to make that transition between typefaces as smooth and as logical as possible.

43

Pair type that’s related

Fonts from the same designer often have a lot in common.

Let’s say that we’ve established the need for a secondary typeface to complement our primary one. Perhaps we need to change context, add another element of a brand’s personality, or account for missing features. Where do we start?

As we mentioned previously, we’ve got to balance distinction and harmony: this new typeface needs to look obviously different enough from the original choice, but also complement it. So a logical first step is to look at other members of the family, if they exist. If our primary typeface is a serif, we could look to see if it has a sans serif or slab serif companion. Perhaps even a monospaced or script variant.¹

If there are no other typefaces in the family, or perhaps no suitable ones — the biggest challenge is making sure there’s enough differentiation in the same family — then the next logical step is to look at other typefaces created by the same designer.

From a design point of view, there will be natural similarities — you could call it evidence of the same artist’s hand — and from a technical point of view, there will likely be similar production similarities, too — perhaps the letterforms’ positions sitting in the same place in the em square, or shared OpenType features being present. To a slightly lesser extent, some of the latter might also be true if the font is from the same foundry.

These are not hard-and-fast rules, of course, but jumping-off points when faced with the often overwhelming task of finding a secondary typeface.

44

Pair type using the font matrix

A method for analyzing typefaces that might reveal a hidden connection.

So far, we’ve looked at some general methods (here) and some more specific methods (here) for pairing type; now, let’s take a look at a method proposed by Indra Kupferschmid¹ that acts as a framework for pairing typefaces based on the various layers of a typeface’s construction.

The huge benefit of this method is that it requires no knowledge of historical type classifications or arbitrary genre definitions — you just look at what’s in front of you and analyze from there. Kupferschmid’s proposal revolves around breaking the letterforms’ construction into three separate layers:

1. Skeleton (form model)
2. Flesh (contrast and serifs)
3. Skin (finer differentiation)

The three form models that make up the first layer are dynamic (more penlike), rational (more mechanized), and geometric (more, well, geometric).

Moving onto the next layer, we look at the contrast (and the angle of stress that dictates the modulation of the stroke), and if serifs are present in the design or not.

The final layer looks at additional details that contribute to the type’s personality: the specific shape of the serifs, simulated textures, decorative elements, and so on.

With these three layers established, we’re ready to move onto the actual pairing. Kupferschmid and Schöndorfer suggest that combining typefaces from the same form model should make for a harmonious pairing (see B, opposite). Pairing typefaces that have different contrast and serifs should work well, too (see C, opposite). If we combine typefaces that have different form models but the same level of contrast and/or the same serifs, that won’t work, as there’s just not enough differentiation (see D, opposite).

It’s interesting to see this at work, because the font matrix shows us in a very literal way what balancing distinction and harmony actually looks like in a practical sense. But it’s also important to remember that not every typeface fits neatly into these groupings. As with all type pairing techniques described in this book, this is just a suggestion. Treat it as a set of guides rather than a set of rules.

45

Pair type that aligns

Side-by-side type might need some additional consideration to play nice.

A lot of the work in combining multiple typefaces — especially when the pairings are viewed side by side, or inline, such as in the title above — essentially means navigating the fonts’ internal metrics. Put simply, a metric such as x-height in typeface A, set at 16 pt, is unlikely to align with the x-height in typeface B, also set at 16 pt. We delve into this topic extensively in the “X-height is our secret weapon” chapter.

The two different typefaces used in the headings of each chapter in this book are Degular and Swear, both designed by James Edmondson of OH no Type.¹ Swear (used for the emphasized words) is set at 37.8 pt so that its x-height matches Degular’s, even though that’s set at 40 pt. With the font size reduced, the overall typographic color is changed, too, but the Black weight of Swear still sits nicely alongside Degular’s Black weight. A different typeface or a different weight will harmonize or contrast in different ways, but in my opinion,² this particular combination achieves a consistent typographic color throughout the chapter titles, despite the drastic difference in personalities.

Although I’m talking a lot about x-height here, there is of course way more going on. I’ve already mentioned typographic color, weight, and personality, but there are other considerations when combining typefaces in such close proximity. Do the ascenders and descenders clash (and therefore do we need to adjust line height)? Do the size adjustments require any further adjustments to weight (something usually more customizable with variable fonts)? Are there any design motifs in one typeface that clash with those in the other? The only way to know is to try it out and then adjust one parameter at a time.

46

Add a monospaced typeface as a complement

They’re great for setting lines of code — but are by no means limited to that alone.

Monospaced typefaces were originally created for typewriters, where every single glyph takes up the same horizontal space. Uppercase “W”, lowercase “i”, apostrophe . . . they’re all the same width. If you’ve ever used a code editor, you will have used a monospaced typeface, since it’s much easier to keep an eye on your code indents this way. Choosing a monospaced typeface doesn’t just have to be about technical requirements, though — they can be a great addition to a brand’s identity, especially when used as a complement to a primary typeface.

In some families or superfamilies, monospaced versions of proportionally spaced fonts might exist, and these are great for when you need the fixed width for some scenarios, but need to keep your brand intact. Fira Sans for most of your text, but Fira Mono for your captions, perhaps?

Tabular numerals (see the chapter on numerals on this page for details) are monospaced, too — their uniform width means they’re perfectly suited to . . . wait for it . . . tabular data! But the rest of the glyphs in the font are proportionally spaced.

Multiplexed typefaces are somewhat related to monospaced ones in that the width of a particular character remains the same across its various weights. Sure, an uppercase “W” might take up more horizontal space than a lowercase “i” or an apostrophe, but the Thin, Light, Regular, Bold, Black uppercase “W” glyphs (etc.) will have the same width, and that’s handy for when we change weights during, say, a hover animation on a button.

47

Balance distinction & harmony

Whether pairing typefaces or just combining different styles from one font, we’ve got to find that sweet spot between too different and too similar.

In his book On Web Typography Jason Santa Maria suggests we “choose typefaces that don’t compete too much with each other, but aren’t so similar as to be indistinguishable.” Finding this balance between distinction and harmony is at the very heart of what we do when pairing type, and extends to almost all aspects of design when you really think about it. But let’s focus on the type pairing side of things for now.

The most common mistake people make when combining different typefaces is to not make them different enough. This is jarring for the user not because it’s noticeable, but precisely because it’s barely noticeable. They’ll pick up on some subconscious level that something has changed, but there’s no clear intent. (This words looks different, but why? Is it meant to be emphasized?) This is a form of cognitive dissonance.

There are a number of ways we can find harmonizing elements from two (or more) typeface designs. Do they share underlying skeletal structures, metrics, or proportions? Do they reference a particular historical design trend? Do they have a similar vibe, feeling, or personality? These things can be hard to idenitify and even harder to articulate, but Indra Kupferschmid has developed a structure around this called the font matrix — see here.

It’s also worth thinking about occasions when we might intentionally go against balance and harmony, and instead combine elements that should, in theory, not actually work together. In music, playing two or more notes that don’t sound good together creates dissonance. Tension! Bad feelings. Metaaal! And we can employ the same tricks in typography.

In fact, a lot of the time, it’s perfectly fine to break the rules. If there’s one consistent thread that runs throughout the pages of this book, it’s that there are multiple occasions where practicing better typography means breaking the supposed rules. (No, really, see “Break the rules with optical trickery”.)

48

Create a design system with type

It needn’t be complicated, it just needs to be consistent.

Just as type is one of the most important — if not the most important — elements in design, it’s also therefore one of the most important — if not the most important — elements in a design system. And creating a design system doesn’t really require much to start. Do you have a typeface? A couple of different sizes or treatment options? Then you already have a design system. A typographic scale is most certainly a basic design system — just one with a less-trendy name.

Importantly, a full design system deals not only with font sizes and treatments, but also documents how typographic elements play with other elements, such as buttons, borders, and overall positioning. A good design system should set a number of rules and constraints, offer a limited amount of options via customizable components, and document the whole thing so that any other designer can take the system and achieve consistency with whatever it is that they’re designing.

One of the biggest challenges in achieving consistency with a design — and therefore also in creating an effective design system — is dealing with the nuances type can bring with it. Very often, these revolve around vertical margins and padding that are effected by the font size, line height, and the font’s internal metrics — see the card example on this page.

As we discuss in “At the heart of it all: the em square”, exactly where a letterform sits inside its em box varies from typeface to typeface, and there are no hard and fast rules. If a designer wants there to be more space beneath the baseline than there is space above the x-height, they can. And even if the heights of ascenders and depths of descenders look like they’re calculated from a shared central point, that’s not necessarily always the case.

There have been some recent efforts to create fonts with metrics that are friendlier for UI designers, or anyone working with a design system geared towards on-screen use. Typefaces like Rasmus Andersson’s Inter (itself wildly popular thanks to its inclusion in Figma) and Roman Shamin’s Martian Grotesk (and Martin Mono) aim to address this issue head-on by using equally balanced metrics in their fonts — see the illustration on this page.

49

Define a baseline grid — and let it influence everything

Set the size of your body text, decide on its leading, and you have a baseline grid.

The baseline is one of several vertical metrics inside a glyph, and perhaps the one that the reader “feels” most instinctively when they look at a block of text, because — assuming the type is set on a straight path and not a curved one — the baseline creates a vertical rhythm throughout the lines of type. In doing so, it helps define a baseline grid for the page. A 24 px baseline grid — literally, a line every 24 vertical pixels — probably makes sense for your page if your body type uses a line height value of 24 px.

If we have smaller text on the page with a line height value of 12 px, then we could define a 12 px baseline grid and then have our body type (with its 24 px leading) align to the grid every two lines.

However, if we have several text elements on a page — perhaps a heading, a subheading, or a pullquote over to one side of the main text column — we ideally want them to be aligned to the baseline grid as well. But if they’re set in different font sizes, they’ll likely have different line height values, and matching them to multiples of the baseline grid probably won’t work: it’ll result in some lines being too tight, and others being too open. In this scenario, we can use incremental leading for those text elements: a process where every nth line (likely the third, fourth, or fifth line) meets the main baseline grid. This has the advantage of keeping leading appropriate to the element’s font size intact, while still implying an overall vertical rhythm that’s shared throughout all type on a page.

On the web or on screens in general, maintaining a baseline grid is considerably harder to accomplish than it is in print design, because the viewport is adaptable and malleable and doesn’t conform to the fixed dimensions of traditional pages. However, some thoughtful considerations to the line height values of typographic elements should still result in an inherent vertical rhythm being maintained throughout the page, even if individual elements like images and embeds don’t exactly hit the baseline grid.

50

Imply rhythm with intention, especially on screen

Vertical rhythm is even more important when you can’t adhere to a baseline grid.

When we set some type, we immediately create a sense of rhythm for the reader — all you need is one word. Their eyes move horizontally across the letterforms, subconsciously processing the rhythm of their shapes. This is why it’s harder for us to read all-caps type longer than a few words: uppercase forms have a very similar shape, character to character.

Beyond this letter-by-letter and word-by-word horizontal rhythm, though, another rhythm starts to establish itself for any text block longer than one line of type: vertical rhythm. It goes without saying that line height plays a huge role here, dictating the vertical space between each line — and in many print scenarios, dictating the baseline grid — but vertical rhythm is also implied by other elements outside of the body text, such as various levels of headings, captions, quotations, and the vertical space between each of them, including the humble paragraph space that sits between each paragraph of body text. Often that’s two full line breaks, sometimes 150% of the line height, but it could be any value. It‘s also usually zero if new paragraphs are styled to have an indentation on their first line, as with the body text in this book.

Adhering to a baseline grid on the web and screens is notoriously difficult, and one of the main reasons for that is the nontext elements that regularly sit in between text, such as images, videos, and embeds. Maintaining their ratio but forcing their height to a value that aligns with the baseline grid is nigh on impossible, and is only achieved by some clever automatic cropping of the embedded content or automatic manipulation of the element’s margin values. It’s best to accept that baseline alignment on the web and screens is unlikely to happen, and for this reason it’s even more important to maintain a solid vertical rhythm with our text elements, so that the rhythm remains implied throughout the page in the absence of a true baseline grid.

51

A type scale is the foundation of any typographic system

Pick whatever ratio you like, as long as each font size has a relationship to the size above and below it.

A scale is a way of defining different font sizes for different elements and reusing them in a system. Ideally, each step in a scale is defined by an overarching ratio; that is, one size relates to the one above and below it. In other words, there’s an inherent rhythm throughout as the font size increases or decreases.

Some people will go to great lengths to explain how scale A is better than scale B, but honestly, it’s pretty arbitrary. There are some scales we can borrow from the world of music theory, where the intervals between each size mimic the intervals between notes in that scale. For instance, in a major third scale, each font size is 1.25 times larger than the ones that precedes it and, in theory, quite pleasing to the eye in the way that a major third is quite pleasing to the ear.¹ But really a scale can be anything you want, as long as there’s an implied rhythm throughout. And if you want to stick with the so-called classical scale of 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 30, 36, 48, 60, 72, 96, etc., then that’s fine, too, although it’s worth noting that even that doesn’t conform to the actual proportions it implies, as outlined by Spencer Mortensen on The Typographic Scale: the rounding errors mean there are effectively missing notes, and also notes that are too sharp or flat for the scale.²

Does this matter? In reality, few people will be able to identify the typographic scale being used while reading text, let alone pick out an element sized at a slightly different size than dictated by its scale. But just as few people can identify why exactly something sounds out of tune, most can sense that it does somehow sound inherently “off.” The same could also potentially be true with an ill-considered typographic scale.

Could be. You see, my personal belief is that designers can sometimes get too hung up on precise scales. There are a variety of ways that one element can relate to another that sit outside of the traditional ideas of scale — perhaps the font size of an all-caps heading is two times the body’s x-height value, for instance — and it’s better to ensure there’s some sort of rhythm and connection through these little thematic references rather than worry too much about making sure something fits 0.157% of a pixel.

There have been some interesting experiments in recent years that seek to make scales more suitable for the web, which we explore overleaf.

52

Don’t forget the basics of hierarchy

Size, weight, and spacing all help imply order within a document.

Typographic choices can give a document hierarchy. That’s not to say that all documents necessarily need hierarchy, but most would benefit from some form of it. It’s also an area where there’s a lot of room to get things wrong.

Perhaps the most common mistake is not being explicit about the hierarchical connection between different elements. Take the humble heading: if it floats in the middle of two paragraphs, with equal spacing above and below it, the heading appears to be a lone object, unrelated to the content beneath it.

Another common issue is when there’s no noticeable change in size or weight between the heading and body copy, meaning that, again, it might not be obvious that it is indeed a heading. This is something you see a lot online, where a website has been redesigned, and the styles have different level headings have not been accurately accounted for.

There’s nothing to say that a heading should be heavier in weight, of course. A change in size alone should be enough, as long as it’s significant (150% of the body size, for example). And if you wanted your headings to be set in a lighter weight than the body, the greater the size differentiation, the more that’s possible.

Even a little consideration can radically affect the way text is read and understood by the reader, and reduce the amount of times they have to subconsciously interrupt their reading flow to wonder why something is the way it is.

53

Typographic color is about density

Not like actual color. Well, kind of.

Typographic color, unrelated to actual hues, refers to the text density on a page. It's about the balance between black text on a white background (or vice versa for light-on-dark scenarios). Consider it a squint test — how much space does the text occupy? Is there sufficient spacing to maintain readability without overcrowding? And, by the way, we’re not just talking about spaces like line height or tracking; color is dictated by all those in-between spaces, too, like counters, serifs, and the very shapes of the letterforms.

Numerous factors do influence typographic color beyond the choice of typeface, though, including font weight (and grade), line height, and even the ink itself. (Hmm. Perhaps it is somewhat about color after all.) Robert Bringhurst says in The Elements of Typographic Style:

“Once the demands of legibility and logical order are satisfied, evenness of color is the typographers normal aim.”

Achieving this evenness of color should also be a primary concern when pairing typefaces that are meant to sit together seamlessly, such as when we might swap to another typeface for a slight change of context. This is something I’ve tried to do with the chapter headings in this book! Although Degular and Swear have a very different feel, their overall color (at these specific sizes and weights) feels balanced.

54

Line height can be a headache

The invisible white space within text boxes, caused by a font’s metrics and line height, is usually the source of any alignment woes.

Line height inconsistencies can appear quickly when we’re designing for screens — especially when creating design systems for multiple platforms.

With metal or wood type, strips of lead were inserted between each line (hence the name “leading”), and the total line height would be the size of the font (e.g., 16 pt) plus the size of the lead (e.g., 2 pt) to get the total line height value (e.g., 18 pt). When the web came along, css calculated total line height by taking the font size and then adding half of that size as its leading equivalent; e.g., 16 px + 8 px = 24 px line height. This approach has remained unchanged since then and is used on the web, in design apps, and across iOS and Android.

There are actually some subtle clipping differences between platforms,¹ but even if we ignore those, varying font sizes alone results in different amounts of white space above and below the letterforms. Imagine a card-like UI that contains an image, a heading, some metadata, some body text, and then a button. How do we space them accurately so that there’s a uniform amount of vertical space between each?

Let’s say we’re trying to achieve a vertical space of 20 pixels between the image, heading, metadata, body copy, and button. If we set a blanket 20 px² margin-top on each element, it’ll actually be 20 pixels plus whatever whitespace is inside each text element — and that will be more pixels in the heading, which is larger, and fewer pixels in the body text, which is smaller. Ideally, we need to “trim” the whitespace away so that the measurement is made from the bottom of the letterforms on one line to the top of the letterforms on the line below, allowing us to achieve an optically balanced vertical space between each text element.

But where do we even place our hypothetical trim lines? Do we want 20 pixels as measured from baseline to baseline? Or descender depth to ascender height? Or baseline to ascender height? Depending on the typeface, the font’s internal metrics, and the kind of element, something that looks right for one thing will look off for another, but usually x-height in lowercase type (or cap height in all-caps type) serves as a good optical measurement.

To continue on our quest for a solution, or at least a semisolution, turn the page.

55

Mastering line height means making manual changes

There’s no easy way out, but being aware of what to look for will help.

As explored on this page, a font’s vertical metrics can be in any position inside the em square. This means its ascenders and descenders might touch the top and bottom parts of the box, or have a little padding between the boundary, or have a totally disproportionate relationship to the bounding box, such as descenders appearing much closer to the bottom than ascenders are to the top. If you have some text inside a button element in your design system and you change the font, this is the reason that you might find the text suddenly appears much closer to either the top or bottom of a button.

If you consider the ultimately unknowable and disparate vertical metrics contained within different fonts, and then combine that with the ever so slightly different calculations for line height (outlined on the previous page), life can get a little tough, especially if we’re tasked with maintaining a complex design system.

One solution is to make sure that all of your text elements are spaced manually, and that these spaces are re-examined any time a typeface is changed. Spoiler alert: this is no small task.

Another solution is to only use fonts that have equal metrics — ones where the letterforms are vertically centered, and the space above and below uppercase letterforms is equal. This is the case with Roman Shamin’s typefaces Martian Grotesk and Martian Mono, which were designed to specifically counter this issue, as well as play nice with the pixel grid due to the ratio between the different metrics. The added bonus of these typefaces’ metrics is that they can be placed next to other elements like icons for easy vertical centering.¹

There are also plans to help tackle these issues directly in css, although at the time of publication, the exist only as proposals, with only experimental browser support. Once fully implemented and adopted, text-box-trim² should be able to effectively remove the vertical white space from the glyphs, leaving us to space directly from where the top and bottom of the letterform begins and ends.³

56

Not all dashes are equal

Different dashes are different lengths, and exactly how different they are is up to the type designer.

Dashes are a type of punctuation, but they’re so often misused — even by apparently seasoned designers — that I feel like it’s worth calling them out specifically. And yes, sure, much like any punctuation, this is walking a gray area between the responsibilities of the typographer and the responsibilities of the copywriter, but really there’s no excuse to not know this if you have even a passing interest in typography.

Let’s talk first about the hyphen, which is the narrowest dash (apart from the minus symbol). It’s probably the dash people use the most, and yet also the one people use incorrectly the most. You use a hyphen to break a word over two lines, or connect words. Nothing else.

Next up, the en dash, which in theory is the equivalent of one en, or about half an em. Use it to connect date ranges.

Finally, the longest dash, and my personal favorite: the em dash. This is for connecting ideas — and for going off on a quick tangent — and in that sense is very similar to a colon or parentheses, but I’m not going to go into the usage specifics here — that’s the job of whichever style guide you’re following. You might occasionally see people using two or three hyphens in place of an em dash, which is a hangover from the typewriter days, and for which there is no excuse. Unfriend them immediately.

Lastly, it’s important to note that the exact length of any of these dashes is purely down to the type designer. If they want to make an em dash that’s only slightly longer than an en dash, they can. If they want to make an em dash that’s exactly as wide as a hyphen, they can (inadvisably). The point is: know which one you’re using. And if, like me, you’re a liberal user of the em dash, it might even pay to help its length play a role in your choice of typeface — how’s that for an idea?

57

Combine dashes with alternative spaces

Not all spaces are created equal either.

It’s impossible to talk about dashes without talking about spaces, which is why I’ve created a dedicated principle on the matter. And not that spaces are tied exclusively to dashes, of course, but it’s in their combination with dashes that they really come into their own.

When we have an en dash or an em dash, flanking it with a regular space character — the kind that sits in between words — is all fine and well, and some style guides advocate the use of no spaces at all before and after a dash, but something in between no space and a regular space — perhaps a thin space, or a hair space — is usually preferable.

Before we get too caught up in exactly which one is better, however, it’s very important to remember that the actual width of each kind of space is totally dependent on the typeface you’re using. If the type designer wants to make a regular space, a thin space, and a hair space (and there are others, too) wildly different, they can. If they want them to be almost totally indistinguishable, they can. Much how an em dash in one typeface can be very wide and obvious, and then look almost like a hyphen in another, it’s best to evaluate the tools at our disposal with a bit of trial and error. And, if you know that your text will be full of em dashes — you might’ve noticed that I’m a big fan of them — then perhaps the width of a typeface’s dash characters and space characters can be a key criteria when it comes to narrowing your type choice selections.

Nonregular space characters can usually be inserted from the Edit or Insert menus in popular software. On the web, you’ll need to use the HTML entities (e.g.,  ), and admittedly that does make things a little harder when the site is powered (as most are) by a CMS, because convincing your writers and editors to add them might be a little cumbersome. For this reason, regular spaces (or no spaces) tend to get used around dashes on the web and screens — if writers even use the correct dash at all, that is. Don’t even get me started . . .

58

Italicize punctuation & spaces, too

Subtle considerations like this improve the overall readability of your text.

When italicizing a word, ensure that any following punctuation, such as a comma or quotation mark, is also italicized to avoid clashing letterforms and inadequate spacing. This helps to maintain a consistent appearance across the text. And, although you can file this next one under “almost invisible,” if you’re a true typographer, be sure italicize spaces after italicized words, too, as this can help to ensure the spaces between words are as optimized as much as they can be. To clarify, if you have a quote, and that’s italicized, you also need to italicize the comma or period at the end of the quote, the quotation mark, and the space after that quotation mark.

The opposite is true when it comes to a bold font: punctuation and spaces should not be emboldened as well, because there’s little chance of clashes between forms and they look odd when emphasized in this way. Plus, a bold space will likely end up looking too wide, which is distracting to the eye.

The seemingly contradictory advice of these two rules — after all, aren’t italic and bold both a form of emphasis? — demonstrates how, with type, what looks right is what is right.

59

Justify & hyphenate with caution

Hyphenation is essential if your type is fully justified — but mind where you break those words.

For the majority of the type that I set, I like it to be right ragged — as in, aligned to the left edge of the text block, with an uneven edge over on the right-hand side. This is the way the majority of text is set in left-to-right systems. But sometimes — especially in very long-form texts such as those found in mainly imageless books like novels — typographers may choose to justify the type, with the type aligned to both the left and right edges, creating a more formal-looking rectangle. That’s not the only scenario, of course. Even social media graphics might look better with the more solid block of text that justification provides.

The thing is, knowing the reasons for using justification is perhaps less important than knowing about the potential issues that can arise. In unjustified text, the space between each word and each glyph is the same.¹ In justified text, the word space changes per line, and, in some justification algorithms, the tracking is altered as well. This not only creates inconsistency throughout the text, but also allows large gaps to appear. When scanned by the eye, line-to-line, these create “rivers” throughout the text.

To counter this, it’s advisable to use hyphenation — more liberally so than in non-justified text. However, hyphenation can create its own problems. Exactly how much hyphenation is too much hyphenation? It depends on the overall length of the text, and it’s best to experiment. Most desktop design apps have automatic hyphenation settings that can be tweaked. Always check your hyphenation and adjust as necessary. Generally speaking, breaking words either between syllables or their component parts (e.g., “hypen-ating”) usually makes the most sense for English-language text.

However, even with the most robust hyphenation rules in place, and a justification algorithm that leaves each line looking beautiful, it’s almost impossible to avoid widows and orphans. For more on that, turn the page. . .

60

Avoid widows & orphans whenever possible

It might mean breaking a few rules along the way — and that’s an acceptable trade-off.

There are quite a few occasions while setting type when it’s not desirable to let the text flow by itself, even if you’ve set up some good parameters, like a sensible measure or leading: scenarios like the last line of type making its way over from the previous column to the top of the next column, or — even worse — a single word. They’re widows. Or a single word being left all on its lonesome at the end of a text block, or the first lines of a new paragraph that start at the bottom of a text frame. They’re orphans.

On the face of it, neither a widow nor an orphan is the worse typographic faux pas, and often they can’t be avoided anyway (more on that shortly). But, whenever it’s possible to break the rules to make for a better reading experience, we should.

In print, there are a number of things we can do, from adjusting the heights of our text boxes to actually editing the text, if possible. (It should also be a proofreader’s responsibility to avoid widows and orphans.) While it might seem counterintuitive to change the actual dimensions of text boxes, and have one column appear one line shorter than the others, it’s usually less visually jarring than having an orphan or widow present. Most design tools have built-in settings to counter this issue, and if you get stuck, there’s always a line break.

Unless you’re working on the web, or on-screen, that is.

Hard line breaks persist no matter what else you do to the type, and will come along if copied and pasted by end user, too, so it’s best not to use them. The web is a fluid medium, where the content reflows according to the requirements and restrictions of the end user and the device they’re using. As such, it can be nearly impossible to eliminate orphans and widows.

At the time of writing, there are no automatic tools built into css that can handle this issue for us in the way that we currently enjoy with print design apps — although the experimental text-wrap: balance proposal is beginning to gain traction. There are (mainly Javascript-based) plugins and workarounds, but the reality is that implementing these require an overhead that can be hard to justify in many projects.

61

Break the rules with optical trickery

Make things look aligned by misaligning them. Wait, what?

So much of type and typography is about breaking the rules. But not just breaking the rules for the sake of a little anarchy. Almost all of the rule breaking we do when working with type is about achieving a degree of optical trickery. Okay, maybe the word “trickery” sounds a little harsh, but the point is that our eyes are kind of weird, and sometimes for things to look right, our eyes need to be coerced into thinking that some things are not quite as they truly are.

Take the humble overshoot and undershoot — two of type design’s most well-known optical tricks. The top curve of a lowercase “o” extends ever so slightly above the x-height, and its bottom curve extends ever so slightly below the baseline, and the same is true of any character with similar shapes. This is because a circle sized the same as a square appears optically smaller, so we need the overshoots and undershoots to correct that. For a similar reason, the vertex and apex of the letter “v” or uppercase “A” often use them, too. The extensions to these letterforms result in these characters appearing optically aligned to others they sit next to that don’t require such modifications.

When it comes to typography, there are a number of ways to break the rules to achieve a better reading experience, and we cover them in dedicated chapters throughout this book, but here are a few smaller tips worth covering briefly:

• Move footnote references outside of punctuation marks. Because even though they should sit next to the text they relate to, they’ll just make a weird gap.
• Italicize punctuation (and spaces) that immediately follow an italicized word. An upright comma is going to butt up against italic letterforms.
• Use incremental leading. Baselines are not always going to line up. It’s okay.
• Don’t indent paragraphs after a heading. Even if all your new paragraphs start with a left indentation, the space created when they follow an unindented heading will just look strange.
• Nudge display type. Even if all of your text boxes are perfectly left aligned with each other, the ones with large type in will also have larger white space between the edge of the text box and the letterform itself, so nudge that over a bit so that an optically aligned margin is achieved.

62

Check your diacritics

Don’t forget the extra space required for accents and the like.

Diacritics, known colloquially as accent marks, are supplementary elements added to letters, typically altering their pronunciation. Examples of diacritics in the Latin script text include acute and grave accents above the letter “e”, or the cedilla in a soft “ç”. In some cases, diacritics can completely change the meaning of a word, as with “a” (“have”) and “à” (“to”) in French.

And yet so many fonts don’t include glyphs for non-English characters, which is ludicrous, because therefore my fellow British friend Zoë can’t even type her name correctly. If a font doesn’t include even the most basic of accented glyphs, it’s a reliable indication of it not being particularly well made. Type designers are encouraged to include Latin Extended character sets in their fonts, and contemporary type design software makes the process extremely easy. Doing so means you support not only European-centric languages, but also others that use the Latin script, such as Vietnamese.¹

It’s worth considering that when you set your leading. A line height that’s too tight for English text (and results in the occasional clash between a descender on one line and an accent mark on the line beneath) might just about be excusable, but if that languages makes extensive use of diacritics, you’re going to have horrible, distracting clashes all over the place. Proof once more that one typographic setting doesn’t fit all.

63

Drop caps can enliven the text

There’s absolutely no functional purpose for a drop cap. But they sure do look pretty.

Drop caps are large first letters in long texts, and they originate from the decorative initials used in illuminated manuscripts such as bibles. They can be decorative, perhaps referencing those historic origins; or they could simply use a different typeface to contrast with the body text; or they might rely solely on the change in font size as a way of differentiating themselves; or anything in between.

When using a simple drop cap — that is, a semi automatic change in font size alone — we can actually be posed with an interesting design challenge due to alignment. Design software usually offers options for drop cap sizes to be relative to 2, 3, or 4 line heights. The focus is on conforming to the overall line height for better alignment rather than matching the surrounding font size.

Implementing drop caps on the web can be more demanding than in desktop software, as direct control for specifying a drop cap font size equivalent to a specific line height value is absent. However, it could be argued that what css’ implementation lacks in automation — aligning these elements poses the same challenges as baseline alignment on the web — it makes up for in flexibility. By employing the :first-letter pseudo class, we can style the initial letter of the body text however we desire.

Or just go and illustrate something crazy and throw that in there. It was good enough for the monks.

64

Size doesn’t exist

Even absolute units don’t produce reliable results — it depends where the reader is.

Size, in essence, is a nonexistent concept when it comes to digital typography.

Hear me out.

Specifically, when discussing font size or type size, we're actually referring to the dimensions that the em square is scaled to. The letterforms’ actual sizes within the em box depend solely on the choices of the type designer and differ for each font. Even if you take a seemingly simple character, such as an uppercase “H”, if you measure its width and height at, say, 60 pt, then change the font but keep the font size intact, and then measure again, those measurements will very likely be different. For more on this topic, head over to here.

And even if we forget the technical specifics for a second, it’s important to remember that the size of type is relative to its distance from the reader. In much the same way that huge, 400 pt type becomes small if viewed when a reader is on the street, looking up at a billboard 100 yards (91 meters) away, the minuscule differences as the reader moves their head slightly closer or farther away from their laptop screen will also have an effect on the perceived size of type.¹

When it comes to the web and screens in general, the inherent unknowability of a viewport’s dimensions means we need to set our typography up so that it can flex and bend in with sensible responses to this uncertainty — this is responsive web design (more on this page). And this is taken to the next level with the utopian methodology, which allows us to work with multiple type scales, which are then intelligently implemented by the browser.

But no, there’s no such as thing as “how big is that text?”

65

Be consistent with your units

Relative units for screens, absolute units for print, but above all: consistency.

There are many units used to measure different things out there in the world, and typography is no different — we have a surprisingly large number of choices to use when we’re measuring type. Perhaps most obviously, we need some sort of unit to measure font size, but the same kind of unit can also be used to measure things around the font size, such as the leading or measure.

The point — perhaps one of the most established of typographic units, if we ignore historical font sizes such as the pica, cicero, primer, etc.¹ — was standardized in the 1980s to equate to 1/72 of an inch in print. When browsers’ css specification came along, one point was defined as 1.333 pixels. But exactly how big is a pixel? Pixels in early desktop displays were considerably bigger than the physically tiny pixels we now enjoy on our hi-res devices. Therefore, a “software pixel” or “reference pixel” is now completely separated from the dimensions of a physical hardware pixel on a modern screen. Nick Sherman outlines this in detail in his article, The complications of typographic size on the web.²

Whichever unit you to decide to use to measure your type and type-related dimensions, remember to be consistent. Combining units can cause things to get confusing pretty easily. The most important thing to remember is that some units are absolute and some are relative. Elements measured with absolute units — such as points, picas, inches, and centimeters — appear at the same size whatever the context, so are useful for print and physical media. Elements measured with relative units — such as percentages, ems, rems, viewport height, and viewport width — are rendered in relation to other elements, so are more suited to web, app, and general on-screen use. Somewhat confusingly, using absolute units on-screen makes them relative, in a way, due to the discrepancy in the actual physical size of a pixels, as described above.

66

Customize type when required

You could type out your brand name and be done. But you’d rather go further, right?

For the vast majority of the time that we work with type, we work with what we’ve got. Typography is about making the best decisions with a particular font, or a combination of fonts, and if we get to choose the typeface we’re working with, then even better. But even then, the type itself is still a fixed thing we have to work around — or is it?

There are times, such as when we’re creating a logo or lettering-like lockup — perhaps a product name on some food packaging or a headline for a magazine cover — when we can go that little bit further. Outline your type, take a look at those Bezier curves, and get editing! Done with care, a little customization to the outlines can go a long way in making type look less like, well, type.

But before we even consider going that far, it’s good to be aware of all the tools we already have at our disposal, baked right into many of our fonts.

The first is alternate glyphs, which are usually accessible via OpenType controls, and take many forms, including ligatures, swashes, and contextual alternates. Swapping out one version of a character for another is a great way of taking your type beyond its default settings to make it resemble something a little more bespoke.

The second is the huge amount of possibilities offered by variable fonts. Being able to decide exactly how heavy, wide, or slanted our type is — rather than picking from predefined instances — allows us a degree of flexibility that until recently would’ve only been possible by painstakingly manipulating outlines ourselves. And weight, width, slant, and optical size are just the standard axes! When you consider that any parameter of a typeface’s design could become a variable axis, the potential for customization is effectively limitless.

Not only do these not-always-obvious superpowers free up our creative potential, but they also provide us with useful criteria for when we’re making our type-choosing decisions, too.

67

Know which font format to use

Fortunately, we have fewer to choose from these days.

Let’s be honest: font format is hardly the most riveting of subjects. Try opening a dinner party with that one. But knowing which format to use is helpful, and I want to discuss this because it might not be immediately obvious what the difference is between each of them.

OpenType is built upon the earlier TrueType font format, adding new possibilities for font makers — the wonderful OpenType features that you’ll see dotted throughout this book (ligatures, alternates, small caps, stylistic sets, proper fractions, different numerals, etc.), and more recently “OpenType variations” (AKA variable fonts) that allow users to change their weight, width, slant and other properties in a smooth and continuous way.

OpenType fonts can have an .OTF or .TTF file extension, which usually reflects the mathematics used to define the curves of glyph shapes: cubic Bézier curves for OTF, quadratic Bézier curves for TTF.¹ This difference has no effect on font quality, but is simply a choice by the font maker.

68

Harness the power of OpenType

The technology that allows us to do more with our fonts.

OpenType is a font format and associated technology jointly developed by Adobe and Microsoft in the 1990s, allowing us to access additional settings in fonts, mostly related to the substitution of alternate glyphs. Ligatures, contextual alternates, stylistic sets, swashes, and small caps are all examples of what we generally call OpenType features, and we cover each of these in their own dedicated chapters in this book.

Most OpenType features would previously have to be included in separate font files, and occasionally this still happens — you might’ve come across a font file that only contains the swash glyphs, for instance. However, combining these features into one file and allowing the end user to access them with ease (in desktop design apps, usually just a button press away) opens up many more typographic opportunities. These include improving overall readability with ligatures, lining up tabular data using tabular numerals, adding flair to a logotype with swash glyphs, or making type look more like handwriting or lettering by implementing stylistic sets or contextual alternates.

On the web, OpenType features are accessed via css. Note that in most modern browsers, kerning — one of the few OpenType features not related to alternate versions of characters — is turned on by default, so there’s rarely a need to control it via css (unless we want to turn it off). We’ve got a dedicated chapter on implementing OpenType features for the web.

Variable fonts — officially, OpenType Font Variations — are, as the name implies, an extension of the OpenType format, allowing for much greater control over multiple typographic parameters, all contained within one single font file.

69

Give yourself more options with alternates

Most OpenType features are about substituting glyphs for alternative versions.

In many fonts, there are numerous options available to us as typographers beyond the defaults, from different drawings of certain characters — perhaps a swashed “S” to work better in a logo, or an alternate lowercase “z” to make body text a little less quirky — to readability aids such as ligatures and small caps. These alternate glyphs can be grouped generally under the umbrella term “alternates,” and when they exist, try them out! The type designer has put them in the font to make our lives as typographers easier.

Most kinds of alternates are made available to us as OpenType features, and can therefore be accessed via design software’s OpenType menu (or the deeper parts of an application’s Type panel), or manipulated on the web using css’ OpenType controls. As such, many can be substituted automatically, as is the case with ligatures and contextual alternates. Others usually (but not always) exist as stylistic sets that we can cycle through.

However, some alternates might be separated out into entirely separate font files, as can sometimes be the way with swash or small caps variants. This was also how things were done in the days before OpenType, when font file sizes were much smaller, or in predigital type, when any alternate was (obviously) a literally different piece of wood or metal.

To delve into the details, please read the dedicated chapters on ligatures, numerals, swashes, fractions, small caps, and stylistic sets.

There isn’t a dedicated chapter for contextual alternates, but they’re useful to have turned on, as it means that certain sequences of glyphs will be swapped out as required — a bit like how ligatures work, but without combining different characters into a single glyph. For more information, see the illustration opposite.

70

Ligatures are more useful than you might think

As well as avoiding awkward clashes, they can avoid repeating letterforms, too.

Isn’t it irritating when the hook of an “f” collides with the dot on an “i”? While wars haven’t been started on such trifles, these collisions have certainly interrupted the reading experience for a fair few unsuspecting souls. Thankfully, ligatures can resolve this issue by substituting the offending glyphs with a new glyph that combines the letterforms into one new form. This seemingly simple feature improves readability, so it’s worth checking ligatures exist in any typeface you might currently be in the process of choosing.

Ligatures can be used provided they exist in your chosen typeface and its fonts. Like all OpenType features, it’s not a given that all versions of a font include the glyphs you require. If they are included, they can be accessed via OpenType controls in your favorite design software, and in many scenarios they’re enabled by default, so they should appear automatically. That’s even true on the web — you no longer even need to turn common ligatures on with css.

We tend to divide ligatures into two groups: common ligatures are called such because they’re functional — they counter these unsightly letterform clashes and therefore improve the readability of text — whereas discretionary ligatures are more decorative in nature — and, ironically, have the potential to reduce readability because contemporary readers are not used to seeing them. But they do make use of gadzooks (“god’s hooks”) so there’s that.

The fact that ligatures replace two or more glyphs with one new glyph can occasionally present a problem, however. In some circumstances, copying text that contains ligatures and then pasting that text into another context — perhaps from a PDF into a website’s CMS — can cause the ligatures to either be rendered in a fallback font or perhaps not at all. If you experience missing characters somewhere, it might be worth checking ligatures first.

71

Know your numerals (or figures)

There are four distinct kinds, and it’s useful to have all of them at your disposal.

A recurrent theme in this book is that more options are a good thing. And, if you have multiple options available to you when it comes to numerals (or figures) then it makes sense to use them. There are effectively four different kinds of numerals, and a professionally made font should ideally contains all four.

1. Proportional lining numerals are so-called because, just like letters, they each have a different width — compare a proportional “1” with an “8”. The “lining” part of the name means they look a lot like uppercase letters: the lowest part of the letterform sits on the baseline, and the tallest part of the letterform matches the cap height of regular letters.
2. Proportional oldstyle numerals again have varying widths, but they look a lot more like lowercase letters; that is, some have ascenders that extend above the x-height (6, 8) and some have descenders that extend below the baseline (3, 5, 7, 9).
3. Tabular lining numerals are sometimes called monospaced numerals and, like monospaced typefaces in general, their glyphs take up exactly the same horizontal space. Again, the lining part means that they appear more like uppercase letters.
4. Tabular oldstyle numerals — you’ve probably spotted the pattern here — have glyphs of the same width, but appear more like lowercase letters.

Generally speaking, oldstyle numerals are best for running text, such as when you have figures within a sentence of regular prose. Lining numerals, appearing much like uppercase letters, tend to “shout” at the read (as with all-caps type). Tabular numerals are best for representing tabular data, since they all line up neatly above and below each other.

It’s also important to note that the default figure kind — that is, the one used without us changing anything via OpenType — can be any of them. It’s up to the type designer. Most fonts use proportional lining numerals by default, but occasionally you’ll encounter proportional oldstyle numerals such as with Georgia.

72

Swashes can enhance your type

But watch out for unsightly clashes between letterforms.

With great power comes great responsibility, right? And swashes wield a lot of power. Add a swash glyph to your type and you’re making a statement. So let’s make sure that power is handled with care.

First, let’s establish this: there are two kinds of swash. Much like “serif,” a swash can be part of the letterform — usually a decorative element that can range from the relatively simple (such as the extended leg of a “k”) to the incredibly complex (such as those in Mala, shown opposite). Here, we‘ll focus on the second kind: the swash glyph; the decorative, alternate version of a letterform for a particular character.

Swash variants are usually found in serif and script typefaces, and generally for uppercase characters. Picture a title where the first letter of each word takes a more elaborate form. Now, although swashes don’t have to sit at the front of a word, special attention has to be paid to how swash alternates can affect spacing. A very common mistake — weirdly, by a lot of sign makers — is to throw a swash right in the middle of the word, only to have it create a great chasm of space between it and the next letter. (There’s a pub in my village does exactly this, and I’m incensed every time I drive past it.)

Using swash glyphs in design software is usually a case of turning them on or off in your OpenType settings, and the same goes for using them in css. We can also specify which swash to use if there’s more than one, like so:

span.first-swash {

font-feature-settings: "swsh" 1;

}

span.second-swash {

font-feature-settings: "swsh" 2;

}

Note that some swash variants might actually ship in an entirely separate font file, however. In that case, using them is a case of switching between fonts on a character-by-character basis.

73

Use proper fractions

If you’re setting recipes, your readers will appreciate this subtle but important change.

It’s not that interesting to write about fractions. Honestly, I thought I’d left this kind of stuff behind in grade school. But every now and again you need to use a fraction in your text and it can look so much better — and therefore be a whole lot more readable — if you use a proper fraction. That is, when the numerals are correctly sized and positioned above and below the diagonal line, rather than sitting side by side.

Unicode has characters for proper fractions, but to insert them you’ll need to know the unicode reference (or paste in the character from elsewhere) and they’ll need to be present as glyphs in the font. It’s far more efficient to automatically turn your captions into proper captions using OpenType (with the caveat that, like all OpenType features, they also need to be present in the font you’re using).

Turning on proper fractions is usually done via your app’s OpenType menu, and on the web, they can be turned on in css like so:

ul.ingredients li {

font-feature-settings: frac; /* Older browsers */

font-variant-numeric: diagonal-fractions; /* Newer browsers */

}

If you’re designing a recipe website, you’ll dramatically improve a user’s experience by using proper fractions, as the quantities of the ingredients are significantly more readable. But really, just switch them on whenever you’ve got any content that uses fractions. It’ll look better.

74

Use small caps to avoid shouting at the reader

If you’ve got text containing acronyms, it’s useful to have small caps to hand.

In certain situations, we may need to use all-caps text. However, using regular uppercase letters can make the text seem like we’re SHOUTING AT THE READER. (See?) In these cases, it’s beneficial to utilize small caps since their proportions more closely resemble (but don’t match entirely) lowercase characters, and sit much more gently within the text.

Like all OpenType features, small caps can only be activated if they’re present in the font you’re using. Check in your OpenType controls in design apps, and in css like so:

span.acronym {

font-feature-settings: "smcp"; /* Older browsers */

font-variant-caps: small-caps; /* Newer browsers */

}

Exactly how many uppercase characters you set before converting to small caps is up to you or the style guide you’re following. For instance, while it’s a no-brainer to set UNESCO in small caps, what about US (as in “United States”)? In some typefaces, where the design of the lowercase “u” and “s” is quite similar to the small caps “u” and “s”, there’s potential there for the small caps acronym to be read as the word “us.” As with so many things in typography, there’s no definitive answer on how to counter this, and it might be good to review any rules put in place whenever you change a typeface. And be sure to consult with any copyeditor, proofreader, or custodian of the style guide when you do!

When setting small caps, they often have wider spacing built-in, but if not, increasing tracking is recommended for a more pleasing reading experience. In fact, the same rule can be applied to any uppercase type when rendered at small sizes. Sometimes this extra tracking can also help in alleviating the problem described above, too.

And although most of the time, small caps are there to stop uppercase type from getting a bit aggressive, they can actually coexist with regular capitals when those are needed at the beginning of words. This feature can be activated through the OpenType setting called “all caps to small caps” or the c2sc code in css.

75

Stylistic sets offer even more options

Swap out alternate glyphs en masse.

Throughout this book, you’ll find many references to alternate glyphs, OpenType features, and the general impression that I heartily recommend exploring all of the options made available to us by our kind type designer friends. Stylistic sets (occasioanlly referred to as “style sets”) are a way of accessing alternate glyphs for a whole block of text. A common one might be a set called something like “single storey a” that substitutes all of the default lowercase “a” glyphs for their alternate, single storey cousins. Similar thing with single storey “g” glyphs, too. But whether or not the type designer decides to name the stylistic sets like this or not is entirely up to them. (It’s hard to beat James Edmonson’s “Jesus t” stylistic set naming in Ohno’s Degular.) Perhaps more commonly, we might find the “ss01” code used instead — and this is the four character reference we’ll need when turning these on and off for our web type with css.

The type designer can also choose to group alternates in a single stylistic set. Perhaps, if several alternates logically sit together, such as the “Geometric open lowercase” set in p.s.Type’s Neighbor (see the illustration on this page), they might sit inside one particular set. Ultimately, it’s up to the type designer to choose. And they’re also free to make one, two, three, or perhaps even the maximum of 20 stylistic sets if they want. Or none. And that’s fine. Most professional fonts’ documentation and websites will usually make a pretty big thing of these features, so finding out whether or not they’re included is quite straightforward.

As with all OpenType features, it’s important to remember that not all versions of the font will necessarily contain the stylistic set you’re after, even if advertised in the promotional materials. See here for more information on what to look out for.

76

Kern only if you have to

Tracking will probably get you most of the way there.

Everyone likes to point out bad kerning, don’t they? But more times than I see some bad kerning, I hear someone tell me about some bad kerning when they don’t actually mean kerning at all! Most of the time they mean tracking (the overall letter spacing in a block of text) or perhaps the general spacing in a font. Kerning, specifically, is the alteration of the horizontal space between two or more glyphs. For instance, a tighter space between “A” and “V”, or a more open space between each “w” in “www”. This can be handled by the type designer, with that custom spacing information built into the font file in the form of what’s known as “kerning pair data”, or it can be handled manually by the end user.

In almost all circumstances, it’s wise to turn on any kerning that’s built into the font; the type designer has painstakingly taken the time to optimize that spacing, after all. If the option exists in your design app of choice, make sure “metrics” is checked, not “optical”. In css, kerning is now generally turned on by default in browsers these days, but if required, you can turn it on (or off)¹ like so:

font-kerning: auto; /* Let the browser decide */

font-kerning: normal; /* Enable kerning */

font-kerning: none; /* Disable kerning */

The kerning data built into fonts is designed for most scenarios, and occasionally there’ll be a situation that requires a more bespoke approach. Sure, it’s possible we might disagree with the type designer’s spacing decisions, but in practice that’s pretty rare (unless we’re forced into using an unprofessional, badly spaced font). A more common scenario is when we’re creating a specific lockup for a logo: it might be that using the type at certain sizes warrants tighter or looser spacing, and tracking (letter spacing) only gets us some of the way toward that perfect lockup.

77

Subsetting can be useful

Font files can be big and, for websites, that has an impact on users’ bandwidth.

The process of taking a font file, removing specific glyphs from it, and creating a new font file from those glyphs that remain, is called subsetting. Subsetting can be done by the end user, using either font editing software or some form of automated script; by a service via an API, such as Google Fonts delivering a subset of a particular font to optimize loading speeds; or by the type foundry itself, which may offer different subsets depending on licensing. More features = higher cost.

Around the year 2000, Adobe differentiated between different versions of their popular fonts using the “Std” and “Pro” extensions to their names. The Standard versions were a subset of the Pro versions, with a reduced glyph set to cover fewer languages and fewer OpenType features. Monotype adopted a similar naming system at around the same time. Of course, exactly what “Pro” means has changed, as the name has been adopted by other foundries and distributors. Any type designer can add “Pro” to their font to make it seem more appealing, after all.

Regardless, subsetting itself is not dependent on font naming tactics. Prior to OpenType and the ability to fit multiple alternate glyphs inside a single font file, it was common for features such as small caps or stylistic sets to exist in their own subset. And it’s long been a practice (in digital fonts) for foundries to offer a subset that intentionally omits certain glyphs so that those fonts can be distributed as “trial” versions. It’s common for trial fonts to omit punctuation (which generally makes them unusable in most real-world scenarios), and kerning data (which makes them easier to spot when they are used).

78

It’s hard to imagine a web without web fonts

Any font that’s not preinstalled on a user’s device is a web font.

Not long ago, web designers were very limited in terms of their typographic palette, with only a small number of typefaces to choose from. These system fonts, or “web-safe fonts”, were the ones you could largely guarantee would be preinstalled on every computer across the world. Microsoft introduced support for @font-face in css with Internet Explorer 4, but it didn’t catch on with other browsers until much later, around 2008. And even then, there remained the problem of piracy: if a web designer uploaded a font file to a server, anyone viewing the source could then download it and use it as their own.

The solution came in two forms around the early 2010s: firstly, from Typekit (which later became Adobe Fonts), a service that used some clever code to obfuscate the font file; secondly, from the new WOFF format, that offered a new wrapper for OpenType fonts that prevented them from being usable in desktop environments. Eventually, when support for WOFF became universal, there was no need for the obfuscation method, and WOFF has been the de facto format for web fonts ever since.

To use web fonts on your site, they first need to be loaded, either via a font delivery network or by self-hosting. (This is explored in length in “Deliver font files with intent”.) Once loaded, they need to be referenced in your css file, like so:

body {

font-family: "FAMILY_NAME", sans-serif;

}

There are numerous web-specific controls for typography mentioned throughout this book and there are certainly some quirks — especially with the current implementation of newer technology, such as variable fonts. But by and large, web typography is now on a par with print typography, and web designers can enjoy the same level of control that just a few years ago would not have been possible.

79

Web typography is just . . . typography

There’s very little we can do in print that we can’t also do online, but web typography comes with the added blessing (or curse) of responsive design.

What does “web typography” really mean? Generally, we’re talking about typesetting on the web — and by implication, on-screen — and doing so in a way that takes the universal principles of typography, but augments them with some web-specific considerations. This is not about technology specifically, such as what features are currently supported by popular browsers or not — since this is very much a moving target — but more about having an awareness of how type can and should behave differently to print, given that the web is an inherently fluid medium.

Web typography considers how we load web font files, how we manipulate the type we have to work with, and how certain tools allow us to explore the optimum ways of doing that. In our chapter on fluid type scales, for instance, we explore in depth the ways in which we can use the built-in smarts of the browser to work out the best way to implement scales.

If there’s one key area where typesetting in print and typesetting on the web (and for screens in general) differs, it’s that print typography both benefits and suffers from the fixed proportions and constraints of the medium, while web typography both benefits and suffers from open and fluid nature of the medium. It means we need to be careful — fluid measures can quickly become way too long, as often happened when designers first embraced responsive design — but it also means we can set optimal minimal and maximum values, and then let the browser do the hard stuff in between, especially now that clamp¹ enjoys widespread browser support.

Regardless of the medium, the universal principles of typography remain the same.

80

Keep your content flexible

We don’t know how big the user’s screen will be — and that’s okay. Let’s plan for it.

In the early days of the web, designers mimicked the centuries-old model of page-based layouts, especially so in the days of Flash when websites had fixed dimensions that were based on the average screen sizes of the time. But HTML is inherently fluid (turn off css to see how unstyled HTML fills the browser window by default) and when the concept of responsive web design arrived in 2010¹ this in-built fluidity was reembraced by the web design community.

However, screen size has never been a reliable metric to work with, and this became ever more apparent when it came to responsive design. In web design, app design, or screen design as a whole, the viewport is the canvas on which we have to play with. It’s not the same as the screen size, and nor is it the same size as the browser (or app) window itself, since that inevitably contains what’s known as “chrome” — tabs, toolbars, scrollbars, etc. — unless viewed in full screen. And even then, some phones might force critical information like battery life or reception signal into the screen, therefore eating into the usable space. So it’s the viewport’s width and height that we have to consider above all else, and with the almost infinite combination of different phone models, OS versions, app-specific nuances, and user preferences, the idea of an “average size” simply does not exist.

And that’s before we even get onto the fact that pixels don’t exist! They do, obviously, but for a while we had a shared notion of how physically big an actual pixel was, and how “one pixel” in css mapped to one pixel on the screen. Now, pixels are so small, and screens are so hi-res, that a css pixel is nothing more than an abstract concept (see here).

All this is to say that when we come to sizing type for screens, we should do so relatively. Relative to the viewport. Relative to the other elements around it. Relative to the user’s display preferences. Relative to the environment, even! We’re now at a point with digital typography where we’ve not only moved on from the notion of fixed pages, but we’ve also finally embraced the fact that there’s no finite “font size” (for more on that, see here).

81

Future-proof your site with fluid type scales

Let the browser determine how to elegantly move between a type scale that works for small and large viewports.

Recent advances in browser technology, combined with a maturing approach to web design, thanks to some diligent designer-developers, have led to some interesting universal approaches to web typography.

One of those, Utopia,¹ is a methodology created by James Gilyead and Trys Mudford that allows us to create fluid type scales (and spacing scales) so that extreme changes in sizes are reserved for larger viewports. In the process, the need for complicated in-between steps usually handled by media queries is entirely removed. And once the system is set up, the heavy lifting is done by the browser, thanks to some clever math.

I’m generally avoiding specific technical instructions in this book, because technology gets outdated quickly, but the Utopia methodology is “universal” by nature. It’s about understanding that we can mainly just design for the extremes and then utilize browser technology to figure out the hard parts in between. We can always step in when we have to, but if we can avoid writing multiple media queries in our css, then our typography is future-proofed for new devices and dimensions that might become popular in the future.

To apply the Utopia methodology to your web typography, there are a few simple steps:

1. Visit utopia.fyi.²
2. Pick a minimum (e.g., 320 px) and maximum (e.g., 1600 px) viewport width.
3. Set your primary (i.e., body text) font size for those minimum and maximum scenarios (e.g., 16 px for mobile, 24 px for the largest screen).
4. Decide on the type scale for the minimum and maximum sizes (they can be the same, but more contrast is usually better for the larger sizes), and test.
5. Copy the generated css.
6. Use the css custom properties for your font-size declarations.

The best part of this is that if we ever change our mind about the scale or the specific sizes used, we just redeclare the custom properties in the :root and everything else automatically updates.

82

Deliver font files with intent

Web font files need to get served to the end user and we have some control over that journey.

To use web fonts on our web pages, the font files need to be served from somewhere, and, to remove the need for hosting the font files ourselves (in other words, served from the same place as the rest of our website’s assets), we could use a font delivery service such as Google Fonts or Adobe Fonts’ Web Projects.¹

Services like these don’t just deliver the files from another location, but usually do some smart things in the background, too, via an API. For instance, we can specify the exact weights and styles we might need just by changing something in the Google Fonts URL string, and what we get back is a smaller, subsetted font file that’s optimized for faster delivery.

In the interest of not having this book become outdated by technical changes to these services, here’s an approximation of the code most web font delivery networks use (please refer to their docs for actual usage instructions):

family=INSERT:weight=INSERT:style=INSERT" rel="stylesheet">

Although the font file(s) will ideally be optimized to be as small as possible, we’re also getting some css along with this, and you can inspect that by pasting the URL into a new browser tab. This css file usually just contains the @font-family declarations, which again, will look approximately like this:

@font-face {

font-display: swap;²

font-family: 'INSERT_FAMILY_NAME';

font-style: INSERT_NORMAL_OR_ITALIC;

font-weight: INSERT_NUMERIC_WEIGHT_VALUE;

src: url(INSERT_FONT_FILE_NAME.woff2) format('woff2');

}

At the time of writing, the way that OpenType features are included in web fonts that come via the delivery networks tends to vary. Including OpenType features in the file dramatically increases the number of glyphs and therefore the total file size — and therefore the overall bandwidth of the site. In an ideal world, we’d have a situation like this:

1. The font delivery network serves the smallest possible file, probably omitting OpenType-related glyphs.
2. Once this core subset is loaded, serve the additional glyphs in a new subset, and re-render the type with those new glyphs.

Because of how the APIS of the delivery networks currently work in this fashion, it might be preferable to self-host your font files if you want that extra level of control.

We can also specify a range of glyphs to load if we don’t want the entire font to be loaded, therefore saving on some precious bandwidth. For instance, adding unicode-range: U+0025-00FF; inside our @font-face rule would include all characters in the Unicode range U+0025 to U+00FF. This can also be used to get just one single character; instead of specifying a range, we can explicitly target one unicode value such as U+26 for an ampersand.

83

Use OpenType features on the web

OpenType is well-supported in modern browsers, but there are still some nuances.

You might notice a common message throughout this book: a recommendation to use OpenType features as a way of doing much more with your typography. In desktop apps, controlling these is pretty straightforward via a GUI, but on the web, there are a few nuances when it comes to OpenType. The good news though is that OpenType is now widely supported in all major browsers. Just a few short years before writing this book, it was a very different and often painful story!

Let’s turn on proper fractions, as recommended on this page. To do so, we’ll use the four character code¹ “frac”:

p {

font-feature-settings: "frac"; /* Turn proper fractions on */

}

What if they’re already on, set somewhere else in the css, and we want to turn them off? We simple add either “off” or “0”:

p {

font-feature-settings: "frac" off; /* Turn proper fractions off */

}

I personally find the use of “0” a little confusing, because there are other OpenType features that use numerals after the four-character codes. For example, "swsh" 2 will give us the second variety of swash (if two varieties are indeed available in the font):

p {

font-feature-settings: "swsh" 2; /* Use the 2nd kind of swash */

}

But there’s an elephant in the room: I love the simplicity of the four-character codes, but the reality is that font-feature-settings offers only low-level control and causes an inheritance problem — outlined on this page — where you have to keep redeclaring the entire string. The newer, high-level controls, such as font-variant-ligatures for ligatures, or font-variant-numeric for controlling alternate numerals, offer more flexibility. However, at the time of writing, they still don’t enjoy wider browser support, so font-feature-settings (with some workarounds) is safest for now.

Finally, now for the warning that comes with all OpenType lessons: none of the code above will work if your font doesn’t actually contain the OpenType features required, and not all fonts are created equal. Even if you see the feature on the type specimen page, that might not be in every font. If you have the actual font files yourself, you can see what’s inside using an inspection tool such as Roel Nieskens’s extremely useful Wakamaifondue, pictured to the left.²

84

Go deeper with variable fonts

Manipulate elements of the typeface’s design, and move past traditional weights and styles.

Variable fonts — technically OpenType Font Variations — are a relatively new technology that allow the end user control over parameters that previously would have been controlled only by the type designer. It frees typefaces from the traditional constraints of specific weights, widths, and any other parameter that would’ve usually resulted in a static font file. Want to make your bolds that little bit bolder? Just adjust the weight axis. Want to ever so slightly compress your type to fit more words per heading? Just adjust the width axis. Variable fonts allow us to make specific refinements to a typeface’s properties, all from one font file. And the possibilities are potentially endless.

On the web, the fact that all of this information is contained in one file is a huge bonus, as it only means loading one asset. While it’s true that the average variable font file is larger than one or two static font files, it’s almost always more beneficial to use a variable font. Even just loading four static files for Regular, Regular Italic, Bold, and Bold Italic would usually consume more bandwidth than a single variable font file. And that single variable font also contains all of the other potential weights, widths, and any other variation you might find in the family — plus all of those in-between styles. Honestly, it’s hard to argue against using variable fonts in most circumstances, especially now that they’re widely supported in most browsers.

Support for using variable fonts in desktop design apps is also at a good level and most offer a user interface with sliders to control the various axes. It’s also worth noting, though, that some variable font values can be set automatically. In Figma and InDesign, at the time of publication, the optical size axis is adjusted automatically as the font size is changed, so manual control over this axis means unchecking this default setting. In nondesign apps, such as word processors, sliders for the variable axes might not be available, but they should fall back to the named instances (i.e., the standard weights and styles) in the relevant dropdowns.

Go and play with some variable fonts — once you have, you won’t look back.

85

Control it all with axes

Axes provide the means of manipulating individual parameters within variable fonts.

Variable fonts allow the end user — i.e., the person working with the text, who’s usually but not necessarily a designer — to manipulate the appearance of the type in ways not previously possible with static fonts or at least not without having to employ multiple different font files. This control happens via axes. In most major desktop design applications, these axes are represented visually as sliders in the software’s user interface.

The type designer defines which parameters users can control via axes. It’s common for most variable fonts to contain a weight axis, which means that instead of selecting between predefined points on the scale such as Light, Regular, Bold, and Black (known as named instances), the user can choose an integer, for example, in between Bold and ExtraBold. In numeric terms, this might mean choosing a value such as “774” rather than “700” (Bold) and “800” (ExtraBold).

Even if we decide to select the more traditional instances of weight, doing so with a variable font means we can do that with just one font file. These instances are usually marked on the sliders as points that can be “snapped” to, and shortcuts are also provided in the regular Fonts dropdown we all know and love: selecting a “Bold” weight will effectively jump to that specific point on that font’s weight axis.

Weight, however, is just one axis. Other common axes include width, italic, slant, and optical size. In css, these are known as the “registered” axes, but the type designer can map any parameter to any axis they choose, and these are known as “custom axes.” In the variable version of Chee, type designer James Edmondson allows us to control the type’s “yeast” and “gravity” properties (see opposite, top). In Climate Crisis,¹ type designers Daniel Coull and Eino Korkala allow us to control the type’s “year” property (see opposite, bottom).

For more on balancing the extreme with the subtle, turn the page to learn about Parametric axes.

86

Use grade to maintain consistency

But beware: print and screen behave in opposite ways.

Some typefaces come in different grades; that is, slightly modified versions suited for different environments. The concept was initially developed to account for low-quality printing methods, or for printing on different paper types due to the way that ink bleeds into matte paper paper stock more than it does with glossy stock. With some details of type disappearing as the ink bleeds into the paper, alternate grades were created to anticipate some of these imperfections.

At first glance, grade might appear similar to weight: when viewed side by side, some grades appear lighter or heavier. But look closely and you’ll see that grade actually has more in common with optical size, where contrast (the difference between the thickest strokes and thinnest strokes) is adjusted to optimize the type for different settings. In many ways, grade is actually a lot like the concept of ink traps but applied to the design of the type as a whole.

The most important thing about grade, though, is that whereas weight is designed to make different parts of the text look different from each other, grade is designed to maintain consistency. Type printed in one grade on a magazine’s matte paper should ideally look identical (or at least as close as possible) to type printed in a different grade on the magazine’s glossy insert.

And grade is not just limited to print — it can prove extremely useful on screens in achieving consistency between dark type that appears on a light background and light type that appears on a dark background. This is due to the way that light-on-dark type appears to “bloat” when compared to the seemingly thinner dark-on-light type. Grade offers a subtle way to counter this effect (more subtle than switching between weights, that is) and, if a grade axis is present within a variable font, we have an even finer level of control: we can tweak the type ever so slightly to ensure consistency across all of our different typesetting contexts.

87

Refine and refine again with parametric axes

Dive deep down the rabbit hole of granular-level refinement.

Variable fonts allow us a lot of extra control over type. But what if we could go even further and dig into the real minutiae of what optimizes type at an almost subatomic level? To tweak specific parts of letterforms’ constructions that in other variable fonts are manipulated only in conjunction with other parameters? Well, it’s possible with the help of parametric axes.

Before we continue, I should clarify that it’s possible for a type designer to assign any parameter of a design to a variable axis, and parametric axes are not technologically distinct from any other kind of axis, per se, but rather are a grouping of axes that represent “expert level” control that’s more about subtle refinement than it is about expression. They first emerged out of the work conducted by Font Bureau for the variable fonts Amstelvar and Roboto Flex (both of which were commissioned by Google Fonts).

When we manipulate an optical size axis, let’s consider what’s changing as we move the slider. Typically, at the lower end of the axis (i.e., the smallest optical size), x-height will be large and contrast will be low; at the higher end of the axis (i.e., the largest optical size), x-height will be small and contrast will be high. In other words: more than one thing is changing. And these can be broken down even further, because if we accept that contrast is a subparameter, then it means we’re also altering the thickness of strokes in both the X dimension (think of the width of the vertical stems of an uppercase “H”) and the Y dimension (think of the height of the horizontal crossbar of an uppercase “H”). Parametric axes give us control over elements such as these opaque shapes in letterforms, as well as the transparent shapes such as counters, and Y-axis alignment zones (ascender height, cap height, x-height, and descender depth).

These four fundamentals — opaque widths in the X dimension, opaque widths in the Y dimension, transparent spaces in the X dimension, and alignment zones in the Y direction — form the core of the parametric axes concept proposed by type designer David Berlow but could in theory be applied to any type design. Importantly, they’re intended to be used as further refinements to the more common axes. In other words, get as far as possible with your optical size axis and then refine ever so slightly with one or more of the parametric axes.

88

Beware the inheritance problem

Employ css custom properties to make your code future-proof and your life a little easier.

In “Use OpenType features on the web”, I mentioned the inheritance problem that can occur when using font-feature-settings. The issue is that if we set up something like this in our css, turning proper fractions on for all paragraph elements . . .

p {

font-feature-settings: "frac" on;

}

. . . and then use swash glyphs for all span elements . . .

p span {

font-feature-settings: "swsh" on;

}

. . . the fractions will get overridden by the swashes. To prevent that, we have to write this:

p span {

font-feature-settings: "frac" on, "swsh" on;

}

Having to redeclare the entire string every time could become arduous pretty quickly. And although there aren’t that many cases where you’d necessarily want to have multiple OpenType features turned on for one element, the problem gets harder to manage with variable fonts because font-variation-settings behaves in the exact same way as font-feature-settings.

Roel Nieskens outlined this challenge in Boiling eggs and fixing the variable font inheritance problem,¹ highlighting how the following css . . .

body {

font-variation-settings: "wght" 666;

}

em {

font-variation-settings: "slnt" -14;

}

. . . will result in all em elements appearing slanted, but with the wrong weight, since the wght declaration is being overridden by the slnt.

To counter this we could redeclare the string . . .

em {

font-variation-settings: "wght" 666, "slnt" -14;

}

. . . but we can make our css much neater and more future-proof by using css custom properties (here):

:root {

--custom-wght: 100;

--custom-slnt: 0;

}

* {

font-variation-settings:

"wght" var(--custom-wght),

"slnt" var(--custom-slnt);

}

body {

--custom-wght: 666;

}

em {

--custom-slnt: -14;

}

And, returning to our original OpenType example, we could do the same thing for our fractions and swashes:

:root {

--custom-frac: off;

--custom-swsh: off;

}

* {

font-feature-settings:

"frac" var(--custom-frac),

"swsh" var(--custom-swsh);

}

p {

--custom-frac: on;

}

p span {

--custom-swsh: on;

}

For a little bit of extra setup at the beginning, this results in much tidier css down the line and should tide us over until the day we no longer need to use these low-level settings.

89

Icons & symbols are like type — and often are fonts

Typeface have long contained ornaments and decorations, and many contemporary designs are entirely symbolic.

Considering that letters and words are in themselves symbols (visual representations of sound and speech) it’s only natural that they’re frequently discussed in typographic contexts. Iconographic and decorative glyphs have long been present in fonts, including long before the digital age, but contemporary digital fonts frequently contain icons in their glyph set, too. It’s worth looking for these extra glyphs when you choose a font, as they make the type infinitely more usable. Symbols such as numbers in circles are great for issue numbers in a magazine. Arrows are perfect when adding captions. Ornaments can be extremely useful when adding extra flourishes to a logo in a way that matches the style and weight of the main type.

Of course, some symbols are considered essential. No font is properly usable without some of the basics, such as math operators or currency signs. And, as with diacritics, fonts with more international currency symbols will be more widely usable and therefore more robust for global brand usage.

The rendering of many icons, including emojis, is handled due to them being distributed as font files, and recent advances in color font technology allow icon designers to do even more with their emoji designs, as well as let end users manipulate the colors used. In fact, the power of color fonts has the potential to really elevate how we work with symbols in font files, emoji or otherwise. Turn the page for more . . .

90

Expand your palette with layer fonts & color fonts

Who says text should use just one color? Layer fonts and color fonts open up so many more possibilities.

Layer fonts and color fonts, while different, effectively work towards the same goal: to move beyond “flat” colors when setting type.

Although they’re just regular font files, layer fonts break out different layers into styles, so we duplicate our text box and select a different style for each one, overlaying them to create a new composite. In Francis Chouquet’s Lustik, for example, the Back style uses handrawn squares for each character, and the Front style uses seemingly abstract shapes (see opppsite, top). When combined using a different color for each, they create legible characters. And when we use not just different colors but also different blend modes, we can create some truly interesting results. In Jamie Clarke’s Rig Shaded, each style — Face, Extrude, Shadow, and two options for Shading — helps build a three-dimensional object, and even offers an inline stroke in the Bold weight (see another example on this page).

Color fonts keep all of the potential options within one file, which is great in that it means there’s no need to duplicate text boxes, but it does also mean that it’s harder to turn off different layers if they’re not needed. Plus, at the time of writing, support for color fonts is a pretty moveable target — especially as color fonts themselves can be broken down into SVG fonts (effectively an image stored for every glyph), which work well in desktop design apps, and COLORV1 fonts, which work better on the web and are ultimately more powerful — but in terms of support, it’s early days.

In the interest of keeping this book relatively timeless, I’ve very consciously avoided over-focusing on contemporary technology that’s yet to become established as a norm; however, there’s a lot to be excited about, especially when we consider how it’s possible (or very nearly possible) to specify custom colors for gradients, too.

Depending on how generous the type designer is feeling, a color font can come with one or more palettes (the default colors used to render it). End users (that’s us) can select a different palette to use, make our own palettes, or even just override one or more of the colors in any given palette. In practicality, this means we can achieve expressive, logo-like typesetting that would previously have required long hours spent in our vector-editing app of choice.

91

Populate your font menu meaningfully

If only it was as easy as downloading some font files.

In order to use a particular typeface, first its fonts need to appear in our apps’ Font menu. On the face of it, we just need to install the fonts, right? These days there are a variety of ways that Font menus get populated and only some involve installation.

Some apps bring fonts with them, but only for use in that particular app, and this is often the case with browser-based apps. Figma, for instance, has a very large font menu populated predominantly by a custom subset of the Google Fonts library, plus a few others. Google’s Workspace apps use a handful of nonsystem fonts, but allow you to easily add any font from the Google Fonts library to your Font menu.¹

If you’ve got a Creative Cloud subscription, you’ll have access to the Adobe Fonts library and, once activated, these fonts can be used in any app on the machine that’s synced to your Creative Cloud account. Although these fonts are technically installed, the files are obfuscated in such a way that means the physical files are hard to locate. The Monotype Fonts service works in a very similar way, and both Creative Cloud and Monotype Fonts allow third-party fonts to be managed and synced by their services.

Let’s not delve into specifics of different apps and services, though. The point is that there are lots of ways to populate a Font menu and not all apps’ Font menus are going to be the same. But however you get fonts in there, it’s worth remembering that there can be conflicts; i.e., identically or similarly named fonts, but slightly different versions. It might be that you have a local font file that contains different OpenType features to one coming from a service like Adobe Fonts. Or a variable version you’re using in Figma that’s conflicted with a static font you installed locally. Or a font that’s identical in every way, but one version is coming from Adobe Fonts and the other from Google Fonts.

In all cases, it pays to use a font manager. Activating and deactivating fonts not only helps you keep your Font menu sane if you have a large font library, but it also helps when dealing with conflicts.

92

Support indie type foundries

While you can get your fonts from the big companies, developing a relationship with the smaller, often one-person foundries can go a long way.

You know my favorite thing about type foundries? It’s that almost all of them are independents. I mean, sure, there are the huge ones everyone’s heard of, including those that acquire independent foundries, but most of the time, they’re very small teams, working on their own. Often, they’re just one person. Can you call yourself a foundry if you’re just one person? Sure you can!

I don’t sit on either side of the fence — I’ve worked for huge companies and tiny companies, and I’ve bought fonts from the massive conglomerates and the one-person-bands — but I do love the feeling of supporting those who are doing it by themselves, often from a modest home studio. And I’m always keen to point out to designers that befriending foundries can be extremely helpful, since once you’ve got a relationship with them, they’re more likely to accept any feedback or requests you might have, consider some bespoke licensing, and maybe even give you new fonts to try out — or perhaps even for free! There have been so many times when a type designer friend has helped me out with an issue or an opinion.

How do you befriend a foundry, exactly? Well, just reach out to them via the contact details on their website or via social media. The great thing about so many type foundries being small outfits is that the person running the comms is probably also the person designing the type, or they at least have good exposure to the person who is. Of course, that’s not to say that the big folks aren’t receptive to questions, feedback, requests, etc., but there’s a more immediate connection with the indie folks. So go and support your independent type designers today!

93

Yes, we need more fonts

It’s not like we have enough songs, is it?

Do we need more fonts? Please see the page opposite for the short answer. Oh, you want a longer one? Alright, here you go:

There are so many fonts out there and so many options within families that, when looking at pure numbers alone, it might be tempting to declare that we have enough already. But typeface design, like all creative expressions, knows no bounds. Saying we already have enough type in the world is like saying we already have enough music. Music, too, is abundant and many pieces of music are so similar to others — in Western music, there are only 12 notes, after all — that we could argue that there’s no need for yet more of it. But I think we can all accept that that would be absurd. Type allows type designers to express themselves creatively, and type users to put those creations to use as further expressions of our own — much as with musicians and listeners.

In TypeTogether’s book, Building Ligatures,¹ Veronika Burian argues for the need for more typefaces and says:

“Trends, technology, media, and even language evolve. These changes require an appropriate typographic response that becomes an expression of contemporary culture; and each generation has their own expression.”

Let’s also move beyond considerations around expression, generally, and consider that we need fonts to do things that others cannot.

Burian notes that, until recent history, type design has been dominated by the Western world, but in a more global society, empowered by the internet, “we need more and better language support, which means better fonts, expansion into new scripts, and designs that are respectful of regional traditions while also being a tool for expression and diversity.”

Creative requirements for type and technical requirements for fonts will always shift with cultural changes across the globe, and making do with a finite set of fonts isn’t compatible with this notion. So we should absolutely draw influence and expertise from history, but type can never stop moving. Yes, we’ll always need new fonts.

94

Latin is just one script & writing system

And “script” and “writing system” aren’t quite the same thing.

This book talks about typography within the context of the Latin script, but we should remember that Latin is one of many, many writing systems around the world. The Latin script was based upon the Greek script, and uppercase letterforms from Greek were also the foundation of the Cyrillic script. Some other examples of writing systems include Arabic, Hebrew, the various Indic scripts of south Asia, the old and newly invented scripts from sub-Saharan Africa, the Syllabics grouping for languages used by the indigenous populations of North America, and the Hangul writing system invented for Korea.

It’s also worth understanding that although we often use the terms “script” and “writing system” interchangeably, there is a difference. A script is a visual interpretation of speech, and, when it’s combined with a set of rules and usage conventions (which are known as an orthography), then we have a writing system. Yes, languages have some of their own specific rules — the alphabets may vary, the characters represent different sounds, diacritics differ — and yes, these can even vary by region, but generally speaking there’s a Latin writing system, a Greek writing system, a Korean writing system, etc. Some writing systems even combine different scripts, and in Japanese, three different scripts are used: Hiragana, Katakana, and Kanji.

Different scripts don’t just mean different letterforms or rules for how to set type, either. Italics aren’t relevant in most Asian writing systems. Indic scripts have no notion of x-height. And in many cases, getting text to render correctly as the user types it can be hugely challenging if the wrong (i.e., default) typesetting settings are used. This is largely because of shaping, which is explored on this page.

95

Do better at internationalization

The sad truth is that not enough fonts support multiple languages, let alone multiple scripts.

It’s not an overstatement to say that for many years, a large number of type designers, type foundries, and type distributors took a very Western-centric, Latin-centric, and arguably even Anglo-centric view on the world of type. It’s only in very recent history that that’s started to change, with more emphasis being placed on other languages, writing systems, and markets.

A huge challenge that many designers face is working with a brand typeface that works well across languages that use the latin script, but doesn’t support, for example, Ukrainian (i.e., the Cyrillic script), as the company seeks to expand its reach. What do we do for our client in that situation? We’re usually faced with the following choices:

1. Choose a separate typeface for the new language requirements — which will dilute the brand and create inconsistency.
2. Rethink the entire brand’s type system entirely and pick a new typeface that supports every language required — which is a very expensive process and usually not viable.
3. Commission a bespoke extension to the typeface to include the script required — which is also a very expensive and potentially lengthy process.

None of those situations are ideal, and most people simply opt for the first one as the easiest (and cheapest) way out. The best approach is to choose a typeface that supports multiple scripts right from the get-go. But it’s also fair to say that we rarely always know how many scripts we’re going to need. Even if we say, “as many as possible,” the reality is that there is a relatively small number of typefaces with large multiscript coverage.

Even the term “non-Latin” is problematic as it’s hardly fair to define something by that which it isn’t, and yet — at the time of writing — no replacement terms have successfully mitigated the problem. But it’s encouraging that ATypI have formally dropped the Vox-ATypI classification system¹ in recognition of it being so Latin-centric.

This much is true: we need to do better at internationalization.

96

Do much better at internationalization

As users of Latin type, we take shaping for granted, and when shaping goes wrong, it can mean unreadable text in other scripts.

The considerations around internationalization are not just limited to the need for multiple scripts in our fonts. Many fonts don’t even have the glyphs needed to cover Central European languages (as outlined in the previous chapter.).

When working with text in a different language to their own, something many designers misunderstand is that having the glyphs required by other scripts is only part of the internationalization puzzle. This is because many writing systems require the software used for setting type to also respect its conventions. Changing the text direction from left-to-right to right-to-left is not enough — the type must be rendered with the correct shaping engine.

Shaping is when the software assigns the correct glyphs to the characters in the text and then decides exactly where to place that glyph. In Latin, we have it pretty easy — the most noticeable effects of shaping are when individual glyphs get swapped out for a ligature (substitution) or when kerning pair data gets used to improve the spacing around a pair of glyphs (positioning). If shaping doesn’t happen, the type might not be optimized, but it’ll still be readable.

In other writing systems, however, a lack of shaping, or improper shaping, means that text could be entirely unreadable. For more information, see Ramsey Nasser’s article Unplain text.¹ For an amusing look at the problems this causes for Arabic text, see his blog Nope, Not Arabic.²

In Adobe’s software, be sure to switch to the World Ready Paragraph Composer when setting non-Latin type. Above all else, refer to the expertise of someone who’s fluent in the language you’re working with.

97

Internationalization & licensing go hand in hand

Even the huge corporations can find this stuff hard.

I’d like to tell you a story:

For around 50 years, the Swedish home furniture brand Ikea used Futura for their corporate typeface and then, from 2003, an adaptation of Futura called Ikea Sans. However, in 2009, they switched it to Verdana and when this change went public, the design world went wild with rage. Verdana (designed by Matthew Carter for Microsoft in 1996) was intended for screens (and screens that were relatively lo-res by today’s standards), and yet here was a massive brand using it for all of their materials including on its packaging, in its brochures . . . everywhere. Although unconfirmed, I imagine that the growth of the company’s digital business also contributed to this decision to use a digital-first typeface. And, with Verdana being a system font, available on virtually every computing device in the world, I’m assuming there would’ve been no licensing fees to be paid either.

Whether Ikea felt pressured by the design world’s reaction to Verdana is unknown, but ten years later, the company cited the need (again) for better internationalization and changed typeface once more. This time to Noto.

The Noto megafamily was born out of a collaboration between Google and Monotype, and its raison d’être is to serve as many languages and writing systems as possible. Adopting it as the brand typeface for an international company makes a lot of sense. And because it’s available to use for free from Google Fonts, there would presumably be no licensing fees to pay for its use on the staff workstations, or as a web font.

This story probably isn’t going to get made into a film, but it does highlight some considerations around internationalization and licensing, and shows that these challenges affect even the very big brands. Is the only option to use a free font that everyone else can use, too, thus removing any uniqueness for the brand? No, but the reality is that very few typefaces have robust language coverage and more needs to be done in this area (see related rant on this page).

98

Follow Nix’s hierarchy of typographic needs

A framework for achieving typographic nirvana.

You might be familiar with Maslow’s hierarchy of needs,¹ the triangle of five layers of human “needs,” with basic physiological needs at the bottom (sustenance, sleep, shelter) and self-actualization at the top, with each of the five layers building on the one beneath it. The idea is that you can’t have one of the layers without the previous needs being met; and therefore to achieve the fullest sense of personal growth, there are quite a few things that need to come before it.

Monotype’s Charles Nix has a talk² in which he takes Maslow's hierarchy of needs and applies the same idea to typography, resulting in what he calls Nix’s hierarchy of typographic needs.

The base need (bottom layer) is font functionality, where the typeface and the typography doesn’t even matter; there just needs to be something to relay the message. With that as the foundation, the next layer is font security, where the user is safe in the knowledge that by using the font, they’re free of any legal or monetary obligations. Then comes typographic love and belonging, where typography really begins. We care about type and feel a part of the typographic community. This moves onto typographic esteem, where our choices generate esteem for ourselves and esteem that comes from others. Finally, with all other needs met, we have typographic actualization, where our typographic choices do the perfect job of reflecting a brand’s values.

Although this is an arbitrary concept, it’s a useful consideration when we think of the many users of type: from folks who don’t care at all to professional font nerds. Where do we see ourselves on this scale? What can we do to educate others and move them up a layer? And what can we practice so that we can reach our own “typographic actualization”?

99

It depends

In typography, context is everything.

My absolute favorite answer to any question about whether or not something is the right or wrong typographic approach is . . . it depends. And while that might seem a little like a cop-out answer, in truth it’s the most honest response.

The first reason is that “it depends” acknowledges the need for context, and when typesetting, context is everything. Should this weight be used? Well, it depends on the optimal size it’s being read at, its role in the document’s hierarchy, and what other weights are in use in the text around it. Should this measure be used? Well, it depends on other elements on the page, and the leading, and again the font size. Should this alternate glyph be substituted? Well, it depends on how and why this particular context makes it more or less suitable than the default. Just as leading influences measure (wider text boxes need tighter leading), almost any one typographic choice influences all others. One choice cascades into yet more — and yes, that can be daunting. But embracing this cascade of cause and effect is the mark of a true typographer! That’s why regular folks just stick to the defaults.

The second reason is that so much of typography is about rule breaking. On the face of it, manually moving an opening quotation mark outside of its containing box doesn’t sound like something we should do, but try it, and you’ll see how the optical alignment of the column looks much better (for more, see here). But should we do that all the time? Is it on the web, powered by a CMS, in text controlled by an editor rather than a designer? Perhaps not. The manual workaround might not be justified by the additional time and effort.

And so every rule, and every breaking of a rule, should be treated as a guideline, with nothing set in stone apart from, perhaps, that eternal truth of evaluating every single typographic decision based on context. Because, well, it depends.

100

Continue your typographic journey

It’s time to see how deep this rabbit hole goes.

You’d think all of these principles would cover a fair amount of ground, wouldn’t you? And I hope that they have. But there’s still lots in the wonderful world of typography that I haven’t really been able to explore, or at least explore with more than a passing mention.

If you’re looking for jumping-off points as we reach the end of our time together, I’d recommend continuing your journey by delving into the following typographic subjects:

• Special consideration for typography in AR / VR
• Platform-specific considerations for iOS and Android app development
• Web font performance, variable-to-static bandwidth comparisons
• The different kinds of parentheses and brackets, when to use them, and how well they’re supported in different fonts
• Further considerations for accessibility beyond legibility basics
• Ordinals and superscript / subscript
• Unicode points and writing systems other than Latin
• Implementing icon fonts on the web as part of a design system
• The technical specifics of working with color fonts in the browser
• Type design itself

More than anything, though, I hope that this book has ignited, restored, or expanded a love for all things type and shown that even the most subtle typographic tweaks can lead to a radically improved reading experience. I hope you’ll return to these pages for ongoing guidance, inspiration, and perhaps even a little comfort. Spread the word: typography matters!