The 10 Rules of Typography in Web Design and How to Break Them

Typography in web design plays a vital role in user experience as written content is the main method of communication between you and your users. In short, good typography makes the act of reading effortless, while poor typography turns users off. Although there are best practices to ensure your typography game is spot on, the most successful designs are always made by creative people who think outside the box. Indeed, the 10 rules of typography in web design are there to ensure the readability and legibility of your text content, however, there are ways to break those rules without suffering the consequences.

With this in mind, today we’ll go through the 10 main rules of typography in web design, explain why they exist, how to break them and what to consider when you’re breaking them.

With recent real-life website examples from all around the web.

Design and Animation by Noa Beyo, Portfolio Website

 

 

1. Limit the Number of Fonts to 3

You have heard this a lot. If you use more than 3 different fonts in your design, it will lose its professionalism, and structure and might even disrupt the layout. The limited number of fonts maintains the visual cohesion throughout your website and makes it look consistent, easier to scan, and aesthetically pleasing.

• Use just one typeface and apply different fonts within that typeface.
• Assign each font to a specific purpose. For example: Bold or Black for Headings; Light for body text, Regular for buttons, etc.
• If you decide to use two different typefaces, make sure they complement each other. The typefaces should be easily distinguishable from one another; never too similar.

 

Rule No.1 Example: PACT Media

In this example, PACT Media perfectly combines Felix Titling for the heading and background animation with Exo Sans for the navigation and body text. These typefaces are easily distinguishable from one another, which allows them to create a good visual hierarchy, making the website well-structured, professional, and scannable.

This raises the question. If using a maximum of 3 fonts maintains the structure and professionalism of your design, then why would you even consider disregarding this rule?

1.1. How to Break the Rule? 🔨

Sadly, following the rules of typography in web design makes it harder for you to design something entirely different from thousands of other competitive websites in your field. Especially if you have a creative agency, or you are a freelance designer yourself, you always have the need to present yourself in a unique way. This is why breaking the rule of the number of fonts can help you achieve an interesting interactive design. However, this can become quite tricky. Depending on how you use multiple fonts, you risk looking unprofessional or even worse, unskillful.

In order to avoid such unwanted presentation, consider the following:

• When you use multiple fonts, make it on the nose. It should be obvious to your audience that this was a deliberate decision, not a rookie mistake.
• Try to integrate the different fonts as a part of the interactive experience. For example, your font might change on hover.

Now let’s see some absolute rebels, who disregard the rule and managed to achieve outstanding design results.

 

Rebel Website: Slava Kirilenko Portfolio

We start with the obvious case: type designers. Here we have Slava Kirilenko with an awesome introduction of her work. She managed to use all the latest fonts she has designed in one interactive section. Interesting showcase of work and skills.

 

Rebel Website: SIRUP x Apple Music

Moving to something less obvious, here we have a crazy interactive experience by SIRUP x Apple Music where you hover to listen to tracks. The experience is all over the place, very colorful, mesmerizing, and interesting. Of course, there’s a lot of playing and typography animation with multiple fonts from two distinctive typefaces.

 

 

2. Use Sans Serif for the Body Text

According to typography experts, while serif fonts are common for print, sans-serifs are way more readable digitally. Unlike when we read books, our eyes adjust to clean fonts without any decorations much faster.  This is why in web design we usually see serif fonts for titles, quotes, and decorative sections, however, the bigger text blocks of smaller body texts use sans-serif fonts to require less effort to read.

 

Rule No.2 Example: Take Boost

In this eCommerce website example, we can see a sans-serif geometric font which is a good choice for body text. It’s easy to read in small text size and doesn’t overwhelm the eye. Not a single serif in sight, not even for the headline. Rule No 2 of typography in web design in action.

2.1. How to Break the Rule? 🔨

This doesn’t mean you can’t break the rule and use serif fonts for the body text like a rebel. Just remember that readability is your first priority. In order not to affect the readability of your font, consider the following:

• If you use fonts with decorations, make sure you also use a simple background. Avoid colorful animated backgrounds, vivid gradients, etc.
• Use high contrast. Smaller size sans-serifs are ideal to read black on white background, or white on black background.

