Типографика*, Веб-дизайн*

Как правило, в шаблонах производимых и продаваемых на сайте TemplateMonster Russia используются стандартные шрифты или Google Web Fonts. Мне удалось пообщаться с представителями русскоязычного офиса мирового производителя шаблонов, которые рассказали, что использование других шрифтов требует подключения дополнительных скриптов, негативно влияющих на скорость загрузки сайта, а также поведали много других интересных нюансов.

Если Вы хотите знать на какие типографические мелочи стоит обращать самое пристальное внимание при создании своих веб-проектов, то искренне рекомендую к прочтению эту статью.

Кстати, меня просто поразил еще тот факт, что в качестве иллюстраций к возможного рода ошибкам представители компании приводили дизайны шаблонов сайтов от ТМ, которые производились ранее. До сегодняшнего дня я не встречал подобной открытости:) Это очень круто когда компания-лидер готова учиться на собственных ошибках, исправлять их и непрерывно делать продукт еще более качественным и востребованным на рынке. Итак…

Для начала хотелось бы сказать, что при использовании Google Web Fonts есть некоторые нюансы. Часть шрифтов отображаются с “рваными” краями при использовании большого кегля.

Причиной тому может быть отключенная опция “сглаживание шрифтов” (актуально для операционной системы Windows). Кроме того, каждый браузер по-своему сглаживает шрифты (например, в Internet Explorer шрифты выглядят более насыщенными, в то время как Mozilla FireFox отображает шрифты строго по пикселям). А, следовательно, где-то сайт будет выглядеть не так привлекательно, как в макете.

Поэтому, прежде чем использовать какой-либо из шрифтов Google Web Fonts, необходимо выставить желаемый размер шрифта, и посмотреть, как он будет отображаться в браузере (по возможности нескольких: Mozilla FireFox, Internet Explorer, Google Chrome).

Обращайте внимание на размер шрифта и междустрочное расстояние

Для основного текста считается оптимальным шрифт размером 12-16 пикселей. Более мелкий шрифт понижает читабельность, что актуально для людей с плохим зрением, а более крупный шрифт увеличивает объем сайта.

Вполне приемлемым считается, когда размер шрифта для заголовков составляет около 1,96-2 кегля (размера шрифта) основного текста, то есть приблизительно 18-32 пикселя. Слишком крупный кегль неприемлем для длинных заголовков. К тому же, в связи с появлением адаптивных шаблонов следует учитывать, что количество строк в заголовке все же будет меняться.

Соблюдайте иерархию заголовков. Заголовок первого уровня должен быть крупнее заголовка второго уровня. Заголовок последнего уровня не должен быть меньше основного текста.

Оптимальный интерлиньяж (высота строки) составляет 1,48-1,5 кегля для основного текста и не менее 1,2 кегля для заголовков, списков и прочих блоков.

Плохо, когда шрифты одной гарнитуры отличаются друг от друга размером шрифта в 1 пиксель или размером интерлиньяжа в 1 пиксель.

Следите за цветом текста

Все заголовки в дизайне сайта желательно выполнять одним цветом (исключением могут служить отдельные блоки, фон которых явно отличается от основного фона). То же относится и к тексту.

Ссылки должны выделяться на фоне обычного текста, поэтому цвет неподчеркнутых ссылок не может совпадать с цветом основного текста.

Не стоит использовать в одном шаблоне гарнитуры, которые отличаются друг от друга на один тон/оттенок.

Контролируйте количество используемых на одной странице шрифтов

Хорошо, когда в дизайне сайта используется не более трех гарнитур (для заголовков, основного текста и особого типа содержимого). Большее количество шрифтов снижает юзабилити сайта и скорость его загрузки.

Используйте одну гарнитуру для всех заголовков (будь-то заголовки основного контента, или заголовки отдельных блоков). То же касается и основного текста.

