Дизайнерам: работа со шрифтами
Добрый вечер, читатели блога Webvim.ru. Сегодня написал заметку-рекомендацию веб-дизайнерам. Если кратко — не лепите первый понравившийся шрифт при создании дизайн-макета. Особенно это касается случаев, когда сайт уже есть и нужно отрисовать новую страницу. Кому интересны подробности — читаем далее.
Немного теории
Промотать сразу к советам
Для начала нужно понимать, что в каждой операционной системе есть набор предустановленных шрифтов. Дизайнер может установить любой другой шрифт (их сейчас тысячи) и использовать его в макете сайта, но у 99,9% пользователей этого шрифта просто не окажется. Вместо него отобразится один из предустановленного набора (в Windows чаще всего это Times New Roman).
Сравнение шрифтов Times New Roman и Tahoma. Оба по 17px, но ширину занимают разную:
Чтобы этого не происходило, верстальщик дополнительно подключает нестандартные шрифты, используемые дизайнером в макете. Тут важно усвоить, что каждый новый шрифт — это дополнительные файлы, и чем их больше — тем дольше загружается страница в браузере пользователя.
Каждый новый стиль шрифта это отдельная единица, которая создает дополнительную нагрузку. Ниже скриншот, на котором сравниваем подключение через Google Fonts 1 отображения и 10 одного и того же шрифта:
Нагрузка увеличилась в 10 раз! Это еще не самый тяжелый пример, бывают значения и больше.
Теперь рассмотрим распространенные ситуации с которыми я сталкиваюсь.
Ситуация 1 — новый сайт
Дизайнер создает с нуля дизайн-макет сайта. Бывает что у фирмы-заказчика разработан фирменный стиль и есть собственный шрифт, который обязательно нужно использовать на сайте. Здесь вопросов нет: нужно — сделаем! Но так происходит крайне редко, 1 сайт из 10. В остальных случаях у дизайнера полная свобода действий. И тут он решает, что будет не плохо использовать нестандартный шрифт…
Первым делом ответьте на вопрос — зачем? В основном ответы такие: «красиво», «нестандартно», «индивидуально»… Тут я открою вам тайну: посетитель заходит на сайт не за «красиво», а за информацией, будь то товар, услуга или ответ на его вопрос. Чем быстрее он получит то, за чем пришел — тем лучше (иначе может уйти на сайт конкурента).
Вторым делом — задумайтесь, почему набор стандартных шрифтов переходит из версии в версию операционной системы? Ответ прост — эти шрифты обеспечивают наилучшее отображение текста, его легко читать. Например, шрифты Arial и Times New Roman — входят в список стандартных еще с Windows 95. Прошло 20 лет, а они до сих пор включены в последние версии Windows — говорит это о том, что лучших решений еще не нашли.
При выборе шрифта будьте готовы аргументировать свое решение. Если не можете — шрифт подобран неверно.
Ситуация 2 — старый сайт
Сайт уже есть: нарисован, сверстан, работает. Появляется новый раздел или элемент и нужно его нарисовать.
Уже 3 раза сталкивался в своей практике с ситуацией, когда дизайнер присылает макет элемента, и использует там новый нестандартный шрифт, которого нет на сайте изначально. В последний раз из всей новой страницы заголовки в слайдере были сделаны таким шрифтом. Это 1/10 всего текста и этот слайдер есть только на одной странице сайта, и ради этого нужно подключать целый шрифт!
Ваш шрифт будет выглядеть как-то так:
- Во-первых, это, как я уже писал выше, замедляет загрузку страницы;
- Во-вторых, новый шрифт никак не перекликается со шрифтами на остальном сайте, он как белая ворона. Когда есть уже готовый сайт, самый правильный вариант — вписывать все новые элементы в имеющийся дизайн.
Когда я вижу такое, первое что приходит мне на ум, что дизайнер «от балды» берет первый попавшийся шрифт. В последнем случае так и оказалось — дизайнер позже сознался в этом.
При создании новых элементов для старого сайта применяйте шрифты, которые уже есть на сайте.
Прикрепляйте файлы шрифта к макету
В 95% случаев дизайнеры не прикрепляют используемые шрифты к дизайн-макету. При открытии такого макета, я на могу даже посмотреть как он выглядит в оригинале. Лезу в интернет, ищу нужный шрифт, скачиваю — все это время, которое вы можете сэкономить нам, верстальщикам, просто прикрепив все файлы к архиву. Но это пол беды…
Один и тот же шрифт, можно по-разному отрисовать. Поясню. Найдя шрифт именно с таким названием, как использовал дизайнер, не всегда он отображается так же, как задумано в макете. Просто разные файлы одного и того же шрифта могут выглядеть по-разному.
Отправляя макет заказчику — прикрепите файлы шрифтов, которые вы использовали в работе.
Естественно, это касается только нестандартных шрифтов и тех, которых нет в Google Fonts.
Наличие кириллицы и латиницы
Пару раз сталкивался с тем, что в макете заголовки написаны латиницей, а в реальном проекте там присутствуют слова на кириллице. Шрифт, выбранный дизайнером, кириллицу не поддерживает — все, финиш. Отправляем обратно, перерисовываем — теряем время.
Убедитесь что шрифт поддерживает как латиницу, так и кириллицу.
То же касается цифр и специальных символов.
Используйте целые значения
Задавая размер шрифта используйте целые значения.
Не все браузеры правильно отображают дробные значения.
Итоги
Работа дизайнера — это работа в команде. Соблюдайте простые рекомендации и вас будут любить:
- Нестандартный шрифт — 10 раз подумайте, так ли он необходим здесь;
- Нестандартный шрифт — прикрепите файлы шрифта к макету;
- Нестандартный шрифт — проверьте, есть ли в нем кириллица и латиница;
- При работе с уже существующем сайтом — используйте шрифты, которые уже есть там;
- В макете задавайте размер шрифтов в целых значениях.
Надеюсь статья оказалась полезной. Дополнения и возражения готов выслушать в комментариях.
Экономьте время и нервы своих коллег. Удачи!
Неплохо было бы дизайнерам прочитать эту статью! А то я недавно брал верстку сайта, а там в макете 32 шрифта. 32! И почти всех нет в Google Fonts. Мало того, я некоторые подключил, а они внешне выглядели не так, как в макете. Чувствую, те шрифты будут мне теперь сниться в самых страшных кошмарах..
Миша, ты побил все мои рекорды! 32 шрифта еще не доводилось встречать))
Я бы такой макет вернул обратно, причем не на эмоциях, а по соображениям производительности. Каждый шрифт — это дополнительный вес и доп. запрос, а следовательно и время загрузки страницы.
Даже если рассматривать только визуальную составляющую, 2 шрифта на странице — идеал, максимум 3.