In fact, we can see a perfect example of these considerations in the following rebel examples.

 

Rebel Website: Thinkful, What is Data Science

If according to the rule it’s best to use your serifs for the title and sans-serifs for the body texts, The Dawn of Data by Thinkful does the complete opposite. Here we have a great example sans-serif for headlines and serifs for body text works. In order not to affect the readability, the blog uses the highest contrast colors for font. The colors are inverted to look techier and complement the topic.

 

Rebel Website: Huffington Post

We wouldn’t call Huffington Post rebels, however, this beautiful website gives us another example of when to use serif fonts for body text: old-school newspaper. You can easily convey the experience of reading a physical newspaper in a digital format.

 

 

3. Use Standard Fonts

Web-safe fonts are proven as easy to read through any digital means. They render on every browser, and viewers recognize them instantly which helps them scan the content more quickly.

• Web-safe fonts usually lack design flaws such as strange kernings
• They have fewer instances of indistinguishable glyphs such as “I” and “l”, or “O” and “0”.

These fonts look as equally appealing and readable at 10px as it’s at 72px. We selected 8 of these UI fonts with real-life examples in a separate article.

 

Rule No.3 Example: Playground Paris

The website uses the Space Grotesk Font Family from Google Fonts that renders across desktop and mobile browsers and is easy to scan and read.

3.1. How to Break the Rule? 🔨

Most creators prefer interesting custom fonts that communicate their brand. If you also go for non-standard fonts, you already know the chances some browsers might not display them and instead render them as something like Arial, Georgia, Times New Roman.

In order to prevent unwanted fallback fonts, make sure you specify your own font stack in your CSS file by priority.

body {font-family: LifeLTStd-Roman,Times New Roman,Times,serif;}

Another way to cheat the system, although much a harder one, is to use images instead of live text. Designers usually do this for email templates, since most email clients are extremely limited when it comes to rendering fonts (or rendering almost anything more interesting than plain HTML, really).  If you absolutely love how your custom font looks on the title, you can go for image elements instead.

 

Rebel Website: Arthur Simonini

Here we have a beautiful example of custom fonts that communicate a brand. As you might have guessed, all the labels are image elements, which makes them safe to render across browsers. This wouldn’t have the same effect in Arial or in Times New Roman, right?

 

Rebel Website: Hello From Here

The same goes here for buttons and animations. No live text.

 

 

4. Create Typography Hierarchy

This rule doesn’t refer just to typography in web design, but also in print. In order to make things work, this is what will organize your elements. The more organized, the clearer to navigate, and perceive will be your content.

The typography hierarchy will divide the content into:

• Headings for the main topics [H1, H2]
• Subheadings for the subtopics [H3, H4, H5]
• Body copy for the descriptions, minimum 16px
• Captions
• and other elements

Depending on your design, you could use either of the methods and create a hierarchy through font size, width, colors, spacing, and content position. These methods will establish contrast and highlight the key information you wish your audience to pay attention to. In short, a well-planned text hierarchy hitches the audience to the actions you expect them to take.

 

Rule No.4 Example: Work and Life of Stanley Kubrick

We chose this example for the huge size contrast between the heading, paragraph, and caption. It sets a clear visual hierarchy and prioritizes target content.

4.1. How to Break the Rule? 🔨

You will rarely see websites breaking this rule, for the main reason no visual hierarchy affects readability. However, disregarding it is appropriate when:

• When you go for brutalist, psychedelic, or any unconventional design with alternative experience.
• For a simple design with much less content or fewer sections.
• In a navigation menu without multiple levels.
• By creating a visual hierarchy with other design elements: boxes, background, colors, whitespace, etc.

 

Rebel Website: Tim Grover

Tim Grover, for example, breaks typography hierarchy by creating hierarchy with other means. Such include text alignment and animated section title: same font, same size; but outline and flashing.

 

 

5. Don’t Use ALL CAPS for Body Text

Often communicating shouting in Social Media comment sections, all caps are considered unnecessary in web design when it comes to body text. Usually, we use all caps for branding elements, titles, and decorative text, while for the emphasis we go for bold text instead of hitting the caps lock.

 

Rule No.5 Example: Hourly App

