Type utilities are designed to work in combination with line-height utilities so as to result in more sensible numbers wherever possible. These also exist as [variables](/css/support/typography#typography-variables) that you can use in components or custom CSS.
Font sizes are smaller on mobile and scale up at the `md` [breakpoint](/css/support/breakpoints) to be larger on desktop.
| Scale | Font size: mobile | Font size: desktop | 1.25 line height | 1.5 line height |
| --- | --- | --- | --- | --- |
| 00 | 40px | 48px | 60 | 72 |
| 0 | 32px | 40px | 50 | 60 |
| 1 | 26px | 32px | 40 | 48 |
| 2 | 22px | 24px | 30 | 36 |
| 3 | 18px | 20px | 25 | 30 |
| 4 | 16px | 16px | 20 | 24 |
| 5 | 14px | 14px | 17.5 | 21 |
| 6 | 12px | 12px | 15 | 18 |
## Heading utilities
Use `.h1`–`.h6` to change an elements font size and weight to match our heading styles.
```html live
<pclass="h1">Pizza 1</p>
<pclass="h2">Pizza 2</p>
<pclass="h3">Pizza 3</p>
<pclass="h4">Pizza 4</p>
<pclass="h5">Pizza 5</p>
<pclass="h6">Pizza 6</p>
```
These are particularly useful for changing the visual appearance while keeping the markup semantically correct. Be sure you keep the hierarchy appropriate for the page.
```html live
<h2class="h1">Looks like a heading 1, semantically a heading 2</h2>
```
## Type scale utilities
Use `.f1`–`.f6` to change an elements font size while keeping inline with our type scale.
```html live
<pclass="f1">Focaccia</p>
<pclass="f2">Focaccia</p>
<pclass="f3">Focaccia</p>
<pclass="f4">Focaccia</p>
<pclass="f5">Focaccia</p>
<pclass="f6">Focaccia</p>
```
Lighter font-weight utilities are available in a limited range. Lighter font-weights reduce the legibility of text, particularly at small font sizes, so the scale only goes down to `f3` at 20px. The larger sizes`f0` and `f00` allow for lighter and larger type that is in keeping with our marketing styles.
```html live
<h1class="f00-light">Potato chips</h1>
<h1class="f0-light">Potato chips</h1>
<h1class="f1-light">Potato chips</h1>
<h1class="f2-light">Potato chips</h1>
<h1class="f3-light">Potato chips</h1>
```
## Line height styles
Change the line height density with these utilities.
The `lh-0` utility class sets `line-height: 0 !important`, and can be used to remove vertical spacing from elements that inherit line-height but don't contain any text.
## Typographic styles
Change the font weight, styles, and alignment with these utilities.
There are two utilities for adjusting how lines and words of text break when they exceed the width of their containing element:
1.`break-word` sets `word-break: break-word`_and_`overflow-wrap: break-word`. **This is more reliable way to ensure that content doesn't escape its container than `wb-break-all`.**
2.`wb-break-all` sets `word-break: break-all`, which behaves in a subtly different way to `break-word`, [according to MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#Values):
> **Note:** In contrast to `word-break: break-word` and `overflow-wrap: break-word` (see [`overflow-wrap`](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap)), `word-break: break-all` will create a break at the exact place where text would otherwise overflow its container (even if putting an entire word on its own line would negate the need for a break).
