Three Levels of Typographic Hierarchy PDF

Document Details

TemptingGyrolite4910

Uploaded by TemptingGyrolite4910

Tags

typography graphic design visual hierarchy design principles

Summary

This document provides a guide to creating effective typographic hierarchy in design. It explains how to create a clear visual hierarchy where the most important information stands out. The guide emphasizes the role of font size, style and weight in determining hierarchy levels.

Full Transcript

Why Every Design Needs Three Levels Of Typographic Hierarchy Graphic Art Skills Hierarchy Hierarchy — it’s a big word, but an easy-to-implement concept when it comes to typography. Even if you’re not familiar with the term, you’ve likely run into typographic hierarchy many times! J...

Why Every Design Needs Three Levels Of Typographic Hierarchy Graphic Art Skills Hierarchy Hierarchy — it’s a big word, but an easy-to-implement concept when it comes to typography. Even if you’re not familiar with the term, you’ve likely run into typographic hierarchy many times! Just picture a newspaper, with a headline, subheadline, and body copy. 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: Organizing and formatting your type choices in such a way that readers or users can clearly see what’s most important! This enables them to easily navigate the layout at a glance and quickly scan to find the information they’re looking for. Let’s look at examples of the same page... Which one is more visually appealing?? HOw Do We Create Effect Type? Level One: Generally, your level-one typography will be the most important content or information; this should be the most immediately visible typographic element in your design. Level Two: Level-two elements usually help organize your design into sections or group related information together. They shouldn’t stand out as much as your level-one type, but should clearly direct viewers to the different parts of the design and help them navigate it easily. Level Three: For a text-heavy layout, the level-three typography is generally the meat of the design. This is where the copywriting lives, where you get into the message of your design. It could be long or short — a whole article, a short note, a brief description — but the primary concern for this level is that it’s easy to read, since the font size will likely be somewhat small. LOOK AT THIS AD...there are at least three levels of typographic hierarchy. Level one= Product Name (Major Black headphones) Level two= the price Level three= product description Notice how the description paragraph is set in an easy-to-read serif with a generous amount of spacing between lines (also known as “leading”). 01. Adjust Your Font Sizes Size is the simplest way to create contrast between different typographic elements in your design, especially if you’re only working with one typeface. With Three Levels of typography, the font size generally starts out largest on top (level one; your most important information) and decreases in size as you move down the page (with any body copy or text being the smallest at level three). Because we read from left to right and top to bottom, a top-to-bottom hierarchy is the most natural for readers to navigate. This is a very common layout that you’ll see in everything from books and magazines to articles on the web. Here’s An Example Remember — hierarchy is all about helping your most important information stand out visually. If you set type at a size that’s larger than all the other text in the layout, it’s sure to attract attention. What is most important in this advertisement? 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. 03. Experiment with Different Styles and Weights Many fonts come with a variety of style and weight options. Different styles might include italics, small caps, or condensed or extended versions. Weight refers to the visual lightness or heaviness of a typeface. If a font you’re using comes with light, medium, bold, and heavy versions, those are all different weights.