May 15, 2018 Using Meaningful Typography in Your Design

Typography is the art of arranging type with the aim to make your design look aesthetically appealing and easy to read. Typography itself is an art and it represents 90% of the design, it helps support your brand and convey your message.
As part of the Design Month, we’re doing a Typography Fun Challenge. We also did a Typography Workshop so you can understand the basics better.
Similar to colors, fonts can communicate a lot about a business type: depending on your font choices and sizes you can send a feeling of seriousness and power or you can be fun and playful. A good typography will have a consistent hierarchy, kerning, leading and formatting across all the pages which will help user scan the text faster and make your page more professional. By using hierarchy, we can drive the user to read the text in a specific order from big texts to smaller depending on their importance.
Fonts can be divided into 5 categories:

Associations: authority, tradition, respect, reliable.
Top 5: Times New Roman, Bodoni, Georgia, Garamond and Baskerville.
Usage: for a newspaper site, on a resume or on a formal invitation, when designing applications for older generations.

Associations: modern, objective, clean, stable.
Top 5: Helvetica, Arial, Verdana, Century Gothic, Calibri.
Usage: for any body text as they are more legible than serif fonts and basically anywhere else as it’s the easiest type to read through.

Associations: strong, bold, modern, solid, funky.
Top 5: Rockwell, Museo, Bevan, Courier, Clarendon.
Usage: websites and applications headlines, flyers and print.

Associations: elegant, feminine, friendly, creative, intriguing.
Top 5: Lobster, Zaphir, Pacifico, Lucida, Brush Script.
Usage: Greeting cards, banners, wedding invitations, signatures.

Associations: fashionable, stylish, sharp, intelligent.
Top 5: Infinity, Eurostile, Majoram, Matchbook, Politica.
Usage: when you design applications for younger generations, for body text, headings.

How to combine fonts?

Combining fonts is partially science and partially intuitive: the secret here is to have a good contrast between them, because if the fonts are too similar, it requires a lot of brain effort to notice the small differences. Good contrast leaves no place for ambiguity. In general, it is better not to use more than 3 font types in your designs.

Here are a few tips to start with:

1. Pair Serif and Sans Serif fonts as they always look good.

2. Don’t pair fonts with similar weights – better use a light font and a bold one

3. Pair radical different styles like Sans Serif and Script fonts.

4. Avoid similar typefaces.

If you need more help you can use this cheat sheet to see the best fonts combination:

The more you practice the better you will get at it. There are some good practices, but listen to your intuition and have fun when pairing fonts.

Typography terms that every designer needs to know

1. Tracking: This represents the letter-spacing through an entire word and is distributed equally. It affects the text readability and makes lines of type even.
2. Kerning: This represents the spacing between individual characters. Most fonts will have specific default kerning for individual character sets so that the spacing in between the letters in words feels more natural.
3. Leading: This is the vertical space between multiple text lines. A good leading (line height) will make your text easier to scan and more aesthetically pleasant.

What’s the ideal usage?
Positive tracking is used mostly when we make certain labels in all caps and we add a small space between letters as it improves readability. Negative tracking can be used to make the headline more compact and serious. Both are commonly used in logo designs.
Kerning is used more rarely, only when we want to fix the distances between two adjacent letters.
There is a magic formula for calculating the leading that always works:
Line_height = 1.5 * font_size, so if your font size is 20px, than line height will be 30px

4. Typographic scale: This refers to the range of values at which the type is scaled and it’s good to have a harmonious scale because it helps to control the pace at which a reader digests the content and by introducing hierarchy it helps navigate and make connections between different sections of your content. One way to have a pleasant scale is to consider using ratios, like for example the golden ratio (1.618) to determine the headings sizes. We start by establishing the paragraph font size as that’s the most used and we go upper. Assuming we have a 16px body text:
Heading 3: 25.88px
Heading 2: 41.87px
Heading 1: 67.73px
Body: 16px
You can read more about other scale types on Typecast, follow Google’s Material Design type scale or just use this calculator to get different scales.
What are the best sizes to use?
It all depends on your design and audience, but nowadays 16px is considered the new 12px and even better 18px to make the reading easier for users, especially when there is a lot of text to read – be nice ☺. For tablet and mobile, always test on devices to see how it looks, but don’t go below 16px.
Bigger fonts are not only easier to read and help usability, but also they can make the difference between converting users to customers or just leaving your website.
5. Line length: This refers to how many characters there are on each line. The ideal line length for body text on desktop is considered to be 45-75 characters including space, because if the line is longer, the eye will have a hard time focusing on the text and will be difficult to continue onto correct line in large blocks of text. That would mean to have text container of about 560px – 600px wide. For mobile we should use between 35 and 50 characters per line.
6. Readability
The main role of typography is to offer text easier to read, not only beautiful. That means it should have a good hierarchy to drive user in the order we want to, a good amount of white space around, good leading, kerning and appropriate tracking. This is easier to do on backgrounds of one color, but what do we do when we have text over images, like for banners, for example?
Let’s assume we have to design a banner and we need to use a specific text from client which includes a title, subtitle and some description.
Version 1: Adding text over image creates different problems because of the multitudes of colors on the image. Neither dark or light text won’t make a good enough contrast for the text to be readable.

Version 2: As much as possible find your oasis of continuous color, or few color variation to have more freedom in adjusting colors for the fonts and have text more readable.

Version 3: If you don’t have a continuous spot of color, then make it, by adding a background with or without transparency behind text.

Version4: You don’t have to settle for the classic rectangle behind, can go for more organic shapes either standard or customized.

Keep practicing!

Typography is part science, part art – the perfect mix to find is obtained only by practice and learning with every design.  If you join our Typography Challenge, you can start with designing great posters for our Indonesia event. Keep practicing and keep getting better!