Text formatting: A guide for website owners

When building a website, it’s easy to focus on flashy visuals or animations and overlook the basics – like text formatting. But the way your text is presented plays a huge role in how users experience your site. Proper typography is about making your website accessible, readable, and user-friendly for everyone, while also boosting your SEO performance.

Font Sizing: Making Text Readable for Everyone

Font sizing is a key part of text formatting, but it’s easy to get wrong. Using improper units can lead to accessibility issues and poor responsiveness. While the technical details are your developer’s job, understanding the basics will help you communicate your needs effectively.

Best Practices for Font Sizing:

• Using Relative Units:
  Your developer should always set up your website to use use relative units like em or rem. These units allow text to scale dynamically based on the user’s browser settings and device, ensuring accessibility and responsiveness. For example:
  • 1rem is equal to the root font size (typically 16px by default in most browsers).
  • em is relative to the font size of its parent element.
• Base Font Size:
  The base font size (often set in the root element) should be at least 16px equivalent to ensure readability. From there, your developer should use relative units to create a scalable typography system.
• Font Scale and Hierarchy:
  Your developers should have established a font scale. This is a system of proportional font sizes for headings, subheadings, and body text. This ensures a clear hierarchy and visual consistency. For example:
  • H1: 2.5rem
  • H2: 2rem
  • Body Text: 1rem
• Responsive Typography:
  Your developer should implement media queries, or “calcs” (calculations of font size based on screen width) to adjust font sizes for different screen sizes, ensuring text remains readable on mobile devices, tablets, and desktops.

A Note: Why Font Scale Should Be Handled by Developers

Creating a font scale and hierarchy is a technical task that requires knowledge of CSS, design principles, and accessibility standards. As a website owner, your role is to communicate your brand’s needs and preferences to your developer or designer. For example, you might specify that you want headings to stand out clearly or body text to be easy to read. The developer will then implement these requirements using a scalable typography system based on relative units like rem or em.

By leaving the technical implementation to professionals, you ensure that your website’s typography is not only visually appealing but also functional, accessible, and responsive.

Colour Contrast: Accessibility for All Users

Color contrast is the difference in brightness between text and its background. Poor contrast can make your site hard to read, especially for users with visual impairments or color blindness. Meeting contrast standards ensures your site is accessible to everyone.

Best Practices for Colour Contrast:

• Contrast Ratio:
  Follow the Web Content Accessibility Guidelines (WCAG), which recommend a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. Note that your developer should already have defined an accessible colour palette for your website, which will automatically ensure that colour contrast is sufficient – you should avoid using formatting tools to change colours, but if you must tinker, make sure to use a tool like the WebAIM Contrast Checker to ensure your text meets accessibility standards.
• Avoid Colour Reliance:
  Don’t rely solely on colour to convey meaning. For example, instead of using red text to indicate an error, pair it with an icon or descriptive text.

Capitalization: When and How to Use It

Capitalization affects both readability and tone. While uppercase text can emphasize key points, overusing it can make your content harder to read and come across as overly aggressive.

Best Practices for Capitalization:

• Avoid All Caps for Body Text:
  All caps are harder to read because they lack the visual cues provided by ascenders and descenders (the parts of letters that extend above or below the baseline).
• Use Title Case for Headings:
  Title case (capitalizing the first letter of each major word) is a standard convention for headings and titles.
• Use Sentence Case for Body Text:
  Sentence case (capitalizing only the first letter of the first word) is more natural and easier to read for paragraphs.

Underlining Text Links: A Simple but Crucial Detail

Text links are among the most important interactive elements on a website, and how they’re styled can significantly impact usability. Underlining links is a simple yet effective way to ensure users can easily identify clickable text.

Best Practices for Text Links:

• Always Underline Links:
  Underlined text is universally recognized as a link. As mentioned earlier, avoid relying solely on colour to differentiate links, since users with colour blindness may not be able to distinguish them.
• Hover Effects:
  Add hover effects (e.g., changing the colour or adding an underline) to reinforce interactivity.
• Avoid Underlining Non-Linked Text:
  Underlining non-linked text can confuse users and lead to frustration.

Text Alignment: Striking the Right Balance for Readability

Text alignment is a small detail that makes a big difference. Poor alignment can make your text harder to read and disrupt your site’s visual flow. By following a few simple principles, you can ensure your content is both appealing and easy to consume.

Best Practices for Text Alignment:

• Avoid Justified Text:
  Justified text aligns both the left and right edges of a block of text, creating a clean, rectangular appearance. While this may look neat at first glance, it often leads to uneven spacing between words. These gaps can make text harder to read, especially for users with dyslexia or other cognitive challenges.
  • Why It’s Problematic:
    Uneven spacing disrupts the natural flow of reading and can cause users to lose focus or skip over content.
  • What to Do Instead:
    Stick to left-aligned text for body content. Left alignment creates a consistent starting point for each line, making it easier for users to follow along.
