
Typography carries content and builds hierarchy and structure within an experience. Our typography is simple and clear, never jarring or overly striking
To ensure that usage of typography complies with accessibility guidelines:
- Use h1-h6 to identify headings (
h1
,h2
,h3
,h4
,h5
andh1
) - 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
toh4
)
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.
Header styles can be added to a project via the
See
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
.auro_heading--display
<h1 class="auro_heading auro_heading--display">.auro_heading--display</h1>
.auro_heading--800
<h1 class="auro_heading auro_heading--800">.auro_heading--800</h1>
.auro_heading--700
<h1 class="auro_heading auro_heading--700">.auro_heading--700</h1>
.auro_heading--600
<h1 class="auro_heading auro_heading--600">.auro_heading--600</h1>
.auro_heading--500
<h1 class="auro_heading auro_heading--500">.auro_heading--500</h1>
.auro_heading--400
<h1 class="auro_heading auro_heading--400">.auro_heading--400</h1>
.auro_heading--300
<h1 class="auro_heading auro_heading--300">.auro_heading--300</h1>
Paragraph styles can be added to a project via the
Basic text example. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<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>
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
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 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 styles can be added to a project via the
.auro_util_body--lg
<p class="auro_util_body--lg">.auro_util_body--lg
.auro_util_body--sm
<p class="auro_util_body--sm">.auro_util_body--sm
.auro_util_body--xs
<p class="auro_util_body--xs">.auro_util_body--xs
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
When using utility selectors, the !important
flag is sometimes required. Please see
The example below illustrates how you can adjust the spacing around a header element using Auro utility selectors.
.auro_heading--500
<h1 className="auro_heading auro_heading--500 util_stackMarginXxxs--bottom util_stackMarginXxxs--top">.auro_heading--500</h1>
Please see