Типографика играет ключевую роль в веб-дизайне, по статистике 95% содержимого сайтов составляет текстовый контент. Шрифтовое оформление управляет настроением и создает определенную атмосферу при прочтении текстового содержимого веб-страниц.

Современная веб-типографика базируется на CSS-стилях. Меняя значения стилей браузера по умолчанию, можно сделать текстовое содержимое более привлекательным.

В этой статье будут рассмотрены основные аспекты современной веб-типографики, которые помогут вам определиться при выборе шрифта и способов оформления текста.

CSS-свойства для правильной веб-типографики

1. Семейство шрифтов (свойство font-family)

Подбор шрифта начинается с выбора гарнитуры шрифта.

Гарнитура — шрифт или несколько шрифтов, имеющих стилистическое единство начертания. Состоит из набора знаков (обычно — цифры, буквы, знаки пунктуации, спецсимволы, но может состоять так же исключительно из неалфавитных знаков). Например, гарнитура «Times New Roman» состоит из обычного, курсивного, полужирного и множества других шрифтов этого семейства.

Гарнитуры можно разделить на две основные категории: с засечками (антиква и брусковые шрифты) и без засечек (гротески).

Шрифты без засечек имеют простой и четкий внешний вид. Шрифты с засечками, напротив, придают более серьезный и официальный тон.

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

В каких случаях можно использовать несколько шрифтов?

В гарнитуре нет специальных начертаний (жирного, полужирного, курсивного);
необходимо добиться сходства с определенной эпохой;
для визуального разделения текстов нескольких типов (например, комментарии в тексте, строки кода, формулы, тексты на другом языке);
для эстетических целей.

Сервис TypeTester для подбора шрифта

2. Сочетание шрифтов с засечками и без засечек

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

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

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

3. Цвет шрифта (свойство color)

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

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

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

При выборе количества цветов текста предпочтительно ограничиться двумя достаточно контрастными цветами (не считая черного и белого цвета). Черный текст на белом фоне — это классика, достаточно контрастная.

4. Размер шрифта (свойство font-size)

Размер базового шрифта в браузере равен 16px , а размер заголовков устанавливается пропорционально размеру базового шрифта (h1 — 2em, h2 — 1.5em, h3 — 1.17em и т.д.).

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

На размер текста в окне браузера оказывает влияние разрешение монитора пользователя: текст одного и того же размера на мониторе с большим разрешением кажется меньше, чем текст такого же размера на мониторе с более низким разрешением.

Шрифты различных семейств одинакового размера также могут иметь разный фактический размер.

С ростом разрешения экранов и размеров мониторов необходимо пересмотреть привычный размер текста в 12-14px. Для обычного текста уже повсеместно применяется шрифт размером 14-18px. Задавая размер шрифта, нужно не забывать про адаптивность, т.е. размер шрифта должен изменяться в зависимости от размера экрана.

5. Выравнивание текста (свойство text-align)

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

6. Межбуквенный и межсимвольный интервал (свойства word-spacing и letter-spacing)

Межбуквенный интервал оказывает влияние на читабельность текста. Варьирование плотности текста (уплотненный и разряженный текст) позволит разнообразить темп восприятия, добившись баланса текстовой композиции сайта.

Шрифты с засечками смотрятся более выразительно при уменьшенном значении letter-spacing .

7. Межстрочный интервал (свойство line-height)

Оптимальное значение межстрочного интервала в 1.4 — 1.6 раза больше размера шрифта.

Также, не делайте больших отступов между заголовками и связанным с ним абзацем.

8. Длина строки

В строке для сплошного чтения должно помещаться от 30 до 75 знаков (приблизительно 7-10 слов на одной строке). Чем шире строка текста, тем больше должен быть межстрочный интервал. Межстрочное расстояние не должно быть меньше пробела между словами.

9. Начертание шрифта (свойство font-style)

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

