Раньше я, как многие новички, находила шрифты случайным образом. "Ну вот вроде красиво выглядит" - один из способов подбора шрифтов, который занимает кучу твоего личного времени.
Меня начал раздражать этот процесс, поэтому я разобралась с теорией типографики, тем самым упростив себе жизнь. Давайте расскажу, как я это сделала.
Мы подбираем шрифтовую пару
Разные шрифты помогут нам создать контраст, выделить главное от второстепенного и придать сайту живой вид.
Гарнитуру можно подобрать одну и ту же или похожую на одну из выбранных, но часто дизайнеры выбирают шрифты из разных групп, чтобы добавить акцент. Например, сочетают антикву с некотрастным гротеском.
Мы разбираемся в элементах шрифта
Шрифты влияют на tone of voice и формируют определенный стиль.
Гротеск без засечек подчеркивает современный и простой взгляд. Антиква, наоборот, ассоциируется с книгами, традициями и классикой. Шрифт должен отражать ценности бренда.
Апертура - это открытость букв. Чтобы понять, какая апертура большая, а какая маленькая, можно посмотреть на букву "С". Если воздуха между концами буквы много, значит апертура большая.
Насыщенность - это толщина линий. Жирные начертания часто используют для заголовков. Типографическая иерархия помогает понять читателю, какая информация наиболее важная.
Трекинг - это межбуквенное расстояние между всеми буквами. Регулируя его, можно сделать текст более воздушным или компактным.
Кернинг - это это расстояние между двумя отдельными буквами, которое мы используем для того, чтобы равномерно распределить текст и сделать его вид целостным.
Если начертания у буквы разные, то есть одна линия толще другой, то шрифт называется контрастным. Если же начертания одинаковые, то шрифт неконтрастный.
Текст и картинка должны быть расположены так, чтобы наше восприятие считывало всю композицию в едином стиле.
Полезные сервисы
- fonts.google.com — в карточке шрифта указаны другие шрифты, с которыми он хорошо сочетается;
- www.typewolf.com — подборка примеров сайтов с красивой типографикой и указанием шрифтов, использованных в дизайне;
- fontpair.co — примеры хороших шрифтовых пар с визуализацией;
- «Мы с котом» — подборки бесплатных кириллических шрифтов.
- Вы можете узнать название шрифта на любом сайте с помощью расширений для браузера WhatFont или Fonts Ninja.