Typography 101 for designers
As defined above, typography refers to the art and technique of styling and arranging type. Regardless of your design expertise, everyone in the world who is able to see and read has some experience with the impact of typography. We can intuitively understand when a certain font just works — and when it absolutely does not. But as designers, our understanding of typography has to go a bit beyond that, starting with some basic definitions.
Typeface
Typeface refers to the overall design, style, and shape of all letters, numbers, and punctuation. It is what we generally refer to when talking about a certain style, i.e. “Helvetica” or “Arial”. Typeface is broken into 4 distinct categories: Serif, Sans-Serif, Script, and Decorative, illustrated beautifully below.
Fonts
There are a whole bunch of fonts within a certain typeface (usually) since it refers to the size and weight of the letters. A font would be considered “Helvetica, bold, size 14”. And then there’s font family, which is essentially just a typeface but is used more when you’re talking about CSS coding.
As I referred to above, all fonts can fit into one of the four major categories, and it is fairly simple to determine one it belongs to. Serif fonts have little decorative strokes, or “feet”, on the tops and bottoms of the letters/numbers. These fonts tend to be a bit more ornamental and can feel a bit more traditional or formal, like the classic Times New Roman font.
Sans-serif fonts are sans (without) the little feet. They tend to be more even in weight across all of the strokes, meaning the strokes are all of the same density/width. They can be interpreted as more clean, modern, or upbeat. You might choose to use one of them for a cool, edgy tech company, or a youthful boutique sign.
Script fonts mimic being handwritten or calligraphic, and might make sense on something like a wedding invite. Decorative, or display, is sort of a catch-all for a font that is more artistic or eclectic — it might have been designed specifically for a hip new brewery, or put a smiley face in place of an “o”.
The anatomy of font
This might go slightly beyond the absolute basics, but if you are talking with designers you’ll want to know some of the basic anatomy of font AKA the specific names for each piece of a glyph.
Again, I want to outline the basics that a designer should know, so keep in mind there is much more information out there about each of these pieces. But here is my version of type anatomy 101.
- Cap height — height of a typeface’s flat capital letters, measured from baseline
- Ascender — upward strokes that extend past the cap height
- Descender — downward strokes that extend past the baseline
- Bar /Crossbar— a horizontal stroke across a letter like T, A, H, etc. (Across A and H is referred to as a crossbar)
- Stem — the straight vertical stroke in a character
- Counter — the partially or fully enclosed space within a character
- Terminal — any stroke that does not end in a serif
- Weight — thickness of a font’s stroke
- Baseline — invisible line upon which the text rests
- Kerning — adjusting the spacing between two letters
- Tracking — the uniform spacing of letters across the whole of the word/text
- Leading — adjusting the vertical space between lines of text
Visual hierarchy with type
You can create visual hierarchy using many different tools in your toolbox, including typography. Creating hierarchy is incredibly important because it directs your users to what you want them to see and what you want them to interpret as the most important. To create this hierarchy using type, you can use size, weight, orientation, color, space, and different typefaces.
- To use size, create a contrast between what you want to emphasize and what is on the rest of the page. Pay attention to how increasing the font size changes the look of your selected typeface and how it plays against the rest of the type on the page. You can find information on how to scale your size, you can try looking here or here.
- You’ve probably been playing with weight for emphasis since you found out you could put Comic Sans in bold. Increasing the thickness of the stroke is a great way to indicate hierarchy.
- Orientation refers to where text sits on a page in comparison to other pieces of text. I’ve learned that messing with orientation (tilting text, placing vertical, etc.) is one of the lesser used tricks for creating hierarchy as others can be more legible and effective.
- Color, of course, is another tool to play with. Using warm tones like red, yellow, and orange will help pop your type off the screen; cool colors will fade to the back and appear more subdued. Keeping that in mind, you can use colors to draw the user’s eye where you want it to go.
- The way you use space is incredible important not only for hierarchy, but for overall legibility. Utilizing white space, the open area between design elements, can create a strong hierarchy, highlighting whatever text you aim to.
- In my opinion, using different typefaces in the same screen or design is one of the more complicated ways to create visual hierarchy simply because it takes a bit more skill to understand what typefaces work with one another, especially if you are also playing with weight/size/spacing etc. at the same time.
Using too many fonts or contradictory fonts can create the opposite of the intended effect, instead creating confusion for your audience around what they should be looking at. To effectively pair fonts, look to pair a serif with a sans-serif, or a distinct/decorative font with a neutral one. You can learn more about font pairings here.
There is so much more to dig into around typography that goes way beyond the basics I’ve covered here, including more resources on how to effectively font pair and more info on font anatomy. I hope this little guide serves you well on your journey to be a master of typeography!