Свойство font-variant: small-caps; придает тексту типографскую изысканность, преобразуя текст таким образом, что все буквы отражаются малыми прописными. Данный прием подходит для небольших фрагментов текста.

10. Структура текста и визуальная иерархия

В структуре веб-страницы выделяют следующие объекты:
логотип / название сайта;
названия / заголовки;
заголовки второго плана;
основной текст;
навигация;
гипертекстовые ссылки;
длинные цитаты;
боковые панели;
подписи / надписи в таблицах, рисунках.

Каждый элемент списка представляет собой фундаментальную часть сайта и это оправдывает необходимость его выделения.

В HTML существует шесть уровней заголовков, начиная с более важного

и заканчивая менее значимым

. Заголовок

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

Для более легкого усвоения текст нужно разбивать на части и для каждого раздела выбрать заголовок соответствующего уровня. Чем выше уровень заголовка, тем значимее по содержанию должен быть раздел.

В общей структуре текста особое внимание нужно уделять ссылкам, они должны с легкостью выделяться из окружающего их контента.

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

Слишком сильное выделение не только чрезмерно акцентирует внимание на каком-либо фрагменте, но и затрудняет чтение.

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

Windows fonts / Mac fonts / Font family

Arial, Arial, Helvetica , sans-serif

sans-serif

cursive

monospace

Georgia 1 , Georgia , serif

sans-serif

Lucida Console, Monaco 5 , monospace

sans-serif

serif

Tahoma, Geneva , sans-serif

Times New Roman, Times , serif

Trebuchet MS 1 , Helvetica , sans-serif

Verdana, Verdana, Geneva , sans-serif

Symbol, Symbol (Symbol 2 , Symbol 2 )

Webdings, Webdings (Webdings 2 , Webdings 2 )

Wingdings, Zapf Dingbats

MS Sans Serif 4 , Geneva , sans-serif

MS Serif 4 , New York 6 , serif

Arial, Arial, Helvetica , sans-serif

Arial Black, Arial Black, Gadget , sans-serif

Comic Sans MS, Comic Sans MS 5 , cursive

Courier New, Courier New, Courier 6 , monospace

Georgia 1 , Georgia , serif

Impact, Impact 5 , Charcoal 6 , sans-serif

Lucida Console, Monaco 5 , monospace

Lucida Sans Unicode, Lucida Grande , sans-serif

Palatino Linotype, Book Antiqua 3 , Palatino 6 , serif

Tahoma, Geneva , sans-serif

Times New Roman, Times , serif

Trebuchet MS 1 , Helvetica , sans-serif

Verdana, Verdana, Geneva , sans-serif

Symbol, Symbol (Symbol 2 , Symbol 2 )

Webdings, Webdings (Webdings 2 , Webdings 2 )

Wingdings, Zapf Dingbats (Wingdings 2 , Zapf Dingbats 2 )

MS Sans Serif 4 , Geneva , sans-serif

MS Serif 4 , New York 6 , serif

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

Начнем с примеров типографики.

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

Так делать не надо

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

Попробуйте прочитать этот текст за 20 секунд.

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

Типографика

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

Базовые определения в типографике

Пример каллиграфии

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

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

Леттеринг для логотипа

Отличие каллиграфии и леттеринга. Каллиграфия - это когда берете перо, маркер или что-то еще и рисуете где угодно. Леттеринг - когда вы рисуете эскиз, переносите в графический редактор, обводите и получаются красивые буквы, которые можно использовать в логотипе или где-то еще.

Основные правила типографики

Строчные и заглавные буквы шрифта

Строчные буквы - буквы принятые для сплошного набора текста.
Прописные (заглавные, в народе “большие”) буквы используются для прописных знаков, с них начинается предложение или имя собственное.

