Last updated on September 7th, 2020
No website can meet its goals without first considering the elements of typography carefully. It is the strategic use of text arrangement that helps keep a visitor engaged with the website and its business. Typography hierarchy is the key to driving visitor’s attention to the information as per its importance. In this article, you’ll get to know about how to establish an effective typography hierarchy on your website.
A website is a major source of information for its target visitors and customers. But the information must be conveyed to the users in a strategic manner. Each bit of detail must be accessible to them immediately as per its importance. But this is not an easy task. There is usually a massive amount of text in most website pages, especially if the site is largely text-based to impart information.
Modern website designers have access to a wide range of typefaces for free. They can also use free typography generators to have different typefaces quickly in one place. This makes web page designing even more exciting as you can experiment with a variety of typefaces and their fonts.
A website designer or graphic designer makes it certain that the information is legible. But to make a website page readable is not an easy job to do. The designer needs to apply some proven rules of typography to convey the information through the use of text. This is where typography comes in the picture.
What is typography?
Typography can be defined as the art of arranging written words in such a way that they are quickly legible. An unorganized piece of text with no typographic principles involved will appear messy. The reader will leave such a website page that does not present information in text neatly and cleanly. Typography ensures that the font style, overall appearance of text, and structure are appealing to the reader or user.
We can say that typography is the art of bringing the text to life. Graphic designers are now using even types such as kinetic typography to convey action and message. They carefully use typefaces and fonts to create advertisements, websites, and other promotional materials. The main purpose of using typography could be to convey a brand message to the target audience.
What is the typography hierarchy?
While typography is about making a piece of text legible, typography hierarchy helps bring our attention to visualize details. Its main aim is to organize a piece of text to highlight the importance of information. With proper hierarchy, a visual can identify the text clearly and separate it from the rest of the text.
So, when you visit a website page and see the headline in bold letters immediately, that is the typography hierarchy. In the same way, the hierarchy lets you see a subhead and text body separately and quickly.
Also, you first see a company’s logo at the top, then your eyes move to the information in the top middle and then to the bottom of the page. That is due to the hierarchy involved in designing the page.
What are the three levels of typography hierarchy?
There are usually three levels of typography hierarchy wherever you see it. You can notice these levels while reading a newspaper, magazine, or advertisement. Most packaging materials, product descriptions, and other promotional writing involve these levels.
The three typographic hierarchy levels are the headline, subheads, and body text. Whether you read a newspaper or a description of a product, these levels of typographic elements are present. These different levels are also important to realize your typography design ideas.
The headline is in the boldest letters and is the most important as it summarises the subject of the matter described. It could be a news headline, a product name, etc. The subheads are the headlines in smaller letters and tell about what is being discussed under it. Then, the text body is in the ordinary size of the letter to write about the topic in detail. So, even website designers follow these three labels of typography hierarchy.
Why is typography hierarchy important?
Typography hierarchy plays a key role in organizing text-based information. A website designer uses the hierarchy rules to bring a viewer’s attention to the most crucial information first on a website page. This helps determine what the visitor will read first, then second, and then in the end.
In this way, even if a visitor wants to leave a website page in a hurry, the designer has made the visitor read the most important information. It is there on the page at the place which our eyes usually see first.
Here Are Some Key Reasons To Involve Typography Hierarchy In Website Design
01. Convey A Message
A strong typography hierarchy gives visual clues to help readers navigate conveniently through the content. If the hierarchy is well planned, it will communicate the intended message. It will also increase the chances that the visitors of a website page or typography design will read the message and understand it.
02. Build A Brand
The typeface you used in your website consistently becomes your brand identity. People start associating that typeface and fonts with your brand. When the same typeface appears in your other marketing materials such as logos, business cards, they can immediately recognize that it is from your brand. Of course, a lot of other elements such as colors, icons also are involved in building your identity.
03. Helps Make A Buying Decision
When visitors come to a website, they make some perceptions about it due to the design. At this point, the typography hierarchy can help them make their mind in buying a product or service or respond to a call to action. A well thought of the use of typeface on a web page by graphic designers can reinforce the message for the visitors.
04. Grab The Attention
The attention span of people is gradually decreasing. Typography hierarchy is a surefire way to drive their attention to crucial information instantly. This is extremely important when you do not want to miss the opportunity to bring something to the notice of your target audience.
How To Establish A Typography Hierarchy On A Website
01. Avoid Using Too Many Typefaces
A rule of thumb while creating typography hierarchy is to use not more than two typefaces in one design. You may have many typography design ideas, but avoid any idea that involves the use of too many typefaces. This is because combining too many typefaces can prove to be distracting. It also creates a cluttered effect.
So, use one typeface for headlines and one for the body. Now, if you mix another typeface in the middle, it will defeat the purpose of creating visual cues in the design.
02. Use Contrast To Your Advantage
The contrasting effect in website design is useful to draw visitors’ attention to the details and also makes the text readable. For instance, you should pair serifs and sans-serifs in the design. Serif typefaces are elegant and complex. When you pair them with simple and clean sans-serifs, it helps create hierarchy effortlessly for the readers.
Therefore, use one of the types of fonts for headlines and the other for the body to produce the desired contrast on the web page. For instance, a bold sans-serif typeface will present a dramatic contrast with the italic serif type in the rest of the text body page. But make sure that you do not choose two fonts that have a vivid personality. That will result in distraction for the readers.
03. Consider Your Goal
While producing a contrasting effect by the use of combining sans serif with serif fonts, make sure that they help meet your hierarchy goal. You should avoid pairing a playful sans serif with a serious serif. Similarly, avoid combining a rigid sans serif with a decorative serif. Typography artists know that combining these two typefaces will make their design complicated and undesirable.
When using the typefaces, keep in mind your brand personality or page design in mind. Each typeface you use should in the proper context of your personality of the brand or web page. It should be able to convey your message. Your brand message must be the top concern, not only when creating a website. Use typeface carefully also for other designs such as a typography logo.
Recommended Reading:
04. Plan Typeface Size Carefully
We generally tend to see a larger-sized type first. Then, our eyes see other elements on a web page. Most headlines are, therefore, in larger type sizes and at the top of the page. But you do not have to follow this rule strictly. Headlines are being placed somewhere below the top space on the web pages.
But the size of fonts is also a way to create a contrast between two different elements of typography in website design. If you use just one typeface, then the font size matters even more. Generally, the largest font size is placed at the top, subheads in smaller sizes, and the rest of the text body in the smallest size.
You should choose a font size with weight to ensure that you highlight the key information. While the boldest typeface is reserved for headlines, do not have the same size for the subheads as that will ruin the effect. However, you should keep in mind that fonts scale differently.
Therefore, the sizing of fonts can sometimes be tricky. So, make sure that you enlarge and minimize certain fonts carefully. For instance, some fonts such as Thirsty Script become illegible when enlarged beyond a certain point. Similarly, some fonts are an excellent choice for the body of text, but they work well also for headlines in extra-bold or light sizes.
Here Is What You Can Do To Pick The Right Typeface Size
- Keep your main body copy in 14 points.
- The font size of your headline should be 250 percent more than main body copy (35 points)
- Your secondary headers or subheads should be in 175 percent more in font size than main body copy (25 points)
- When it comes to the navigational elements on the web page, keep their font size 165 percent more than the font size of your main body copy (23 points)
- For secondary navigation or menus, the font size should be 140 percent more than the main body copy (20 points)
05. Color Some Information
Choose a color to drive the reader’s attention to a specific typographic element on your website page. You can also use color to de-emphasize any element. A red typeface, for instance, on a web page, will look different than the rest of the black text. But you can give a grey color to a less important type. This means that by coloring some text, you are telling the reader where to look. In this way, you influence the reader’s perception and emotions.
Remember that colors are associated with emotions. For instance, the red color of some text will convey some very important information for the reader. A pink coloring of text may indicate the sensual and playful nature of the information. However, avoid coloring too many typefaces as it will result in visual confusion for the reader.
06. Use Different Styles And Weights
Choose the type style after some considerations. You should pick a typeface and weight strategically as they are crucial to deciding on the hierarchy as per your plans. Typeface and weight should be specially picked for headlines and subheads. As a general rule, distinctive typefaces that are bold and decorative catch our attention.
You can choose fonts from their different varieties of style and weight options. Styles such as italic, condensed, small caps, and others are available to the designers. When it comes to choosing the weight, it implies that you are picking either the visual heaviness or lightness of a typeface. You can choose fonts from their variety of weights, such as light, bold, medium, and heavy.
So, you may choose all the sans-serif typeface in the same font. But they may carry different weights. The bold letters carry heavy visual weight, signaling the importance of a design element in the typography hierarchy.
Recommended Reading:
07. Use Whitespace
White space, also known as negative space, is the vacant space between two design elements. The designers use this space to emphasize a certain element. So, avoid filling the white space. If there are too many elements in the space, it may create visual noise.
For an effective typographic hierarchy, pay attention to the spacing between the letters and line both. Sufficient space between letters and lines will make the reading of text a lot easier and clutterless. But spacing is also about moving the related elements a bit closer together.
By reducing the spacing, a little bit is also a visual tool for the readers to navigate through a design easily. If the website page is a content-heavy design, such as in the case of infographics, the proximity of the elements is the key to creating quick visual navigation.
You should prominently place important information at the top and other places. The related information should be placed together, but they should visually appear as separate from each other.
Consider the case – Headlines and subheads can be created in all caps to reflect their importance. But do not overuse all caps as it will make reading a page difficult. It is better to use a mix of uppercase and lowercase if the text is lengthy.
08. Align Different Elements
Another thing to remember for an effective typographic hierarchy is to align the elements well. For instance, if you should put the elements of typography in the center, it will convey that they are important for the reader.
Therefore, important announcements, invitations, titles, and subheads should preferably be placed in the center. Usually, the text body is set to flush left as it does not require immediate attention.
These are the key considerations that you should make while using the typography hierarchy to your advantage. A careful and strategically applied hierarchy can do wonders for your business in terms of retaining your customers on your website pages. This can lead to further engagement and conversion of customers.
If you are still not sure how to ascertain a great website design with perfect use of typography hierarchy, then outsource your design project to Designhill. You should launch your web design contest at this leading creative platform.
Shortly, dozens of graphic designers will come out with amazing new design ideas as per your design brief. You can even direct them about the use of typefaces during the design process.
Wrapping Up
Typography hierarchy is a tool for driving visitors’ attention to the most important information on a website page. Generally, we read a web page left to right, and our eyes go to the top place first. A designer uses this tendency to create a perfect hierarchy by placing the significant details at the top and upper-middle places on a web page. But considerations such as contrast, spacing, coloring, sizes, etc. also are crucial to achieving the perfect typography hierarchy.