← Back to listing

The Birth of Geist: A Typeface Crafted for the Web

DATE

AUTHOR

Mateo Zaragoza

CATEGORY

Design

READ TIME

3 minutes

VIEWS

...
Discover the inside story of how our creators teamed up with Vercel to craft Geist – a collaborative typeface that redefines clarity and functionality for the web.

The Birth of Geist: A Typeface Crafted for the Web

author
Mateo Zaragoza
geist

Collaborating with Vercel is always an exciting journey. They drive us to extend our capabilities and embrace new challenges, empowering us to set fresh benchmarks in the design world. Together, we’ve crafted Geist – a typeface that redefines visual communication.

Enter Geist: the new typeface/font of the web.

Origin: The Spark That Ignited Geist

Our design team had been dabbling in type design for months, and some of those early experiments crystallized into what we now proudly call Basement Foundry.

Initially created as part of basement’s visual identity, our custom typeface garnered significant attention and praise.

It became a hit among designers, leading us to think, "Why stop here?"

Fast forward to late 2022, and our long-time partner Vercel, approached us with a thrilling challenge. They wanted a bespoke typeface that would resonate with their brand values and integrate seamlessly into their visual identity. The kicker? It had to be a fully functional type family that included a monospaced font for their developer-centric audience and open-source, making it freely available to the whole community.

geist

Crafting the Perfect Typeface

The first launch in early 2023 received an overwhelmingly positive response from the Vercel and Next.js community. While critics pointed out areas for improvement, their feedback was invaluable in raising the bar for future releases.

We knew the typeface had to be an extension of Vercel’s visual language. Here’s what we were aimed for:

  • Legibility: Clear and easy to read, even in small sizes.

  • Modern Aesthetic: Sleek and contemporary.

  • Techy Vibe: A nod to the digital world.

  • Consistency: Uniformity across various weights and styles.

geist

We wanted to pay homage to the type designers who influenced us deeply. Geist had to echo the greatness of legendary typefaces like Univers, SF Mono, SF Pro, Inter, and Suisse International.

The letterforms of Geist are characterized by several key features, including a high x-height that enhances legibility across a range of sizes. Additionally, the design incorporates short descenders, along with angular strokes on specific terminals, elbows, and descender strokes, contributing to its distinct and functional appearance.

geist

From Drafts to Approval

The initial drafts came together quickly. We started with a sans-serif font and soon developed the first versions of the monospaced glyphs. Our solid understanding of Vercel’s visual language helped secure swift approval and the green light to finalize the first version of the font.

Vercel’s feedback was instrumental throughout the design process, allowing us to refine and enhance the letterforms. Together, we expanded the typeface to include a full set of weights and additional glyphs, ensuring maximum versatility and alignment with Vercel's brand vision.

It’s important to mention that once the design process was coming to an end, we brought Guido Ferreyra, an amazing font developer, on board to help us make sure all the technical aspects of the typeface were on point. He joined Geist’s designers, Andrés Briganti and Mateo Zaragoza, giving thoughtful feedback and helping make the necessary adjustments where needed to meet the highest industry standards of type design and font development.

geist

Tools and Timeline: Crafting with Precision

We primarily used the Glyphs app, which was a learning journey. The project timeline was meticulously planned to ensure we met every milestone, from initial drafts to the final launch.

Geist: Designed for Developers and Designers

At Vercel, Geist is specifically designed for developers and designers. We began with a Sans version, prioritizing readability and integration into coding environments.

  • Weights: 9

  • GlyphsSans: 825 / Mono: 852

  • Stylistic sets: 9

  • Languages: 368

After perfecting the Sans variant, we expanded Geist, adding versatility to its capabilities.

With precision, clarity, and functionality at its core, Geist enhances the visual experience for developers and designers, empowering them to effectively communicate their ideas.

Geist embodies our design principles of simplicity, minimalism, and speed, drawing inspiration from the renowned Swiss design movement.

geist

"Geist truly represents the coding and design spirit within Vercel's creator community."

Bonus: Repercussions and Community Response

The response to Geist has been nothing short of phenomenal. People have embraced and used the typeface in ever-increasing numbers, and every day we’re pleasantly surprised by the creative applications from the community. This widespread adoption and innovative usage have proven Geist’s versatility and quality.

geist

↖ Back to listing
CATEGORYDesign
DATE
AUTHORDelfina Mieth

The Making of Adhesion: A BSMNT Take on Blackletter Typefaces

Nostalgia. The 90s. Cool typefaces. Retro games. Oh! You guessed it right. We are at basement and here we have fun and grow by experimenting a lot. Let’s talk about fonts!

categoryDesign
authorDelfina Mieth
date

DATE

AUTHOR

Delfina Mieth

CATEGORY

Design

READ TIME

4 minutes

VIEWS

...
CATEGORYDesign
DATE
AUTHORRocio Elbaum

Mastering Color Gradients

Gradients have been here from the early days of the web and still rock. The key is knowing how to use them. So, let's dive into the magic.

categoryDesign
authorRocio Elbaum
date

DATE

AUTHOR

Rocio Elbaum

CATEGORY

Design

READ TIME

8 minutes

VIEWS

...