Intelligence Community Design System

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.

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.

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.