Дизайнерам: работа со шрифтами

Добрый вечер, читатели блога Webvim.ru. Сегодня написал заметку-рекомендацию веб-дизайнерам. Если кратко — не лепите первый понравившийся шрифт при создании дизайн-макета. Особенно это касается случаев, когда сайт уже есть и нужно отрисовать новую страницу. Кому интересны подробности — читаем далее.

Немного теории

Промотать сразу к советам

Для начала нужно понимать, что в каждой операционной системе есть набор предустановленных шрифтов. Дизайнер может установить любой другой шрифт (их сейчас тысячи) и использовать его в макете сайта, но у 99,9% пользователей этого шрифта просто не окажется. Вместо него отобразится один из предустановленного набора (в Windows чаще всего это Times New Roman).

Сравнение шрифтов Times New Roman и Tahoma. Оба по 17px, но ширину занимают разную:

Как может отображаться сайт, если шрифт из макета не подключен

Чтобы этого не происходило, верстальщик дополнительно подключает нестандартные шрифты, используемые дизайнером в макете. Тут важно усвоить, что каждый новый шрифт — это дополнительные файлы, и чем их больше — тем дольше загружается страница в браузере пользователя.

Каждый новый стиль шрифта это отдельная единица, которая создает дополнительную нагрузку. Ниже скриншот, на котором сравниваем подключение через Google Fonts 1 отображения и 10 одного и того же шрифта:

Подключение шрифта через Google fonts

Нагрузка увеличилась в 10 раз! Это еще не самый тяжелый пример, бывают значения и больше.

Теперь рассмотрим распространенные ситуации с которыми я сталкиваюсь.

Ситуация 1 — новый сайт

Дизайнер создает с нуля дизайн-макет сайта. Бывает что у фирмы-заказчика разработан фирменный стиль и есть собственный шрифт, который обязательно нужно использовать на сайте. Здесь вопросов нет: нужно — сделаем! Но так происходит крайне редко, 1 сайт из 10. В остальных случаях у дизайнера полная свобода действий. И тут он решает, что будет не плохо использовать нестандартный шрифт…

Дизайнер выбирает шрифт макета

Первым делом ответьте на вопрос — зачем? В основном ответы такие: «красиво», «нестандартно», «индивидуально»… Тут я открою вам тайну: посетитель заходит на сайт не за «красиво», а за информацией, будь то товар, услуга или ответ на его вопрос. Чем быстрее он получит то, за чем пришел — тем лучше (иначе может уйти на сайт конкурента).

Вторым делом — задумайтесь, почему набор стандартных шрифтов переходит из версии в версию операционной системы? Ответ прост — эти шрифты обеспечивают наилучшее отображение текста, его легко читать. Например, шрифты Arial и Times New Roman — входят в список стандартных еще с Windows 95. Прошло 20 лет, а они до сих пор включены в последние версии Windows — говорит это о том, что лучших решений еще не нашли.

При выборе шрифта будьте готовы аргументировать свое решение. Если не можете — шрифт подобран неверно.

Ситуация 2 — старый сайт

Сайт уже есть: нарисован, сверстан, работает. Появляется новый раздел или элемент и нужно его нарисовать. 

Уже 3 раза сталкивался в своей практике с ситуацией, когда дизайнер присылает макет элемента, и использует там новый нестандартный шрифт, которого нет на сайте изначально. В последний раз из всей новой страницы заголовки в слайдере были сделаны таким шрифтом. Это 1/10 всего текста и этот слайдер есть только на одной странице сайта, и ради этого нужно подключать целый шрифт

Ваш шрифт будет выглядеть как-то так:

Думайте перед тем как подключать новые шрифты

  • Во-первых, это, как я уже писал выше, замедляет загрузку страницы;
  • Во-вторых, новый шрифт никак не перекликается со шрифтами на остальном сайте, он как белая ворона. Когда есть уже готовый сайт, самый правильный вариант — вписывать все новые элементы в имеющийся дизайн.

Когда я вижу такое, первое что приходит мне на ум, что дизайнер «от балды» берет первый попавшийся шрифт. В последнем случае так и оказалось — дизайнер позже сознался в этом.

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

Прикрепляйте файлы шрифта к макету

В 95% случаев дизайнеры не прикрепляют используемые шрифты к дизайн-макету. При открытии такого макета, я на могу даже посмотреть как он выглядит в оригинале. Лезу в интернет, ищу нужный шрифт, скачиваю — все это время, которое вы можете сэкономить нам, верстальщикам, просто прикрепив все файлы к архиву. Но это пол беды…

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

Отправляя макет заказчику — прикрепите файлы шрифтов, которые вы использовали в работе.

Естественно, это касается только нестандартных шрифтов и тех, которых нет в Google Fonts.

Наличие кириллицы и латиницы

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

Убедитесь что шрифт поддерживает как латиницу, так и кириллицу.

То же касается цифр и специальных символов.

Используйте целые значения

Задавая размер шрифта используйте целые значения.

С какой точностью можно устанавливать размер шрифта

Не все браузеры правильно отображают дробные значения.

Итоги

Работа дизайнера — это работа в команде. Соблюдайте простые рекомендации и вас будут любить:

  • Нестандартный шрифт — 10 раз подумайте, так ли он необходим здесь;
  • Нестандартный шрифт — прикрепите файлы шрифта к макету;
  • Нестандартный шрифт — проверьте, есть ли в нем кириллица и латиница;
  • При работе с уже существующем сайтом — используйте шрифты, которые уже есть там;
  • В макете задавайте размер шрифтов в целых значениях.

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

Экономьте время и нервы своих коллег. Удачи!