Типографика для web
Продолжаю делать заметки о курсах, которые прохожу. Сегодня у нас "Типографика для веб разработки". Курс, который не особо обязателен для веб-программистов и находится на стыке дизайна и разработки. Но эта тема всегда была для меня интересной.
Какой шрифт и размер выбрать для своего сайта, чтобы было читабельно и красиво?
Точного ответа для любой ситуации данный курс не дает, но показывает куда копать и как сделать аккуратно и приятно.
Начнем с того, что у браузера есть дефолтные стили, в том числе и для шрифтов. Если их сбросить, вы получите текст с одинаковым шрифтом и размером для всех элементов. Вы можете начать навешивать стили и устанавливать шрифты для заголовков, например h1. Выставив жирный Impact, вы получите ужасный заголовок — все потому, что вы не подгрузили версию жирного шрифта Impact, и браузер сам пытается подогнать имеющийся в системе Impact под жирное начертание.
Выставив font-weight: normal, получаем нормальную версию Impact.
Нужно сказать, что после сброса CSS стилей контент может выглядеть по-разному в разных браузерах (ну вы знаете). В Chrome, кстати, есть настройка дефолтных шрифтов для контента.
Безопасные шрифты
Не то чтобы были случаи, когда мне угрожали шрифты, но стоит сказать о том, что если вы применяете какой-нибудь кастомный шрифт, который не очень распространен среди пользователей (не установлен в ОС), то браузер будет отображать контент с дефолтными настройками для текста. Поэтому существуют так называемые безопасные шрифты (бОльшая вероятность того, что они будут установлены у пользователей). Например Georgia Verdana (для Microsoft),
Impact (sans-serif), Comic Sans.
В чем профит данных шрифтов — быстрая загрузка.
Как выбрать шрифт?
Четкого ответа нет — все всегда зависит от контекста.
Контекст
Вот несколько примеров.
Сайт лухари украшений. Он использует Adobe German. Ну потому что величественно и роскошно.
Замени его на Comic Sans — будет смешно и не к месту. Comic Sans используется для выделения каких-нибудь речей, или для сайтов детской тематики.
Вот детский сайт. Замените шрифт на font-family: bloody — будет тоже не к месту. В таком формате приемлемо делать сайты хоррор тематики.
Ebay, например, использует дефолтные шрифты, что подходит для сайта масс-маркета.
Читаемость
Некоторые шрифты созданы специально для заголовков, они имеют отличия в толщине разных элементов символов, и читаются они медленно.
Есть специально созданные шрифты для контента с нормальной контрастностью, которые быстро и просто читаются. Но надо быть аккуратнее со стилем шрифта, потому что читаемость можно ухудшить, например сделав текст жирным или наклонным.
Georgia — нормальный выбор для читаемого текста.
Пилим стиль
Совмещения
Мы можем совмещать несколько шрифтов.
Например, выбрали Georgia для основного текста. Для того, чтобы разнообразить контент, можно подобрать другой шрифт без засечек для заголовков. Сравним размеры x-height. Если коротко, x-height — высота строчных букв без свисаний.
Verdana или Tahoma — хороший выбор для совмещения с Georgia.
Внешние шрифты
Пойдем дальше и подключим внешние шрифты.
В курсе нам предлагают использовать:
- Typekit (платно или триал)
- Google fonts (бесплатно)
- Локальная загрузка (из папки fonts, например, положив туда скачанные шрифты)
Typekit
Удобно выбирать подходящий шрифт по разным параметрам
Можно посмотреть примеры написания и сравнение с другими шрифтами
И подключить нужный через скрипт
И прописать в стилях
Google fonts
Не такой крутой фильтр, но думаю, вы сможете найти нужный шрифт и добавить ссылку на него в свой сайт.
Локальная загрузка
Скачиваем нужный шрифт, например с https://www.fontsquirrel.com/
И добавляем загрузку через css
Font stack
Это набор fallback шрифтов, которые используются, если основной шрифт по каким-то причинам не подгрузился. Шрифты указываются в порядке приоритета загрузки.
Иерархия
Как сделать контент интересным? Как правильно расставить акценты?
Иерархия — вот ответ.
Вы выбрали шрифт — отлично! Теперь поиграем с размерами (главное не проиграть).
Выиграть нам поможет www.modularscale.com. Можно указать размер вашего основного контента, а также пресет, по которому будет рассчитываться размер других заголовков и контента.
Кстати, тут удобно использовать em величины. Задав главный размер шрифта, можно автоматически скейлить остальные размеры для контента, меняя только 1 значение для media queries. Если не знакомы с em, велком сюда.
Кроме изменения размера, чтобы подчеркнуть иерархию, можно использовать контраст. Для этого используйте font-weight and text-transform.
Цвета! Конечно же контент можно подчеркнуть или убрать на второй план при помощи цветов. Подобрать цветовую схему можно довольно просто в онлайн сервисах, например https://coolors.co или https://colorscheme.ru/
Настройка кернинга
Чего? Кернинг — если кратко, то это расстояние между символами. Его тоже можно настраивать, и он тоже влияет на восприятие текста.
Чуть красивее можно сделать используя, text-rendering: optimizeLegibility.
Если вы придира и прям видите, что какие-то буквы все равно находятся далеко друг от друга, то можно вручную настроить пространство между буквами. Например, можно обернуть их в <span> и отдельно настроить расстояние через letter-spacing: -0.05em.
Кстати, line-height также позволяет упростить читаемость.
Вертикальный ритм
Я вам что тут, барабанщик что ли? И да и нет. Соблюдение вертикального ритма позволяет улучшить общее восприятие контента. Когда все элементы находятся в общей сетке.
Как сделать красиво, скажет drewish - сервис позволяет выстроить вертикальный ритм, исходя из размеров шрифта.
Иногда, чтобы не сломать вертикальный ритм и не затронуть остальные элементы, можно использовать позиционирование через top или bottom. Но это уже по ситуации.
Длина строк
Пара слов о том, что растягивать текст на всю ширину не всегда красиво, и на самом деле трудно читать длинные строки. Некий эталон длины строки — 75 знаков (600px).
Выравнивание
Если кратко — то можно отцентровать заголовки, контент - не стоит.
Есть так называемый F-паттерн (fast), рассказывающий о том, как люди быстро пробегают взглядом по вашему контенту. Подробнее можно пробежаться тут.
Спецзнаки
Если вы прошаренный web разраб, или хотите таким казаться, то стоит отличать дефис от тире и заменять стандартные кавычки, которые мы используем, на спецсимволы.
Для обозначения промежутков, например "будем ехать 3-4 дня", используем спецзнак — &ndash:
<span>будем ехать 3–4 дня</span>
будем ехать 3–4 дня
Для тире — &mdash
<span>Люди, я — дельфин</span>
Люди, я — дельфин
Все спецсимволы тут.
Девайсы
Ну и не забываем про разные девайсы — центрируем контент для больших экранов и подбираем шрифты для разных браузеров.
На этом все! Надеюсь, вы стали более прошаренными и теперь знаете как выложить свой рассказ в интернет, и сделать его читабельным и красивым.
Кстати, завел личный блог Sleepless Tech в Telegram про разработку и DIY, заходите!
И присоединяйтесь к каналам FrontEndDev и Web Stack в Telegram, чтобы не пропустить самое интересное из мира Web!