Типография – основа современного веб-дизайна
Типография для веб-дизайнера – это огромное поле, в мире организации шрифтов. В данной статье, мы рассмотрим основные моменты, которые следует учитывать при выборе шрифта для сайта.
Приступая к разработке веб ресурса, важно понимать, что контент имеет свойство изменяться. Говоря другими словами, нужно взять контроль над шрифтами, цветом и отступами.
Практическая типография и полиграфия для веб-дизайнера
В 2018 году, крошечные размеры и переполненная линейная высота – уйдут в прошлое. Многие владельцы сайтов начали пересматривать свои проекты, отдавая предпочтение – читабельности. Посетители, хотят видеть оформление красивым и понятным.
Когда выбирается шрифт для своего сайта, важно – не переусердствовать. Для большинства проектов достаточно 2х видов шрифта. К примеру, кириллические: Oswald и Roboto.
Шрифт для заголовка и контента
К сожалению, универсальных кириллических шрифтов практически нет. Однако, методом тщательного подбора, нам удалось совместить некоторые из них.
Шрифт Oswald – идеально подходит для заголовка в 32 пикселя. Удобство заключается в его высоте и менее широких буквах. Длинные заголовки, легко умещаются в один ряд при просмотре с ПК, а также, удачно масштабируются для просмотра с планшетов и других мобильных устройств.
Шрифт Roboto – удачно вписывается к контентной части в 16 пикселей. Текст становится приятно оформленным и читается на одном дыхании. Но, стоит уделить внимание межстрочным интервалам.
Межстрочный интервал в оформлении
Когда начинается проектирование нового сайта, межстрочный интервал становится столь же важным, как и размер шрифта. Недооценивать его влияние на читабельность и удобство – нельзя.
Межстрочный интервал – это количество пробелов между строками текста, внутри абзаца. В CSS файлах или HTML коде, именуется как: line-height.
В качестве примера можно использовать математическое действие. Если шрифт размером в 16 пикселей, межстрочный интервал должен составлять 140% - 160%. Высчитать можно путем умножения: 16x1.5=24 пикселя или 150%.
Отступ картинок в контенте
Путем практического опыта, нами было выявлено, что отступ изображения внутри контента исходит от межстрочного интервала заголовка. В виде примера возьмем заголовок в 32 пикселя. 32x1.5=48 пикселей. Важно: подсчет отступа ведется не с заглавных букв, а с маленьких.
Хочется отметить, что для проектирования сайтов, типографию не стоит рассматривать буквально и работать по шаблону. Веб ресурс – это не печатное издание, но соблюдение основных правил, преобразит ваши проекты и выведет их на новый уровень.