На примерах ниже продемонстрирован явный избыток шрифтов: пять гарнитур на одной странице, не включая вариаций (написание строчными и прописными, цвет текста, подчеркивание, жирность, кегль, междустрочное расстояние). Хотя многим клиентам нравится :)

Откажитесь от «линейки»

При верстке сайта гарнитура, как правило, указывается в виде перечня:

Times New Roman, Georgia, Times.

Arial, Helvetica, Verdana, Trebuchet MS, Tahoma, Geneva.

Arial Black, Gadget.

Courier New, Courier.

Palatino Linotype, Book Antiqua, Palatino.

Lucida Sans Unicode, Lucida Gradge.

Lucida Console, Monaco.

Это делается для того, чтобы при отсутствии на компьютере пользователя одного из этих шрифтов по какой-либо причине (файл шрифта был случайно удален пользователем или поврежден, в данной операционной системе такого шрифта нет и т.п.), он заменяется другим из этой же группы (к примеру, Tahoma может замениться Arial’ом в операционной системе Mac OS). Поэтому крайне не рекомендуется использовать в дизайне вышеперечисленные сочетания шрифтов.

Обращайте внимание на похожесть шрифтов

Не используйте в дизайне два нестандартных шрифта, которые по своему внешнему виду практически не отличаются (например, Avanti и Century Gothic).

Два рукописных шрифта, как правило, тоже плохо комбинируются (при том, что это в основном не стандартные шрифты). Эти шрифты имеют слишком много стилевых совпадений для создания контраста.

Не ставьте рядом два шрифта из разных групп, которые не достаточно различны по своей структуре.

Ну и, конечно же, если шрифты совсем незначительно отличаются друг от друга (как, к примеру, Rosario и Arial, Open Sans и Arial), отсеивайте один из них, отдавая предпочтение стандартному.

Следите за «жирностью»

Не используйте в одном шаблоне сочетания полужирного, жирного и сверхжирного начертания одного шрифты, а также тонкое начертание и обычное. Не все браузеры различают эти значения (например, Internet Explorer 8 будет отображать жирный текст и полужирный практически одинаково).

Используйте в дизайне не более двух типов жирности (желательно так, чтоб они заметно отличались друг от друга).

На примере ниже отображение шрифта Lato в браузере Internet Explorer. Даже Light и Bold плохо различимы, а Light и Regular выглядят вообще одинаково. Со шрифтом Open Sans дела обстоят еще хуже: Open Sans Semi-Bold и Open Sans Bold [во всех браузерах] различить крайне проблематично.

Напоследок. Следите за эффектами текста

Средствами HTML и CSS пока что невозможно кроссбраузерно реализовать следующие эффекты текста:

— текстуры (данный эффект отсутствует в верстке);

— градиент (не доступен для ранних версий браузеров или требует написания большого фрагмента кода);

— вертикальный текст (требует написания стилей для каждого браузера в отдельности и не гарантирует кроссбраузерного отображения);

— sharp, crisp, smooth, strong (данные эффекты отсутствуют в верстке, однако в браузере Internet Explorer некоторые виды сглаживания являются встроенными);

— тень (не все браузеры, в частности Internet Explorer, отображают данный эффект);

— прозрачный текст (требует написания дополнительных хаков);

— кернинг и трекинг (средствами верстки невозможно с полным соответствием повторить данное свойство, и, — как правило, текст либо не вмещается, либо получается пережатым);

— переносы (отсутствуют в средствах верстки, требуют подключения дополнительных скриптов).

Поэтому использование данных эффектов в ваших веб-проектах мы рекомендуем максимально уменьшать. Успехов вам и вашим проектам!

Авторы: Екатерина Дорофеева, Андрей Андреев

Официальный сайт TemplateMonster Russia: templatemonster.com/ru

Самые популярные продукты: Joomla шаблоны, WordPress темы, osCommerce и Prestashop шаблоны.

Официальный блог: templatemonsterblog.ru

Источник