How to Create a Typographic Hierarchy in Web Design ?

Typography simply is a technique in user interface design to create readable, appealing, attractive, and easy-to-eye text for users to read. Typography plays an integral role in any website’s design. Other than the visual elements, text is the most important form to communicate with the users, sometimes, text is even more important than the visuals itself. Therefore, we as designers must focus on this aspect of UI design.

Typographic Hierarchy in Web Design

In this article, we will discuss how to make the most out of your typography using typographic hierarchy.

What is Typographic Hierarchy

Typography simply is a technique in user interface design to create readable, appealing, attractive, and easy-to-eye text for users to read. Typography plays an integral role in any website’s design. Other than the visual elements, text is the most important form to communicate with the users, sometimes, text is even more important than the visuals itself. Therefore, we as user interface designers must focus on this aspect of UI design. Good typography is soothing to the eyes and creates a long-lasting impression on the minds of the user.

Typefaces in Typography

Typefaces simply are the way of designing typography. Typefaces are distinct styles of writing for any font. It includes design for everything every set of characters – from letters, numbers, and punctuation marks, to symbols.

Typefaces define the visual appearance of character and hence the visual appearance of the entire typography. It is one of the most important parts of typography that sets the tone of the text.

There are two Typefaces you must know:

1. Serifs

Serifs are the oldest font styles whose characteristics are the small feet at the end of a stroke on the letter. Serifs help the reader follow the letter easily making them highly clear and readable. Serif fonts convey a very traditional vibe you can find these fonts being used in long-form copies for example, on books, magazines and newspapers.

Going back in history, characters used to be created by chiseling on stone, and the chisel created small feet at the end of each stroke. This is how Serifs were born.

Example: Times New Roman

2. Sans-Serifs

“Sans” in the word Sans-Serif in French basically means “without,” therefore, sans-serif typefaces are those that lack serifs. San-serifs fonts are simpler to look and are mostly used as body copy, display and headlines. Sans-Serifs fonts are considered as clean, minimal and modern looking. They were first used in the 15th century.

Example: Helvetica

Creating a Typographic Hierarchy – 5 Step process

Creating a Typographic Hierarchy can be divided into five main steps. Follow this steps to establish the perfect typography hierarchy in your design:

Step 1. Start with selecting a typeface

The first step is that we start by selecting a typeface for your body text. It will determine the decisions of any other typeface like headlines and labels. But why body text? because body text is the most common element in a product the look and feel of your body text will have the greatest impact on the typographic quality of your design.

There are four main categories of typefaces to choose from:

1. Serifs
2. Sans-Serifs
3. Scripts
4. Decorative

So step one is to choose any of the typefaces for your text. Make sure to not have multiple typeface otherwise the typography will not look consistent.

Step 2. Choosing font and styles

Now that we have one typeface for our body text, now we want to get creative and combine different fonts, the modern web typefaces already come with many different styles which means distinct weights or unique styles for body and head lines. For example, the San Francisco typeface from Apple. When choosing a font a quick way to narrow down the options is the filtering out the ones with less than four styles. Make sure that the font has at least a regular, italic, bold and a bold italic style.

Step 3. Have balanced line spacing and point size

The next step is to check for balanced line spacing and point size. the main factors that will influence the readability of your product are a good balance between point size in line spacing. Line spacing is the vertical distance between lines. Start with a comfortable to read point size of your body text for screen design. A reasonable size will be between 14 and 25 pixels. Depending on the typeface you choose, the line spacing will be relative to your body text size. Usually the optimal line spacing is between 120% and 145% of the point size.

Step 4. Watch your line length

Line length is the horizontal distance between a block of text. Long lines are probably one of the most common design problem on the web. the ideal line length should be between 45 and 90 characters including spaces. Shorter lines will make a big difference in the legibility of your design since they’re more comfortable to read. For the longer lines use proper apostrophes and dashes.

Step 5. Avoid the common mistakes – Use proper Apostrophes and Dashes

Most of the designers as well as developers confuse smart quotes with straight quotes.

• Smart quotes are these – “smart quotes”
• Straight quotes are these – “Dumb quotes“

The quotes that are usually next to the return key on your keyboard are straight quotes. Curly quotes can be accessed by combining the option key and the left bracket key. For opening quotes, option + Shift + left bracket key, for closing quotes use apostrophes, for contractions in use single quotes.

Don’t confuse hyphens and dashes. they look similar but they’re not the same. Hyphens are the smallest of these characters they’re used to combine separate words into one single word. They also appear at the end of the line when award breaks on to the next line. The dash is used in dates or numbers to show a range of values. It can also demonstrate the conflict or connection between two different words.

• This is a Hyphen (-)
• This is a dash (—)

And finally after all this, your professional typography is ready and your design is better than ever.

Typography Best Practices

Here are a few best practices you should follow for perfect typography in your interface design:

• Visual balance: We have to make sure that the font properties especially the font color go well with the other visuals in the design, as well as we must make sure that the font matches the mission we want to communicate through the website or application.
• Use a limited amount of fonts: A lot of fonts being used on a page makes it stressful for the users to look in. Many UI designers recommend to only use two fonts in a website or an application, rather change other properties if the fonts to make them distinct. You can do that by changing various properties of the font like, font weight, color, line height, spacing etc.
• Line Height: Line height simply is the spacing between two adjacent base lines. An 100% line height will make your text look cluttered and compact. A perfect range of line height is somewhere between 120% to 180%.
• Line Width: Make sure that the text line-length/line-width is not too long. The problem with longer lines of text is that it becomes harder to read on a screen. Therefore, make sure that you have a good size to check your line length.
• Font Sizes: A very important practice in typography for web design is to make sure that you are using readable font sizes. When it comes to body and paragraph text a minimum of 16 to 17 points is the perfect font size. Use at least 15 pixels for long text and at least 14 pixels for dense interfaces. This is the font size that takes most of your webpage/application’s font.
• Proper Typography contrast: Contrast can be created by using two distinct fonts rather than similar ones, by changing the font weight, by changing the text spacing, or through font color and background color. While creating typography, we should also take in account how the typography is going with the overall contrast of the design.
• Proper use of plugins: There are so many plugins like Count text in Adobe XD, Font Fascia in Figma, etc. that you can use to enhance your work flow, increase your productivity and improve your output.
• Mobile typography: Whenever you are using large headings make sure that when you design the mobile version of the application/website, you scale those large headings down. Adjust the font size accordingly for the mobile version of the application or the website.

Conclusion

Typography plays essential role in communicating with the users, it is not just about text styling but it also improves the user experience of the website. In this article we discussed about Typography which is a technique in user interface design to create readable, appealing, attractive and easy on eyes text for the users to read. We learned about tips and tricks as well as best practices for typography. We learned about the process of creating a professional typography and some best practices for typography. We hope that this article helped you improve your understanding about typography and you got to learn something new from the article.