Проверенный набор онлайн-сервисов, которые облегчают работу с типографикой, цветом и шрифтовыми системами.
fonts.google.com
Крупнейшая открытая библиотека веб-шрифтов — более 1400 гарнитур. Фильтрация по категориям, языкам, свойствам. Лицензия Open Font License позволяет использование в коммерческих проектах.
Открыть сервис →fonts.adobe.com
Премиальная библиотека более 20 000 шрифтов, включённая в подписку Adobe Creative Cloud. Синхронизация с приложениями напрямую. Шрифты Monotype, Linotype, ITC и сотен независимых разработчиков.
Открыть сервис →fontsquirrel.com
Куратированная коллекция шрифтов, разрешённых для коммерческого использования. Встроенный генератор @font-face — конвертирует шрифты в форматы для веба с поддержкой субсеттинга.
Открыть сервис →fontshare.com
Бесплатная библиотека качественных шрифтов от Indian Type Foundry. Фокус на современных гротесках и антиквах, пригодных для профессиональных проектов.
Открыть сервис →whatfontis.com
Идентификация шрифтов по загруженному изображению. База данных более 900 000 шрифтов. Полезен при анализе конкурентов и исторических образцов.
Открыть сервис →fontjoy.com
Генератор шрифтовых пар на основе нейросети. Подбирает гармоничные комбинации из Google Fonts с возможностью ручной настройки. Показывает готовую демо-верстку.
Открыть сервис →webaim.org/resources/contrastchecker
Проверка соответствия стандартам WCAG 2.1. Показывает коэффициент контраста и оценку AA/AAA для нормального и крупного текста. Один из самых используемых инструментов в UX-сообществе.
Открыть сервис →paciellogroup.com/resources/contrastanalyser
Десктопное приложение (Windows/Mac) для проверки контраста любых цветов на экране — включая цвета изображений. Незаменим при работе с фотофонами под текст.
Открыть сервис →coolors.co
Генератор цветовых палитр с функцией проверки контраста. Встроенный инструмент Color Blindness Simulator показывает, как палитра выглядит при различных формах нарушения цветовосприятия.
Открыть сервис →accessible-colors.com
Подбирает ближайший цвет, удовлетворяющий стандартам WCAG, если текущая комбинация не проходит. Экономит время на ручной подбор альтернатив.
Открыть сервис →contrast-ratio.com
Минималистичный инструмент Lea Verou. Вводите цвет фона и цвет текста — мгновенно получаете коэффициент и статус WCAG. Поддерживает CSS-цвета, hex, rgb, hsl.
Открыть сервис →polychroma.glitch.me
Визуализация всего цветового пространства с фильтрацией по коэффициенту контраста. Помогает найти весь диапазон цветов, пригодных для использования на заданном фоне.
Открыть сервис →typescale.com
Интерактивный генератор типографического масштаба. Выбираете базовый кегль и соотношение (золотое сечение, большая терция и др.) — получаете гармоничную систему размеров для CSS.
Открыть сервис →gridlover.net
Инструмент для создания типографической системы с вертикальным ритмом. Задаёте базовый размер шрифта и интерлиньяж — получаете готовые CSS-переменные для всей иерархии.
Открыть сервис →modularscale.com
Классический калькулятор модульных масштабов от Тима Брауна. Поддерживает любое соотношение и несколько базовых значений. Генерирует значения в rem, em, px и pt.
Открыть сервис →cssgrid-generator.netlify.app
Визуальный генератор CSS Grid-сеток. Задаёте количество колонок и строк, отступы — получаете готовый CSS-код. Полезен при создании типографических макетов.
Открыть сервис →utopia.fyi
Система адаптивной типографики. Рассчитывает диапазоны размеров шрифта для разных брейкпоинтов с использованием clamp(). Генерирует CSS custom properties.
Открыть сервис →every-layout.dev
Коллекция алгоритмических CSS-паттернов для создания устойчивых типографических макетов. Авторы — Хейдон Пикеринг и Энди Белл. Часть материалов доступна бесплатно.
Открыть сервис →readable.com
Анализирует тексты по множеству показателей читаемости: индекс Флеша, Gunning Fog, SMOG и другие. Полезен для оценки сложности технических и образовательных материалов.
Открыть →justmytype.ca
Каталог реальных шрифтовых пар, собранных из портфолио ведущих дизайнеров. Позволяет увидеть, как профессионалы сочетают шрифты в реальных проектах.
Открыть →fontsinuse.com
Энциклопедия использования шрифтов в реальных проектах. Каждая запись документирует, какие гарнитуры применялись для конкретных книг, плакатов, упаковок и сайтов.
Открыть →typewolf.com
Ежедневно обновляемый ресурс о шрифтах в реальном дизайне. Рейтинги популярности, подборки пар, обзоры новых гарнитур и список сайтов месяца.
Открыть →Инструменты — только половина дела. Вторая половина — понимание принципов, которые за ними стоят.