Создание безупречной Веб-типографики является очень важным фактором для достижения успеха в современном цифровом мире. Правда в том, что некоторые дизайнеры игнорируют эту часть дизайна и фокусируются только на том, чтобы сделать все «симпатично».
Элементы веб-типографики
Контент каждого веб-сайта состоит из основного текста (содержания) и заголовка. Заголовок – это, как правило, теги 1 и H2. В случае с основным текстом, большинство контента будет находиться внутри простого параграфа (P элемент), но многие также любят использовать DIV.
Необходимо использовать более широкий набор элементов. В нашем распоряжении есть заголовки и абзацы, мы можем использовать списки, акцентирование, абрривиатуры, цитаты, акронимы, метки, маленький текст, ссылки, код и многие другие веб-элементы. Множество людей думают о веб-типографике только с точки зрения заголовков и абзацев. Другие элементы полностью игнорируются, что очень плохо.
Начните с основного текста
Главный секрет совершенной веб-типографики в совершенствовании основного текста. Когда мы говорим об основном тексте, мы говорим о тексте в параграфах. Сайт может быть визуально красивым, но если основной текст неразборчив – большинству пользователей будет сложно им пользоваться. Нам следует начать с определений.
Основной текст и разборчивость
Первый термин, разборчивость - это способность шрифта легко читаться. Здесь предполагается, что мы находимся в нормальных условиях чтения. А именно, у нас достаточное освещение и мы не слишком далеко от экрана. Разборчивость помогает нам определить, как легко отличить одну букву от другой или слово от другого слова. Это также помогает нам обнаружить, легки ли параграфы текста для прочтения или сложны. Мы можем сказать, что по шкале от 0 до 10 , 10 – это совершенная разборчивость, тогда как 0 – это совсем не различимо.
Чем более разборчив текст на сайте, тем быстрее пользователи могут его прочитать. Контент с более низкой разборчивостью требует от ваших глаз прилагать больше усилий. В противном случае мы не сможем уловить смысл и понять информацию, которую он передает. Этот факт также предполагает одну важную характеристику разборчивого текста.
Как определить хорошую читаемость
Четкий текст практически невидим. Разборчивый контент настолько легок для прочтения, что и глаза напрягать не надо. Конечно, чтение в любом случае рано или поздно утомит ваши глаза. Тем не менее, это не должно случиться после прочтения одного или двух абзацев или предложений. Другими словами, чем более четкий шрифт, тем менее мы замечаете его, когда читаем слова. Чтение разборчивого шрифта не требует никаких усилий.
Основной текст и читаемость
Второй термин – это читаемость. Легкий для прочтения контент должен манить пользователя и вызывать желание начать его прочтение. Контент с высокой читаемостью хорошо отформатирован. Он не имеет чрезмерно длинных абзацев, он использует заголовки и подзаголовки для создания прочной структуры. Нечитабельный контент - один огромный кусок текста.
Быстрые советы для улучшения читабельности
Во-первых, разделите длинные параграфы на более мелкие части. Эти части не должны превышать 6-8 строк текста. Тем не менее, это не означает, что вы должны закончить его абзацем с одной строкой. В этом случае лучше сделать исключение.
Вы также можете уменьшить количество строк в предыдущем абзаце. Затем вы можете использовать эти освободившиеся строки для увеличения размера последнего абзаца. Или вы можете найти способ добавить какой-то текст и сделать его больше.
Другой быстрый совет для улучшения читабельности – увеличить высоту строк. Когда строки текста чрезмерно близко расположены друг к другу, это всегда выглядит непривлекательно. Это также делает текст более сложным для прочтения.
Следующий совет для улучшения читабельности – это уменьшение количества символов в строке. Оптимальная длинна строки где-то между 45 и 85 символами. В чем проблема с чересчур длинными или короткими строками в тексте? Когда строка текста чрезмерно длинная, читателю становится сложнее сфокусироваться на тексте.
С другой стороны, когда строка чрезмерно коротка, Вы принуждаете глаза читателя возвращаться к началу строки очень часто. Это сбивает ритм читателя, принуждая начинать чтение следующей строки до завершения текущей.
Размер шрифта и основной текст
Что же такое некое подходящее число для размера шрифта основного текста. Не ищите самый маленький размера шрифта, который читаем без использования увеличительного стекла. Вместо этого пробуйте, насколько далеко вы можете зайти, не нарушая расположения и не нанося вред пользовательскому интерфейсу с более крупным шрифтом.
Помните, что дизайн – это всегда экспериментирование. Вам не нужно идти на крайние меры. Вы можете начать постепенно, не торопясь, и установить основной текст лишь в 16 пикселей. Это сработает великолепно почти при любых условиях. Рекомендуется делать скриншот каждого этапа. Затем вы можете рассмотреть все ваши вариации одновременно. Это поможет вам сравнить каждый вариант в точности, вместо того, чтобы надеяться на свою память.
Предположим, что вы нашли наилучший размер шрифта для основного текста. Вы, вероятно, также создали типографический масштаб. Это означает, что вам следует модернизировать почти каждый элемент веб-типографики. Теперь вы должны подумать об еще одном вопросе. Что вы будете делать с размером шрифта, когда перейдете с мобильного телефона на настольный экран. Правда в том, что чтение на мобильных устройствах и на настольных – 2 абсолютно разных вида чтения.
Подумайте о том, как вы взаимодействуете с вашим смартфоном, когда вы что-то читаете. Вы держите ваше устройство ближе к глазам так как экран на вашем мобильном устройстве меньше. Так как ваше лицо, как правило, не так уж и далеко от экрана, читать мелкий текст не вызывает затруднений. В худшем случае Вы можете либо приблизить зумом, либо поднести устройство ближе к вашим глазам.
А вот настольный экран - дальше от ваших глаз, по сравнению с мобильным. Вы, вероятно, не захотите поднести ноутбук или монитор ближе к глазам на несколько минут. Так как вы находитесь дальше, тот же размер шрифта на рабочем столе будет выглядеть немного меньше. Это означает, что вы не должны использовать один и тот же размер шрифта для всех устройств.
Сегодня создание дизайна только для настольных компьютеров – это непоправимая утрата большинства мобильного трафика. По этому настоятельно рекомендуется делать дизайн адаптивным под все возможные устройства.
Идея в том, что чем дальше пользователь от экрана, тем больше размер шрифта должен быть. Это означает, что мы должны увеличивать размер шрифта пропорционально увеличению размера экрана.
От теории к практике
Давайте начнем с основного текста в 16 пикселей. Так как мы разрабатываем дизайн сначала для мобильных, размер шрифта будет таким, который используется для мобильных устройств. Затем мы можем добавить новый медиа-запрос для планшетов и других подобных устройств. Это будет где-то около 768 пикселей. В данном случае вы увеличите размер шрифта всех элементов веб-типографики по умолчанию на два пикселя. Другой медиа-запрос может быть где-то около 1200 пикселей. В данном случае вы опять увеличите размер шрифта на два пикселя.
CSS код:
html {
font-size: 18px;
line-height: 1.3;
}
h1 {
font-size: 38px;
}
h2 {
font-size: 32px;
}
h3 {
font-size: 26px;
}
h4 {
font-size: 20px;
}
p {
font-size: 18px;
}
@media screen and (min-width: 768px) {
html {
font-size: 20px;
line-height: 1.4;
}
h1 {
font-size: 40px;
}
h2 {
font-size: 34px;
}
h3 {
font-size: 28px;
}
h4 {
font-size: 22px;
}
p {
font-size: 20px;
}
}
@media screen and (min-width: 1200px) {
html {
font-size: 22px;
line-height: 1.414;
}
h1 {
font-size: 42px;
}
h2 {
font-size: 36px;
}
h3 {
font-size: 30px;
}
h4 {
font-size: 24px;
}
p {
font-size: 22px;
}
}
Используйте модульную типографическую шкалу
В предыдущей части мы допустили, что у вас есть специальный размер шрифта для каждого элемента веб-типографики. Но, что, если у вас нет этих цифр? Может быть сложно создать эту систему, особенно если у вас нет достаточного опыта для этого. Эта типографическая система называется типографической шкалой. Она помогает Вам создать последовательную иерархию в вашем дизайне. Она делает это с помощью конкретного базового размера шрифта и коэффициента.
Вы можете создать эту типографическую шкалу путем умножения размера шрифта вашего основного текста и коэффициента. Результат снова умножается на коэффициент. Например, ваш базовый размер шрифта 16 пикселей и коэффициент составляет 1.618. В этом случае вы будете умножать 16 пикселей на 1.618. Результат будет 25.888 пикселей. Затем, вы возьмете это число и умножите его снова на 1.618. Это даст вам 41.887 пикселей. Повторите эту процедуру столько раз, сколько вам нужно. Это и есть наша окончательная типографическая шкала.
CSS код:
html {
font-size: 16px;
line-height: 1.3;
}
h1 {
font-size: 67.773px;
}
h2 {
font-size: 41.887px;
}
h3 {
font-size: 25.888px;
}
p {
font-size: 16px;
}Мы можем сделать нашу веб-типографическую шкалу более соответствующей адаптивному дизайну. Все, что нам нужно – это использовать относительные единицы rems если быть более конкретными.
CSS код:
html {
font-size: 16px;
line-height: 1.3;
}
h1 {
font-size: 4.236rem;/* Это примерно - 67.773px */
}
h2 {
font-size: 2.618rem;/* Это примерно - 41.887px */
}
h3 {
font-size: 1.618rem;/* Это примерно - 25.888px */
}
p {
font-size: 1rem;/* Это примерно - 16px */
}Когда вы используете rems (или ems) изменение вашей типографической шкалы для более высокого разрешения станет намного проще. С помощью этой установки, вам нужно будет изменить только размер шрифта, определенного для HTML. Остальное позаботиться само о себе. Что делать, если вам не нравится математика, или вы просто не хотите делать этот расчет? В этом случае этот инструмент сделает работу за вас.
Используйте относительные единицы.
Все очень просто. Один rem равен размеру шрифта HTML-элемента. Таким образом, если вы установите 16 пикселей в качестве размера шрифта на HTML, один rem всегда будет равен этому числу. Эта связь и является тем, что есть привлекательным в rems.
Давайте предположим, что вы решили изменить размер шрифта в HTML. Затем каждый элемент с помощью rem блок будет пересчитан, используя этот новый размер шрифта. Это делает адаптивную веб-типографику довольно простой. Все, что вам нужно – это использовать несколько медиа-запросов и изменить размер шрифта в HTML. Давайте посмотрим на предыдущем примере и добавим некоторые медиа-запросы для различных разрешений.
CSS код:
html {
font-size: 16px;
line-height: 1.3;
}
@media screen and (min-width: 768px) {
html {
font-size: 18px;
line-height: 1.4;
}
}
@media screen and (min-width: 1200px) {
html {
font-size: 20px;
line-height: 1.414;
}
}
h1 {
font-size: 4.236rem;
}
@media screen and (min-width: 1200px) {
h1 {
font-size: 2.618rem;
}
}
h2 {
font-size: 2.618rem;
}
@media screen and (min-width: 1200px) {
h2 {
font-size: 1.618rem;
}
}
h3 {
font-size: 1.618rem;
}
@media screen and (min-width: 1200px) {
h3 {
font-size: 1.309rem;
}
}
p {
font-size: 1rem;
}
Проблема относительных единиц
Существует, по крайней мере одна проблема с этим решением. Представьте себе, что произойдет, если последний медиа-запрос будет запущен. Наш главный заголовок H1 будет иметь размер шрифта 84, 72 пикселей. Это довольно большой размер шрифта. Одним из возможных решений является использование этого медиа-запроса (1200 пикселей) и изменение значения для каждого элемента. В приведенном ниже примере каждый элемент "наследует" размер шрифта элемента ниже него.
CSS код:
@media screen and (min-width: 1200px) {
h1 {
font-size: calc(4.236rem * 0.7);
}
h2 {
font-size: calc(2.618rem * 0.7);
}
h3 {
font-size: calc(1.618rem * 0.7);
}
}
С этим новым набором медиа-запросов, нам больше не придется беспокоиться о заголовках на больших экранах. Это единственное решение и оно не требует каких-либо библиотек, плагинов и других внешних вещей.
Фокусируйтесь на вертикальном ритме
Еще один секрет идеальной веб-типографики - отличный вертикальный ритм. Это концепция, которая возникла или в печати или в графическом дизайне. Это понятие об использовании закономерности вертикальных пространств между элементами в макете. Хороший вертикальный ритм делает макет более сбалансированным и красивым, а его содержание более удобным для чтения. В веб-дизайне, мы можем установить и контролировать вертикальный ритм несколькими способами. Мы можем использовать размер шрифта, высоту строки, и мы можем также использовать отступы.
Давайте допустим, что наш основной текст имеет высоту строки 25.888 пикселей (1.618 * 16 пикселей). В этом случае мы должны сделать ряд шагов. Во-первых, нам надо установить размер шрифта html до 16 пикселей и высоту строки до 25.888 пикселей. Во-вторых, мы будем использовать веб-типографическую шкалу из предыдущего примера для установки размера шрифта. В-третьих, мы рассчитаем высоту строки для каждого элемента путем умножения базовой высоты строки на три и деления результата на размер шрифта элемента. В-четвертых, мы рассчитаем верхние отступы путем деления размера шрифта на высоту строки.
В случае с нижним краем, мы будем использовать почти такое же уравнение. Разница заключается в том, что мы также разделим результат на два.
CSS код:
html {
font-size: 16px;
line-height: 25.888px;
}
h1 {
font-size: calc(67.773 / 16 * 1rem);
line-height: calc(77.664 / 67.773); /* 77.664 = 25.888 *3 */
margin-top: calc(67.773 / 25.888 * 1rem);
margin-bottom: calc(67.773 / 25.888 / 2 * 1rem);
}
h2 {
font-size: calc(41.887 / 16 * 1rem);
line-height: calc(77.664 / 41.887);
margin-top: calc(41.887 / 25.888 * 1rem);
margin-bottom: calc(41.887 / 25.888 / 2 * 1rem);
}
h3 {
font-size: calc(25.888 / 16 * 1rem);
line-height: calc(77.664 / 25.888);
margin-top: calc(25.888 / 25.888 * 1rem);
margin-bottom: calc(25.888 / 25.888 / 2 * 1rem);
}
p {
margin: 0;
}
p + p {
margin-top: 1.618rem;
}Ограничьте количество шрифтов
Каково идеальное количество шрифтов для использования на одном проекте? Идеального числа просто не существует, как не существует и идеального инструмента. Каждый дизайн-проект нуждается в индивидуальном подходе. Один проект может отлично работать с одним шрифтом, а другому будет нужно два.
Не рекомендуется используйте более 3 шрифтов в одном проекте. В чем проблема с использованием большого количества шрифтов? Шрифты будут отвлекать внимание от содержания. Что еще хуже, ваш дизайн будет больше похож на шрифт галерею и никто не будет принимать его всерьез. Используйте два шрифта или вариации одного шрифта.
Помните, что дизайнер, который овладел основами веб-типографики, может творить чудеса с помощью только одного шрифта. Кроме того, чем меньше шрифтов, которые Вы используете, тем более последовательным ваш дизайн будет. Не пытайтесь использовать разный шрифт для каждого заголовка или каждой страницы. Это сделает ваш дизайн запутанным и хаотичным. Так что, если вы хотите использовать два шрифта, выберите один для заголовков и один для основного текста. Это все, что вам нужно.
Заключительные мысли про идеальную веб-типографику
Помните, что идеальная веб-типографика - это результатом многих экспериментов. Не бойтесь делать небольшие изменения, которые приведут вас к успеху прежде, чем вы даже успеете это осознать.