In fact, Hourly App almost doesn’t use any caps. Their entire branding has made lower case their thing and we can see it in the logo, headings, paragraphs, and navigation. Although this is related to the brand, sentences starting with lower cases can make people uncomfortable. Or is it just me?

5.1. How to Break the Rule? 🔨

Just do it. There are no specific conditions for this rule-breaking, except for the obligatory font readability. We will recommend using fonts specifically designed as upper case fonts instead of typing with the caps lock button on adding a text-transform capitalization property in your code.

All caps look especially great on huge texts and macro-style websites. Just like in the following rebel websites.

 

Rebel Website: Patrick David Portfolio

Tusker Grotesque upper case for everything: headings, body text, navigation, buttons, etc.

 

Rebel Website: Artem Markovsky Portfolio Website

Safe fonts aren’t boring, as we can see with this usage of Bebas Neue from Google Fonts, working great with the macro style of the website.

 

 

6. Choose a Typeface Working Well In All Sizes

Assuring an equally good experience for both desktop and mobile users is a must when it comes to typography in web design. Since your users will access your website from different devices with various screen sizes, choose a typeface that looks readable and usable in all sizes. Some typefaces, especially cursive and display ones aren’t appropriate for body text since they become difficult to read in small text.

 

Rule No.6 Example: Pocket Worlds

The website uses the GT America Font Family which looks equally readable and usable in the small body text as it looks in the heading and subheading.

6.1. How to Break the Rule? 🔨

Well, breaking this rule can seriously affect the readability of your content, so the only acceptable way to go rebellious is to simply choose another typeface for the smaller text.

 

Rebel Website: Nicole Nero

As much as Voyage is a gorgeous typeface for headings and subheadings, it would be illegible in 16px body text. Instead, the designer goes for the much simpler GT Eesti sans-serif.

 

Rebel Website: Minimal Wim

We promised true rebels, didn’t we? How about a typeface equally illegible in large and small texts? This awesome experience is dedicated to the pioneer Dutch graphic designer Wim Crouwel showcases his grid-based typography. As an alternative experiment even receives Awwward’s SOTD.

 

 

7. Use High Contrast

This rule refers to Web Content Accessibility Guidelines WCAG’s recommendation for a contrast ratio of at least 4.5:1 for most text, and 3:1 for large, bolded text.

Here’s what you should know:

• Avoid using colors for text emphasis. Instead, use bold fonts.
• Keep legibility with higher contrast between text and background. You can’t go wrong with black and white.
• Choose one uniform color for the entire text, except for hyperlinks.
• Avoid using blue as the default text color, since blue implies hyperlinks.
• Avoid red and green for visual emphasis, since the most common type of color blindness is red-green.

 

Rule No.7 Example: Souffl

Souffl plays safe with white on dark background with orange and blue hover color effects.

7.1. How to Break the Rule? 🔨

Not following the guides for contrast ratio is easy, however, consider when this would be appropriate.

• Experimental websites or ones meant for other designers to view your concepts and ideas
• For part of the content that is least important and you wish to focus the user’s attention on something else.

 

Rebel Website: Badass Films

Alternative experience with background videos, light outline titles, and pink font color hover effect. WCAG HQ wants to know your location.

 

Rebel Website: Ryan J Hubbard Portfolio

In this case, the portfolio doesn’t want you to focus on reading the project descriptions, rather than make you focus on the project gallery.

 

 

8. Don’t Minimize Spacing

There are a few types of spacing, so let’s view the most common.

• Letter spacing (tracking): the consistent amount of horizontal space between characters in a text passage.
• Line spacing (leaning): the amount of vertical space between lines. Usually 50% of the height of the text line for body text and slightly greater for headings.
• Margins and Paddings: the blank space around the edges of your design, dividing the whole page by boxes
• White Space: every blank space in your design, keeping everything organized and balanced.

Proper whitespace ensures users can easily follow single lines of text and return the next line.

 

Rule No.8 Example: Houston Exponential

Houston Exponential makes an example of proper spacing with a generous amount of white space, good line and letter spacing for the body text, and bigger space between the words in the heading.

8.1. How to Break the Rule? 🔨

If you wish to style your text by minimizing space, you can still do it without affecting the legibility:

