page headerTypography UsageOverview

Typography carries content and builds hierarchy and structure within an experience. Our typography is simple and clear, never jarring or overly striking

Accessibility

To ensure that usage of typography complies with accessibility guidelines:

  • Use h1-h6 to identify headings (h1, h2, h3, h4, h5 and h1)
  • Use headings to label page regions
    • Use the aria-label attribute to associate headings with their page region, as described in the label page regions tutorial

Assistive technologies skim the structure of a page:

  • Use heading levels to allow users to navigate to or skip over specific sections
  • Avoid skipping heading levels (e.g., h2 to h4 )
Design Tokens

We use design tokens to represent the decisions of Auro's visual language. We store font specifications using variable names instead of hard-coded typography values.

Auro header styles

Header styles can be added to a project via the Auro Web Core Style Sheet package. Plase be sure to review the API documentation.

Auro header component

See auro-header component for an easy to use web componet.

Headings

Due to the combination of Orion selectors with Auro selectors, this demo is using the $prefix option to name-space the Auro selectors.

See the WCSS docs for more info.

.auro_heading--display

See code
<h1 class="auro_heading auro_heading--display">.auro_heading--display</h1>

.auro_heading--800

See code
<h1 class="auro_heading auro_heading--800">.auro_heading--800</h1>

.auro_heading--700

See code
<h1 class="auro_heading auro_heading--700">.auro_heading--700</h1>

.auro_heading--600

See code
<h1 class="auro_heading auro_heading--600">.auro_heading--600</h1>

.auro_heading--500

See code
<h1 class="auro_heading auro_heading--500">.auro_heading--500</h1>

.auro_heading--400

See code
<h1 class="auro_heading auro_heading--400">.auro_heading--400</h1>

.auro_heading--300

See code
<h1 class="auro_heading auro_heading--300">.auro_heading--300</h1>

Paragraph style

Paragraph styles can be added to a project via the Auro Web Core Style Sheet package. Be sure to review the type essentials API docs.

Basic text example. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

See code
<p class="baseParagraph">Basic text example. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

Fine print support

Auro's .fineprint selector support is intended to be used in cases where bulk copy is to be smaller than the more obvious larger print it accompanies. Fine print copy typically advertises or otherwise describes or partially describes a commercial product or service.

Support for the .fineprint is included in the essentials file of Auro's Web Core Style Sheets.

Basic fine print text example. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

See code
<p class="fineprint">Basic fine print text example. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

Utility type selectors

Utility type styles can be added to a project via the Auro Web Core Style Sheet package. Plase be sure to review the utility-font API documentation.

.auro_util_body--lg

See code
<p class="auro_util_body--lg">.auro_util_body--lg

.auro_util_body--sm

See code
<p class="auro_util_body--sm">.auro_util_body--sm

.auro_util_body--xs

See code
<p class="auro_util_body--xs">.auro_util_body--xs

Custom spacing

The Header styles come with spacing baked in. This is to help auto stack content and components without additional effort. But there are times where customizing this spacing is required. To help with this, please refer to the Auro spacing utility section of Web Core Style Sheets.

When using utility selectors, the !important flag is sometimes required. Please see how to use the important flag in Web Core Style Sheets.

The example below illustrates how you can adjust the spacing around a header element using Auro utility selectors.

.auro_heading--500

See code
<h1 className="auro_heading auro_heading--500 util_stackMarginXxxs--bottom util_stackMarginXxxs--top">.auro_heading--500</h1>

Design tokens

Please see install docs for more information.

Font familiesHeading defaultsHeading displayHeading 800Heading 700Heading 600Heading 500Heading 400Heading 300Body (default, lg, sm, xs)