Блог

2025 / piscodev / Игорь Быстрицкий

обложка статьи
Блог

Приятные шрифт от Vercel - Geist Sans и Geist Mono

"Geist действительно олицетворяет дух программирования и дизайна в творческом сообществе Vercel" - заявляют в Vercel.

    • NextTailwind
  • Нормально

  • 20 июня 2024
  • Игорь Быстрицкий

Кому подойдет Geist?Про InterТехнические особенностиУстановка и использованиеNPMРучнаяЛицензияЗаключение
Если понравилась статья, поделитесь с друзьями

Next / Больше статей

Cookie в Next

Cookie в Next

Как создавать и читать Cookie. Функции-обертки на TypeScript с удобной типизацией.

01 февраля 2024
Что нового в Next 14

Что нового в Next 14

Next 14, выпущенный 26 октября 2023 года, ускоряет время сборки в 2 раза и добавляет несколько новых функций.

29 октября 2023
Типизация страницы в Next

Типизация страницы в Next

Используй TypeScript и Next вместе, чтобы создать кастомный тип TNextPage, с помощью которого можно с легкостью указать типы params и searchParams на любой странице.

20 июня 2024
Шрифты в Next и Tailwind

Шрифты в Next и Tailwind

Расскажу о любимом способе использовать шрифты на проектах с Next и Tailwind

30 мая 2024
Мне нравится логотип Vercel, поэтому в этой статье вместо Vercel вы будете видеть то же, что и я - ▲.

Кому подойдет Geist?

Geist Sans с главной страницы на ▲
Geist Sans с главной страницы на ▲
Информация взята с официального сайта ▲.

Дизайнеры ▲ позиционируют Geist как решение для разработчиков и дизайнеров. И это было очень логично услышать с их стороны, потому что в их компании работают и программисты и дизайнеры, которые трудятся над большим количеством качественных проектов и преуспевают в этом. ▲ ценят не только за их подход к разработке API, но и за проработку дизайна своих продуктов, взять к примеру их официальный сайт...

Официальный сайт ▲
Официальный сайт ▲

...или страницу Next

Официальный сайт Next
Официальный сайт Next
▲ стараются следовать лучшим практикам минимализма и способны создавать красивые и удобные интерфейсы. Пользоваться их сервисами одно удовольствие.

Сначала ▲ занялись разработкой Mono версии шрифта, а после полировки ее до максимума задумались и о создании Sans версии, которая, по моему скромному мнению, изумительно будет смотреться на любом современном сайте.

В ▲ мы разработали Geist - шрифт, специально предназначенный для разработчиков и дизайнеров. Мы начали с создания моноширинной версии, в которой приоритет отдавался удобочитаемости и которая легко интегрировалась в среду программирования. Усовершенствовав моноширинный вариант, мы расширили Geist до версии Sans, добавив универсальности его возможностям. (Переведено)

— Vercel

▲ всесторонне нахваливают свой шрифт и вовсе не стесняются рекомендовать его.

Geist воплощает наши дизайнерские принципы простоты, минимализма и скорости, черпая вдохновение в известном швейцарском дизайнерском движении. Обладая точностью, ясностью и функциональностью, Geist улучшает визуальный опыт разработчиков и дизайнеров, позволяя им эффективно доносить свои идеи. (Переведено)

— Vercel

Про Inter

Судя по решительному и позитивному настрою ▲, они верят в успех Geist и в скором времени ожидают теплый прием со стороны сообщества. Я хоть и не умею читать чужие мысли, но скорее всего ▲ создавали этот шрифт как уверенный конкурент одному из самых известных веб шрифтов в мире - Inter. Сможет ли Geist занять твердую позицию в сообществе и словить волну хайпа? Невозможно сказать. Но одно понятно, точно - он выглядит не менее достойно, чем Inter.

Я говорю про Inter, потому что ▲ сами используют его во всех своих проектах. На момент публикации статьи, они все еще не интегрировали Geist повсеместно и некоторые их сайты, включая сайт Next, пока что сидят на Inter. Но я так понимаю, это всего лишь вопрос времени.

Технические особенности

Толщина, кол-во глифов, сеты стилей и поддерживаемые языки
Толщина, кол-во глифов, сеты стилей и поддерживаемые языки
Вау!

На странице Geist вы можете ознакомиться со всеми глифами, причем в таких подробностях, что вы буквально разглядваете SVG контуры этих глифов. Кому это надо? Кажется, ▲ явно любят выкладываться на максимум, особенно, когда дело доходит до шоукейсов 🤩.

SVG глифов
SVG глифов

▲ также прикладывают коллаж с дизайнами, чтобы у вас сложилось понимание, как этот шрифт может выглядеть в разных ситуациях. Спасибо им за это, наверное.

Коллаж
Коллаж

Установка и использование

Не полезьте по привычке на Google Fonts. Этого шрифта там нет. Появится ли он там в скором будущем? Возможно. Думают ли над этим ▲? Тоже возможно. Офицально. По слухам.

NPM

Ссылка на страницу Geist на npm на всякий случай.

Bash

npm i geist

Если вы работали/работаете с Next, то API вам знаком:

TypeScript JSX

import { GeistSans } from 'geist/font'

export default function RootLayout({ children }) {
	return (
		<html lang='en' className={GeistSans.className}>
			<body>{children}</body>
		</html>
	)
}

Ручная

Можно скачать zip архив с их официального сайта, который включает в себя otf, woff2 и вариативный файлы. Архив удобно располагается на гитхабе. Далее можете использовать fontface или любой другой способ заставить файл работать, это уже по вашему вкусу.

Лицензия

Использовать можно без ограничений. Лицензия OFL. Подробнее о лицензии здесь.

Заключение

Если вам понравился этот шрифт, приятного пользования. Лично мне Inter немного приелся, но я не спешу переходить на Geist. Мой фаворит в текущий момент - Source Sans 3. Но кто знает, что будет завтра.

Все еще не можете определиться, нравится ли вам Geist? Посмотрите на Geist своими глазами.