Typography is the study and application of type and font and how these styles affect the presentation and reception of the message conveyed through text. And if you have any aspirations of making it in graphic design, web design or even in advertising, you need to have a solid grasp of these principles. In short, how the text is presented from font, to letter spacing to orientation, will determine how effective the message is received.
In this guide, we’ll look at key terms that relate to typography, characteristics of different styles of typography, web typography, and how to put it all together.
If you liked this guide on typography, you may also enjoy these posts:
- Best Movie Posters: Unofficial Typography Posters for Famous Films
- Photoshop Tutorials to Illuminate Your Typography
- 10 Best CSS and Web Typography Font Tools
- Spectacular Examples of Typography in Print Ads
- 30 Great Popular Free Fonts
- 50 Best Photoshop Text Effect Tutorials
- 20 Examples of Big Typography in Web Design
- 30 Beautiful 3D Typography Artworks to Inspire You
Hope you find this guide useful, and if you do, please share it with your friends.
Thanks for reading!
Key Typographic Terms
Ascender: The tail that extends upward on letters. Examples include b, d, h, k, l, and t.
Cap height: The height of capital letters.
Counter: The white space contained within a letter, as in o.
Descender: The tail that extends downward on letters. Examples include g, q, p and y.
Baseline: The area on which the lowest portion of a letter sits.
X height: The height of a letter without considering ascenders and descenders.
Tracing: The space between words, or a group of letters.
Kerning: The space between letters.
Leading: The space between lines of text.
Letter and Line Spacing
Now that you know some key terms, we can move onto how the spacing of text matters a great deal in typography. The space between letters is called kerning, whilst the space between a group of letters, or a word, is known as tracking. Mastering kerning and tracking will heavily determine how readable and presentable the type is. There are no definite measurements that define between the right and wrong way when it comes to spacing. However, if the text is easy to read, then you’ve done right. If the letters are squished together or spaced too far apart, making the text difficult to comprehend, then you’re in the red.
You also have to consider the space between the lines of text, as well as the letters. This is known as the leading and assures that lines aren’t smashed on top of one another or don’t appear is if they’re floating away.
How the text is aligned also plays a major role in how your message is perceived. As you may have noticed, text tends to automatically align to the left in most word processors. This makes for a standard paragraph format. It’s nothing fancy, but easy to read. Right alignment, on the other hand, tends to be used exclusively for adding the date to a letter, or ensuring text aligns properly on specific-sized documents like business cards and labels. When titles come into play, center alignment is usually the mode of choice. This ensures each line stacks on top of one another neatly. Finally, there’s the justified text alignment. This forces the spacing between the letters to shift depending on how many letters are on a line. The left and right margins are fixed, which can cause the kerning to be super stretched out.
Source: Farhad Fana
With all of these details out of the way, we can finally discuss the major font or type families available. You will be selecting from one of these, regardless of the message of your type.
First, there is serif, which is a kind of type that includes strokes at the end of each letter. A popular font with serifs is Times New Roman. Next is sans-serif, which, as you may have guessed, is a font that does not have these strokes at the ends of the letter, making it very easy to read, especially online. Popular choices include Arial and Verdana. Script fonts mimic handwriting and then there’s decorative type and symbols that break away from the standard alphabet.
Putting it All Together
Regardless of what font you select, make sure you remain consistent throughout the construction of the typographic design. The font should complement the message, but not distract from it. Likewise, don’t use a ton of different fonts. This is just distracting. If anything, just use a different font for the title.
As said before there is no right or wrong way in which to present typography. The space between lines, words and letters is indeterminable without a chosen font or typeface. The style of typeface that is chosen for a project also relies heavily on what the artist is trying to convey. Arguably serif has an old fashioned/classic aesthetic and feel, whereas sans serif is more current and in theme with post modernism.
Don’t forget font styles like bold and italic to spice up the text without introducing a new font into the mix. And finally, don’t be afraid of color. Whether in print or online, a splash of color can liven up any design and help highlight a key term in your message.