Fonts & Typography
Typography, and designs revolving around hand-lettering and calligraphy, have been on the rise in recent years. And for many amateur creators, the task of picking just the right font for their designs can still be quite daunting; finding the perfect font and the accompanying arrangement is an art form in itself.
So what is typography anyway? Well, simply put: typography is the style or appearance of text. You may have overlooked it within your daily life, but it’s all around you. It's on the stop signs on the corner, in the books you read, the websites you visit, and nearly every single advertisement you come across.
In this article, you will learn the basics of fonts and typefaces, and how to best incorporate it into your designs. Let’s begin!
Types of Font
Most fonts you find will likely fall into 1 of 3 basic categories of typefaces. Each have their own charms so be sure to experiment with each:
Serif and Sans Serif
Serif has additional decorative flourishes called “serifs” attached to the main part of the letter. Serif has a very classic look, and is a popular choice for more traditional and formal designs. It's commonly used on products such as invitations and business cards.
Sans-serif is a more modern approach, and does not include that extra decorative flourish. It’s a popular choice with the more minimal and modern designs because of its clean lines. It’s also easier on the eyes when reading.
Display
Display fonts can be any decorative fonts such as scripts, brushstrokes, blackletters, etc. They are intended for titles and other statement texts; best to use these sparingly on headings rather than extended text.
Typographic Hierarchy
As you learned earlier in the 'Principles of Design' article, establishing visual hierarchy within your designs helps your audience prioritize the different visual elements in your design, to determine what’s important, and what needs to be consumed first.
Typographic hierarchy works in the exact same way: it presents your text so that the most important words are displayed with the most impact. By arranging the color, contrast, position, size and even orientation of your text, you can narrate how your designs are visually consumed.
Sizing
The easiest way to highlight typographic hierarchy is to scale the size of your main point to allow it to stand out from the rest of your text. Basically: larger things generally grab the most attention. But be sure that the element you’re highlighting is indeed important and helps to narrate the visual message.
Also, be careful with some decorative display fonts as enlarging them may actually make the design harder to visually process. You can also use the bold feature for a more subtle approach to sizing.
Mixing and Matching
Pairing different fonts can break up the monotony of a design and really help give it an interesting contrast. Even pairing serifs and san-serifs together can really give a design that extra pop of elegance. Use different fonts to help differentiate your main text from your supporting text.
However, be careful not to choose fonts that contrast greatly in personality, as it may muddle the harmony of your design. We also recommend keeping your font pairings to no more than 2 within a single design; any more and your designs may come off cluttered.
Colors
Adding splashes of color can not only guide your viewer’s eyes, but it can also harness some emotional undertones as well (see The Basics of Color Theory).
Spacing
Next up is the proper use of spacing. In typography, there are 3 different spacing techniques you should be mindful of: kerning, leading, and tracking. Well-crafted text may start with the fonts, but it all comes together with spacing.
Leading (pronounced: ledding) determines how much the baselines of text are vertically spaced.
Kerning
Kerning refers to the spacing between the individual letters. Making adjustments to the kerning can help with typographic hierarchy and can give a great stylized flair to your design. However, too much or too little kerning can make your design look rushed and hard to read.
Tracking
Often confused for kerning, tracking determines the spacing between not the individual letters, but a group of letters as a whole. Tracking adjusts the density for larger blocks of texts and is a great tool when you’re trying to achieve a more uniformed look.
And that's it! Here are some great resources if you want to dive deeper into the world of typography:
Jump to Another Section
