# Font Size

Set the font size for an element.

**Widely available.** This feature is well established and works across many devices and browser versions.

Chrome 1 · Edge 12 · Firefox 1 · Safari 1

| Class | Properties | Value |
|-------|------------|-------|
| `fs:xs` | font-size | `0.75rem` |
| `fs:sm` | font-size | `0.875rem` |
| `fs:md` | font-size | `1rem` |
| `fs:lg` | font-size | `1.125rem` |
| `fs:xl` | font-size | `1.25rem` |
| `fs:xxl` | font-size | `1.5rem` |
| `fs:3xl` | font-size | `1.875rem` |
| `fs:4xl` | font-size | `2.25rem` |
| `fs:5xl` | font-size | `3rem` |
| `fs:6xl` | font-size | `3.75rem` |
| `fs:7xl` | font-size | `4.5rem` |
| `fs:8xl` | font-size | `6rem` |
| `fs:9xl` | font-size | `8rem` |

### Media Queries

Prefix a class with a breakpoint to apply it from that width up.

| Class | Properties | Value |
|-------|------------|-------|
| `fs:xs` | font-size | `0.75rem` |
| `fs:sm` | font-size | `0.875rem` |
| `fs:md` | font-size | `1rem` |
| `fs:lg` | font-size | `1.125rem` |
| `fs:xl` | font-size | `1.25rem` |
| `fs:xxl` | font-size | `1.5rem` |
| `fs:3xl` | font-size | `1.875rem` |
| `fs:4xl` | font-size | `2.25rem` |
| `fs:5xl` | font-size | `3rem` |
| `fs:6xl` | font-size | `3.75rem` |
| `fs:7xl` | font-size | `4.5rem` |
| `fs:8xl` | font-size | `6rem` |
| `fs:9xl` | font-size | `8rem` |

### Pseudo Classes

Prefix a class with a state to apply it only while that state matches.

| Class | Properties | Value |
|-------|------------|-------|
| `fs:xs` | font-size | `0.75rem` |
| `fs:sm` | font-size | `0.875rem` |
| `fs:md` | font-size | `1rem` |
| `fs:lg` | font-size | `1.125rem` |
| `fs:xl` | font-size | `1.25rem` |
| `fs:xxl` | font-size | `1.5rem` |
| `fs:3xl` | font-size | `1.875rem` |
| `fs:4xl` | font-size | `2.25rem` |
| `fs:5xl` | font-size | `3rem` |
| `fs:6xl` | font-size | `3.75rem` |
| `fs:7xl` | font-size | `4.5rem` |
| `fs:8xl` | font-size | `6rem` |
| `fs:9xl` | font-size | `8rem` |