• Limit Centred Text
  Centred text can be visually striking, but it’s best reserved for small amounts of content, such as headings, quotes, or call-to-action buttons. Large blocks of centred text are difficult to read because users have to search for the beginning of each line, which slows down reading and increases cognitive load.
  • Why It’s Problematic:
    Centred text lacks a consistent starting point, making it harder for users to scan and read efficiently.
  • What to Do Instead:
    Use left-aligned text for paragraphs and longer blocks of content. This alignment is the most natural for reading, especially in languages that read left-to-right.
• Right-Aligned Text: Use Sparingly
  Right-aligned text is rarely used for body content because it creates a jagged left edge that disrupts the reading flow. However, it can be effective for specific design elements, such as captions or small blocks of text in a visually balanced layout.
  • Why It’s Problematic:
    The inconsistent starting point makes it harder for users to follow the text.
  • What to Do Instead:
    Reserve right-aligned text for decorative or secondary elements, and ensure it doesn’t interfere with readability.
• Alignment for Multilingual Websites
  If your website supports multiple languages, consider the natural reading direction of each language. For example:
  • Left-to-Right Languages: Use left-aligned text for languages like English, Spanish, and French.
  • Right-to-Left Languages: Use right-aligned text for languages like Arabic and Hebrew.

Why Alignment Matters for Accessibility

Proper text alignment is essential for creating an accessible website. Users with visual impairments, dyslexia, or cognitive challenges rely on consistent alignment to navigate and understand content. By avoiding justified and large blocks of centred text, you make your website more inclusive and user-friendly.

The Importance of Heading Levels

Headings aren’t just larger, bold text! They serve as the backbone of your content’s structure. Properly formatted headings help users navigate your content, improve accessibility, and signal the importance of different sections to search engines. However, headings must be used correctly to achieve these benefits.

Semantic headings are HTML elements (e.g. <h1>, <h2>, <h3> etc.) that define the structure and hierarchy of your content. They aren’t just visual styling tools. They actually provide important meaning and context to your content for both users and search engines.

Why Heading Order Matters: A Book Analogy

Think of your website as a book. Just like a book has a title, chapters, and subsections, your website should have a clear hierarchy of headings to organize its content. Here’s how is works:

• Title of the Book (H1):
  The <h1> tag is the most important heading on your page. It’s like the title of a book – it tells users and search engines what the page is about.
• Chapters (H2):
  Your <h2> tags represent the main sections of your content, similar to the chapters of a book. They break the content into logical parts, making it easier for users to scan and understand.
• Subsections (H3, H4, etc.):
  The <h3> and lower-level headings are like subsections within a chapter. They provide additional detail and context, helping users dive deeper into specific topics.
• Consistent Order:
  Just as a book wouldn’t jump from Chapter 1 to Chapter 5 without explanation, your headings should follow a logical order. For example, a <h2> should always be followed by an <h3> or another <h2>, but never by a <h4> or <h5>. Essentially, your headings must move downwards in order, but may move upwards to “any “reset” back to any previous, logical heading level. For example:
  • This is correct: <h2> to <h3> to <h2> to <h2> to <h3> to <h4> to <h2> (you’ll see no level was skipped moving downwards, but we did reset back to a <h2> from a <h4> at the end).
  • This is incorrect: <h2> to <h4> to <h3> to <h5> (you’ll see we’ve skipped the <h3> when we moved downwards from <h2> to <h4>, and the <h4> when we skipped downwards from <h3> to <h5>.

Best Practices for Heading Structure

• Use Headings to Create a Clear Hierarchy:
  Headings should follow a logical, hierarchical structure:
  • H1: The main title of the page.
  • H2: Major sections of the page.
  • H3: Subsections within each major section.
  • H4 and Beyond: Use sparingly for deeper levels of detail.
• Use Headings for Structure, Not Styling
  Headings should never be used purely for visual styling. For example, don’t use a <h3> tag just because you want smaller text. Instead, use CSS or a custom class to style headings while maintaining semantic correctness.
• Keep Headings Concise and Descriptive
  Headings should clearly describe the content they introduce. Avoid vague or overly long headings, as they can confuse users and dilute their impact.

Typography and Formatting as the Foundation of SEO, Accessibility, and Usability

Typography and text formatting are more than just design choices – they’re the foundation of your website’s success. When done right, they make your content easy to read, accessible to all users, and optimized for search engines. While they may not be as flashy as animations, they’re the glue that holds your site together. Get them right, and your website will stand out for all the right reasons.