Дефис и тире
Важная особенность, которую упускают новички. Дефис и тире - разные знаки, это важно знать.
Дефис - короткая черточка для разделения слов и переносов. Ничем не отбивается от слов. Пробелы перед ним и после него НЕ ставятся.
Короткое тире ставится для обозначения числовых диапазонов, обычно, тоже не отбивается пробелами.
Длинное тире - это знак препинания, используется в предложениях и отбивается пробелами.
Дефис, короткое тире и длинное тире отличаются по длине самого знака. Еще есть знак минус, он короче всех. Вот небольшая подсказка. Сохрани картинку себе, чтобы помнить что к чему.


Чтобы набрать длинное тире на PC зажмите клавишу alt и на дополнительной цифровой клавиатуре (у вас блок справа) набери 0151, получится длинное тире. Короткое тире: alt + 0150.
Если забыли сочетание, то наберите в поисковике «длинное тире» найдите статью на википедии и скопируйте тире от туда.

Кавычки
Важно помнить, что в России принято использовать кавычки-ёлочки «». Чтобы их набрать используй alt + 0187. Некоторые используют в качестве кавычек удвоенный знак минут “, но лучше использовать кавычки-лапки “ ”: alt + 0147.
Комбинация клавиш Shift + 2 в кириллической раскладке клавиатуры вызывает на экран привычный всем знак “. Он обозначает совсем не кавычки (как принято считать), а секунды: 68° 13′ 22″ или дюймы: монитор с диагональю 17”.
В издании нужно использовать один рисунок кавычек, кроме «случаев „цитаты в цитате“».

Шрифты

Со знаками разобрались, теперь о понятии шрифта. Здесь я приведу только основные определения, как правильно использовать шрифты, читай в .
Шрифт - комплект литер, предназначенных для набора текста. Литера - та штука, про которую я рассказывал выше, металлический брусочек с буковкой. Грубо говоря шрифт - это комплект таких металлических буковок, предназначенных для работы текста.

Гарнитура - набор шрифтов, которые имеют единый стиль и оформление. Естественно у них должно быть схожее начертание. Например, гарнитура PT Sans состоит из различных начертаний шрифта: Bold, Italic и другие. Все начертания в совокупности, дают нам гарнитуру PT Sans.

Начертания шрифта - это графическая разновидность шрифта в пределах одной гарнитуры. Например, PT Sans имеет тонкое, жирное, полужирное и другие начертания. Обычно в Фотошопе оно пишется на английском.

- расстояние между базовыми линиями соседних строк.

Выключка (в жизни выравнивание) - способ расположения неполной набранной строки относительно вертикальных границ полосы набора. Вы наверняка видели в MS Word такие кнопочки (найти картинку выровнять). Называется выключка, потому что когда нужно было правильно расставить металлические литеры в них ставили пробельные металлические брусочки, чтобы их выключить. Поэтому назыавется “выключка”.

Выравнивание текста или выключка

Кернинг и трекинг
Кернинг - избирательное изменение интервала между буквами в зависимости от их формы. Когда происходит выравнивание нескольких (разных) символов. Визуально некоторые сочетания букв очень близкое, если бы между всеми символами было бы одинаковое расстояние, то визуально оно выглядело бы разным. Поэтому при создании шрифтов используют таблицы, в которых жестко прописано, сочетание букв и расстояние между ними. В хороших гарнитурах это уже прописано по умолчанию, но можно отрегулировать в графическом редакторе, который вы используете (например Фотошоп).

Трекинг - расстояние между символами в слове или предложении.
Трекинг есть смысл использовать, если используете заглавные буквы, есть смысл трекать, чтобы расстояние между ними было больше, они так будут проще и лучше читаться.

Если вы пользуетесь Фотошоп для создания дизайн-макета сайта, то советую ставить в кернинг «авто», в трекинг вообще не лезть. Иногда для того, чтобы шрифты в конечном результате выглядели так же как и в макете, нужно пообщаться с верстальщиком.

