A couple of months ago, Vercel introduced Geist, their open-source typeface created specifically for developers and designers, created in collaboration with the Basement Studio team.
One of the best ways to learn about a new typeface, for me, is to experiment with it, which I finally got around to doing with Geist, and — boy howdy! — I really like it.
Design 1. Experimental design on the Model S landing page with Geist typeface. Visit the current production page for current spec. details, this is merely an experimental design.
One of the cool things about Geist is that it's available as a sans, mono and variable font, which makes it versatile for a variety of use cases.
If folks want to use Geist within a Next.js project, they can do so by taking a few easy-peasy steps.
First, install the Geist package:
npm i geist
Then, import the font(s) in either the app/layout.js for App Router, or pages/_app.js for Pages router (pre-13 versions of Next.js):
import { GeistSans } from 'geist/font/sans'; import { GeistMono } from 'geist/font/mono';
And finally, complete the step as outlined in the package README file, again, depending on whether you're using the App or Pages router.
This entire setup takes a minute or two, if that - the Vercel crew's made this super easy to use. I've already begun to update a lot of my web projects to using Geist in lieu of Inter (which is also a great typeface, but I'm really digging Geist).
Geist is also available for use outside of Next.js, like in Figma or other applications. To do so, download the latest font version from Vercel's Geist GitHub repo (this is what I did for my experimental design).
