Geist is a new font family for Vercel, created by Vercel in collaboration with Basement Studio.
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.
npm install geist
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 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";
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>
);
}
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 moduleAll 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-lineIn 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>
);
}
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 */
}
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)"],
},
},
},
};
The Geist font family is free and open sourced under the SIL Open Font License.
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.
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 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 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 367,406 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.
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.
Security News
TypeScript 6.0 introduces new standard APIs, modern default settings, and deprecations as it prepares projects for the upcoming TypeScript 7.0 release.
Security News
/Research
Newly published Trivy Docker images (0.69.4, 0.69.5, and 0.69.6) were found to contain infostealer IOCs and were pushed to Docker Hub without corresponding GitHub releases.
Research
/Security News
The worm-enabled campaign hit @emilgroup and @teale.io, then used an ICP canister to deliver follow-on payloads.