Антиква - шрифты за засечками. Засечки - это горизонтальные полосочки сверху, снизу у букв. Они пришли из старых шрифтов, которые пошли со времен письма на камне. Антикву проще читать в книгах, засечки создают горизонтальные линии, которые как бы поддерживают шрифт на базовой линии и нам проще бегать взглядом для считывания предложений.
Гротеск, соответственно шрифт без засечек, появился недавно, в связи с так называемой шрифтовой революцией, когда засечки стали не нужны. Часто гротеск используется в веб-шрифтах, экранных штуках (на телефонах, например). Он проще из-за отсутствия засечек, его хорошо использовать для сплошного набора в интернете. В проектах можно использовать любой вариант, правильного и неправильного варианта тут нет. Нужно смотреть по ситуации, какой проект вы делаете и что более актуально для него.
На этом вводный курс по типографике для веб-дизайнера окончен 🙂
Запомнив только Антикву и Гротеск вы уже обойдете по знаниям многих дизайнеров. Не стойте на месте, изучайте типографику, это интересно и поможет делать крутые и аккуратные проекты.
Пишите в комментариях что нового узнали из этой статьи.

Коммуникация играет в дизайне огромную роль. Очень важно создавать крепкую связь между веб-сайтом и непосредственно самим пользователем и затем помогать ему в достижении поставленных целей. Когда мы говорим о коммуникации в контексте веб-дизайна, обычно мы имеем в виду текст. Типографика является неотъемлемой частью данного процесса:

Более 95% информации в Интернете хранится в письменном виде.

Хорошая типографика — это залог легкодоступной информации, в то время как при плохой типографике приходится прикладывать усилия для понимания текста. Как отмечает Оливер Райхенштайн в статье «Веб-дизайн на 95% состоит из типографики »:

Оптимизация типографики — это оптимизация читабельности, доступности, удобства использования (!) и достижение графического баланса в целом.

1. Используйте минимальное количество шрифтов

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

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

В целом, сведите количество шрифтов к минимуму (двух более чем достаточно, часто хватит и одного) и придерживайтесь использования одних и тех же на всем веб-сайте. Если вы решите работать с более чем одним шрифтом, убедитесь, что семейства шрифтов подходят друг другу с точки зрения ширины букв. Взгляните на пример, приведенный чуть ниже. У комбинации Georgia и Verdana (слева) есть общие характеристики, что позволяет им гармонично сочетаться друг с другом. Возьмем для сравнения комбинацию Baskerville и Impact (справа). «Тяжеловесный» Impact подавляет своего «засечного» напарника.

Убедитесь, что семейства шрифтов подходят друг другу с точки зрения ширины букв

2. Старайтесь использовать стандартные шрифты

В сервисах со шрифтами (например, Google Web Fonts или Typekit) можно найти много интересных, которые добавят в ваш дизайн нечто новое и необычное. К тому же, ими очень легко пользоваться. Возьмем, к примеру, Google:

1. Выбираете любой шрифт. Скажем, Open Sans .

2. Генерируете код и вставляете его в

Своего HTML. 

3. Готово!


Но что может пойти не так?

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

Обычно наилучшим выходом будет использование системных шрифтов (Arial, Calibri, Trebuchet, etc.). Исключением может стать необходимость придерживаться каких-то шрифтов, которые задал сам клиент: например, для брендинга или для создания чего-то запоминающегося. Помните, что хорошая типографика влияет на прочтение текста, а не на визуальное восприятие шрифта.

3. Ограничьте длину строки

Правильно подобранное количество знаков на одной строке — это ключ к легкости прочтения вашего текста. Выбирая ширину текста, вы должны ориентироваться не на ваш дизайн, а на ясность и четкость написанного. Обратите внимание на этот совет от Baymard Institute :

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

Если строка слишком короткая, глазам придется часто менять фокус, что сбивает темп чтения. Если же строка слишком длинная, глазам читателя, наоборот, придется долго фокусироваться на написанном. Фото: Material Design

