---
title: Typography
description: Bamboo's typography utilities.
---

Bamboo provides utilities and style properties for styling text.

## Font Properties

```jsx
<div className={css({ fontFamily: 'mono' })} />
```

| Prop                  | CSS Property            | Token Category   |
| --------------------- | ----------------------- | ---------------- |
| `fontFamily`          | `font-family`           | `fonts`          |
| `fontSize`            | `font-size`             | `fontSizes`      |
| `fontWeight`          | `font-weight`           | `fontWeights`    |
| `letterSpacing`       | `letter-spacing`        | `letterSpacings` |
| `lineHeight`          | `line-height`           | `lineHeights`    |
| `textDecorationColor` | `text-decoration-color` | `colors`         |
| `textEmphasisColor`   | `text-emphasis-color`   | `colors`         |
| `textIndent`          | `text-indent`           | `spacing`        |
| `textShadow`          | `text-shadow`           | `shadows`        |

## Line Clamp (Truncation)

How to truncate multi-line text

```jsx
<div className={css({ lineClamp: 2 })}>Some long piece of text</div>

<div className={css({ lineClamp: 2 })}>Truncated text</div>
```

| Prop        | CSS Property         | Token Category |
| ----------- | -------------------- | -------------- |
| `lineClamp` | `-webkit-line-clamp` | none           |
| `truncate`  | `text-overflow`      | none           |

## Mixins

Applies a named bundle of declarations from the theme — see [mixins](/docs/theming/mixins).

```jsx
<h1
  className={css({
    mixin: 'heading.marketing',
  })}
>
  Hello World
</h1>
```

| Prop    | Config   |
| ------- | -------- |
| `mixin` | `mixins` |
