The Auro Design System implements all font application through the use of a class="..." based system. This class based system makes it easy to consistently and accurately apply all font related CSS rules across all themes that the Auro Design System supports. Content creators no longer need to apply specific CSS rules (e.g. font-family, line-height, letter-spacing, etc.) throughout their code. Simply apply the correct CSS class to your HTML element.
The Auro Design System typography includes four font groups:
- body - used for all general / default text.
- heading - used in the
auro-headercomponent and for applying toh1,h2, etc. elements directly. - display - used for text content that should render like a heading but is technically not a heading when considering the semantic layout of the page.
- accent - used for other text content that should standout on the page.
The Auro Design System typography was previously done using CSS selectors with various rules and CSS variable values to apply typography styles to elements. While this approach worked, it was less maintainable and made it harder to update typography styles across a site.
<html>
<head>
<link href="https://.../webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://.../design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.css">
<style>
body {
font-family: var(--ds-font-family-default);
font-variant-ligatures: no-common-ligatures;
font-size: var(--ds-text-body-size-default);
font-weight: var(--ds-text-body-default-weight);
line-height: var(--ds-text-body-height-default);
}
p {
font-family: var(--ds-font-family-default);
font-variant-ligatures: no-common-ligatures;
font-size: var(--ds-text-body-size-lg);
font-weight: var(--ds-text-body-lg-weight);
line-height: var(--ds-text-body-height-lg);
}
</style>
</head>
<body>
<p>
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
</p>
</body>
</html>
This example shows a simple page that links both the Auro Web Core Style Sheets and the Auro Design Tokens. It then uses inline CSS to set the body font and paragraph styles. The body uses the default font family, size, weight, and line height, while the paragraph uses a larger font size and weight.
The Auro Design System has transitioned to using HTML classes to apply typography styles. This new approach allows for easier maintenance and updates, as styles can be applied directly through classes rather than inline CSS or custom properties. It also improves readability and consistency across the site.
<html>
<head>
<link href="https://.../webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://.../design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.css">
</head>
<body class="body-default">
<p class="body-lg">
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
</p>
</body>
</html>
This example shows the same page, but now it uses classes to apply typography styles. The body uses the body-default class for the default font family, size, weight, and line height, while the paragraph uses the body-lg class for a larger font size and weight. This approach is more maintainable and allows for easier updates to typography styles across the site.