Text

Following web best practices, it's important to add text in a meaningful way that cleary communicates your message to your audience.

Below you'll learn how to use titles, heading styles, calls-to-action and more, to help audiences easily consume the content.

Heading Styles

Heading hierarchy is important to improve accessibility and search engine optimization on your website. Having a well-defined title hierarchy makes your page easy for users to scan the page for information.

Always start with Heading 1 (except for the homepage), followed by Heading 2, Heading 3, and so forth.
The title component can also be used to automatically create a H1 for the title of the page.
Heading styles can be applied in a text component or in a Banner image.

See Banner styles

Heading One

Heading Two

Heading Three

Heading Four

Heading Five

Best Practices

H1 Heading

A title heading can easily be added as a title component, or in a text component
Only add one H1 at the top of your page to maintain user accessibility

Headings on Home page

Homepages already include an H1 as the site name in the header, therefore any titles added to your home page should be an H2
If the H2 appears too small for home page you can apply a CSS class to enlarge the font

Headings Links

Avoid linking a heading and use a call-to-action, such as a button or read more link instead.

How to

In the text component, you can find the heading styles under the format drop down.

Styles:

Used only on homepage for H2 headings

Header-l - can be used to increase the text size and appear as H1
Header-xl - can be used to increase the text size to appear larger than an H1

SFU Communicators Toolkit