Typography is the art of expressing yourself through type or symbols. It is, according to David Jury, director of graphic design at England’s Colchester Institute, “something everyone does” in this digital age where you can download fonts at the click of a button. And yet, for just about “everyone” I know, yes, even designers, choosing the right font can be a frustrating experience.
This article will break down the process of selecting the right font for your design into 5 easy steps. I wrote this for web designers, but others may also benefit from reading it. Let us begin.
STEP 1: FIND READABLE TYPES
First rule, don’t overthink it. You may not want to follow the giant crowd of Helvetica users. And, somehow, you wonder, why Helvetica?
Well let me tell you…
Because it’s so damn good! It fits perfectly in every design imaginable, works well in small and large sizes.
But, for those of you who have a long way from Helvetica, here’s a simple process I follow when selecting a type for my website’s body content. First, you choose a font, paid or free, that you like. Then reduce the font size to around 10 points. If you can still read the text without squinting, congratulate yourself. You have chosen well, my friend.
STEP 2: DETERMINE THE SIZE AND HIERARCHY
As a general rule of thumb, the font size for your content should be 12 points. Some sites even use 14 points for better readability.
The title will generally have a larger font size. But, there is no hard and fast rule in the visual hierarchy. Everything is relative. You can use color to distinguish the most important title. Or, you can choose an entirely different font for your titles to give them more meaning. The choice is yours.
STEP 3: BE A LEADER AND FOLLOW-UP
The leading is the space between each line of text. A bad headline can make awesome copy seem boring and hard to digest. Whereas a good header can make even bad copy look readable. As a general rule of thumb, the standard CSS line height for a block of text is 1.5 times the font size.
Tracking refers to the space between each character in a block of text to affect its density and texture. The reader will perceive the text differently depending on the amount of space. Narrow tracking or negative letter spacing not only reduces the readability and readability of the text. It could also trigger the cultural association of a more subjective typographic voice, the equivalent of a fast-talking car salesman. Conversely, increasing the letter spacing in the text (to a certain extent) increases readability and the cultural association has a more objective voice.
STEP 4: SPLASH SOME COLORS
I’m not talking about color scheme here. Instead, it’s about choosing the color scheme for better readability.
The common mix is black text on a white background and white text on a black background. But you can mix and match any color as long as the content is readable.
STEP 5: GET PAIRING
Most of the time, it is not enough to use only 1 source for your content. You may need to use a serif font for your title and a sans-serif font for the text of your content. Or vice versa. There is no absolute rule in the choice of this mix. However, you can base your choice on several best practices.
First, combine a sans serif with a serif. It’s a classic combination and almost impossible to go wrong.
Second, contrast the font weights. Avoid confusing typographical hierarchy by distinguishing elements in the hierarchy from each other.
Third, don’t mix moods. Each font has its own personality. And mixing up the mood of the typefaces can draw attention to the typography rather than the message, resulting in poor design.
Finally, create a typographic texture variation. Play around with font weight, size, stroke width, leading, kerning, and various other factors. An easy way to see typographic texture is to squint at a layout until you can no longer read it, but can still see the text in terms of its overall tonal value.
IN CONCLUSION
Paul Rand, an American art director who designed some of the world’s most recognizable logos (including Steve Job’s IBM and NeXT), once said: “The text, art and typography should be seen as a living entity; each element it is integrally related, in harmony with the whole, and essential for the execution of an idea.” I hope this article helps you do just that.