realview blog banner

How To Create Clear Typographic Hierarchy For Your Digital Flipbook

typography-insightTypography is important to any publication. It recruits new readers and sustains existing ones through different play of typefaces. It’s what draws readers’ attention and makes them want to subscribe to your print or digital editions.

If you look around digital space, you’ll see tri-level typography common in today’s digital magazines and newspapers. Employing such hierarchy for organizing typography to establish an order of importance within content allows readers to easily find what they are looking for and navigate the information.

If you’re looking at ways to visually organize the content of your flip digital publication, here are Janie Klever‘s tips on how to use typographic hierarchy to your flipbook‘s advantage!

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.

Remember — hierarchy is all about helping your most important information stand out visually. Whether that information is a name (maybe on your business card; or the name of a performer or guest speaker on an event poster), the title of an article or blog, or a special discount or promotion on an advertisement, if you set that type at a size that’s larger than all the other text in the layout, it’s sure to attract attention.

For instance, the price on this special offer stands out well due to its large size in relation to the rest of the text on the right side of the layout. Using a bright red to further highlight the promotion is also a smart choice (for more on using color in your typographic hierarchy, scroll down to #4).”

 

type-hierarchy-4
Dribbble/Flavius Nechita

02. Choose a Couple of Contrasting Typefaces
Think again of the “On the Moon” newspaper headline we looked at at the beginning of the article. Doesn’t the bold, sans-serif typeface contrast dramatically with the italic and serif type on the rest of the page? While pairing typefaces doesn’t always have to be quite that dramatic, contrast is a key component of any successful font combination.

And 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.

 

type-hierarchy-4
Dribbble/Filip Slováček

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.For instance, you wouldn’t want to set important information like the time and date of a corporate event in a funky, hard-to-read novelty font. Or choosing a script font for long paragraphs of text would be similarly hard on the eyes. Some fonts get difficult to see clearly when they’re reduced to small point sizes. These types of issues and how they affect the readability and overall look of your design are important to consider for any project. For more tips on how to effectively combine fonts, check out another Design School article, “10 Golden Rules You Should Live By When Combining Fonts: Tips From A Designer.”

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.

These characteristics give you lots of options when it comes to assigning different roles (or just a different but complementary appearance) to various typographic elements in your design. Take this branding for a newsletter, for example. All the sans-serif type here is in the same font, but different weights. The bolder letters of the newsletter title make it extra visible; that visual weight signals that it’s the most important part of this design’s hierarchy.

 

type-hierarchy-5
Dribbble/Whitney for Switch.co

And these labels have been designed with a variety of regular and bold weights, along with italic and small cap styles — all using the same typeface.

 

type-hierarchy-6
Dribbble/Hoefler & Co.

04. Add Some Color
Like font styles and weights, color is just one more way to make certain parts of your design stand out a little better. Because colors often do carry their own meanings and associations, you’ll want to make sure your choices match up with your brand and/or the purpose and mood of your design.

This invitation for an event hosted by a sustainable coffee company does just that, with natural, earthy colors for the typography that support the brand’s characteristics and the theme of the event.

type-hierarchy-7
Dribbble/Krista Engler

Likewise, this business card set features a distinctive, blue-and-yellow color combination for its typography that’s very eye-catching. The colors have a fresh, clean feeling, so — though there’s no traditional black or navy blue in sight — they’re still appropriate for the orthodontic practice that the cards were created for.

type-hierarchy-9
Dribbble/Tymn

 

05. Pay Attention to Spacing
In a design, the spacing between typographic elements — both letter-spacing and line-spacing — can make all the difference between a balanced, easily readable design and one that looks cluttered and confusing.

Remember the examples of no hierarchy and limited hierarchy several images back? Neither of them had any spacing between the sections of the newspaper article, which made for a harder to read, less effective design. That’s because spacing (or white space) visually separates different parts of a design but also helps the viewer understand and visualize how all the pieces work together.

For example, the generous spacing (along with a variety of creative type treatments and well-placed dividing lines) make the typography here look balanced, even in a space as small as a clothing tag.

 

type-hierarchy-8
Dribbble/Steve Wolf for 828

When you’re looking at a layout that is spaced well, it’s immediately obvious how you should go about reading or getting information from the design. But when you’re looking at a design where maybe the designer felt that he didn’t have enough space to work with (so he crammed a lot of content together without considering spacing) — then you might find yourself squinting at text that’s too small to read. Or looking for information, perhaps an address or phone number, but it’s not immediately clear where to find it. Or not even wanting to bother interacting with the design because it looks like a mess.

These presentation slides avoid that problem by using generous line-spacing and surrounding text and other elements with plenty of white space. Blocks of color and geometric shapes also help organize and separate the different design elements.

 

type-hierarchy-11
Dribbble/Rob Luke for Skookum Digital Works

You don’t want readers or users feeling frustrated by your design. So putting a little extra effort into crafting a balanced design with plenty of white space is worth your time.

06. Pay Attention to Spacing, Cont.: Proximity
Spacing isn’t just about separating typographic elements; it’s also about proximity, or moving related items closer together. Reducing the spacing a bit between pieces of text that go together (to make it more obvious that they go together) is another visual tool to help viewers navigate a design more easily.

Particularly for content-heavy designs, such as infographics, proximity is key to creating a balanced design that makes sense visually.

 

type-hierarchy-9
Dribbble/Elysse Ricci

 

07. Play with Orientation
Sometimes a straight line of text just doesn’t cut it when you want to make a statement with your typography. In that case, a bit of tilting, slanting, or warping might help set your design apart from the rest and attract some extra attention.

 

type-hierarchy-10
Dribbble/Bethany Heck

It’s likely that you’ll use all or most of these methods of creating typographic hierarchy in a single design project, as with this bridal shower invitation. It uses font size, contrasting typefaces, color, spacing and proximity, and orientation all to good effect.

 

type-hierarchy-11
Dribbble/Casey Cooke

Read full article on Design School.

Trusted by content providers worldwide, Realview can offer you all of the epublishing tips, tricks, and tools needed to successfully catapult your brand into the digital space.