Accessibility
+We aim to create digital products that everyone can use, no matter their abilities or situation. This guide outlines key principles, design tips, and tools to help create accessible and inclusive experiences.
+
+
+ Every component in our design system meets meets WCAG 2.2 Level AA standards. While the system has accessibility features, teams should take extra steps to ensure consistent and accessible experiences across all products and platforms.
+ +Accessibility and inclusion
+Inclusive design enables us to make experiences usable and open to as many people as possible, regardless of ability or circumstance. Meeting accessibility standards is just a part of inclusive design.
+Disabilities are not always visible in obvious forms. For example, someone with a permanent vision impairment, temporary blindness due to an eye infection, or a situational challenge such as using a device in bright sunlight may all encounter similar barriers.
+Inclusive design helps us to create products that work across the following spectrum of needs:
+-
+
- Permanent: Long-term conditions that require ongoing accessibility considerations, such as a person with no arm, or someone with ADHD. +
- Temporary: Short-term conditions that can be recovered from but still require accessibility features, such as a person with a fractured arm, or someone experiencing stress from lack of sleep. +
- Situational: Conditions that occur due to specific situation or surroundings, such as a person carrying groceries, wearing gloves in cold weather, or someone interacting with our product in a noisy environment. +
We must ensure that we design experiences considering these wide range of user needs. In many cases, designing for a permanent disability can also benefit users with temporary disabilities and situational limitations.
+ +Making digital products accessible and inclusive
+-
+
- WCAG compliance: The Government of Alberta follows Web Content Accessibility Guidelines (WCAG), the most widely used resource for web accessibility. Product teams should leverage this resource to incorporate design and development features necessary to make products accessible. +
- Usability testing: Usability testing is our preferred method to check if our products are user-friendly. We highly recommend all DDD product teams to conduct inclusive usability testing with diverse groups of users to validate if their products meet the users' expectations. +
- Accessibility testing: Involving people with disabilities in testing can help in identifying specific challenges faced by people with different abilities and needs. These challenges could make digital experiences unusable, even if they technically comply with WCAG. Product teams must learn from accessibility testing and iterate based on insights to make our products usable to those with disabilities. +
Key principles of accessibility
+We follow the four WCAG principles:
+-
+
- Perceivable: Ensure users can sense all information. This means:
+
-
+
- Providing text alternatives for non-text content +
- Creating content that can be presented in different ways without losing meaning +
- Making content easy to see and hear. +
+
+ - Operable: Make every function easy to use. This means:
+
-
+
- Making all functionality available from a keyboard +
- Providing users enough time to read and use content +
- Helping users navigate and find content +
+
+ - Understandable: Keep content clear and predictable. This means:
+
-
+
- Making text readable and understandable +
- Making content appear and operate in predictable ways +
- Helping users avoid and correct mistakes +
+
+ - Robust: Make sure it works with both current and future tools. This means:
+
-
+
- Ensuring compatibility with different browsers and assistive tools. +
- Providing clear and consistent structure to content +
+
Design considerations
+Visuals
+-
+
- Color contrast - Use a ratio of 4.5:1 for normal text and 3:1 for large text. Helpful tools include: + + +
- Don't rely on color alone - Use text or icons for clarity. Color-only information or changes are hard to distinguish for users with color blindness or limited vision. +
- Semantic colors - Use colors thoughtfully (e.g., green for success, red for errors). +
- Text size - Use a minimum font size of 16px for readability. Smaller fonts should be used sparingly and only for less important information. +
Interactions
+-
+
- Component states - Include relevant component states such as focus, hover, active, selected, and disabled to guide users. +
- Target size - Make interactive areas at least 24x24 pixels, including the white space. +
- Avoid displaying disabled elements - Instead of disabling buttons, let users try actions and provide feedback or guidance if needed. Alternatively, you can hide an element on a page rather than showing it in a disabled state. +
Content
+-
+
- Clear language - Use simple, inclusive language, aiming for a Grade 9 reading level. +
- Headings and labels - Organize content using clear headings for easier navigation. This is especially important for those with cognitive disabilities or those using screen readers. +
- Alternative text - Provide descriptive text for images and clear labels for links or buttons. Screen readers and text-to-speech tools rely on alternative text for images and accessible labels for interactive elements to share information and actions clearly. +
Multimedia
+-
+
- Transcripts and captions - Provide captions or transcripts for all video and audio content. These offer a different way for users with hearing loss, low vision, or blindness to access content. +
Time on task
+-
+
- Allow enough time for completing tasks - Make sure users have enough time to complete tasks like one-time-password validation and other sessions that may expire. +
- Save progress - Let users save their progress during time-limited tasks. +
Input assistance and system feedback
+-
+
- Feedback and error messages - Most users depend on the feedback from the system when making a decision or performing a task. Providing clear and concise help text, instructions, feedback and error messages allows users to navigate and move forward effectively. +
Device-friendly design
+-
+
- Text resizing - Ensure content remains accessible when users enlarge text. +
- Responsiveness - While adapting a design for different screens, consider how users access content on different devices. For example, scanning a cheque on a mobile device could also allow scanning in landscape mode for better usability and output. +
Development considerations
+Accessibility Rich Internet Applications (ARIA)
+ARIA attributes add extra accessibility features to components.
+Our design system components come with default ARIA behaviours and properties. These are documented to help developers understand and implement accessibility features without requiring extensive modifications.
+ +ARIA roles and headings
+The system uses ARIA roles to help assistive tools understand the purpose of different elements. These roles communicate what each element is for to screen readers and other assistive technologies.
+-
+
- Headings - Use structured headings (H1, H2, etc.) to organize content. H tags don't have to match the text size. For example, a Large Heading can be labelled as H1. Just keep headings consistent across pages, as this helps users find information quickly. +
Dynamic content
+Dynamic content, which updates or changes without a full page reload, can create challenges for accessibility. Here are some ways to handle dynamic content for accessibility:
+ +Use of ARIA live regions
+ARIA live regions let screen readers announce webpage updates without changing focus.
+Use aria-live with values like:
+-
+
- "polite" for non-urgent updates +
- "assertive" for important updates +
- "off" to turn off announcements +
Check the Callout or Notification Banner components to see how we handle updates for assistive technology.
+ +Form updates
+Use ARIA role=”alert” or live regions to notify users when new questions show up. When a form changes and new fields appear based on what a user enters, it's important to let them know.
+ +Managing focus
+In Single Page Applications (SPAs), manage focus to help users understand where they are after dynamic content loads. For example:
+-
+
- If a pop-up window opens, move focus to it. +
- When the pop-up closes, move focus back to the main page. +
Skip to content link
+Skip to content links help users, especially those using screen readers or keyboard navigation, jump directly to the main part of a webpage. This makes it easier for people with varying abilities to use the product without having to go through repetitive navigation links.
+-
+
- Positioning - These links are usually placed at the top of the page, so they are the first thing users can focus on. +
- Functionality - When users activate these links, they go straight to the main content, avoiding long navigation menus. +
- Visibility - For users who can see, these links should be visible when they first tab to them, allowing them to skip navigation easily. +
Keyboard navigation
+All interactive elements in our design system are accessible via the keyboard, with clear focus indicators.
+Keyboard navigation is important for users who only use a keyboard to interact with websites and apps. It allows them to move around and do things without a mouse or touch screen.
+ +Optimizing performance
+Improving speed, loading time, and responsiveness helps users with older devices, slower internet connections, or mobile phones access our digital products effectively.
+ +Accessibility testing
+Testing ensures components are used in ways that make digital products fully accessible. Recommended tools include:
+-
+
- Screen readers - NVDA (Windows), VoiceOver (Apple). +
- Automated tools - Axe, Wave, Lighthouse. +
Additional resources
+ +Brand guidelines
+Communications and Public Engagement (CPE) plays an important role in providing and maintaining brand identity guidelines across the Government of Alberta. These guidelines ensure all digital products are consistent and easily recognizable, building trust with users.
+
+
+
+ Brand guidelines resources
+The DDD design system follows brand guidelines defined by Communications and Public Engagement. Additional guidelines and resources offered by CPE should also be followed and designers within DDD should use these resources as needed.
+For more details on additional guidelines and styles adopted from CPE, please explore the following links:
+ +Iconography
+Besides the icon guidelines and sets provided by DDD's design system, designers can use CPE's icon generator. This is particularly useful when icons need a more detailed or illustrative style.
+ +Photography
+Government of Alberta digital products must follow the photography guidelines set by CPE. For guidance, please see the photography section in CPE's visual identity manual.
+ +Content
+When creating content for web interfaces, refer to the content guidelines provided in the content guides section on the digital experience standards page on Alberta.ca.
+ +Digital experience standard compliance and policies
+CPE's digital experience standard helps ensure that digital products meet required governance and standards. Refer to the links below to ensure your digital products comply with Government of Alberta policies:
+ +-
+
- Design standards checklist +
- Web governance policy +
- Communications policy +
- Government identity policy +
For questions regarding brand guidelines or information in the above links, please reach out to CPE at visual@gov.ab.ca.
+ +Color
+Colors play a major role in how the Government of Alberta communicates. They serve as a tool to convey clarity, express emotions, and promote inclusivity.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Type of content
+
+
+ Minimum ratio (AA rating)
+
+
+
+
+
+
+ Body text - 18px
+
+
+ 4.5:1
+
+
+
+
+ Large-scale text - 24px
+
+
+ 3:1
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Our palette is divided into these categories:
+-
+
- Brand colors +
- Interactive colors +
- Text colors +
- Status colors +
- Greyscale colors +
- Additional colors +
For more information about how to use our colors in your digital product, see design tokens.
+Brand colors
+Brand colors represent our identity and are aligned to the Alberta.ca brand guidelines.
+Brand - Default
+ Brand - Dark
+ Brand - Light
+ Interactive colors
+Interactive colors are used to assign colors to specific actions and states, such as buttons and links. This helps in enhancing usability and promoting user engagement in our digital products.
+Interactive - Default
+ Interactive - Hover
+ Interactive - Focus
+ Interactive - Error
+ Interactive - Disabled
+ Interactive - Error Hover
+ Interactive - Error Disabled
+ Text colors
+Headings, body text, and labels adopt our text colors to ensure visual hierarchy in our layouts and readability across various contexts.
+Text - Default
+ Text - Secondary
+ Text - Light
+ Text - Disabled
+ Status colors
+Status colors are used to show various states such as success, warning, error and critical, helping users easily interpret the messages in our products.
+Info
+Info - Default
+
+ Info - Light
+
+
+ Info - Dark
+
+
+ Info - Background
+
+ Warning
+
+ Warning - Default
+
+
+ Warning - Light
+
+
+ Warning - Dark
+
+
+ Warning - Background
+
+ Emergency
+
+ Emergency - Default
+
+
+ Emergency - Light
+
+
+ Emergency - Dark
+
+
+ Emergency - Background
+
+ Success
+
+ Success - Default
+
+
+ Success - Light
+
+
+ Success - Dark
+
+
+ Success - Background
+
+ Critical
+
+ Critical
+
+ Greyscale colors
+Greyscale are neutral colors that range from black to white and provide a base for accents, backgrounds and layouts.
+
+ Greyscale - White
+
+
+ Greyscale - 100
+
+
+ Greyscale - 200
+
+
+ Greyscale - 400
+
+
+ Greyscale - 500
+
+
+ Greyscale - 600
+
+
+ Greyscale - 800
+
+
+ Greyscale - Black
+
+ Extended colors
+Extended colors can be used If you need more badge colours or need colours to differentiate between data categories in charts.
+Aqua
+ Aqua - Light
+ Black
+ Black - Light
+ Blue
+ Blue - Light
+ Green
+ Green - Light
+ Orange
+ Orange - Light
+ Pink
+ Pink - Light
+ Red
+ Red - Light
+ Violet
+ Violet - Light
+ White
+ Yellow
+ Yellow - Light
+ Color usage
+All government of Alberta products are designed to meet the Web Content and Accessibility Guidelines (WCAG) standards. Level AA compliance is the minimum requirement for accessible design.
+ +Use an accessibility contrast checker to check color combinations or use our guide below. Logos, decorative objects, disabled form fields, and disabled buttons should be excluded from this test and don't need to be tested for contrast.
+ +Accessible combinations
+
+ 
+
+
+ Greyscale - White
+ Brand - Default
+
+ 
+
+
+ Greyscale - White
+ Brand - Dark
+
+ 
+
+
+ Greyscale - White
+ Interactive - Hover
+
+ 
+
+
+ Greyscale - White
+ Info - Default
+
+ 
+
+
+ Greyscale - White
+ Interactive - Default
+
+ 
+
+
+ Greyscale - White
+ Greyscale - Black
+ Inaccessible combinations
+
+ 
+
+
+ Greyscale - White
+ Brand - Light
+
+ 
+
+
+ Greyscale - White
+ Info - Light
+
+ 
+
+
+ Greyscale - White
+ Warning - Dark
+
+ 
+
+
+ Greyscale - White
+ Warning - Default
+
+ 
+
+
+ Brand - Light
+ Warning - Default
+
+ 
+
+
+ Brand - Default
+ Brand - Dark
+ Design at the Government of Alberta
+Citizens expect digital products that are modern, easy to use, and consistent. To meet these needs, our digital products must follow our user experience guidelines and should be tested frequently to make continuous improvement and stay relevant.
+
+
+ User experience guidelines
+Government of Alberta digital products will deliver an experience in alignment to the following guidelines:
+-
+
- User-centered - Designed with a clear understanding of users, their goals, tasks, environments, and context of use, using user-centered design methods. +
- Usable - Interfaces will be easy to use, enabling users to find the information they need and complete tasks successfully. +
- Accessible - Digital products will be inclusive, ensuring usability for everyone, regardless of physical or cognitive ability. +
- Trustworthy - Experiences will feel familiar and recognizable as a Government of Alberta product, ensuring users' security and privacy. +
- Modern - Digital experiences will meet present-day user expectations and preferences for aesthetics and interaction. +
To get guidance on how to deliver an experience aligned with the guidelines, download the User Experience Worksheet.
+ +Usability testing
+Usability testing is our preferred method to ensure digital products meet our usability guidelines.
+Effective usability testing includes:
+-
+
- Diverse user group: Real users from different demographic, behavioural backgrounds, and geographical regions within Alberta that will experience the problem or benefit of the product. +
- Inclusive testing: Users with various physical and/or cognitive abilities, literacy levels, and tech savviness. +
- Device variety: A diverse range of devices that reflect users' preferred choice when interacting with government services. +
- Tasks: Activities that cover tasks and service process from end-to-end. +
Frequent usability testing is required to maintain product usability, effectiveness, and alignment to product and user needs as they evolve over time.
+For guidance on the process of usability testing, refer to our Usability Field Guide.
+
+
+
+ Foundations
+ Design at GoA
+ Accessibility
+ Brand guidelines
+ Style Guide
+ Color
+ Iconography
+ Photography
+ Logo
+ Typography
+ Layout
+
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/routes/foundations/Iconography.tsx b/src/routes/foundations/Iconography.tsx
new file mode 100644
index 000000000..cc18869fa
--- /dev/null
+++ b/src/routes/foundations/Iconography.tsx
@@ -0,0 +1,210 @@
+import { GoabDivider, GoabContainer, GoabTable, GoabSpacer, GoabIcon, GoabBlock, GoabGrid } from "@abgov/react-components";
+import { useContext } from "react";
+import { Link } from "react-router-dom";
+import { DeviceWidthContext } from "../../contexts/DeviceWidthContext";
+import { ComponentContent } from "@components/component-content/ComponentContent.tsx";
+
+export default function IconographyPage() {
+ const { isDesktop } = useContext(DeviceWidthContext);
+ const renderDesktop = () => {
+ return (
+ 
-
+
-
+
- Icon size
- Small: icon-size-s +
- Description
- Used in compact spaces +
-
+
-
+
- Icon size
- Medium: icon-size-m +
- Description
- Suitable for slightly larger spaces +
-
+
-
+
- Icon size
- Large: icon-size-l +
- Description
- Used in dense spaces where an icon is required +
Iconography
+Icons are simple and universal graphic symbols that communicate and enhance both the aesthetic and functional aspects of our products. While they can be used with descriptors, they can also be self-expressive and convey meaning where words cannot.
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Style
+Our icon style is simple, rounded, featuring thin line strokes, or filled shapes. They are designed to scale proportionally, ensuring that they integrate seamlessly into various interface sizes. They are divided into three categories: Core, Extended and Logo icon set.
+ +Core icon set
+Our core icon set is the main icon library in the design system, helping you maintain visual consistency across all our digital products.
+
+
+
+
+ Alert and messaging
+
+
+
+
+ Basic
+
+
+
+
+ Direction
+
+
+
+
+ Interactions
+
+
+
+
+ Accounts
+Explore the core icon set and its properties on the component page.
+ +Extended icon set
+Ionicons
+We use the open-source icon library, Ionicons, which provides a wide variety of high-quality icons. Use these icons when you need options beyond the core icon set.
+ +
+ 
+
+
+ Logo icons
+Our Figma component library contains popular brand logos and are kept in accordance with their respective logo usage guidelines. When using any of these brand logos, please make sure to refer to their brand guideline to ensure compliance with their usage standards.
+ +Icon size
+You can access the design tokens for icon sizes here.
+ +When icons are interactive, it's best to make them 24 x 24 CSS pixels to meet WCAG guidelines.
+ +Best practices
+-
+
- Whenever possible, combine icons with text for clear communication. +
- When placing icons next to text elements, ensure they are vertically aligned to create visual balance. +
- Do not create icons that are overly complex. +
- Apply color to an icon using our design tokens. Ensure color combinations meet WCAG standards of at least a 3:1 contrast ratio between foreground and background. +
Creating icons
+Before creating an icon, check if it already exists in the icon library. If not, you can follow these steps:
+-
+
- Consult the do's and don'ts section in best practices. +
- Ensure the icon aligns to the style of our icon sets. +
- Choose a clear and descriptive name. +
Layout
+We use the layout as a structural template to support consistency across our products. By defining visual grids, spacing, and sections, we create intuitive products for our users.
+
+
+
+
+
+ Breakpoint
+
+
+ Viewport(px)
+
+
+ Margin
+
+
+
+
+
+
+ Small screen (mobile)
+
+
+ <624px
+
+
+ 16px
+
+
+
+
+ Medium screen (tablet)
+
+
+ 624-1024px
+
+
+ 32px
+
+
+
+
+ Large screen (desktop)
+
+
+ >1024px
+
+
+ 64px
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ The spacing scale
+The Design System uses a spacing scale with a 16px base value to be used within layout spacing and spacing within components. See spacing for more information.
+ +Breakpoints
+Default breakpoint sizing for different viewport widths are as follows:
+Margins
+Default margin
+Margins provide a visual buffer between a view's content and any content outside of the view's bounds. These inset values create a space between the edges of the view's bounds rectangle and the content inside the view.
+ +
+ 
+
+
+ Common layouts
+Basic form layout
+See Public form pattern for more information.
+The default layout for a form page uses a maximum page width of 960px. This ensures optimal line length (50-75 characters) and simplifies the content for the user. This layout is often used for public-facing forms.
+ +
+ 
+
+
+ Basic form layout example
+This layout is recommended for public-facing forms where the content needs to be simple, accessible, and often broken down into simple one-question pages.
+ +
+ 
+
+
+ Side navigation layout
+A 2-column layout that has a fixed side navigation and a fluid content container.
+ +
+ 
+
+
+ When designing for large screens, consider a maximum content width to prevent the content from getting too wide.
+
+ 
+
+
+ Side navigation layout example
+A 2-column layout is often used for internal applications where there is a need for side navigation.
+ +
+ 
+
+
+ Side navigation and side bar layout
+A 3-column layout that has a fixed side navigation as well as a second side panel on the right side. The third column is often used to show tertiary information, comments, or other documents alongside the main content area. Depending on your content, for large viewports it is recommended to use a maximum content width of 1176px on the main content area.
+ +
+ 
+
+
+ Logo
+Our logo is an important part of our brand identity and serves as a symbol that distinguishes our digital products from others. To keep our brand consistent and recognizable, we encourage following the guidelines for proper usage.
+ +Anatomy
+
+ 
+
+
+
+ The Alberta logo consists of two elements — the wordmark and symbol.
+ +Primary usage
+The primary Alberta logo is the preferred choice for all our digital products. The default color combination for the signature is the grey (stone) and blue (sky) color.
+
+ 
+
+
+ The Alberta logo should be prominently displayed in the interface, particularly in the header and footer. As a product team utilizing our design system, you will find that the Alberta logo is already integrated into our design components and readily available for your use.
+ +Alternate usage
+Alternate versions of the logo may be used in contexts where the default version isn't suitable. These are the only alternate usage allowed:
+
+ 
+
+
+ Reverse version (Dark)
+ When the logo is placed on a darker background, the reversed version of the wordmark can be used while still retaining the blue (sky) color of the symbol.
+
+ 
+
+
+ White version
+ This version can be used in cases where simplicity is needed. The chosen background color must be one of the official brand colors.
+
+ 
+
+
+ Black version
+ For cases where color usage is limited, such as lo-fi prototyping, the black version of the logo can be used.
+ Alberta service logo
+
+ 
+
+
+
+ When the Alberta Logo is accompanied by a service name, a protective space is applied around it to enhance its impact. This space indicated by x below is equal to the height and the width of the period symbol. When adding text or other elements, it is important to stay outside of this space.
+ +
+ 
+
+
+
+ Circular symbol
+The circular symbol is used in place of our primary logo when space is limited, such as on mobile devices. This ensures that our products are branded and remain identifiable. It also acts as a favicon, an icon that is commonly used in browser tabs to help users easily identify our product when multiple tabs are open.
+ +
+ 
+
+
+
+ For accuracy and consistency, refer to our logo components in the Figma Asset library.
+ +Logo usage guidelines
+-
+
- Avoid modifying the logo and always use the appropriate version from our asset library. +
- Do not alter the spacing around the 'wordmark' and the 'wordmark and service name'. This spacing ensures that sufficient protective space is kept around them to maintain their impact. +
- Use the provided logo variations only for their specific purposes. +
- Do not use the logo for commercial purposes unless granted permission. For more information, please review the Government Identity Policy. +
Photography
+The Government of Alberta maintains a library of photos specifically taken for government use, ensuring they are relevant to our citizens. This collection meets our established criteria for quality and accessibility.
+ +
+
+
+ Government of Alberta photo library
+The photo library is owned by Communications and Public Engagement (CPE) and offers an extensive collection of photos on various subjects. All these photos comply with the Government of Alberta brand and content guidelines and are free to use for all our projects.
+The library can be accessed by all Government of Alberta staff and contractors. To learn how to access our photo library, please see our detailed instructions on Confluence.
+ +Best practices
+Accessibility
+ +-
+
- Support your images with alternative text or captions to enable people with disabilities using screen readers or assistive technologies to access your images. +
- Avoid presenting essential readable text inside an image as it cannot be accessed with assistive technologies. If you need to do so, make sure the same text is included in the alternative text or caption. +
- We recommend not to place text or icons on images. If you need to do so, ensure that the image used as a background provides sufficient contrast to make it legible and easily readable. +
If you are working with images, please make sure to reference W3C's Images tutorial to know the accessibility best practices for various image formats.
+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:
+-
+
- 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. +
+