Типографика для web

Типографика для web

Продолжаю делать заметки о курсах, которые прохожу. Сегодня у нас "Типографика для веб разработки". Курс, который не особо обязателен для веб-программистов и находится на стыке дизайна и разработки. Но эта тема всегда была для меня интересной.

Какой шрифт и размер выбрать для своего сайта, чтобы было читабельно и красиво?

Точного ответа для любой ситуации данный курс не дает, но показывает куда копать и как сделать аккуратно и приятно.

Начнем с того, что у браузера есть дефолтные стили, в том числе и для шрифтов. Если их сбросить, вы получите текст с одинаковым шрифтом и размером для всех элементов. Вы можете начать навешивать стили и устанавливать шрифты для заголовков, например h1. Выставив жирный Impact, вы получите ужасный заголовок — все потому, что вы не подгрузили версию жирного шрифта Impact, и браузер сам пытается подогнать имеющийся в системе Impact под жирное начертание.
--------------2020-05-24---16.02.00

Выставив font-weight: normal, получаем нормальную версию Impact.

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

--------------2020-05-24---16.05.05

Безопасные шрифты

Не то чтобы были случаи, когда мне угрожали шрифты, но стоит сказать о том, что если вы применяете какой-нибудь кастомный шрифт, который не очень распространен среди пользователей (не установлен в ОС), то браузер будет отображать контент с дефолтными настройками для текста. Поэтому существуют так называемые безопасные шрифты (бОльшая вероятность того, что они будут установлены у пользователей). Например Georgia Verdana (для Microsoft),
Impact (sans-serif), Comic Sans.

--------------2020-05-24---16.07.39

В чем профит данных шрифтов — быстрая загрузка.

Как выбрать шрифт?

Четкого ответа нет — все всегда зависит от контекста.

Контекст

Вот несколько примеров.

--------------2020-05-24---16.13.45

Сайт лухари украшений. Он использует Adobe German. Ну потому что величественно и роскошно.

--------------2020-05-24---16.15.08

Замени его на Comic Sans — будет смешно и не к месту. Comic Sans используется для выделения каких-нибудь речей, или для сайтов детской тематики.

--------------2020-05-24---16.15.58

Вот детский сайт. Замените шрифт на font-family: bloody — будет тоже не к месту. В таком формате приемлемо делать сайты хоррор тематики.

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

Читаемость

--------------2020-05-24---16.23.54

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

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

Georgia — нормальный выбор для читаемого текста.

Пилим стиль

Совмещения

Мы можем совмещать несколько шрифтов.

--------------2020-05-24---16.28.03

Например, выбрали Georgia для основного текста. Для того, чтобы разнообразить контент, можно подобрать другой шрифт без засечек для заголовков. Сравним размеры x-height. Если коротко, x-height — высота строчных букв без свисаний.

--------------2020-05-24---16.33.31

Verdana или Tahoma — хороший выбор для совмещения с Georgia.

Внешние шрифты

Пойдем дальше и подключим внешние шрифты.
В курсе нам предлагают использовать:

  • Typekit (платно или триал)
  • Google fonts (бесплатно)
  • Локальная загрузка (из папки fonts, например, положив туда скачанные шрифты)

Typekit

Удобно выбирать подходящий шрифт по разным параметрам

--------------2020-05-24---16.37.36

--------------2020-05-24---16.38.58

Можно посмотреть примеры написания и сравнение с другими шрифтами

--------------2020-05-24---16.40.20

И подключить нужный через скрипт
--------------2020-05-24---16.43.54

И прописать в стилях
--------------2020-05-24---16.44.48

Google fonts

--------------2020-05-24---16.46.12

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

--------------2020-05-27---14.26.12

Локальная загрузка

Скачиваем нужный шрифт, например с https://www.fontsquirrel.com/
--------------2020-05-24---16.49.09

И добавляем загрузку через css

--------------2020-05-24---16.49.46

Font stack

Это набор fallback шрифтов, которые используются, если основной шрифт по каким-то причинам не подгрузился. Шрифты указываются в порядке приоритета загрузки.

--------------2020-05-24---16.53.35

Иерархия

--------------2020-05-24---16.56.41

Как сделать контент интересным? Как правильно расставить акценты?
Иерархия — вот ответ.

--------------2020-05-24---16.56.27

Вы выбрали шрифт — отлично! Теперь поиграем с размерами (главное не проиграть).

Выиграть нам поможет www.modularscale.com. Можно указать размер вашего основного контента, а также пресет, по которому будет рассчитываться размер других заголовков и контента.

--------------2020-05-24---17.29.23

Кстати, тут удобно использовать em величины. Задав главный размер шрифта, можно автоматически скейлить остальные размеры для контента, меняя только 1 значение для media queries. Если не знакомы с em, велком сюда.

--------------2020-05-24---17.35.38

Кроме изменения размера, чтобы подчеркнуть иерархию, можно использовать контраст. Для этого используйте font-weight and text-transform.

--------------2020-05-24---17.43.30

Цвета! Конечно же контент можно подчеркнуть или убрать на второй план при помощи цветов. Подобрать цветовую схему можно довольно просто в онлайн сервисах, например https://coolors.co или https://colorscheme.ru/

--------------2020-05-24---17.47.19

Настройка кернинга

Чего? Кернинг — если кратко, то это расстояние между символами. Его тоже можно настраивать, и он тоже влияет на восприятие текста.

--------------2020-05-24---17.49.41

Чуть красивее можно сделать используя, text-rendering: optimizeLegibility.
Если вы придира и прям видите, что какие-то буквы все равно находятся далеко друг от друга, то можно вручную настроить пространство между буквами. Например, можно обернуть их в <span> и отдельно настроить расстояние через letter-spacing: -0.05em.

Кстати, line-height также позволяет упростить читаемость.

Вертикальный ритм

Я вам что тут, барабанщик что ли? И да и нет. Соблюдение вертикального ритма позволяет улучшить общее восприятие контента. Когда все элементы находятся в общей сетке.

--------------2020-05-24---18.01.15

Как сделать красиво, скажет drewish - сервис позволяет выстроить вертикальный ритм, исходя из размеров шрифта.

Иногда, чтобы не сломать вертикальный ритм и не затронуть остальные элементы, можно использовать позиционирование через top или bottom. Но это уже по ситуации.

--------------2020-05-24---18.04.06

Длина строк

Пара слов о том, что растягивать текст на всю ширину не всегда красиво, и на самом деле трудно читать длинные строки. Некий эталон длины строки — 75 знаков (600px).

Выравнивание

Если кратко — то можно отцентровать заголовки, контент - не стоит.
Есть так называемый F-паттерн (fast), рассказывающий о том, как люди быстро пробегают взглядом по вашему контенту. Подробнее можно пробежаться тут.

Спецзнаки

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

Для обозначения промежутков, например "будем ехать 3-4 дня", используем спецзнак — &ndash:
<span>будем ехать 3&ndash;4 дня</span>
будем ехать 3–4 дня

Для тире — &mdash
<span>Люди, я &mdash; дельфин</span>
Люди, я — дельфин

Все спецсимволы тут.

Девайсы

Ну и не забываем про разные девайсы — центрируем контент для больших экранов и подбираем шрифты для разных браузеров.

На этом все! Надеюсь, вы стали более прошаренными и теперь знаете как выложить свой рассказ в интернет, и сделать его читабельным и красивым.

Кстати, завел личный блог Sleepless Tech в Telegram про разработку и DIY, заходите!

И присоединяйтесь к каналам FrontEndDev и Web Stack в Telegram, чтобы не пропустить самое интересное из мира Web!