Typography

20 fonts every graphic designer should own

Renowned Italian designer Massimo Vignelli, creator of the classic American Airlines logo, once said that designers use far too many typefaces. But with so many great free fonts around, it’s no surprise that creatives’ collections are ever-growing.

Vignelli’s all-purpose toolkit features household names like Garamond, Bodoni, Helvetica, Univers, Futura, Caslon and Baskerville – between them spanning three centuries of type design history. And few designers would disagree that all of the above are timeless, albeit well-worn classics.

But sometimes something a little different is required of a display face, to give it that extra punch. Sometimes the ubiquitous serifs of Times New Roman just don’t quite cut it. Whatever your needs, the following list of top fonts that often get overlooked should really come in handy.

We’ve split our list into display fonts, serif fonts, sans serif fonts and slab serif fonts to help you find the font you need. We’ll start with display fonts…

Display fonts

01. F37 Bella

Bella is a classical Didot-inspired beauty

Based on letterforms of American typographers John Pistilli and Herb Lubalin, and Swiss typographer Jan Tschichold, F37 Bella is an award-winning display font by Rick Banks. Designed in the classical French Didot style but with a contemporary geometrical twist, Bella contains alternatives and covers an extensive range of Latin-based languages, including Western and Eastern European.

02. Eames Stencil

If you’re looking for a great stencil font, look no further than Eames Stencil

When you’re looking for a great stencil font that’s beautifully designed and not in the least bit cheap-looking or gimmicky, this House Industries favourite should be your first port of call. This top font is part of the broader Eames family, developed in homage to the late great Charles and Ray Eames. The curves in the stencil font were inspired by the curvature of bent plywood.

03. Otto

Otto is Non-Format’s first commercially available font

Otto is a stunning font from talented design duo Non-Format. Featuring a combination of delicate lines with flashes of block colour, it’s a unique display font with two personalities that works well in large formats.

04. Poster Bodoni

This Bodoni display version from the 1920s is something extra special

Okay, so Vignelli already ticked Bodoni off the list – and a beautifully classy Didone-style serif it is too, thanks to the craft skills of Giambattista Bodoni in the late 18th century. But this display version from the 1920s is something extra special for setting large, high-impact type where the extreme contrast between the stem thickness really comes into its own. A top font that’s perfect for setting large, high-impact type where the extreme contrast between the stem thickness really comes into its own.

05. Cumulus & Foam

This surreal display font combines simple, ultra-thin lines with bulbous, cloud-like forms

Designed by Stefan Kjartansson for YouWorkForThem, this utterly unique, quite surreal display font combines simple, ultra-thin lines with bulbous, cloud-like forms to give Cumulus & Foam its tagline, “the most beautifully grotesque font of our time.” Although Kjartansson proudly asserts that it doesn’t work as a typeface, this top font’s “ugly beauty” and “disciplined chaos” can certainly add character to a project.

Advertisements
Typography

Design Theory: 5 Basic Principles of Typography

1. Don’t use too many typefaces

Do you know the difference between typeface and font? According to Adobe InDesign’s glossary, ‘A font is a complete set of characters that share a common weight, width, and style’. A typeface is collection of fonts sharing an overall appearance that are designed to be used together. For example, Verdana is a typeface and Verdana  12-pt italic is a font.

Typefaces usually are broken down into the following categories:

  • Serif
  • Sans-Serif

A serif is a small line attached to the end of a stroke in a letter or a symbol. If the letters and symbols of a typeface have serifs, then we call it a serif typeface. The word “sans” is French for “without” and a Sans-Serif typeface is, as you might have guessed already, a typeface without serifs.

The thought is that the strokes of the serif typeface help guide the eye across a line of text. Serifs are almost a standard when it comes to most newspapers. Sans-Serif is said to be easier on the eye when reading online.

5_Principles_of_typography_1
Serrif vs Sans Serif
  • Display

Display is usually a typeface used with large sizes, usually 20 or above.  They are generally not used for body, but they are perfect for demonstrating a visual theme when used for titles and headings.

5_Principles_of_typography_2
Display
  • Script

Script is a typeface based on the appearance of handwritten letters and symbols.

5_Principles_of_typography_3

  • Dingbat

Dingbat is a special typeface used for scientific/mathematical formulas or graphic icons. Don’t use a typeface just because you like it, think of the impact it will have and make sure that it carries the references and associations your design needs.

2. Contrast is good, but the wrong colors can be painful

The most common form we encounter text in is black over white background. Despite the fact that people love colors, sometimes color makes text harder to read, less enjoyable and can ever cause pain when looked at for a longer time. It is almost always a bad idea to choose a text color and a background color which contrast with one another in a discordant manner.

5_Principles_of_typography_4

You need to have enough contrast between the background and the text in order for the text to be legible, but you also need to make sure the colors don’t clash. Keeping the background of the text simple (fewer colors) is often the best choice as it allows you to use a small set of colors and get optimal results.

3. Limited use of display faces

Display typefaces are fun and they look very interesting. No matter how much you like them, don’t use them excessively. Keep in mind that ornamental and display typefaces were not designed to be used for bodies of text as they generally require a larger font to be readable. A good thing to remember is that these faces tend to be more complex, thus tiring the viewer’s eyes easily.

4. Scannable text is a must

When writing for the web, readability is not the only thing you have to worry about. The user is free to surf away at any moment and with just one click. Your purpose is to make sure that the text is in such good shape that the reader will keep his interest long enough to read through the whole thing. That won’t happen unless he can easily scan it for focus points that peak his interest.

Focus points are elements that will draw the user’s attention, such as a header, a button, a graphical element, emphasized text.

The main things that impact how scannable your text is are focus points, header size and position, text size, line height, alignment and contrast. Good use of these elements will make sure your reader will be made aware of the content of your copy before choosing to read it wholly or abandon it.

5. Don’t distort typefaces

Sometimes you feel the need to stretch of pull text to make it fit in a certain space or make it look different. Don’t do it!

Their creators have put a lot of work into making them, they are very carefully designed. By squishing or pulling a typeface not only do you take away from legibility, but you also eliminate the reasoning behind that typeface being crafted the way it was.

Each typeface contains styles and weights that are already properly expanded and condensed. Type designers know that people want “thinner” or “thicker” fonts, so sometimes these styles are included in typeface families.

5_Principles_of_typography_5

If the font you are using doesn’t have the variant you are looking for, try pairing it with another font that fits your needs.

Do not use the bold and italic buttons in character palettes of the software as they are called “false bold/italic”. Instead, use the menu to find the real bold and italic, originally created by the type designer.

I’m hoping you have enjoyed our short journey through the world of typography and have found it at least entertaining if nothing else. Now let’s take a moment to see how many of these rules I have broken while writing this article, shall we? Feel free to comment and let me know below.