Get startedFoundationsPatternsComponentsTokensContentGet support
Select your development framework to see all code in your development languages. You can change this in the top right of the screen.
FoundationsDesign at GoAAccessibilityBrand guidelinesStyle GuideColorIconographyPhotographyLogoTypographyLayout

Typography

Our typography system is designed to create a consistent and accessible experience across all Government of Alberta digital products. When paired with an effective content strategy, it enhances accessibility and makes content easy to navigate, enabling citizens to find information quickly.

Our fonts

  • Acumin Pro SemiCondensed: This is the primary font used for all text across Government of Alberta web interfaces.
  • Roboto Mono: This font is for numbers in places where comparing numbers is important. It enhances readability and alignment when displaying numerical data, making it easier to compare figures accurately.

Using type

The size and style of our type can greatly influence how it's read and understood. These guidelines explain how we use typography in Government of Alberta digital products to ensure clear communication for all users.

Text styles

XLarge heading - Perspiciatis unde omnis iste natus error sit.
Large heading - Perspiciatis unde omnis iste natus error sit voluptatem accusantium
Medium heading - Perspiciatis unde omnis iste natus error sit voluptatem accusantium laudantium
Small heading - Perspiciatis unde omnis iste natus error sit voluptatem accusantium laudantium.
XSmall heading - Perspiciatis unde omnis iste natus error sit voluptatem accusantium laudantium
Large text - Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo
Medium text - Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo
Small text - Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo
XSmall text - Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo
Large number text - 12345678910 1111 2222 3333 4444 5555 6666 7777 8888 9999 0000
Medium number text - 12345678910 1111 2222 3333 4444 5555 6666 7777 8888 9999 0000
Small number text - 12345678910 1111 2222 3333 4444 5555 6666 7777 8888 9999 0000

There are different text styles available for headings and paragraphs:

  • Headings
    • 5 sizes of headings (XLarge to XSmall) are available to organize content
  • Paragraphs
    • Large text: Use as a lead or introductory paragraph at the top of a page.
    • Body text: For main content and descriptive paragraphs. The default size is 18px for both large and small screens.
    • Small text: Used sparingly, typically in tables or compact areas at 16px.
    • XSmall text: Micro text is for less important content that does not require immediate attention, such as “terms and conditions.”
  • Links
    • We offer three text sizes for links based on your design needs and context.
    • Links are styled with underlined text in interactive-default blue for better accessibility and usability.

Alignment

All text, including headings, body text, links, and buttons, should be left-aligned for consistency.

Number alignment

  • Right alignment: Use right alignment for numbers in tables dealing with statistical data or financial figures with the same number of decimal places. This makes it easier to compare values.
  • Left alignment: Keep non-comparable values, like phone numbers, left-aligned.

Capitalization

Use sentence case for all headings, body text, links, and buttons.

Decoration

Stick to defined text styles with their respective font weights. Avoid underlining text unless it is a link.

Line length

For better readability, aim for 45 to 72 characters per line.

When content is translated, line lengths can change based on the language. Design text containers to adjust dynamically for different text lengths.

Why visual hierarchy matters

Visual hierarchy in text design is important because it:

  • Shapes how readers see the content.
  • Makes text easier to read.
  • Shows which parts of the content are most important.

Designing for visual hierarchy

When designing content, consider these key principles for creating effective visual hierarchy:

  1. Structure content strategically
    • Use different heading sizes (XLarge to XSmall) to show content importance.
    • Create a logical flow from the most to least important information.
    • Ensure headings follow a consistent H1 to H5 order for accessibility.
  2. Use emphasis techniques
    • Vary font size, weight, and style to draw attention to key elements.
    • Highlight critical actions or important information.
    • Create clear distinctions between different content levels.
  3. Align typography with content purpose
    • Match text style to the message's intended meaning.
    • Use font variations that support the content's emotional or informational tone.
    • Ensure the typography reinforces the content's core message.
  4. Prioritize readability
    • Use at least 18px font size for body text.
    • Ensure sufficient contrast between text and background.
    • Design for readability across different devices and screen sizes.
Join design system drop in hours to get feedback on your service, propose new components or patterns, suggest changes to existing resources, ask questions, and give feedback to the design system. These sessions are for Government of Alberta product teams.
Book time in drop in hours
Get startedPatternsComponentsDesign tokensContentSubmit an issue#design-system-supportContribute to the design systemRoadmapRelease notes