👀Вдохнули-выдохнули. Мы в Паратайпе уже очень ждём весны: когда станет теплее и расцветёт вишня.
А пока делимся с вами важными ссылками с субботней лекции Саши на UX/UI Conf о шрифтах в вебе. В подборке есть и книги, и записи других лекций, и статьи. Надеемся, каждый найдёт для себя что-то интересное.
⚡️ Пара мыслей с лекции, которые могут выручить вас
— Иногда шрифтовые дизайнеры добавляют прямо в название шрифта подсказку, в каких размерах его использовать — смотрите картинку к посту.
— Если вы собираетесь использовать шрифт в мелком кегле, особенно на экране — межбуквенные расстояния должны быть достаточно просторными, в этом случае может помочь разрядка (положительный трекинг).
— Если вы собираетесь использовать шрифт в крупном кегле, отрицательный трекинг допустим, но обязательно проверяйте его на сложных сочетаниях типа «ух», «кл», «гт» — не давайте буквам слипнуться!
— Если вы хотите попробовать использовать на сайте новый для себя шрифт, обязательно посмотрите на прототип из Windows с самого старого монитора, какой найдёте, чтобы проверить экранное отображение.
⚡️ Шрифты, о которых спрашивали во время лекции (ими была сделана презентация):
Роскошный Hint
Эксцентричная Helsa
У нас на сайте появились тестовые версии, не забывайте скачивать и примерять шрифты
⚡️ Бесплатные шрифты, которые участвовали в лекции
🐶 Текстовые:
Commissioner
Geologica
Golos Text
Golos UI
IBM Plex Sans
Onest
PT Root UI
Tilda Sans
🐶 Не совсем текстовые
Lanze
Martian Grotesk
🐶 Совсем не текстовые
Ambidexter
Kudry Weird Headline
⚡️ Статьи, курсы, инструкции и коды:
🔸Большая подборка шрифтов без бюджета с приличной кириллицей
🔸«Как разобраться в кириллице» — статья
🔸«Как разобраться в кириллице» — бесплатный курс
🔸Статья ABCDinamo о встраивании вариативных шрифтов на сайт (на английском)
⚡️ Примеры кода для вариативных шрифтов с codepen.io
🔸Изменение жирности по ховеру
🔸Анимация изменения формы независимо от курсора
🔸Анимация изменения ширины независимо от курсора
🔸Изменение жирности в той части надписи, где курсор
🔸Изменение ширины и жирности в той части надписи, где курсор
⚡️ Ещё немного полезного:
🔸Статья о микротипографе, который мы встроили в шрифт
🔸Статья о том, как включить возможности OpenType в CSS и Фигме
🔸«Тёмная сторона шрифта» суперлонгрид о технической стороне шрифта (иногда нужен VPN)
🔸Статья о том, как бесплатно попробовать шрифты
🔸Статья о многоязычных шрифтах
🔸Большая статья о шрифтовых лицензиях
⚡️ Приложения:
Фонтоскоп — бесплатное приложения для теста почти всей библиотеки Паратайп в Ai, Ps, Id, Figma
Инструкция по установке
⚡️ Книги (их не было на лекции, но они будут полезны):
🔸Живая типографика, Александра Королькова
🔸 Облик книги, Ян Чихольд
🔸Новая типографика. Руководство для современного дизайнера, Ян Чихольд
🔸Основы стиля в типографике, Роберт Брингхерст
🔸Мой путь к типографике, Вольфганг Вайнгарт
🔸Типографика. Порядок и хаос, Владимир Лаптев
⚡️ Лекции:
🔸Вся правда о шрифтовых парах
🔸Шрифтовая магия
Буквы не то, чем кажутся
