Typography is one of the most crucial yet often overlooked elements of web design. The fonts you choose for your website can significantly impact how your brand is perceived, how easily your content is read, and even how well your site performs in search engines. But before diving into the details of selecting the perfect typeface, let's make sure we understand the difference between typography and font, and some of the key terms like 'font pairing' and 'serif' we will mention through this guide.
Typography vs. Font
Typography refers to the art and technique of arranging type to make written language legible, readable, and visually appealing when displayed. This includes the selection of typefaces, point size, line length, line-spacing, letter-spacing, and adjusting the space between pairs of letters.
On the other hand, a font is a specific style, weight, and size of a typeface. For example, Arial is a typeface, while Arial Bold 14pt is a font. Understanding this distinction helps you make more informed decisions when designing your website.
Is one typeface enough?
Using more than one font on your website can create visual interest and hierarchy, guiding your visitors’ eyes to the most important parts of your content. A well-chosen font pairing—usually a combination of a title font and a body copy font—can make your website look polished and professional. It also enhances readability by creating a clear distinction between headings, subheadings, and body text, making it easier for users to digest the information.
Font pairing allows for creativity and can reinforce your brand’s personality. For instance, pairing a bold, modern sans-serif font with a more traditional serif font can balance innovation with trustworthiness.
Serif vs. sans serif fonts
One of the first decisions you’ll need to make when choosing typography is whether to use serif or sans-serif fonts.
Serif fonts: These fonts have small lines or strokes regularly attached to the end of a larger stroke in a letter or symbol. Serif fonts like Times New Roman or Georgia are often seen as traditional, formal, and trustworthy. They are commonly used by businesses that want to convey a sense of authority or history, such as law firms, financial institutions, or academic institutions.
Sans-serif fonts: These fonts, such as Arial or Helvetica, do not have the extra strokes. They are considered modern, clean, and straightforward, making them a popular choice for tech companies, startups, and businesses that want to appear approachable and current.
What do they look like? Check out these live examples:
The New York Times uses a serif font for its title and headlines, reinforcing its reputation as a traditional and reliable news source.
Apple uses a sans-serif font across its website, reflecting its sleek, modern, and innovative brand identity.
What are font pairings?
A font pairing is where two or more complementary fonts are used together in a design, typically one for headings and another for body text. The purpose of font pairing is to create visual contrast and hierarchy, making it easier for users to navigate and understand the content on a website. They can help to not only enhance readability, but also reinforces the brand’s personality, making the website look more cohesive and professional.
As an example, in this blog post you'll see my headers are written in Montserrat (a sans-serif font), with my body copy written in Lora (a serif font), to contrast each other and (hopefully) come across as professional but approachable.
Selecting the right font pairing can make a significant difference in your website’s appearance and readability. While the headline font should grab attention, the body font should be easy to read, ensuring that users don’t get fatigued while reading long paragraphs. Here are a few popular font pairings and why they work:
Lora and Open Sans: Lora, a serif font, combined with Open Sans, a sans-serif font, creates a balance between traditional and modern. This pairing is ideal for businesses that want to maintain a professional appearance while still being accessible.
Playfair Display and Montserrat: Playfair Display, with its elegant serifs, works well as a headline font, while Montserrat, a clean sans-serif, is perfect for body text. This combination is excellent for creative industries, like design agencies or fashion brands.
Roboto and Raleway: Both are sans-serif fonts, but Roboto is more neutral and versatile, making it a good choice for body text. Raleway’s slightly more decorative style adds flair to headings, making it ideal for modern businesses.
So how to choose the right font for your website and business?
Choosing the right font is more than just picking one that looks good. Here are a few things to think about:
Source of fonts: Google Fonts and Adobe Fonts are two of the most popular sources. Google Fonts is free and widely used, meaning many fonts are already optimised for the web, which helps with load times. Adobe Fonts offers a broader selection, but some fonts may require a subscription.
Impact on load time: The fonts you choose can impact your website’s load time. Web-safe fonts like Arial, Georgia, and Verdana are pre-installed on most devices and load quickly. Custom fonts from Google Fonts or Adobe Fonts may take longer to load but can provide a unique look.
What reflects your brand: You need to select a font that represents your brand. Start with working out if you'd like a serif or sans-serif font, and use a free tool like Google Fonts to filter on all fonts and find which one can best showcase your personality.
What length of content are you writing: Are you going to have long paragraphs of copy? Or just short sentences or headers around a portfolio of images? Thinking about the context of how your font will be used will help you to find the right one.
What content are you writing: Research has found that if a font is hard to read, people think the task is hard to do. So if you're writing educational content, or forms to be digitally filled out, it might be best to avoid a heavily scripted font. Whereas if you're hosting a wedding website, a scripted font used for your headers can reflect your brand and the atmosphere of the event.
Need some help to get started? Tools like Fontpair can help you find the perfect font pairing. Additionally, WhatFont is a handy browser extension that identifies fonts used on any website.
[Font] size matters
Font size plays a crucial role in readability. What works for print may not work for the web, especially considering the variety of screen sizes. Here's some of our best practices:
Headings: Generally, H1 should be the largest text on your page, usually around 32px or larger. H2 should be slightly smaller, around 24px to 30px, with each subsequent heading size decreasing accordingly.
Body text: Body text should be between 16px and 18px for optimal readability on most screens. Anything smaller can strain the eyes, especially on mobile devices, but be careful that your body text size in particular can impact how your brand comes across (smaller sizes can look a bit more professional, big sizes can look more child-friendly or approachable). For accessibility, an absolute minimum we'd suggest is 12px.
Line spacing: Ensure there’s enough space between lines (also known as leading). A line-height of 1.5 to 1.75 times the font size is usually comfortable for reading.
Note that some fonts look bigger due to their x-height. The x-height is literally the height of the lowercase x in the font family. Different fonts have different x-heights, and as a result, some fonts look larger than others, even though they are the same point size (credit to the book I'm reading '100 things every designer needs to know about people' by Susan M. Weinschenk - page 43 of the second edition - for this description).
To better show this - check out the below graphic where all of these sentences are written in the same font size, but different typefaces. Can you see how they all look different sizes? This is why it's important to only take my above suggestions as a guideline, and properly test how different font sizes look with your chosen typeface.
Understanding headers and paragraph copy
Your website content is structured through a hierarchy of headers (H1, H2, etc.) and paragraphs (P1, P2, etc.). Understanding how to use these effectively can improve user experience and SEO.
H1: This is typically the main title of the page. Use it once per page to clearly state the page’s purpose.
H2-H6: These subheadings help organise content, making it easier to read and understand. They also play a role in SEO by helping search engines understand the structure of your content.
P1-P3: These paragraph styles are typically used for the main body text, but variations (like P2 or P3) can be used for different sections or sidebars to create visual distinction.
If you're building your website into a website builder like Wix or Squarespace, it's super easy to select which type of header or paragraph copy your text is supposed to be, and they'll apply the styling you've set for that selection. If you're using code, make sure you correctly tag if it's a header or paragraph style, and what type of style it is for SEO benefits.
Make your text easy on the eyes
Reading on a screen is more challenging than reading on paper, which means your typography choices should aim to reduce eye strain and improve comprehension. Make sure you think about these factors when styling your text:
Contrast: Ensure there’s sufficient contrast between text and background. Light grey text on a white background might look stylish but can be hard to read.
Line Length: Keep lines of text to around 50-75 characters per line. This helps prevent readers from losing their place when moving to the next line.
Avoid All Caps: Whilst it's partly myth that we find all-caps text harder to read (we read it more slowly because we see them less often, but it's not actually more difficult for our brain),we do perceive text in all caps as shouting, and can find large quantities of all caps text overwhelming. I'd generally recommend avoiding all-caps, with a few exceptions like words you want to draw attention to (e.g. 'FREE').
Ready to choose your font?
Choosing the right fonts for your website is about more than aesthetics—it’s about enhancing readability, conveying your brand’s message, and creating a positive user experience. Hopefully these tips can get you on the right track, but if you do need more support check out our branding essentials service, where we can help select the right font (and colours etc) for your brand.