Typography Best Practices

#DesignTraining
by
Lucía Gonzalez Venzano

Introduction to Typography

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. 

Typography Terms

Tracking:

The uniform amount of spacing between characters in a complete section of text (sentence, line, paragraph, page, etc.).

Leading: 

The vertical spacing between lines of text (from baseline to baseline)

Kerning:

The horizontal spacing between two consecutive characters; adjusting the kerning creates the appearance of uniformity and reduces gaps of white space between certain letter combinations.

Hierarchies

One of the most important techniques for effectively communicating content is the use of typographic hierarchy. Typographic hierarchy is a system for organizing type that establishes an order of importance within the data, allowing the reader to easily find what they are looking for and navigate the content.

This is a classic example of three levels of typographic hierarchy, an approach that’s still used today, both in print and online. Newspapers from the early- to mid-20th century offer especially exaggerated examples, like this one:

This image provides a dramatic reminder of just what typographic hierarchy is all about — organizing and formatting your type choices in such a way that readers or users can clearly see what’s most important, which enables them to easily navigate the layout at a glance and quickly scan to find the information they’re looking for.

‍You have a variety of approaches you can choose from to visually organize your content. Many of them may seem like small details, but to quote Charles Eames, an influential American designer and architect:

How to Create Typographic Hierarchy And Visually Organize Your Design

‍Remember — hierarchy is all about helping your most important information stand out visually.‍

01. Adjust Your Font Sizes

Size is the simplest way to create contrast between different typographic elements in your design. With three levels of typography, the font size generally starts out largest on top and decreases in size as you move down the page. Because we read from left to right and top to bottom, a top-to-bottom hierarchy is the most natural for readers to navigate

02. Choose a Couple of Contrasting Typefaces

Combining a sans-serif with a serif typeface has been common practice among typographers and designers for ages. It’s a classic rule-of-thumb that serves as a good starting point for any design. Even if you put only your level-one typography in a different font, that can create a big impact visually.

‍Contrast is a key component of any successful font combination.

Keep in mind that you don’t want to choose too many typefaces, which will only clutter and crowd your design; two to three will suffice for most layouts. You’ll also want to make sure that your choices are suitable for the style and context of your design.

You wouldn’t want to set important information in a funky, hard-to-read font. Or choosing a script font for long paragraphs of text that would be hard on the eyes.

Ready to transform your design?
Schedule a call

Join our newsletter for actionable marketing tips