# Geist

Geist is Vercel’s typeface for developers and designers. The family combines readability, precision, and a restrained visual style inspired by Swiss design.

Use the [interactive Geist font page](https://vercel.com/font) to preview characters, weights, features, and styles.

## Font families

| Family      | Styles     | Glyphs | Stylistic sets | Languages              |
| ----------- | ---------- | -----: | -------------: | ---------------------- |
| Geist Sans  | 9 weights  |    652 |              9 | 387 Latin, 39 Cyrillic |
| Geist Serif | 4 variants |    854 |              5 | 352 Latin              |
| Geist Mono  | 9 weights  |    669 |              9 | 386 Latin, 40 Cyrillic |
| Geist Pixel | 5 variants |    480 |              7 | 343 Latin              |

Geist Sans is designed for interfaces and body copy. Geist Serif is a high-contrast display serif with fine, saw-toothed serifs and sharp hairlines; its Regular and Square variants suit primary typography, while Triangle and Heart are more decorative. Geist Mono prioritizes readability in code and tabular content. Geist Pixel includes Square, Grid, Circle, Triangle, and Line variants for display text.

Language counts are measured with Shaperglot.

## Install Geist from npm

Install the [`geist` package](https://www.npmjs.com/package/geist):

```bash
npm i geist
```

### Use Geist with the Next.js App Router

Import the fonts in `app/layout.js`. Every export is a Next.js font object with `className` and `variable` properties.

```jsx
import { GeistSans } from 'geist/font/sans';
import { GeistMono } from 'geist/font/mono';
import { GeistSerif } from 'geist/font/serif/variable';
import { GeistPixelSquare } from 'geist/font/pixel/square';

export default function RootLayout({ children }) {
  return (
    <html
      lang="en"
      className={`${GeistSans.variable} ${GeistMono.variable} ${GeistSerif.variable} ${GeistPixelSquare.variable}`}
    >
      <body>{children}</body>
    </html>
  );
}
```

Geist Serif and Geist Pixel have scoped entry points, so you only ship the font files you import. Import a single variant, such as `geist/font/serif/square` or `geist/font/pixel/grid`, or load one variable font from `geist/font/serif/variable` or `geist/font/pixel/variable` and select its shape with the `ELSH` axis:

| Geist Serif variant | `ELSH` value |
| ------------------- | -----------: |
| Regular             |            0 |
| Square              |           25 |
| Triangle            |           50 |
| Heart               |          100 |

Use the exported CSS variables in your styles:

- Geist Sans: `--font-geist-sans`
- Geist Mono: `--font-geist-mono`
- Geist Serif (variable): `--font-geist-serif`
- Geist Serif Regular: `--font-geist-serif-regular`
- Geist Serif Square: `--font-geist-serif-square`
- Geist Serif Triangle: `--font-geist-serif-triangle`
- Geist Serif Heart: `--font-geist-serif-heart`
- Geist Pixel (variable): `--font-geist-pixel`
- Geist Pixel Square: `--font-geist-pixel-square`
- Geist Pixel Grid: `--font-geist-pixel-grid`
- Geist Pixel Circle: `--font-geist-pixel-circle`
- Geist Pixel Triangle: `--font-geist-pixel-triangle`
- Geist Pixel Line: `--font-geist-pixel-line`

## Use Geist from Google Fonts

Next.js provides Geist Sans, Geist Mono, and Geist Pixel through `next/font/google`. Geist Serif is coming soon to Google Fonts; install it from npm or the release files until then.

```tsx
import { Geist, Geist_Mono, Geist_Pixel } from 'next/font/google';
```

Geist Pixel uses the `ELSH` variable axis. Keep the axis when loading the font:

```tsx
import { Geist_Pixel } from 'next/font/google';

export const geistPixel = Geist_Pixel({
  subsets: ['latin'],
  axes: ['ELSH'],
  variable: '--font-geist-pixel',
  display: 'swap',
});
```

Set `ELSH` to select a Pixel variant:

| Geist Pixel variant | `ELSH` value |
| ------------------- | -----------: |
| Square              |            1 |
| Circle              |           20 |
| Grid                |           40 |
| Triangle            |           60 |
| Line                |           80 |

## Download font files

[Download the latest Geist release from GitHub](https://github.com/vercel/geist-font/releases/latest) for OTF, WOFF2, and variable font files.

## License

Geist is licensed under the [SIL Open Font License 1.1](https://github.com/vercel/geist-font/blob/main/LICENSE.txt). You can use, modify, and redistribute the font under the terms of that license.