# Typography

Three simple Poppins and Rubik styles, with examples and copyable CSS.

Use **Poppins** for headings and **Rubik** for body copy. Keep the hierarchy simple: a bold main message, quieter section headings and comfortable reading text.

Each example separates the text style from its guidance. Copy the CSS below it, then choose a font size that fits your layout.

## Get the fonts

Load the fonts before using the CSS examples below. These stylesheet URLs include the weights used in this guide; add them through your site's font-loading setup.

### Poppins

[View Poppins on Google Fonts](https://fonts.google.com/specimen/Poppins).

<div class="brand-code">

```text
https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,500;1,800&display=swap
```

</div>

### Rubik

[View Rubik on Google Fonts](https://fonts.google.com/specimen/Rubik).

<div class="brand-code">

```text
https://fonts.googleapis.com/css2?family=Rubik:wght@400&display=swap
```

</div>

## Heading

Use a short, bold statement for the main message. Give uppercase text enough room to breathe.

<!-- brand-ui:typography-heading -->

**Poppins**

Bold, italic and uppercase. Keep it short and give it room.

Own the outcome

```css
.chain-heading {
  font-family: Poppins, sans-serif;
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -0.07em;
  line-height: 1.125;
}
```

<!-- /brand-ui -->

## Section heading

Keep supporting headings lighter so readers can scan the page without every line competing for attention.

<!-- brand-ui:typography-subheading -->

**Poppins**

A quieter weight for section labels and supporting headings.

Find your next game

```css
.chain-section-heading {
  font-family: Poppins, sans-serif;
  font-weight: 500;
  line-height: 1.3;
}
```

<!-- /brand-ui -->

## Body copy

Use regular-weight text and comfortable line spacing for explanations and longer reading.

<!-- brand-ui:typography-body -->

**Rubik**

Regular weight with comfortable line spacing for longer reading.

Explore Chain games and find your next game.

```css
.chain-body {
  font-family: Rubik, sans-serif;
  font-weight: 400;
  line-height: 1.7;
}
```

<!-- /brand-ui -->


## Related

- [Brand guide](/brand/)
- [Colors](/brand/colors/)
- [Language and tone](/brand/language/)