Доделал новую презентацию. Шрифт Thaloria. Акцидентная антиква с вытянутыми пропорциями, вдохновленная журнальными обложками в стиле ар-нуво и некоторыми формами старославянских букв. Асимметричные, шиповидные засечки придают шрифту лёгкий готический характер, а высокий контраст делает его более изысканным.
Автор: Vera Vinogradova. Бесплатно для личного и коммерции
Типографика в дизайне: как шрифт управляет вниманием
Читаемость и акценты как основа восприятия
Типографика — не просто про шрифты. Это система визуального мышления, в которой каждый элемент работает на восприятие. Хорошо оформленный текст читается быстрее, проще, а главное — понятнее.
Шрифт — это голос интерфейса
Каждая гарнитура транслирует тональность и характер бренда.
Шрифт с засечками передаёт серьёзность и традиции. Без засечек — современность, лёгкость, цифровую нейтральность.
Примеры:
Times New Roman — авторитет, формальность
Arial — универсальность
Yandex Sans — баланс технологичности и читаемости
Иерархия как структура
Типографика создаёт визуальную иерархию: от заголовков до мелких пояснений.
Когда уровни читаются последовательно — интерфейс воспринимается интуитивно.
Рекомендованные уровни:
Заголовок: 24–32 pt
Подзаголовок: 18–20 pt
Основной текст: 14–16 pt
Мелкие элементы: 12 pt
Акценты — через начертание, цвет, размер. Но в умеренном объёме.
Контраст — главный инструмент акцентирования
Хорошая типографика — это баланс между ритмом и выделением. Контраст создаётся не только цветом, но и:
Размером
Жирностью
Интерлиньяжем
Отступами
Чем чётче структура — тем быстрее считывается смысл.
Ритм и дыхание текста
Интерфейсный текст должен быть воздушным. Используемые параметры:
Интерлиньяж: на 30–40% выше кегля
Кернинг: выровнен вручную
Трекинг: сдержанный
Длина строки: не более 70 символов
Если глазу комфортно — мозгу понятно.
Минимализм в шрифтах
Чем меньше шрифтов в макете — тем чище восприятие.
Оптимально:
Одна гарнитура
2–3 начертания (Regular, Bold, Italic)
Слишком пёстрые сочетания шрифтов теряют доверие и визуальную логику.
Типографика — инструмент навигации
Шрифт в интерфейсе работает на пользователя:
помогает быстро найти главное
снижает когнитивную нагрузку
усиливает визуальную идентичность
делает интерфейс живым, но системным
Типографика — это не оформление, а функциональность.
Хороший текст в дизайне не просто читается — он направляет, расставляет акценты и создаёт эмоциональный фон, даже если пользователь не осознаёт этого.
Хочешь больше?
Переходи в Энциклопедию по веб-дизайну DFA — крупнейшую структурированную и свободную базу знаний для дизайнеров.
Читай статьи, присоединяйся к сообществу профессионалов и делись своими знаниями — оставь свой след в дизайне, помогая собрать энциклопедию вместе.
Что за шрифтом написано слово "Амадей"?
Приветствую коллег!
Внезапно, в процессе работы выяснилось, что нет сабжевого кирилического шрифта. Но Бодони не простой, а конденсед, т.е. чутка сплющенный, ну вы поняли. Прошу камрадов поделиться сокровищем на какое-нибудь «облако». Пиво телеграфирую. Спасибо.
Делал из собственного интереса, было бы интересно почитать ваши отзывы на этот счёт и получить какой-то отклик.
Шаг 1:генерируем текст со всеми буквами (нейросеть, которой я пользовался, позволяла использовать лишь латиницу).
Шаг 2: Стираем всё лишнее в редакторе, оставляя на экране только символы.
Шаг 3. Делаем все символы чёрными.
4. Далее следует открыть программу "High-Logic FontCreator"
5. Программа выглядит следующим образом:
6. Чтобы начать создавать шрифт надо нажать на значок в левом верхнем углу. Я решил назвать шрифт "аль-шрифт" без всякой причины.
7. Появляется вот такой список символов:
8. Надо нажать на символ и вставить путём ctrl+c; ctrl+v туда свой символ.
9. Так надо сделать со всеми сгенерированными знаками:
(важно отметить: так как у нас только заглавные буквы, то мы должны и в заглавные и в строчные буквы вставить одно и тоже)
10. Далее заходим в "тест шрифта". Для этого надо нажать F5. Мы видим, что буквы имеют странные пробелы.
11. Чтобы поправить расстояния меж символами, вновь заходим в карточку символа и передвигаем эти линии, они и являются расстояниями. (Линии по бокам от символа) и проделываем так со всеми символами, чтобы расстояние от конца символа было примерно одинаковым везде.
12. В конце концов должен выйти примерно такой результат:
13. В целом на этом основная часть закончена. Если вы хотите добавить какие-то ещё символы, в фоторедакторе в целом можно дорисовать. Возьмём например такую букву:
Далее вставляем туда символ-основу. Место наверху от буквы как раз зарезервировано для диакритических знаков. Рисуем диакритический знак в фоторедакторе и просто вставляем сюда сверху.
Буква.
Пример работы шрифта с буквой с диакритическим знаком.
Таким же образом, в целом, можно создать кириллицу. Я это развёрнутая R, И - N. И так далее. Но всё же ради экономии времени, я оставлю только латинский вариант. Возможно я выпущу новую версию шрифта с большим кол-вом символов если это будет кому-то нужно.
14. Экспортируем наш шрифт.
15. В указанной папке у нас появляется такой файл. Это и есть шрифт, который устанавливается стандартным методом. Готово. Им можно пользоваться.
Если кому-то нужна ссылка на скачивание шрифта: https://github.com/DEffet/-/blob/main/AlShrift-Regular.ttf (да, я знаю, что использовать гитхаб для таких целей не очень принято, но я подумал, что буду, пожалуй, загружать любые свои файлы или картинки в этот репозиторий, а народ пусть скачивает, что хочет.)
Это не Comic sans, говорю сразу
