When a website’s typography works, I hardly notice it. But it’s often glaring when it fails, so much so that I may leave the web page entirely. For instance, when I read content on HubSpot, the text rarely distracts from the information. Meanwhile, a site that’s entirely in Comic Sans? Well, let’s just say it better be a blog about comic books; otherwise, the trust is gone.
Build your website with HubSpot's Free CMS Software
As a website owner, prioritizing the design and readability of your text is essential. It’s not just about aesthetics; rather, it’s about ensuring readers can engage with your content effortlessly.
In this guide, I’ll share everything you need to know to get started with website typography. I’ll cover some fundamental terms and review nine widespread guidelines that every heading and block of text should follow.
Table of Contents
- What is website typography?
- Typography vs. Font
- Understanding Web Typography Terms
- How Many Fonts Should a Website Have?
- Website Typography Guidelines
![](https://www.hubspot.com/hubfs/assets/hubspot.com/web-team/WBZ/Feature%20Pages/website-drag-and-drop/custom-website-en.webp)
HubSpot's Free Website Builder
Create and customize your own business website with an easy drag-and-drop website builder.
- Build a website without any coding skills.
- Pre-built themes and templates.
- Built-in marketing tools and features.
- And more!
What is website typography?
Typography generally determines how text looks to the reader or how the words literally appear on a page or screen. Website typography, then, means how text appears on a website and how easy it is for people to read that text.
Think of typography as the outfit your website wears. You wouldn’t meet a client wearing clothes with clashing colors or mismatched levels of formality, say flip-flops on a suit. The same goes for your text.
A “well-dressed” website makes a great first impression, conveys professionalism, and shows that you care about your readers.
While there are general typography rules, the best practices around web text often differ from those of printed text. On top of ease of reading, digital text must be designed for:
- Shorter attention spans. With countless website options available, excellent typography is crucial to keeping users engaged.
- Skimmability, because users tend to land on web pages looking for something specific and want to find it fast.
- Accessibility, because not all internet users perceive or interact with web text in the same way.
- Multiple device types and screen sizes. Text should be legible across any digital medium.
Additionally, web typography encompasses how you design the look of the text itself — fonts, colors, and styling — and how you present the text on its respective web page. These details contribute to a comfortable reading experience for as many visitors as possible.
Typography vs. Font
To be completely transparent, I used to confuse typography with fonts. However, I’ve since learned that they mean different things, even though they’re closely related.
- Typography is how all the elements of your texts, like the typefaces, sizes, and spacing (more on these terms later), come together to create a cohesive look and feel for your website. Remember, your typography is like your website’s outfit — how the shirt, pants, and shoes work together to form an outfit.
- A font, on the other hand, is a specific style or design for your website text. It’s like choosing a particular pair of shoes or a shirt. Your choice of shoes can elevate or ruin an outfit, just as your choice of fonts can make or break your typography.
Key takeaway: Fonts are individual pieces that are part of typography, while typography is how those pieces combine to make your website look well-designed. Get it?
Understanding Web Typography Terms
To better understand how to introduce effective typography to your website, let’s first cover some fundamental typography terminology and how each term applies to web design.
Typefaces and Fonts
A typeface is a specific look and feel applied to a set of alphabetic and numeric characters. Common typefaces include Times New Roman, Arial, Helvetica, Courier, and Calibri.
But hold on, aren’t those fonts? Not exactly. A font is a particular instance of a typeface. Every font within a typeface has a specific weight (i.e., bolder or lighter), size (e.g., 16 px vs. 24 px), and may have other special stylizations applied (e.g., italicized or non-italicized, rounded or unrounded).
For example, the fonts “Helvetica Light (12pt),” “Helvetica Regular (16pt),” and “Helvetica Bold Oblique (20pt)” are three fonts in the “Helvetica” typeface:
Put another way, a typeface is the broad style category for a set of specific fonts — this is why a typeface is also sometimes called a font family.
The distinction between font and typeface is small but essential as you explore web typography practices more in-depth. Now, let’s learn more about the language used to describe fonts.
Serif and Sans-Serif Fonts
Many fonts conform to two font styles: serif and sans-serif.
A serif is a small ornamental projection off the main stroke of a letter. Fonts with this styling are called serif fonts. “Sans” is French for “without,” and fonts without these ornaments are labeled as sans serif fonts:
Other font styles exist, too. For example, script is another style used on the web, though they are much less common than serif and sans-serif fonts.
Script fonts are designed to replicate the varied and often fluid strokes handwriting creates. Script is harder to read than serif and sans serif and should be used only in special cases, such as prominent headings and fancy party invitations.
Kerning
Kerning is the horizontal space between two specific characters. Fonts can have smaller or wider kerning to improve legibility and avoid awkward gaps. Common fonts have specific kernings for every pairing of adjacent characters, so all letters fit together snugly.
In the above example, kerning separates the two “T”s to improve readability.
Tracking
Like kerning, tracking also describes the spacing between letters. However, tracking denotes the overall spacing between letters in an entire line or block of text rather than just two particular letters.
Tracking is another typographical detail that needs to be done right for legibility. You can easily tell if a line of text is spaced too widely or looks a bit too squashed.
Leading
Leading (pronounced like the element “lead”) is the vertical spacing between lines of text. Terms like “single-spaced” or “double-spaced” are used to specify leading, but leading can also be expressed in units of pixels or points.
Again, the right amount of leading helps readers navigate text — too much or too little is awkward to read.
Hierarchy
Most web pages, especially text-heavy ones, break content into sections by topic. These sections are signified and labeled by headings.
The order of text from most prominent to least prominent comprises the hierarchy of the page. Hierarchy is crucial for making pages easily navigable and digestible. Readers should be able to jump to whichever section is relevant by looking at headings alone.
![](https://www.hubspot.com/hubfs/assets/hubspot.com/web-team/WBZ/Feature%20Pages/website-drag-and-drop/custom-website-en.webp)
HubSpot's Free Website Builder
Create and customize your own business website with an easy drag-and-drop website builder.
- Build a website without any coding skills.
- Pre-built themes and templates.
- Built-in marketing tools and features.
- And more!
Typography implies a hierarchy with different font sizes, font weights, font styles, and different fonts or typefaces altogether.
For example, a typical blog post hierarchy starts with the title text (a.k.a. “Heading 1” or “H1”), followed by section headings of increasing specificity and decreasing visual prominence (H2s, H3s, etc.). Finally, we reach the body text, which might be the smallest but contains the content readers want.
Here’s an example of a visual hierarchy created with different Helvetica fonts:
How Many Fonts Should a Website Have?
I recommend using no more than three font families or typefaces. I find that this number creates a nice balance between variety and consistency. Using too many fonts can make your website look cluttered and unprofessional. It’s like mixing too many colors in an outfit, which can be off-putting and distracting.
For most sites, I recommend using one font for the headings (usually one with the serif style), another for the body text, and a third for elements like call-to-action buttons and quotes.
Take a look at HubSpot’s home page.
Here, you can find two typefaces or font styles. The “Grow better with HubSpot” heading font is paired with another typeface for the body text. Notice that while the body text uses one typeface, different font styles are used. Some are bolded, capitalized, and of different sizes.
By keeping it simple and sticking to just a couple of fonts, you give your website a cohesive and professional look while creating enough visual interest. Now that you’ve learned the basics, let’s consider some of the best practices for website typography.
Website Typography Guidelines
Over time, through my experiences, I’ve gathered nine best practices that’ll help you consistently create websites with excellent typography. These guidelines apply to designing a portfolio site, a blog, an online store, or anything else.
Follow these guidelines to ensure your site’s typography meets expectations and keeps users reading (or at least skimming).
1. Use compatible typefaces.
Many websites work well with one typeface, especially if they use different fonts within the typeface for different purposes, such as headings, body text, button text, etc. For instance, the image below shows different Libre Baskerville fonts. You can see how they work together even though some are in italics and all caps.
If you opt for two different typefaces, select options that are visually compatible but distinguishable from each other. Some of my favorite pairings are Lora + Open Sans,
Oswald + Bebas Neue,
and Aurora + Arial, as seen on the Game of Cups website.
If you’re unsure about font pairing, a tool like HubSpot’s Brand Kit Generator can recommend combinations that balance compatibility and distinction, ensuring a polished and professional look for your website.
You can also use the tool to create logos and icons for your brand.
2. Use a sans-serif font for body text.
While serif fonts are common in printed text, typography experts generally agree that sans-serif fonts are more readable in digital contexts. Our eyes follow web text better without the decorations.
This doesn’t mean you can’t use serif fonts on your website at all — a serif text in a title, heading, pull quote, or decorative section can draw attention and provide a nice contrast. However, for blocks of text that require more effort to read and understand, your text is better “sans.”
3. Stick to standard fonts at first.
By “standard,” I don’t mean “plain” or “boring,” but “compatible.” Choosing a web-safe font ensures your text is easily readable for everyone through any digital means.
Standard fonts have a couple of advantages. First, all web-safe fonts will render on every web browser and device, desktop and mobile. If a font isn’t recognized, the system will default to a font that might look worse.
Second, readers are accustomed to seeing standard fonts online. They won’t be distracted by the text's appearance and will be able to scan it more quickly. Ultimately, your typography should help the reader, not distract them from the content they want to read.
Third, web-safe fonts tend to lack some inconvenient design flaws seen in other fonts. A standard font, for example, won't contain any strange kerning that makes two letters look stuck together. They also minimize instances in which two different characters are hard to distinguish, like “I” from “L” or “r” from “n”.
If you’d prefer a non-standard typeface or font, there’s always a chance some browsers won't recognize the style and instead display something like plain Times New Roman. There’s nothing wrong with good old Times, but again, sans serif fonts are better for body text.
To solve this, consider implementing a font stack, a list of backup fonts in your CSS file that the browser will render if your first font choice fails to do so. Put a couple of standard fonts in your font stack to ensure visitors always see the most suitable text style.
4. Size your text appropriately.
Web designers specify font size in pixels (px) rather than points (pt). Why? Because a pixel is a standardized unit online, whereas a font point is not.
Two people reading 12pt text on the same website might see different things depending on their devices or web browsers.
A common practice is to set all website text to a minimum size of 16px. 16px is roughly the size of body text in printed media and is the smallest font most people can read without zooming in. Of course, you can and should increase and vary the size of your text to further assist readers and establish hierarchy, but don’t go overboard with massive fonts, either.
Regarding text hierarchy, headings should always be larger than the body text and decrease in size by H1, H2, H3, etc.
In this article, you’ll notice that the headers are bolded and bigger than the fonts under them. Such a hierarchy helps readers scan your pages for the target content. You can also add varying weights to your headings to enhance the contrast with the body text.
![](https://www.hubspot.com/hubfs/assets/hubspot.com/web-team/WBZ/Feature%20Pages/website-drag-and-drop/custom-website-en.webp)
HubSpot's Free Website Builder
Create and customize your own business website with an easy drag-and-drop website builder.
- Build a website without any coding skills.
- Pre-built themes and templates.
- Built-in marketing tools and features.
- And more!
5. Don’t use all caps.
Capitalizing all your words is unnecessary in nearly all contexts outside of decorative text, branding, and the occasional cases of headings. If you want to emphasize the body or heading text, bold it. Bolding lends the same effect while being more readable and visually pleasing.
6. Use colors carefully and intentionally.
A common pain point for web users is a bad pairing of text color and background color, in which the two do not contrast enough to maintain legibility. Refrain from layering text over a background with similar colors, and be very cautious when placing text atop images.
I typically avoid using a light color like yellow on a white background or a dark color like navy on a black background.
The Web Content Accessibility Guidelines (WCAG) recommend a contrast ratio of at least 4.5:1 for most text and 3:1 for large, bolded text. Use a free tool like WebAIM to check the contrast between your font and background color.
Alternatively, you can’t go wrong with black or dark text on a white background, at least in terms of legibility. Aside from contrast, be mindful of your choice of text color as well. It’s best to keep your body text uniform except for hyperlinks, which should contrast with the rest of the text.
Avoid using blue as the default color in your text since it implies a hyperlink. Also, refrain from using red and green as a visual cue in your text, as this won’t be apparent to individuals with red-green color blindness.
Color alone should not be used to distinguish one piece of text from the rest. Instead, combine color with other styling (like bolding, italics, or underlining) to emphasize a text snippet.
7. Stay between around 40 and 80 characters per line.
Humans are picky readers. We favor lines of text between 40 and 80 characters. Anything less forces our eyes to move to the next line too frequently, distracting us.
Conversely, any line length greater will bore us, cause discomfort, and require more effort to find the start of a new line as the eye travels back to the left side of the text block.
These parameters provide some wiggle room for different page layouts and mobile-responsive designs. Because of this, I recommend aiming for the sweet spot of 60-70 characters per line. Your eyes will thank you.
8. Provide sufficient spacing between lines.
Proper whitespace ensures that readers can easily follow single lines of text and return the next line after a line break.
Accessibility frameworks tend to allot vertical space based on the font size of the respective text. For body text, start with a spacing of 1.5, which means that the leading is 50% the height of the text line. For headings, this distance should be slightly greater. For between paragraphs, start with a spacing of 2.5 and adjust up or down from there.
9. Eliminate text animations.
Yes, animations grab the reader’s attention, but few things are worse for readability than flashing or moving text. If you’ve ever tried to read a note that someone held up to you, you’ll understand why — it takes work to stabilize it in our brains.
Worse, many visitors will consider this text an unnecessary inconvenience, a gimmick, and/or an ad. Flashing images may also trigger photosensitive seizures.
The sole exception to this final rule is entrance or exit effects. These can be a fun way to create an experience for visitors as they scroll. However, once the text appears, it should stay static.
Testing Your Text
Before working on this guide, I thought typography was about picking nice fonts. And boy, was I wrong. Diving deeper helped me see how essential every layer of typography was, from the typeface choices to spacing to hierarchy and so on.
I’ve also seen that excellent typography isn’t about me and what I like but about creating an inclusive and accessible experience for my website visitors.
Armed with the guidelines in this piece, you’re ready to start experimenting with typefaces, fonts, and styles in search of the perfect reading experience. However, there’s one last catch: You could follow all of the guidelines above and still neglect some aspects of typography that an average visitor will notice instantly. That’s why the final phase of any text design iteration is thorough user testing.
Find a diverse group of internet users who can offer insight into the readability of your text content. It doesn’t matter if you’re publishing basic product descriptions or romance novels — by factoring in human feedback into your typography, you'll be confident that your website is a comfortable and satisfying read.
Editor's note: This post was originally published in September 2020 and has been updated for comprehensiveness.
![](https://www.hubspot.com/hubfs/assets/hubspot.com/web-team/WBZ/Feature%20Pages/website-drag-and-drop/custom-website-en.webp)
HubSpot's Free Website Builder
Create and customize your own business website with an easy drag-and-drop website builder.
- Build a website without any coding skills.
- Pre-built themes and templates.
- Built-in marketing tools and features.
- And more!