- Geist Sans/Mono의 기반 위에 만들어진 픽셀 그리드 기반 비트맵형 서체로, 정밀하고 의도적인 디지털 감각을 지닌 폰트
- 다섯 가지 서로 다른 변형(Square, Grid, Circle, Triangle, Line) 을 제공하며, 픽셀 단위의 일관된 구조로 가독성과 리듬감을 유지
- 기존 픽셀 폰트가 겪는 확장성·호환성 문제를 해결하도록 설계되어, 실제 제품 환경에서도 안정적으로 동작함
-
480자 글리프, 7가지 스타일 세트, 32개 언어 지원을 포함하며, Geist 패밀리와 동일한 시스템적 사고로 제작되어 손쉽게 통합 가능함
- Vercel 내부에서도 이미 사용되기 시작했으며, 향후 Geist Serif 개발로 폰트 패밀리가 확장될 예정임
Geist Pixel 개요
- Geist Pixel은 Geist Sans와 Geist Mono의 기초 구조를 공유하며, 엄격한 픽셀 그리드를 통해 재해석된 서체임
- 비트맵에서 영감을 받았지만 단순한 장식용이 아닌 실제 사용을 위한 기능적 폰트로 설계됨
-
정확성, 의도성, 디지털 특성을 강조함
동일한 시스템, 새로운 질감
- Geist Pixel은 시각적 장식이 아닌 시스템 확장형 폰트로 정의됨
- Geist Mono가 개발자를 위해 만들어졌듯, Geist Pixel은 실제 제품 환경에서의 사용성을 고려함
- 다섯 가지 변형 제공: Square, Grid, Circle, Triangle, Line
- 모든 글리프는 일관된 픽셀 그리드 위에서 제작되어 리듬, 간격, 가독성을 유지함
- 픽셀 폰트의 일반적 문제(확장 불가, 메트릭 충돌, 장식적 한계)를 해결하며, 시각적 질감과 타이포그래피 정밀성을 동시에 보장함
- Geist 패밀리와 동일한 명확한 구조, 예측 가능한 메트릭, 강한 정렬, 플랫폼 간 확장성을 유지함
손쉬운 시작
- Geist Pixel은 npm 패키지(
npm i geist) 로 바로 설치 가능함
- 각 변형은 CSS 변수로 제공되어
layout.tsx 등에서 손쉽게 적용 가능
- 예시:
GeistPixelSquare → --font-geist-pixel-square
- 자세한 사용법은 npm README에서 확인 가능함
웹과 현대 제품을 위한 설계
- Geist Pixel은 UI 배너, 대시보드, 실험적 레이아웃, 제품 인터페이스 등 실제 환경에서 사용 가능함
-
세로 메트릭 정렬, 일관된 대문자·x-높이, 밀도별 변형, Geist 패밀리와의 자연스러운 혼합을 지원함
-
AI 중심의 워크플로우 시대에 맞춰, 웹과 현대 제품을 위한 서체로 설계됨
픽셀 그리드 위의 수공 정제
- Geist Pixel은 기계적으로 생성된 폰트가 아니라, 모든 글리프를 수작업으로 다듬은 폰트임
- 시각적 노이즈, 불균형한 획, 어색한 대각선을 제거하기 위해 픽셀 단위로 조정됨
-
세미 모노폭(horizontal semi-mono) 접근을 사용하고, Mono와 Sans의 형태에서 영감을 받음
- 제약을 디자인 도구로 활용하여 명확성과 개성을 동시에 확보함
- 구성 요소: 5가지 변형, 480자 글리프, 7가지 스타일 세트, 32개 언어 지원
이미 다음 단계를 형성 중
- 공개 전부터 Vercel 내부에서 시각 언어와 제품 디자인에 영향을 미치기 시작함
- 실험, 탐색, 리디자인 작업에서 톤과 질감, 표현 방식을 형성 중임
하나의 패밀리, 확장 중
- Geist, Geist Mono, Geist Pixel로 이어지는 확장된 폰트 패밀리는 기능적 UI 텍스트부터 표현적 디스플레이까지 아우름
-
Geist Serif가 개발 중이며, 동일한 시스템 사고로 새로운 음성을 추가할 예정임
- Geist Pixel은 Vercel Font 페이지에서 다운로드 가능함