Intelligence Community Design System ICDS Get started Accessibility Styles Components Patterns Community
Show navigation section

Typography

Guidance Code Accessibility

Introduction

The typography component is used to style text elements likep ,h1 andlabel . The element to be styled should be wrapped with the typography component.

The typography variants are defined on the typography styles page.

Use one of the typography component's variants to style an element. For example, the following uses ah2 variant to wrap ah5 element and apply the 'heading large' styling.

Interactive example

<h5> with 'heading large' styling

When to use

Use typography to provide consistent styling across an app's text content.

Use the logical order ofh# tags in code for headings. For example, ah3 heading needs to come after ah2 heading but can be styled as any variant.

Add a variant to the typography element to change its style. This doesn't change the semantic level of the typography element so make sure to always adhere to accessible heading levels . For example, body text with a variant ofh2 will appear visually as anh2 but still be body text in the DOM.

Vertical margins

When using a typography component within page content, apply the vertical margins to evenly space out text elements on the page.

If using the typography component within other components or compact layouts, don't apply vertical margins. You can then position the typography component with precision.


Last reviewed 27 November 2023 .
Navigated to Typography - Intelligence Community Design System