If you follow this blog, you’ve probably noticed that I’m gradually improving its appearance and functionality. In general, I’m trying to make the blog as readable and visually pleasing as possible to enhance the user experience and encourage you to return.
Recently, I’ve been focusing mainly on typography and discovered some interesting things. Some of them I already knew from my experience, some I knew intuitively, and some I didn’t. In any case, I decided to share with you a few important points related to typographic hierarchy, which ultimately aims to improve readability and user experience on your website.
What is Typographic Hierarchy?
Before we dive into explanations and examples, let’s answer the question of what exactly is typographic hierarchy?
In simpler terms, typographic hierarchy is practically implemented by arranging and presenting elements in a way that implies their importance using color, contrast, shape, position, and font size. Designers organize these elements so that users perceive the visual importance of elements relative to each other and in relation to the overall page content.
In traditional reading materials, chapters are divided into sections and subsections, with each of these books having its own minor variations. In our modern world, which is centered around the web, we still adhere to these principles for books. Chapters are individual pages, table of contents serves as navigation menus, and subsections remain as they were.
Regardless of the medium, the experience of reading well-structured pages feels smooth and effortless. But to achieve this, designers need to consider several aspects, from images to buttons, and in the context of this post, text and typography on the website.
“Typographic hierarchy is an organization of text based on its importance in content, and when done correctly, it allows the viewer to locate, navigate, and scan text much more easily. Typographic hierarchy defines a division into types of information – where a chapter or specific topic begins and ends, thus creating a separation between different types of content. Designers use hierarchy to guide reading and to emphasize and focus on specific messages.” Alef Alef Alef
Example of Basic Typographic Hierarchy
Take a look at the image below. This is a classic example of a 3-level typographic hierarchy, an approach that is still used today in the digital world as well. You can see that the three examples on the left can benefit from additional variations in fonts as well as clearer spacing.
On the other hand, the human brain will analyze the content in the right example faster, as the changes prioritize certain content and visual elements over others. Thus, the concept of their importance, priority, and hierarchical level becomes clearer and easier to understand.
Credit: www.canva.com The right example is clearer and more visually readable.
Before we explore some points for improving typographic hierarchy, it’s worth mentioning that the use of hierarchy is an essential tool for designers and one of the fundamental principles taught in design and art.
9 Steps to Improve Hierarchy and Typography on Websites
Let’s remind and state that in order to create a successful typographic hierarchy, it’s important that you understand the necessary elements for the written page as well as their relative importance compared to other elements. Beyond that, here are several important points to consider:
1. Analyze the Text Content and Make Adjustments Accordingly
As designers and web developers, you’ve probably received text from content writers for embedding on a website or for creating a design based on that text. Instead of copy-pasting, invest a small effort, take a few moments to read the text, and grasp what it’s saying. Very quickly, you’ll find yourself with ideas about the proper structure and design for the text.
Consider whether it would be appropriate to divide this text into paragraphs in terms of design and readability. Will emphasizing an expression or title contribute to the element’s design and the viewer’s perception of it? Sometimes minor changes can make all the difference between excellent typographic design and a lackluster one.
The example below shows a short article excerpt. Switch it between flat text and a structured version, and notice how much faster you find the title, the main point and the quote.
Cold brew skips the kettle. You steep coarse grounds in cold water for twelve to eighteen hours, then strain. The result is less bitter than hot coffee and easy to make in a big batch.
"Treat the ratio as a starting point. One part coffee to eight parts water, then adjust."
Maya Cohen, roastery manager
2. Separate Sections from Paragraphs
The space above a heading should be clearly larger than the space between paragraphs. When both are the same, the page reads like one long block and the reader loses track of where a new topic starts.
Drag the slider below to change the space above each heading. The gap between paragraphs stays at 12px, so you can see how the ratio between the two creates structure.
Use a coarse grind, close to raw sugar. Fine grounds over-extract and turn the batch muddy.
Weigh the coffee. Volume scoops can vary by up to a third between beans.
Stir once so every ground is wet, cover the jar and leave it in the fridge overnight.
3. Choose a Font for the Body Text and Use Modular Scale for Headings
The font size significantly affects the reading experience of specific text. Text that is too small will strain the eyes and discourage the reader, leading to skipping parts/paragraphs and many sentences in order to avoid effort.
However, text that is too large can also cause problems by attracting too much attention and generally drawing focus away from the content. Therefore, always start with a comfortable font size for the body text.
What is a Comfortable Reading Font?
There is no fixed font size that suits all situations, and the choice of font size for body text depends on the selected font family. Nevertheless, starting with a font size of 16px for body text is a good choice. It’s not for nothing that this is the default size for most browsers…
It’s not too large and is comfortable to read on most screens and situations. However, don’t hesitate to use a font larger than this! There’s a growing trend of using larger body text, often standing at 18px. Generally, font sizes between 16-18px are what you’ll see on most websites for body text.
For reference, this blog sets body text at 18px on desktop and 16px on phones, in Noto Sans Hebrew.
What About Headings and Other Text Elements on the Page?
After you’re done with the body text, you need to choose sizes for the various heading tags on the site and other elements. This choice can be challenging, but there’s a technique called Modular Scale designed to help with this task.
Using this technique means that the font size for each level of heading will be based on a specific ratio, relative to the font size of the body text. This modular scale works with the em unit of measurement and consists of a series of values calculated mathematically to maintain a harmonious relationship between different font sizes.
You start by choosing a font size for the body text (Base), and then you select a ratio from a variety of options (Ratio). The Major Third, Major Second, and Perfect Fourth scales are good places to start, as the difference in font size between the <h1> and <h6> tags isn’t too drastic.
Try it below. Pick a ratio and a base size, and see how far apart the heading levels end up. Major Third (1.25) is selected to start.
H1Cold brew at homeH2Grind and steepH3Choosing beansH4Water ratioBodyOne part coffee to eight parts water.4. Set Proper Line Height
In typography, there’s a term called “leading.” It’s essentially the same as the line-height we’re familiar with from CSS or graphic design software. The line height, or the vertical spacing between lines of text, is the vertical distance between rows of text.
The line height has an immediate impact on the design’s conveyance of a certain look and carries significant importance, not less than the chosen font size. By increasing the line height, you can improve text readability (at the expense of density). However, it’s essential to note that too much line height can create the opposite effect and cause a sense of disconnection between lines.
Most body text reads comfortably at a line height between about 1.4 and 1.8 times the font size. WCAG 2.2 also requires that content keeps working when the line height is set to at least 1.5 times the font size (Success Criterion 1.4.12).
Note that text set in larger fonts (like those used in headings) can handle smaller line spacing relatively.
Drag the slider below through the whole range, and read the paragraph each time.
Cold brew skips the kettle. You steep coarse grounds in cold water for twelve to eighteen hours, then strain. The result is less bitter than hot coffee, keeps for a week in the fridge and is easy to make in a big batch for the whole office.
5. Limit Line Length
The number of letters in each line has a considerable impact on text readability. Note that you’re not designing the line length but rather optimizing the user’s reading comfort.
Lines that are too short send the eye back to the start of a new line every few words, and the reading pace breaks. In addition, lines that are too short tend to pressure readers and cause them to move to the next line before finishing the current one.
On the other hand, a paragraph with excessively long line length will lead to disorientation, and the eye will struggle to focus on the text. This is because an overly long line makes it difficult for the reader to determine where the line begins and ends. Furthermore, this situation might make it challenging for the reader to transition to the correct line when reading large blocks of text.
A common range for body text is 45 to 75 characters per line. WCAG’s Visual Presentation guideline (Success Criterion 1.4.8, level AAA) caps lines at 80 characters. On phones, 30 to 50 characters per line is the practical target, because the screen is narrow.
Resize the column below. The counter measures the characters on each line from the rendered text, so it is accurate on any screen.
Cold brew skips the kettle. You steep coarse grounds in cold water for twelve to eighteen hours, then strain. The result is less bitter than hot coffee, keeps for a week in the fridge and is easy to make in a big batch. Use filtered water, keep the jar sealed and strain twice if you want a cleaner cup.
6. Maintain a Minimal Number of Fonts
Avoid using too many font families. Using more than 3 font families can make your website appear unprofessional, lack coherent structure, and also affect the page loading time.
Of course, this is not set in stone, and it doesn’t mean that you can’t use more font families, but there should be a good reason for it, and it’s reasonable to assume that a highly skilled designer is required to make it look good.
Tips for Choosing Fonts
- Stay consistent. Using a different font for each title creates inconsistency and a sense of disorder.
- Choose one font family for the main text and use bold, italics, and different variations of the same font for captions, subtitles, and other design elements.
- Consider using a separate font for H1-H6 heading tags.
- Avoid sudden changes within a paragraph. Use a single font for the main text and utilize bold and italics for specific emphasis.
- If significant emphasis is required, you can use pull-quotes and style them separately.
- Don’t hesitate to mix Serif and Sans Serif fonts; they complement each other.
- Using one font family with multiple weights (light, bold, extra bold) and possibly styles (condensed, expanded) is a safe bet as they are designed to work together.
To summarize this section, limit the number of font families on your website to a minimum. In most cases, two font families are enough. If you decide to use more than one font family, make sure they complement each other, as mentioned in the next section…
Image credit: www.canva.co
7. Evaluate Font Combinations and Find a Harmonious Pairing
Beyond using too many font families, a significant part of good typography lies in selecting fonts that work harmoniously together. Fonts that do not harmonize or clash with each other distract the reader’s attention and divert the focus from the content.
It can be said that font combination is somewhere between science and art. It depends on proper usage and understanding the fundamentals of typography, as well as personal preference and intuition. Choosing one Serif font and one Sans Serif font can be a good starting point.
In any case, let’s look at some tips that can help you when choosing font combinations…
Tips for Harmonious Font Pairing
- Choose fonts that complement each other. The decision here can feel intuitive, and in many cases, you will rely on your gut feeling and instinct (which is okay).
- Consider the context. The content of the text and even the media in which it will be published influence your choice.
- Create contrast. One reason Serif fonts work well with Sans Serif fonts is the contrast between the two.
- Contrast can also be achieved by changing size, weight, spacing, and color differences, among others.
- Font families with the same x-height tend to work harmoniously together.
- Avoid using very similar fonts that resemble each other too much.
To see these tips in action, try the interactive cards in the font pairing guide. It has 16 pairings with live samples, color palettes and copy-ready CSS.
8. Display Images Above Relevant Content
In English we read from left to right and from top to bottom. However, our brain processes and absorbs images much faster than text, and hence, we naturally first notice images and then proceed to read the text underneath.
When you write a description above an image, the brain doesn’t process the information naturally, and as a result, the reading experience is not optimal. For this reason, content that accompanies an image should appear beneath the image itself.
Switch the order in the example below.
The roastery sits on the old pier. Visitors can taste each batch from 8 to 11.
9. Create Mockups for Content-Rich Projects
Let’s finish with a small tip. On a simple blog page, with a title, subheadings and body text, you can test fonts directly in the browser.
However, if a specific project includes more complex typography (such as an online newspaper or magazine), it would be advisable to create a mockup to start with and experiment on it.
Creating a mockup will allow you to play with various font combinations without being constrained by existing elements on the page. Sketching is a simple way to examine different parts of the content and its typographic arrangement.
FAQs
Common questions about typographic hierarchy:
Summary
Typography choices are not to be taken lightly. Proper typography can significantly enhance the design of your website and improve the user experience for visitors. On the other hand, poor typographic choices can distract visitors, draw attention to themselves, and easily ruin the design.
Ensure that the typography on your site is readable and comprehensible to the best of your ability, and remember that typography should respect the content by not adding cognitive effort to the reader.
If you have additional tips on typographic hierarchy, feel free to share them in the comments. Furthermore, if you’re familiar with interesting font combinations, you’re welcome to share those as well…
