Типографика включает в себя использование и выбор шрифтов для улучшения читаемости напечатанного текста. Это искусство существует уже столетия, с тех пор, как человек изобрел письменность. Несмотря на то, что типографика представляется сложным в освоении для многих дизайнеров интерфейсов, вложение времени в это направление станет ценным ресурсом для создания хорошего сайта.
Первое, что надо запомнить это основная единица в которых мы указываем все размеры в макете и в том числе размер шрифта это Пиксели, краткое обозначение px, в отличии от дизайнеров которые создают макеты для печати которые указывают размер шрифта в Пунктах (pt).
Давайте знакомится терминами и определениями которые нам понадобятся для работы.
Гарнитуры и шрифты
Гарнитура — это особый внешний вид, применяемый к набору буквенных и цифровых символов.
Но подождите, разве это не шрифт? Не совсем. Шрифт — это конкретный экземпляр гарнитуры. Каждый шрифт в гарнитуре имеет определенную толщину (т. е. более жирный или светлый), размер (например, 16 пикселей против 24 пикселей) и может иметь другие специальные стили (например, курсив или не курсив, закругленный или не закругленный).
Например, вы можете видеть сейчас на экране разные шрифты “Roboto Thin” “Roboto Light”, “Roboto Italic” и другие которые относятся к гарнитуре “Roboto”
Другими словами, гарнитура — это широкая категория стилей для набора конкретных шрифтов — поэтому гарнитуру также иногда называют семейством шрифтов, или часто просто шрифтом, но знать правильные определения нужно.
Шрифты с засечками и без засечек
Многие шрифты соответствуют двум стилям шрифта: с засечками и без засечек.
Засечка («Serif») — это небольшой декоративный выступ за пределами основного штриха буквы. Шрифты с таким стилем называются шрифтами с засечками . «Sans» по-французски означает «без», а шрифты без этих элементов обозначаются как шрифты без засечек
Существуют и другие стили шрифтов, как например рукописные— это еще один стиль, используемый в Интернете, хотя он гораздо менее распространен, чем шрифты с засечками и без. Такие шрифты сложнее для чтения, чем обычные шрифты и его следует использовать только в особых случаях, например, для ярких заголовков или в декоративных целях.
Трекинг
Трекинг — это расстояние между буквами. В некоторых случаях стоит его использоваться для улучшения читаемости.
Интерлиньяж
Интерлиньяж — это вертикальное расстояние между строками текста. Вы возможно использовали его в том же Ворде когда указывали «одинарный» или «двойной интервал»
Опять же, правильный его размер помогает читателям ориентироваться в тексте: слишком большой или слишком маленький интерлиньяж читать неудобно.
Технические моменты
Для подбора шрифтов на начальном этапе я рекомендую использовать сервис https://fonts.google.com/ и тому есть две главные причины.
- Все шрифты в этом сервисе вы можете использовать легально и бесплатно, даже в коммерческих целях
- Если вы пользуетесь онлайн версией FIgma в ней уже установлены большинство шрифтов из этого сервиса.
Вы только что прочитали фрагмент одного из уроков моего курса для начинающих веб-дизайнеров. Хотите узнать больше о программе и сделать первый шаг к новой профессии? Переходите по ссылке, чтобы ознакомиться с курсом подробнее и начать менять свою жизнь уже сегодня!