GC Design System Components
Home Start to use Page templates overview Basic page Components overview Breadcrumbs Button Card Checkboxes Container Date input Date modified Details Error message Error summary Fieldset File uploader Footer Grid Header Heading Icon Input Language toggle Link Notice Pagination Radios Screenreader-only Search Select Side navigation Signature Stepper Text Textarea Theme and topic menu Top navigation CSS shortcuts overview Reset styles Responsive layout State Box sizing Container sizing Display Overflow Position Visibility Font Font family Font size Font style Font weight Line height Link colour Link size Link text decoration List style Text align Text colour Text overflow Text transform Word break Margin Padding Align content Align items Align self Flex Flex direction Flex grow Flex shrink Flex wrap Gap Grid columns Grid rows Justify content Justify items Justify self Order Place content Place items Place self Background colour Border colour Border radius Border style Border width Icon names Icon size Image Cursor Pointer events Transition Styles overview Design tokens Colour tokens Spacing tokens Typography tokens Contact us Get involved Find a demo

Text
<gcds-text>

Also called: text block, copy, caption, body text, paragraph.

Text is a styled and formatted paragraph that displays written content in an accessible way.

Text component preview

Text anatomy

  1. Text is non-heading content. Its subject matter is related to the idea outlined in its corresponding heading.
  2. Heading is a prominent line of text that introduces the paragraph or other body content that immediately follows it. The visual prominence of the heading decreases based on its level in the hierarchical order.
A line of large bold text above a block of smaller text. The bold text reads “This is a heading” and the block of written content reads “This is text that’s related to the heading and describes in further detail the heading’s subject or action. Text is typically one or several lines or paragraphs that form a section’s content or introduce a bulleted list, table, or other content, like an image or video.” A label with a “1” points to the smaller block of text and a label with “2” points to the larger bold text.

Design and accessibility for text

Write content that's scannable

  • Structure content to place the most important information for the task first.
  • Keep content brief and task-oriented. Our need to tell does not equal a reader's need to know.
  • Remove unnecessary details and explanations. Include only the information a person needs.
  • Use short sentences that communicate a single idea. Be clear who or what is doing the action in each sentence.
  • Avoid frontloading content that could instead be placed where a person needs it. Rather than explain a process, make the process easier to follow and understand.

Tip: Think about whether the message could be interpreted another way.

Use a human tone

  • Talk the way the people using your product talk. Learn about them and their language by reading their requests or issues and by testing your messages with them in user research.
  • Use plain, conversational language, like the tone of voice you'd use if you were describing the situation to the person directly.
  • As much as possible, replace any jargon or technical terminology, like invalid code, unrecognized field, and mandatory with plainer terms. If they need to be used, give a short definition following the use of the term.
  • Use sentence case ​​(only the initial letter is capitalized) and avoid caps and exclamation marks.

Tip: To adopt a more human tone, think about explaining aloud to someone. How does it sound when you speak the content in conversation?

Choose regular or small text

  • Set the text size based on the role of the content and product context.
  • Use regular text for most non-heading content. Regular text uses the default font size.

Use text styling sparingly

  • Only use underline for links.
  • Use bold text rather than italics to emphasize key points, or to highlight terms within content.
  • Limit your use of bold text to avoid compromising readability and accessibility.
  • Avoid using bold text as a heading. Headings are the accessible component for identifying content sections.
  • Avoid italicizing large blocks of text, entire paragraphs, or lengthy content. Italics are often difficult to read for users with visual impairments or cognitive disabilities.
  • Only use italics for:
    • Legal reference, like the Accessible Canada Act.
    • Words in other languages, including Latin.
    • Titles of publications, works of art, and mathematical and scientific material.

Help us improve

Have questions or a request? Give feedback on our contact form.

Something's wrong? Raise it through GitHub with an account. You'll have access to the team's direct responses, progress made on your issue, and issues raised by others.

Give feedback Report an issue on GitHub
2025-10-14