# Typography

Components for our design system's typography.

## Composition

Our typography system has an emphasis on text that is able to be quickly scanned. Most of our typographic styles are optimized for short and efficient bits of text.

### TextBlock

The `TextBlock` component can be used to make long blocks of text appear clean and readable.

## Text Styles

We offer a variety of text styles.

### Text

The base typography component. When used without any props, it renders in the same manner as the default/body text style.

### HeadingText1

The largest and most prominent heading style. Use it for text at the highest level of hierarchy. Sometimes referred to by designers as "display type".

### HeadingText2

A large and noticeable heading style, but one level of hierarchy below `HeadingText1`. Commonly used for page titles or major section headings.

### HeadingText3

A quieter heading style that stands out more than body text, but is used to label things with a lower level of hierarchy.

### CaptionText

Use this style for caption text or hint text for a form field. It's typically used for text that isn't mandatory for a user to read in order to successfully accomplish a task.

### DangerText

Use this style for text that is communicating something is wrong or related to destructive actions. It's typically used for things like errors.

### WarningText

Use this style for text that is warning a user of a potential hazard that could occur. It's used for cases that aren't serious enough for `DangerText`.

### SuccessText

Use this style for text that informs the user that something is in an optimal state, or an action they have taken was successful.

### MonospaceText

Use this style to change text to a monospace font. It's typically used for things like blocks of code.

### SmallText

Use this style for smaller text. It's useful for situations where you need to fit more text in a limited space.