• Minimize only one type of spacing (for example, only the line spacing).
• Choose other visual methods to separate the lines.
• Do this for a minimum number of lines.

Let’s see some examples of how it works.

 

Rebel Website: Work With Us 

Line spacing? Haven’t heard of her! This website shows us an example of how almost eliminating the line space can still work well if you manage to separate your content by other means. In this case, the designer has arranged the content in boxes, while giving the second line a different color. As we discussed earlier, blue is the recognized color for hyperlinks, as you guessed it: the second line of each experience section is indeed a hyperlink.

 

Rebel Website: Muhammad Ukasha Portfolio

Minimum line spacing works here for three reasons: the design offers higher color contrast; there’s not much text; the designer hasn’t minimized any other type of spacing.

 

 

9. Keep 50 to 70 Characters Per Line

As much as this rule sounds way too nit-picky, there’s a reason for it to exist.

• Any line shorter than 50 characters makes the eyes move to the next too quickly.
• Any line longer than 70 characters require more effort for the eyes to move to the end and back for the next line.

So, unless you don’t intend to distract or bore your users, create the perfect sized room for them to read your easy on-the-eye paragraphs between 50 and 70 characters each.

 

Rule No.9 Example: POL Studio

Here we can see the ideal line length in action.

9.1. How to Break the Rule? 🔨

Of course, disregarding the sweet 50 to 70 characters line length isn’t uncommon. However, this entirely depends on the intention of the design. For example:

• If you go for a macro design with huge fonts, it’s obvious to use very short lines that take up the entire screen. This will result in more vertical scrolling.
• In macro design with interactive horizontal scrolling as part of the interaction.
• If it looks better with the overall design.

 

Rebel Website: Fancy State

Here the longer lines look undeniably better with the overall design. Instead of overwhelming the hero section with more text, the designer had separated the intro text below.

 

Rebel Website: Davron Design

Shorter lines of 15 characters look appropriate here as they take the entire screen.

 

 

10. Avoid Flashing or Moving Text

Flashing or moving text makes it very hard to focus if you try to read it. Not to mention some users might have a bad experience with photosensitivity and related seizures. In order to enrich your design with text animations, you can instead use hover effects or leave the moving animation to appear upon clicking.

While the user reads, however, all text should be stable.

 

Rule No.10 Example: Active Theory

As an example, here we have interactive project navigation with stable text that changes only upon hovering.

10.1. How to Break the Rule? 🔨

Brutalist and psychedelic websites are rarely safe for people with photosensitivity, this is why they usually target specific audiences or are meant for demonstrations. Of course, such websites often use moving or flashing text.

However, let’s say you wish to experiment and try something like this for your personal portfolio that many people will see. In order to make it safer for sensitive users, consider the following:

• If you opt for moving texts, make it purely visual, while including the same text in a stable variant.
• Use it for background effect.
• Use it for a preloader or an interactive section that isn’t meant to be read.
• If you have moving or flashing text, don’t use vivid or flashy colors. Opt for desaturated colors or black and white.

 

Rebel Website: Lasalle Blog

This website provides us with an example for the first condition. Although the designer chose to include moving text, it works well for a couple of reasons.

First, the moving text is transparent with a light outline, which doesn’t overwhelm the eyes. Second, there are no vivid colors, as the entire page is in black and white. Third, the animation serves as decoration, since the same text is in a stable variant in a box next to the animated line.

 

Rebel Website: Bruno Tome

This example looks extremely flashy, however, it only serves to demonstrate design and code, and to redirect the user to the actual portfolio of Bruno Tome.

 

 

Final Words

In conclusion, there’s one rule of typography in web design that we must never break: we need to ensure legibility and usability. 

Typography is an integral part of web design with 10 basic rules and good practices ensuring a good user experience and usability of the website. However, designers are creatures of creativity and as such, they will always find creative ways to break the rules of typography in web design in style without affecting the readability of the content.

Learn the rules like a pro so you can break them like an artist.

Pablo Picasso

In the meantime, you might want to check some more articles related to UI/UX design.

• 20 Amazing UI Interactions Examples to Inspire Your Next Design
• 14 Best Portfolio Websites from Around the Web
• 10 Golden UI Design Principles and How To Use Them