A Beginner’s Guide to Typography Vol.1
The greatest tip I can give to a new designer or design student is to master typography. Typography is talked about so much but I don’t think it’s importance is really brought to new designers’ attention. In my 4 years at The Art Institutes International Minnesota (what name, eh?), I only had two courses that focused on typography. That always blew my away because typography was not only my favorite part of design but also the most important. More often than not, designs fail due to incorrect or just plain wrong uses of typography.
It’s my firm belief that a strong knowledge in typography can carry a design despite ineffective uses of other elements. Really excellent designs can rely purely on good typography without any use of graphic elements like shape, texture, and picture.
As we get into this, keep in mind that this should only be one of many resources you read on typography. I know, I know… I should have all the answers but I’d be lying if I said there isn’t more out there to learn. Even experts can benefit from continued education on the matter. This will be a great entry point into the basics along with some font selections and resources.
Typography Terms to Know
Let me start by saying that I'm only providing the terms that are good for a beginner to know. There's a whole language dedicated to typography which may or may not be useful to you beyond this point in your career. The following terms are the basics of typography and should be well-known.
The baseline is what it sounds like. The bottom of the letters should sit on this.
Cap height is the height of the capital letters in a typeface.
X Height is the height of the lowercase letters in a typeface based on the lowercase ‘x’ specifically.
Ascenders are any part of a letter that extends above the x-height.
Descenders are any part of a letter that extends below the baseline.
Kerning is the space between individual characters.
Tracking is the space between all selected characters.
Leading is the space between lines of text.
Hierarchy is the visual difference between different lines of text to establish a structure to guide your reader. Think of the difference between a headline, body copy, and footer text.
Serifs are the “feet” on the end of a stroke on some characters. See Georgia, Times New Roman, Garamond.
Sans serif fonts are fonts without serifs. See Helvetica, Futura, Verdana.
A weight in a typeface is the general thickness of its characters. Technically speaking, a weight can also be considered a “font” which is part of a typeface—don’t get too caught up in this... Many typefaces range from Light to Regular to Bold.
Great Fonts to Start With
The following fonts are a good starting point in your typography adventure. I purposely picked free fonts on three of the best sites to get them. Included is a great selection of serifs, sans-serifs, & scripts that can be used from body copy to headlines and beyond.
Free via Adobe Fonts (with CC subscription)
Free via Font Squirrel
Free via Google Fonts
The internet is full of amazing resources—even for typography. The following have helped me in the past and I think they're a good way to maximize your potential as a designer utilizing type.
Fontanello is an essential Google Chrome plugin. When running, you can right-click on any line of text in a website and get its font name, size, and hex code.
Adobe Fonts lets you access a huge library of free fonts with your Adobe CC subscription. The fonts show up instantly in your Adobe programs upon syncing.
Font Squirrel is a curated collection of free, commercial-use fonts.
Google Fonts is another great free font resource with the added focus on web typography. They quickly put together the CSS needed to call any of their fonts in your code.
Font Review Journal is a journal for reviewing fonts... But, seriously, it holds incredible breakdowns of some of the greatest fonts out there. It goes into detail on the history, process, individual character design, etc.
Wordmark lets you preview all the fonts downloaded on your computer. Their classic version is really easy to use and even lets you select multiple to compare.
Loremipsum io is the greatest, and best-looking, way to get placeholder text!
What The Font is a service that helps match a screenshot of a font to its massive library of fonts (100k+). It’s the easiest and most reliable out there.
Fonts In Use is fairly self-explanatory. View examples of popular fonts out in the real world.
Unique is well... unique! It creates new fonts on the fly based on the settings you input. I wouldn't recommend using this service over a font that was handcrafted meticulously by type designers, but it's really fun to play with!
This is another fun one. It's an interactive tool that lets you build segmented type. It's a great way to get out of your comfort zone and experiment with typography.
Stay tuned for volume 2 where we'll get into technique, font pairings, and typography tips. Subscribe to the Pixl Haus newsletter below to get notified anytime we put up a new post!