Что касается мобильных устройств, придерживайтесь диапазона в 30-40 знаков в строке. Ниже представлен пример двух сайтов, открытых на мобильных устройствах. На одном строка содержит от 50 до 75 символов (лучшее количество знаков в строке для печатного текста и разрешения компьютера), а на втором мы видим оптимальные 30-40 знаков.

В веб-дизайне можно достичь необходимого количества знаков, уменьшив ширину текстовых блоков с помощью em или пикселей.

4. Выбирайте гарнитуры, которые хорошо читаются в любом размере

Пользователи будут заходить на ваш сайт с разных устройств, у которых, соответственно, различается размер и разрешение. Большинство пользовательских интерфейсов используют текстовые элементы различной величины (кнопка «копировать», подписи полей, заголовки секций и т.д.). Необходимо выбирать гарнитуру, которая будет хорошо выглядеть, и оставаться читабельной в любом размере.

Roboto от Google

Убедитесь, что гарнитура, которую вы выбрали, легко читается на маленьких экранах! Старайтесь не использовать курсивные шрифты, например, Vivaldi (на изображении ниже): хоть они и выглядят красиво, понять написанное иногда бывает сложно.

Использование шрифта Vivaldi затруднит прочтение текста на маленьком экране

5. Используйте шрифты с четкими буквами

Многие шрифтовые гарнитуры созданы таким образом, что иногда бывает очень легко спутать похожие буквы, особенно «I» и «L», написанные латиницей (как на изображении ниже). В некоторых же буквы расположены так близко друг к другу, что сочетание «r» и «n» можно принять за букву «m». Поэтому, выбирая шрифт, протестируйте его в разных контекстах. Так вы сможете убедиться, что из-за шрифтовой гарнитуры у читателя не возникнет проблем с пониманием текста.

6. Избегайте капса

Текст, написанный капсом — или одними заглавными буквами — подходит для ситуации, где пользователь не вовлекается в процесс чтения (например, в аббревиатурах или логотипах). Но в других случаях не насилуйте ваших читателей текстом, написанным заглавными буквами. Как отмечает Майлз Тинкер в своей известной работе «Legibility of Print», такой текст читается гораздо медленнее текста, написанного строчными.

7. Не сводите межстрочное расстояние к минимуму

В типографике существует специальный термин для обозначения расстояния между строками — интерлиньяж (или межстрочный интервал). Увеличивая интерлиньяж, вы увеличиваете вертикальное пространство между строками, тем самым улучшая читабельность текста на экране. По правилам, для обеспечения читабельности текста интерлиньяж должен быть примерно на 30% больше, чем высота знака.

Правильное межстрочное расстояние способствует лучшей читабельности текста. Фото: Microsoft

По словам Дмитрия Фадеева, правильно подобранное расстояние между абзацами увеличивает понимание прочитанного на 20%. Умение дизайнера работать с белым пространством позволяет пользователям усваивать содержание текста целиком без упущения каких-либо деталей.

Слева: Текст написан практически вплотную. Справа: Правильное межстрочное расстояние способствует читабельности текста. Фото: Apple

8. Убедитесь, что у вас все в порядке с цветовым контрастом

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

• Небольшие тексты должны иметь коэффициент контраста минимум 4,5:1 по отношению к фону.

• Большие тексты (от 14 размера полужирным шрифтом/от 18 размера и выше стандартным шрифтом) должны иметь коэффициент контраста минимум 3:1 по отношению к фону. 


Этот текст не соответствует стандарту цветового контраста, поэтому его тяжело различить на фоне.

Этот текст соответствует стандарту цветового контраста, поэтому он читается легко.

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

9. Старайтесь не использовать красный или зеленый цвет в тексте

Дальтонизм — явление довольно распространенное, особенно среди мужчин (8% мужского населения — дальтоники). Поэтому, помимо цвета, желательно использовать какие-то другие знаки для выделения важной информации. Также старайтесь не прибегать к красному и зеленому цвету, так как именно эти цвета чаще всего не распознаются дальтониками.

