> ## Documentation Index
> Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Typography

Use typography to present content as clearly and efficiently as possible.

!["A" with an underline as an icon to represent
typography](https://mintcdn.com/servicetitan/KE7wVYXA9MgEh_Ye/images/docs/web/foundations/shared/a-with-an-underline-as-an-icon-to-represent-typography.png?fit=max\&auto=format\&n=KE7wVYXA9MgEh_Ye\&q=85\&s=849232ee923837157a4fc9def25e4719)

## Overview

Too many type sizes and styles at once can spoil any layout. A limited set of type variations are supported that work well with each other.

### Usage Guide

##### Legend

✅ recommended

⚠️ use with caution

❌ do not use

#### Headline Text

| | xlarge | large | medium | small |
| - | - | - | - | - |
| On-boarding Wizard | ✅ | ⚠️ | ⚠️ | ❌ |
| Page Title | ⚠️ | ✅ | ⚠️ | ❌ |
| Section Title | ❌ | ❌ | ✅ | ✅ |
| Dialog Title | ❌ | ❌ | ✅ | ❌ |
| Drawer Title | ❌ | ✅ | ✅ | ✅ |
| Popover Title | ❌ | ❌ | ❌ | ✅ |

#### Body Text

| | xlarge | large | medium | small |
| - | - | - | - | - |
| Paragraph | ⚠️ | ✅ | ⚠️ | ❌ |
| Table Cell | ⚠️ | ⚠️ | ⚠️ | ✅ |
| Single Piece of Data | ❌ | ✅ | ⚠️ | ⚠️ |
| Helper Text | ❌ | ⚠️ | ✅ | ✅ |
| Meta Data | ❌ | ⚠️ | ⚠️ | ✅ |

### Pairing

Our Typography uses semantic naming to pair sizes which helps with the consistency in overall application as well as the visual hierarchy and space management.

This pairing method is ideal for text components that are directly or semi-directly related or grouped together in a card or section.

##### Pairing Examples

typography-pairing-size-medium

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/typography-pairing-size-medium?file=src/App.tsx)

```tsx lines theme={null}
import { Text, Flex } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex direction="column">
      <Text variant="headline" el="h4">
        Headline Default
      </Text>
      <br />
      <Text variant="eyebrow">Eyebrow Default</Text>
      <Text variant="body">This is default BodyText component</Text>
    </Flex>
  );
}
export default App;
```

typography-pairing-size-large

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/typography-pairing-size-large?file=src/App.tsx)

```tsx lines theme={null}
import { Text, Flex } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex direction="column">
      <Text size="large" variant="headline" el="h4">
        Headline Large
      </Text>
      <br />
      <Text size="large" variant="eyebrow">
        Eyebrow Large
      </Text>
      <Text size="large" variant="body">
        This is large BodyText component
      </Text>
    </Flex>
  );
}
export default App;
```

Use same size for sibling items.

typography-pairing-size-sibling

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/typography-pairing-size-sibling?file=src/App.tsx)

```tsx lines theme={null}
import { Text, Flex, Divider, TextField } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex direction="column">
      <Text size="small" variant="headline" el="h4">
        Headline Large
      </Text>
      <Text size="small" variant="body">
        This is large BodyText component
      </Text>
      <Divider spacing="2" />
      <Text size="small" variant="headline" el="h4">
        Headline Large
      </Text>
      <br />
      <Text size="small" variant="eyebrow">
        Eyebrow Large
      </Text>
      <Text size="small" variant="body">
        This is large BodyText component
      </Text>
      <br />
      <TextField size="small" label="First Name" />
    </Flex>
  );
}
export default App;
```

### Deviation

In some cases where you need higher contrast between headline and body, headline can size up one or body can size down one. Do not deviate up with body text, the body text and headline size would be the same creating ineffective typographical hierarchy.

##### Deviation Examples

typography-deviation

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/typography-deviation?file=src/App.tsx)

```tsx lines theme={null}
import { Text, Flex, Divider } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex direction="column" gap="3">
      <Flex direction="column">
        <Text variant="headline" size="xlarge" el="h4">
          Headline xLarge
        </Text>
        <Text variant="eyebrow" size="large">
          Body Large
        </Text>
      </Flex>
      <Divider />
      <Flex direction="column">
        <Text variant="headline" el="h4">
          Headline Default
        </Text>
        <Text variant="eyebrow" size="small">
          Body Small
        </Text>
      </Flex>
      <Divider />
      <Flex direction="column">
        <Text variant="headline" size="small" el="h4">
          Headline Large
        </Text>
        <Text variant="eyebrow" size="large">
          Body Large
        </Text>
      </Flex>
    </Flex>
  );
}
export default App;
```

