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
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:
- 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.
- 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.
- 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.
- 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.
Book time in drop in hours