10. Старайтесь не использовать мерцающий текст

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

Не используйте мерцающий текст!

Заключение

Типографика — это очень важная вещь. Делая правильный выбор, вы наделяете веб-сайт ясностью и четкостью. В то же время, неправильный выбор может привести к невнимательному прочтению текста, так как отвлекает все внимание на себя. Типографика должна быть читабельной, ясной и понятной.

Типографика должна уважительно относиться к контенту

Это подразумевает, что читатель никогда не должен испытывать дискомфорта при прочтении текста.

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

Шрифты

Типографика в веб-дизайне подчиняется определенным законам и правилам. Многие из них касаются шрифтов как основы формирования любого текстового контента. Правильный выбор в данном случае определяет концепцию проекта в целом влияет на восприятие ресурса пользователями.

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

Новая эра в веб-дизайне стартовала с появления правила @font-face. По сути, оно развязало дизайнерам руки, предоставив практически неограниченное поле деятельности. Тем не менее далеко не все шрифты стоит использовать в веб-дизайне. Одни из-за плохой читабельности, вторые по причине тяжеловесности.

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

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

Хорошим вариантом для выравнивания является ориентация текста по левому краю. Такой формат уместен в 99% случаев.

Макро и микрографика

Макроуровень отвечает за общую структуру текста в пределах сайта, расположение относительно других элементов дизайна. Его цели глобальны - сделать текст целостным, гармоничным и в то же время «живым».

Микроуровень ответственен за область мельчайших деталей: интервалов, пробелов, отступов и т. д. Он формирует такое понятие как читабельность. Исключите его и текст превратиться в сплошное полотно из букв и знаков препинания.

Для обозначения шрифтов в веб-дизайне лучше использовать относительные значения «em» или %. Это позволяет сделать контент адаптивным, гибким. Пользоваться пикселями рекомендуется в отношении неадаптивных контейнеров, когда в случае изменений размера экрана в движение приходят блоки, в то время как шрифт не изменяется.

Блоки текста

Абзацы и блоки из длинных предложений усложняют восприятие информации. Гораздо удобней, когда строка включает не больше 70-ти символов, но не менее 30-ти. В зависимости от ширины строки текста варьируется межстрочный интервал. Для удобства пользователей он не должен быть меньше пробела между словами.

Начертание

Работая над типографикой, не обойтись без вариаций начертания букв. При умелом использовании эта возможность превращается в мощное акцентное оружие. Так, например, курсив придает тексту некую торжественность, жирное начертание указывает на важность информации, а свойство font-variant: small-caps придает определенной изысканности.

С засечками или без

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

Обратите внимание, что использование рубленого шрифта (Sans Serif) все же оправдано:

• Когда читатели - дети.
• При яркой акцентной цветовой палитре.
• Если текст узкий или слишком маленький.

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

Большие шрифты

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

Засечки возвращаются

Шрифты с засечками — это хорошо забытое старое, которое в последнее время стало настолько популярным, что превратилось в совершенно новое. Большие шрифты с засечками — символ 2018 года! Так что доставайте с полки всеми забытый Clarendon, он вам еще пригодится!

Типографика за рамками стандартных макетов

Тенденции говорят о том, что шрифты, нарисованные кистью теряют в популярности. Мир веба завоевывают 3D -начертания, иллюстрированные шрифты, анимированные, более живые буквы. Дизайнеры без раздумий отказываются от макетов с классической сеткой. Тексты на сайтах все больше походят на типографику в издательском дизайне. Скажем «Спасибо!» прогрессивной стандартизации Flexbox и CSS Grids и появлению переменных шрифтов.

Первые роли тексту

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

Оформление текста

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

Эволюция абзаца

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

Типографические тренды 2018

Вот немного о том, какие типографические тренды царят в 2018 году: