A series of six posts
In fashion, designers talk about statement jewelry — a necklace, for example, that takes a simple sheath dress and ramps up the visual impact by a factor of ten or two hundred.
In kitchen design, my mother used a range hood over an island as the statement piece.
In both cases, the statement is the outstanding, showy element of an overall design that draws the eye and brings all the other elements together.
We see it on the web, too. Closest to home, the current design of this very blog uses an oldstyle version of Garamond in a light weight, but big, for headings. That’s a statement, for sure. And a quick look through the design blogs will show lots more examples of statement type.
All well and good, you might be saying.
But how do you achieve it, and why would you want to?
Especially when:
- Most of your clients are in industries that don’t put aesthetics first.
- You don’t have a big budget for visuals.
- You can only use certain type families, because the client has brand standards.
Well, fear not.
Below you’ll find the first of six posts that will take you from basic terminology (What’s the difference between a font and a typeface?) to picking typefaces and type families that will pull your site together with verve and panache.
And you’ll make it all work, with less code than you’ve ever written in your life.
Make your site’s typography make a statement: a series of six posts
- The visual voice of type: basic type terms, so we can start the discussion
- The anatomy of a character. How do those parts give a typeface its voice? What makes a family appropriate for automotive or fashion, tech or consumer packaged goods?
- Setting body type so it’s easy to read long-form editorial content: a progression from naked HTML to nicely formed paragraphs and subheads
- Picking type for a site, to build a brand: a simple formula (battle-tested over 40 years of continuous use!) you can follow every time that will give you remarkably different looks that seem to arise organically from the nature of the site itself.
- Beyond Google Fonts: where do you find great type families? There are sites full of supposedly free fonts that are full of student experiments and knockoffs of famous brands. There are big sites offering entire libraries of the foundries that built the type we see every day. And then there are the places I go, for bundles, subscriptions and deals.
- Making type work: Across browsers. In block themes. In theme.json (but mostly in the Editor). And with a little PHP and CSS, you can use the entire universe of type sold online today.
Post #1 of six:
The visual voice of type
What’s the first thing you ever learned about communicating online?
Was it this? “Don’t ever use all caps. People will think YOU’RE YELLING AT THEM!”
Even in a plain-text world, if you go back that far, it was clear that type has a voice.
Type also has a language.
Work with type long enough, and you’ll discover that there are words that classify and organize typefaces. Words to describe letters and their combinations. And words to describe every part of a letter, down to the dot on a lower-case i.
The better you learn the language of type, the better your choices will match the voice of your content, attract the traffic that most wants to engage with it, and convert that traffic to solid members of your community.
Table of Contents
Organizing your type:
fonts, faces, families
Most people use the word font to describe anything connected to typography:
“Can we make that font bigger?”
“I’d rather that red font were blue.”
Strictly speaking, font has two meanings: it’s a piece of software you install on your computer or upload to a server that renders text in a particular typeface.
“I want to download that font.”
“How do you activate a font on this machine?”
Or, in a nod to type’s history in molten metal, a font can also be a single weight of a typeface, at a single size.
A typeface is a complete set of characters that share a common style (and a common name). Above, the typeface can be the named part, or the named part plus the weight and style.
A simple distinction: the font is what you use. The typeface is what you see.*
A type family is a collection of typefaces that have the same style but vary by weight. Usually each weight comes with an italic style, but not always. And, usually, a vendor will sell the whole family for less than you’d spend on three or four weights.
A superfamily is a set of two or more families that combine a serif typeface and a sans-serif.
What’s in a style?
Serifs, weights, slants
Already in our discussion we’ve had to use some jargon that describes the top three things that make one typeface different from another.
This is Haboro Normal Light, a serif typeface. Serifs (green, in the picture) are the extensions at the tops and bottoms of the main vertical in each letter that has one. Those verticals are stems. In print, art directors have long held that serifs help readability by guiding the eye across the space between letters.
This is Montserrat ExtraLight, a sans-serif typeface. It has no serifs.
This is Museo Slab Light, a slab-serif typeface. Again, the serifs are in green. Slab serifs work especially well on the web, because they retain the legibility advantages of serifs. At the same time, their extra thickness keeps the serifs visible even on low-resolution screens.
The weight of a face:
is thin always in?
The weight of a typeface describes the thickness of the lines that give a character its form.
Montserrat, at left, has all of the nine weights you can specify in CSS and JavaScript, including theme.json, with the numbers from 100 to 900. It also has nine italic weights.
Keep in mind, though, that a type family can have as few weights as one—or more than 50!
Italics: putting the slant on your type
Here are the italic weights of the Montserrat family.
Not every family has italics. And some families have oblique versions of each weight.
A true italic is a separate design from the regular version of the same family. An oblique is often little more than a slanted version of the regular style.
Montserrat has true italics: the lower-case a consists entirely of the curved part and the vertical, and they’re the same height. That’s called a single story. Serif families, like the Garamond above, also simplify the lower-case g.
Is that type wide enough for you?
Type families have a third property that defines their voice: width. The very biggest families will have a set of weights in each of several, ranging from compressed to extra-extended.
Sans-serif type families tend to come in a fuller range of widths than serif families. Here are the three widths Haboro comes in.
A later piece in this series might take a look at some reasons for that and ways to work around it.
Need some space?
So does your type!
If a block of text is hard to read, often that’s a spacing issue. Three places spacing makes a difference are between characters, between lines, and between paragraphs.
The two kinds of spacing between letters are tracking and kerning.
Tracking is a fixed distance between letters that you can apply globally to a block of text, or to every block of text that displays in a specific style.
Kerning is a fine adjustment of the space between two given letters. Most often, you’re tightening the space between an initial uppercase letter, like T or P or W, and the next letter, usually lower-case, to make the letter-spacing consistent through a whole word.
The space between lines is called leading, in yet one more nod to the old days of metal type. In those days, typesetters added thin lead bars between the lines of type to add the necessary space.
These three samples are from Adobe Illustrator. Like the other desktop tools it inspired, Illustrator lets you control spacing—both kerning and tracking—to a tiny fraction of the width of the uppercase M in the typeface you’re using. (That unit of measure is an em.)
The samples above have their tracking at -25, 0, and 25 hundredths of an em, respectively. In CSS, you set tracking with the letter-spacing property.
The Adobe tools also let you set kerning numerically—or apply one of two global values: optical and metric. Those values come from the typeface itself, which may or may not have embedded a list of letter pairs with spacing values that automatically tighten the space between, say, T and o in a word that starts with To.
There is no kerning in CSS.
Years ago, a few people wrote some JS libraries that tried to do a little kerning, but they never caught on.
Finally, there is leading. The desktop tools let you set it numerically, or as a proportion. 20% leading is the same as a CSS line-height property of 1.2.
Above, loose leading in the top sample doesn’t make a line of text hard to read. It does (to some eyes) look a little fussy.
The bottom sample is a different story. Loose tracking and tight leading makes it harder to see distinct lines of type; instead, the sample looks more like a bunch of floating letters.
And finally, there is paragraph spacing
Paragraph spacing is flexible—some folks just eyeball it. Disclosure: these samples are eyeballed (by someone who has been working with type for almost 50 years …)
If you’d like a formula, you can start with 150% of the leading. That used to be conventional wisdom for print.
On the web, a quick look at the WordPress Themes Directory reflects a preference for more space between paragraphs and still more between sections.
Next in this series: The anatomy of a letterform
Props to @greenshady and @bph for feedback and review.
Leave a Reply