Bitmap meets
modern design
Five distinct variants built on a strict pixel grid. Precise, intentional, and unapologetically digital.
Five Variants
Each variant constructed on a consistent pixel grid, tuned for different densities and moods.
Aa Bb Cc 0123
Thin, delicate strokes. Ideal for subtle labels and lightweight UI text.
Aa Bb Cc 0123
Angular pixel fills. Best for bold headings and attention-grabbing displays.
Aa Bb Cc 0123
Soft, rounded pixel shapes. Great for friendly, approachable interfaces.
Aa Bb Cc 0123
Structured, even density. Perfect for data-heavy dashboards and tables.
Aa Bb Cc 0123
Classic pixel form. The most traditional variant for retro-modern aesthetics.
Type Scale
Geist Pixel maintains clarity from small labels to large display text.
System Monitoring
Pixel Grid variant excels in data-dense dashboards where legibility at small sizes matters.
42%
6GB
120ms
1240
[00:14:32] Deploy productionOK
[00:14:28] Build completed in 4.2s
[00:14:24] Running edge functions3 regions
[00:14:20] Cache invalidatedtag: blog-posts
Something new is arriving
Pixel Square is the classic choice for countdown timers and event banners, with its strong readability at large sizes.
Leaderboard
Pixel Triangle brings angular energy to gaming and competitive interfaces.
Terminal & Code
Pixel Line variant for terminal output and code contexts — clean and readable at small sizes.
Mixing with Geist Sans & Mono
Geist Pixel shares the same metrics and alignment as the rest of the Geist family, making it easy to mix.
Edge Runtime v3
Deploy serverless functions to 30+ edge locations with sub-millisecond cold starts. Built for the speed your users deserve.
- +Unlimited deployments
- +Custom domains
- +Advanced analytics
- +Priority support
Infrastructure Update
All regions have been upgraded to the latest runtime. Performance improvements of up to 40% observed. No action required on your end.
Get Started
Install the geist package and import your preferred variant.
npm i geistimport { GeistPixelSquare } from "geist/font/pixel-square";
export default function RootLayout({ children }) {
return (
<html lang="en" className={GeistPixelSquare.variable}>
<body>{children}</body>
</html>
);
}// Use the CSS variable directly in your classes
<h1 className="font-[family-name:var(--font-geist-pixel-square)]">
Hello, Pixel World
</h1>
// Available variants:
// --font-geist-pixel-line
// --font-geist-pixel-triangle
// --font-geist-pixel-circle
// --font-geist-pixel-grid
// --font-geist-pixel-square