Product
Socket for Jira Is Now Available
Socket for Jira lets teams turn alerts into Jira tickets with manual creation, automated ticketing rules, and two-way sync.
By Jeppe Hasseriis - Apr 20, 2026
Launch Week Day 1: Socket for Jira Is Now Available.Learn More →
geist
Geist is a new font family for Vercel, created by Vercel in collaboration with Basement Studio.
Geist Sans, Geist Mono & Geist Pixel
Geist is a new font family created by Vercel in collaboration with Basement Studio.
Geist Sans is a sans-serif typeface designed for legibility and simplicity. It is modern, geometric, and based on the principles of classic Swiss typography. It is designed to be used in body copy, headlines, logos, posters, and other large display sizes.
Geist Mono is a monospaced typeface, crafted to be the perfect partner to Geist Sans. It is designed to be used in code editors, diagrams, terminals, and other text-based interfaces where code is rendered.
Geist Pixel is a display typeface family featuring five unique pixel-based variants, each with a distinct visual style. It is designed for decorative use in headlines, logos, and other display contexts where a pixelated aesthetic is desired.
Installation
npm install geist
Using with Next.js
GeistSans is exported from geist/font/sans, GeistMono can be found in geist/font/mono, and Geist Pixel variants are available from geist/font/pixel. All are NextFontWithVariable instances. You can learn more by reading the next/font docs.
Geist Pixel Variants
Geist Pixel includes five distinct variants, each exported separately:
| Export | CSS Variable | Description |
|---|---|---|
GeistPixelSquare | --font-geist-pixel-square | Square pixel shapes |
GeistPixelGrid | --font-geist-pixel-grid | Grid-based pixel pattern |
GeistPixelCircle | --font-geist-pixel-circle | Circular pixel shapes |
GeistPixelTriangle | --font-geist-pixel-triangle | Triangular pixel shapes |
GeistPixelLine | --font-geist-pixel-line | Line-based pixel pattern |
import {
GeistPixelSquare,
GeistPixelGrid,
GeistPixelCircle,
GeistPixelTriangle,
GeistPixelLine,
} from "geist/font/pixel";
App Router
In app/layout.js:
import { GeistSans } from "geist/font/sans";
export default function RootLayout({ children }) {
return (
<html lang="en" className={GeistSans.className}>
<body>{children}</body>
</html>
);
}
Pages Router
In pages/_app.js:
import { GeistSans } from "geist/font/sans";
export default function MyApp({ Component, pageProps }) {
return (
<main className={GeistSans.className}>
<Component {...pageProps} />
</main>
);
}
If you're using a version of Next.js that's older than 15, then in next.config.js or next.config.mjs add:
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
+ transpilePackages: ["geist"],
};
export default nextConfig;
This is required to fix errors like:
TypeError: next_font_local__WEBPACK_IMPORTED_MODULE_0___default(...) is not a functionSyntaxError: Cannot use import statement outside a module
With Tailwind CSS
All Geist fonts can be used through CSS variables.
GeistSans:--font-geist-sansGeistMono:--font-geist-monoGeistPixelSquare:--font-geist-pixel-squareGeistPixelGrid:--font-geist-pixel-gridGeistPixelCircle:--font-geist-pixel-circleGeistPixelTriangle:--font-geist-pixel-triangleGeistPixelLine:--font-geist-pixel-line
In app/layout.js:
import { GeistSans } from "geist/font/sans";
import { GeistMono } from "geist/font/mono";
import { GeistPixelSquare } from "geist/font/pixel";
export default function RootLayout({ children }) {
return (
<html
lang="en"
className={`${GeistSans.variable} ${GeistMono.variable} ${GeistPixelSquare.variable}`}
>
<body>{children}</body>
</html>
);
}
Tailwind CSS V4
Then in tailwind.css:
@theme {
/* rest of your theme config */
--font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono);
--font-pixel-square: var(--font-geist-pixel-square);
--font-pixel-grid: var(--font-geist-pixel-grid);
--font-pixel-circle: var(--font-geist-pixel-circle);
--font-pixel-triangle: var(--font-geist-pixel-triangle);
--font-pixel-line: var(--font-geist-pixel-line);
/* rest of your theme config */
}
Tailwind CSS V3
Then in tailwind.config.js:
module.exports = {
theme: {
extend: {
fontFamily: {
sans: ["var(--font-geist-sans)"],
mono: ["var(--font-geist-mono)"],
"pixel-square": ["var(--font-geist-pixel-square)"],
"pixel-grid": ["var(--font-geist-pixel-grid)"],
"pixel-circle": ["var(--font-geist-pixel-circle)"],
"pixel-triangle": ["var(--font-geist-pixel-triangle)"],
"pixel-line": ["var(--font-geist-pixel-line)"],
},
},
},
};
License
The Geist font family is free and open sourced under the SIL Open Font License.
Inspiration
Geist has been influenced and inspired by the following typefaces: Inter, Univers, SF Mono, SF Pro, Suisse International, ABC Diatype Mono, and ABC Diatype. We thank the creators of these typefaces for their craft.
Other packages similar to geist
material-ui
Material-UI is a popular React component library that implements Google's Material Design. It offers a wide range of components and customization options, making it a robust choice for building modern web applications. Compared to geist, Material-UI has a larger community and more extensive documentation.
chakra-ui
Chakra UI is a simple, modular, and accessible component library that gives you the building blocks to build React applications. It focuses on ease of use and accessibility, similar to geist, but offers a different set of design principles and components.
ant-design
Ant Design is a comprehensive UI framework for enterprise applications. It provides a wide range of high-quality components and design guidelines. Compared to geist, Ant Design is more feature-rich and is often used in larger, more complex applications.
FAQs
Geist is a new font family for Vercel, created by Vercel in collaboration with Basement Studio.
The npm package geist receives a total of 772,575 weekly downloads. As such, geist popularity was classified as popular.
We found that geist demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 7 open source maintainers collaborating on the project.
Package last updated on 06 Feb 2026
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Company News
Socket Named Top Sales Organization by RepVue
Socket won two 2026 Reppy Awards from RepVue, ranking in the top 5% of all sales orgs. AE Alexandra Lister shares what it's like to grow a sales career here.
By Sarah Gooding - Apr 17, 2026
Security News
NIST Officially Stops Enriching Most CVEs as Vulnerability Volume Skyrockets
NIST will stop enriching most CVEs under a new risk-based model, narrowing the NVD's scope as vulnerability submissions continue to surge.
By Sarah Gooding - Apr 17, 2026