## Variations

### Headline

Font Family: `Sofia Pro`

Weight: `Bold`

typography-variations-headline

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/typography-variations-headline?file=src/App.tsx)

```tsx lines theme={null}
import { Text, Flex } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex direction="column" gap="3">
      <Text el="h4" variant="headline" size="xlarge">
        X-large, 2rem (32px @ 16px base)
      </Text>
      <Text el="h4" variant="headline" size="large">
        Large, 1.5rem (24px @ 16px base)
      </Text>
      <Text el="h4" variant="headline">
        Medium(default), 1.25rem (20px @ 16px base)
      </Text>
      <Text el="h4" variant="headline" size="small">
        Small, 1rem (16px @ 16px base)
      </Text>
    </Flex>
  );
}
export default App;
```

### Body

Font Family: `Nunito Sans`

Weight: `Regular, Bold`

typography-variations-bodytext

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/typography-variations-bodytext?file=src/App.tsx)

```tsx lines theme={null}
import { Text, Flex } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex direction="column" gap="3">
      <Text size="xlarge">X-large, 1.5rem (24px @ 16px base)</Text>
      <Text size="large">Large, 1.25rem (20px @ 16px base)</Text>
      <Text>Medium(default), 1rem (16px @ 16px base)</Text>
      <Text size="small">Small, .875rem (14px @ 16px base)</Text>
    </Flex>
  );
}
export default App;
```

### Eyebrow

Font Family: `Nunito Sans`

Weight: `Semibold`

Case: `Uppercase`

Style: `Subdued`

typography-variations-eyebrow

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/typography-variations-eyebrow?file=src/App.tsx)

```tsx lines theme={null}
import { Text, Flex } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex direction="column" gap="3">
      <Text variant="eyebrow" size="large">
        Large, 1rem (16px @ 16px base)
      </Text>
      <Text variant="eyebrow">Medium(default), .875rem (14px @ 16px base)</Text>
      <Text variant="eyebrow" size="small">
        Small, .625rem (10px @ 16px base)
      </Text>
    </Flex>
  );
}
export default App;
```

## Style

### Subdued

You can deemphasize text by making it a lighter shade of grey.

typography-style-subdued

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/typography-style-subdued?file=src/App.tsx)

```tsx lines theme={null}
import { Text } from "@servicetitan/anvil2";

function App() {
  return (
    <Text>
      In a paragraph of text, when you have words that need to be deemphasized,{" "}
      <Text inline subdued>
        subdued text
      </Text>{" "}
      becomes less apparent
    </Text>
  );
}
export default App;
```

A subdued line of copy can be used for disclaimers or helpful notes below form fields.

typography-style-description

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/typography-style-description?file=src/App.tsx)

```tsx lines theme={null}
import { Text } from "@servicetitan/anvil2";

function App() {
  return (
    <Text subdued>You can only upload photos in jpg, png, and tif formats</Text>
  );
}
export default App;
```

#### When not to use

typography-style-contrast-dont

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/typography-style-contrast-dont?file=src/App.tsx)

```tsx lines theme={null}
import { Text } from "@servicetitan/anvil2";

function App() {
  return (
    <div
      style={{
        padding: "var(--size-2)",
        backgroundColor: "var(--background-color-strongest)",
      }}
    >
      <Text subdued>My contrast is 3.27:1, below AA level requirement</Text>
    </div>
  );
}
export default App;
```

> [!CAUTION]
>
> **Don't**

Do not use subdued style on top of **background-color-strongest** as it does not meet the contrast requirement for AA level.

### Italic

You can emphasize text by italicizing it.

typography-italic

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/typography-italic?file=src/App.tsx)

```tsx lines theme={null}
import { Text } from "@servicetitan/anvil2";

function App() {
  return (
    <Text>
      In a paragraph of text, when you have words that need to be emphasized,{" "}
      <i>italic text</i> can be used
    </Text>
  );
}
export default App;
```

#### Bold

You can emphasize text by bolding it.

typography-bold

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/typography-bold?file=src/App.tsx)

```tsx lines theme={null}
import { Text } from "@servicetitan/anvil2";

function App() {
  return (
    <Text>
      In a paragraph of text, when you have words that need to be emphasized,{" "}
      <b>bold text</b> can be used
    </Text>
  );
}
export default App;
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.