Newspaper journalists and early advertising flyer printers had this right from the beginning. While they were confined to black and white print and minimal type font, they knew that the most important part of what they wanted to say had to be in big bold letters at the top. The next priority of importance in a bit smaller print was placed under that big bold heading, and then the text followed. The text was broken up by smaller sub-headlines, just to keep the reader focused and prepared for what to come.

We’ve come a long way, but designers still understand this basic of visual Hierarchy – people know where to look and what is important, and this has to be accomplished first by typographical hierarchy and then enhanced by all of the elements that have been developed since those early newspapers and flyers – color, placement, white space, font variety, etc. The goal is the same – give the reader a “road map” for what is important and how the flow of the content moves. Certainly, there are many visual tools to do this, but typography is the place to start.

The Importance of Hierarchy

Hierarchy of type, as stated, gives the order to the text that is included in any website design. When designers and developers put web content together, they use header tags – H1, H2, H3, etc. in order to organize text. They also use visual cues, of course. But typography is the start point because it allows readers to scan your text, finding what is snackable that meets their needs.

In terms of visual clues, the typical English language website is set up for readers who move from top left, read across and then down. This is “normal.” Most type is organized to accommodate this reading behavior. Sometimes, however, a designer may put the big, bold, colored type in the middle of a page. In this instance, the reader will be drawn to it first and, if intrigued or engaged, will go back up and read the other content, so long as it is in snackable pieces.

When a designer knows the behavior of readers, he can then plan the typographical hierarchy – he knows what the reader will see and absorb first, second, and so on.

And readers can take in the “stand-out” headlines and decide whether the rest of the content is something they want to read.

Creating Good Visual Hierarchy Through Typography

Because typography involves size, color, orientation, typeface, space, and texture, there is no single solution that designers can use. Depending upon the product or service, designers have all sorts of options.

1. Size

Consider, for example, the landing page of Dollar Shave Club.

While the company is also appealing to women, its original purpose was to be “masculine,” and, indeed, men are the source of it greatest revenue. The typography that hits the eye first is “Get Your 1^st Month Free,” then “Just Cover Shipping,” but the “Try it For Free,” is encased in an orange box to attract attention. The letters are a thick block with some “dirt” embedded now and then – clearly a masculine “feel.” Details, such as the links and the “choose….” phrase, are small because that is not the purpose of the page.

Size is one of the easiest ways to set up the hierarchy. The key to making it effective is to ensure that the different sizes work together with appropriate and balanced scale. The following percentages will form a type of guideline. You will want to experiment, though, to see what works best:

• The Body Text (14 points)
• Main Headline(s) – increase by 250% (35 points)
• Sub-Headings – increase over main body text by 15% (25 points)
• Navigation Links – About 165% over the main body (23 points)

2. Typeface

Many designers state that too many different typefaces can ruin a theme, and this I certainly true. However, choosing two different typefaces in order to show hierarchy is also common. The important thing is to pick two that are similar (perhaps one serif and one sans serif) that have a similar “feel” but different weights. If you decided upon rounded letter corners, for example, keep that theme. Have a look:

Different typefaces, but the theme is maintained – a block “feel.”

3.Weight

Weight is all about the thickness of the letters you choose. Even though font sizes may be similar, thicker letters always appear to be larger and will catch the eye of the reader first.

source

The type font above is not that much different in size, but the thickness of the letters make a huge difference in what stands out to the reader and where that reader’s eyes go first.

When you pair thick and thin typefaces in close proximity, be certain that the most important words or phrases are the thicker ones.

Here is a great combination of size and weight:

source

This is an excellent combination of thick and thin (as well as typeface, size, and color) to create a sleek design – the “High Five” is clearly prominent, superimposed on an even weightier number “5” that provides the background weight. The sense of hierarchy is clearly established.

4. Color

The color is such an easy “fix” to establish hierarchy, and it has the added value of adding interest to a design. When used in the text, color adds weight to any type. The most important thing to remember is that the “theme” of the design must be maintained. So, while you experiment with color, consider whether warm colors (red, yellow, brown) or cool colors (blue, purple gray, etc.) are a better fit.

Another “rule”: Warm colors tend to “pop” while cooler colors than to fade.

Contrasting hues are another consideration. The brightest colors will tend to “lift” off from the rest of the type – away from the more muted ones.

There are lots of typographical elements to talk about in this shot of Toms Shoes landing page, but the color is certainly an important one. The idea behind Toms is “one for one.” For every pair of shoes customer purchased, one is given to a needy child somewhere in the world. Using the muted orange tone for the typography provides a warm “feeling” that coincides nicely with the company’s mission.

5. Orientation

Orientation refers to how text is actually laid out on the screen, especially in conjunction or contrast with other text. Because most text moves straight across a screen, any deviation from that will immediately draw attention, no matter what the size, weight, or color. Sometimes, designers will place the most important word(s) vertically. Changing orientations of words should be used sparingly, but, nevertheless can be quite effective. When orientation can add to the concept or idea, it can be quite appealing:

source

North face, the athletic clothier, has always had a vertically worded logo:

And it has experimented with other orientations on its clothing which always bears its name or logo somewhere:

6. Space

Nothing irritates the eyes of a reader more than too much text scrunched together. Designers and even content marketers understand that text must be broken up. Thus, when companies offer package deals they provide plenty of space between them so that each stands out on its own. When bloggers create content, they use bullet points to divide text and give space between points they are making.

Notice how Dollar Shave Club presents its three blade choices:

Each is titled with a weighty type and described, but there is plenty of space between those three descriptions, giving the eyes a rest and allowing the reader focus on each description separately.

Every bit of space affects the hierarchy of text. The more important information should have more space around it.

7. Texture

The texture does not really refer to putting textures or patterns within block lettering. It refers more to the patterns by which text is laid out on a page or a screen. To establish a pattern, blocks of text are broken up, either by using the tips already listed above or by making simple changes, such as alignment and indentation.

Perhaps the best examples of texture can be found in resumes. Creators of these documents, such as resumes.expert, will study an applicant’s background, qualifications, and work experience and develop a textural design, based upon those elements and as well, the “culture” of the organization or company to which the client is applying.

The Levels of Type

Some typography projects may call for a lot of complicated hierarchies, but these are the exception rather than the rule. Too many levels, fonts, weights, etc. can create a “messy” feel and take away from the important messages. The vast majority of designs should encompass three basic levels:

1. Primary Level: This is for your headlines and those words and phrases that must stand out. This does not include banner and other “art” elements that have type in them. The purpose is to grab attention and engage quickly
2. Secondary Level: These are sub-headings, picture captions, navigational elements, etc.
3. Tertiary Level: This is all text that is a part of the main body of content. The important thing to remember is that it must be scannable by the reader.

Have Some Fun

Organizing and experimenting with type can be fun, even though it may be challenging. The one thing to keep in mind is that you want the type you use to align with the overall theme of the company/site and to flow together well. If you consider all of the relationships – size, typefaces, weight, orientation, space, color, and texture – as well as how readers view and absorb content, you will have a hierarchy that works. 

About the Author:

Janet Anthony is a blogger from Kansas City who has been writing professionally for five years now. She mostly writes about blogging, WordPress topics, and web design. Her motto is “What you do today can improve all your tomorrows”. Find Janet here: twitter

The post 7 Tips for Better Typographic Hierarchy appeared first on PremiumCoding.