Skip to main content

A modern typeface
for digital products

Geist is a new font family created specifically for modern interface designs and digital products, offering exceptional readability and versatility.

Features that set Geist apart

Designed with modern digital interfaces in mind, Geist combines beauty with exceptional functionality.

OpenType Features

Advanced OpenType features for professional typography and enhanced readability across all sizes.

Variable Font

Seamlessly adjust weight and style with variable font technology for perfect typography in any context.

Modern Design

Contemporary aesthetics optimized for screens and digital interfaces with pixel-perfect rendering.

Preview Geist in action

Experience the versatility and clarity of Geist across different weights and styles.

Regular - 400

The quick brown fox jumps over the lazy dog.

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

Medium - 500

The quick brown fox jumps over the lazy dog.

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

Size Scale

Display Text - 60px

Heading Text - 36px

Subheading Text - 24px

Body Text - 18px

Regular Text - 16px

Small Text - 14px

Special Characters

Punctuation: !@#$%^&*()_+-=[]{}|;:'",./<>?

Currency: $€£¥₹¢

Math Symbols: ±×÷≠≈∞∑∏√∫

Arrows: ←↑→↓↔↕↖↗↘↙

Ligatures

fi fl ff ffi ffl

-> => != === >=

Numerals

0123456789

⁰¹²³⁴⁵⁶⁷⁸⁹

Quick Installation

Multiple ways to integrate Geist into your projects

NPM Installation

npm install @vercel/geist-font

Then import it in your project:

import '@vercel/geist-font/style.css';

CDN Link

Add this line to your HTML head:

<link href="https://cdn.jsdelivr.net/npm/@vercel/geist-font/style.css" rel="stylesheet" />

CSS Import

Import directly in your CSS:

@import url('https://cdn.jsdelivr.net/npm/@vercel/geist-font/style.css');

Local Files

Download and include in your project:

Usage Example

/* Apply to specific elements */
.custom-text {
    font-family: 'Geist', sans-serif;
    font-weight: 400;
}

/* Or apply globally */
body {
    font-family: 'Geist', sans-serif;
}

Type Specimens

Explore the full range of Geist's typographic possibilities

Thin - 100

The quick brown fox jumps over the lazy dog

Light - 300

The quick brown fox jumps over the lazy dog

Regular - 400

The quick brown fox jumps over the lazy dog

Medium - 500

The quick brown fox jumps over the lazy dog

Bold - 700

The quick brown fox jumps over the lazy dog

Size Scale

48px Display

36px Heading

24px Subheading

18px Body Large

16px Body

14px Caption

OpenType Features

Standard Ligatures

fi fl ff ffi ffl

Discretionary Ligatures

ct st sp

Alternate Characters

a g y &

Fractions

1/2 1/3 2/3 1/4 3/4

Complete Character Set

Uppercase

ABCDEFGHIJKLMNOPQRSTUVWXYZ

Lowercase

abcdefghijklmnopqrstuvwxyz

Numbers

0123456789

Punctuation

!@#$%^&*()_+-=[]{}|;:'",./<>?

Special Characters

©®™°±×÷≠≈∞§¶†‡

Usage Examples

Discover how Geist elevates your design system

UI Components

Buttons

Form Elements

Typography

Main Heading

Subheading

Experience perfect readability with Geist's attention to typographic detail, ensuring excellent legibility across all devices.

  • Optimized for readability
  • Responsive scaling

Code Example

// Geist Typography Implementation
const typography = {
  fontFamily: {
    sans: ['Geist', 'system-ui'],
    mono: ['Geist Mono', 'monospace'],
  },
  fontFeatureSettings: "'liga' 1",
};

Download Geist

Choose the package that best suits your needs

Complete Package

All font weights and styles, including variable font files

  • Variable font file
  • Static weights (Thin to Bold)
  • Web and desktop formats

Web Package

Optimized for web usage with essential formats

  • WOFF2 format
  • Optimized file size
  • Basic character set

Additional Resources

CSS Snippet

Design Assets

Documentation

Frequently Asked Questions

Everything you need to know about Geist Font

What makes Geist different?

Geist is specifically designed for modern digital interfaces, offering exceptional readability at all sizes and optimal performance across different devices. Its clean, geometric design and comprehensive feature set make it perfect for contemporary web and application design.

Can I use Geist in commercial projects?

Yes, Geist is available for both personal and commercial use. The font comes with a permissive license that allows usage in any project, including websites, applications, and printed materials.

Which file formats are included?

The complete package includes variable fonts and static weights in multiple formats: WOFF2, WOFF, TTF, and EOT. Web optimized packages include WOFF2 and WOFF formats for optimal performance.

How do I implement variable font features?

Variable font features can be implemented using CSS font-variation-settings. The font supports weight variations from 100 to 900, allowing for precise typography control in your designs.

Is Geist optimized for different languages?

Yes, Geist supports a wide range of languages with extensive Unicode coverage. It includes Latin, Cyrillic, and Greek character sets, making it suitable for international projects.

What about browser support?

Geist is compatible with all modern browsers. For older browsers, we provide fallback options and comprehensive documentation on implementing cross-browser support.

Still have questions?