Type System
Use typography to present your design and content as clearly and efficiently as possible.
Type Scale
The Shared UI type scale includes a range of contrasting styles that support the needs of each section and component content. The type scale combines seven styles supported by the type system. Below, you can find the supported styles listed.
Headline 1
| Font | Weight | Size | Letter Spacing |
|---|---|---|---|
| Roboto | 700 | 32px | -0.25px |
<h1>Heading 1</h1>
Headline 2
| Font | Weight | Size | Letter Spacing |
|---|---|---|---|
| Roboto | 700 | 22px | -0.25px |
<h2>Heading 2</h2>
Headline 3
| Font | Weight | Size | Letter Spacing |
|---|---|---|---|
| Roboto | 700 | 18px | -0.25px |
<h3>Heading 3</h3>
Headline 4
| Font | Weight | Size | Letter Spacing |
|---|---|---|---|
| Roboto | 700 | 15px | -0.25px |
<h4>Heading 4</h4>
Headline 5
| Font | Weight | Size | Letter Spacing |
|---|---|---|---|
| Roboto | 700 | 15px | -0.25px |
<h5>Heading 5</h5>
Headline 6
| Font | Weight | Size | Letter Spacing |
|---|---|---|---|
| Roboto | 700 | 15px | -0.25px |
<h6>Heading 6</h6>
Body 1.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
HTML is the standard markup language.
Go here to see how the quick brown fox jumps over the lazy dog.
| Font | Weight | Size | Letter Spacing |
|---|---|---|---|
| Roboto | 700 | 15px | -0.25px |
<p>Body 1</p>
Body 2
| Font | Weight | Size | Letter Spacing |
|---|---|---|---|
| Roboto | 700 | 15px | -0.25px |
<p class="sui-description">Body 2</p>