Типографика веб сайта: Полный список правил

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

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

Когда графический дизайнер разрабатывает дизайн сайта, типографике посвящается отдельная страница, где демонстрируются такие типичные элементы, как заголовки, абзацы, ссылки и т. д. Такую же страницу вы скорее всего найдете на демонстративном адресе покупаемого шаблона CMS, например: https://cassiopeia.joomla.com/typography

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

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

Отступы веб-страницы

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

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

Если вы используете CMS (например WordPress или Joomla), а не верстаете свой сайт на чистом HTML (что мало вероятно), скорее всего в вашей теме (шаблоне) уже установлены такие отступы, и вам не нужно ничего для этого делать дополнительно.

Все же отступы страницы — неотъемлемый элемент типографики, о котором необходимо знать.

Ширина контейнера страницы

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

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

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

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

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

Тонкий контейнер текста достигается установлением максимальной ширины в коде сайта (например через файлы CSS). Удобной считается ширина контейнера основного текста примерно до 700px, что должно соответствовать 40-80 символам в одной строке.

Выравнивание текста

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

Заголовки могут выравниваться слева, или посередине.

Семейства шрифтов

Стандартные веб-шрифты

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

Согласно w3schools.com, безопасными шрифтами являются:

• Arial (sans-serif);
• Verdana (sans-serif);
• Tahoma (sans-serif);
• Trebuchet MS (sans-serif);
• Times New Roman (serif);
• Georgia (serif);
• Garamond (serif);
• Courier New (monospace);
• Brush Script MT (cursive).

Шрифты Google

https://fonts.google.com/ - Это бесплатные шрифты, их гораздо больше по сравнению со стандартными. На странице конкретного шрифта, вы можете детально ознакомиться с информацией о шрифте, в том числе о правилах использования (вкладка About & License).

Чтобы подключить Google-шрифт на ваш сайт, вам необходимо добавить в head ссылку на шрифт (1), и указать в CSS семейство шрифта для выбранного элемента (2).

Вот как будет выглядеть подключение шрифта Roboto:

1) Вставляем ссылку на шрифт в пределах тегов <head>...</head>:
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic">
</head>

2) Применяем шрифт к элементам сайта в файле CSS, например к заголовкам:
h1, h2, h3, h4, h5, h6 {font-family: 'Roboto', sans-serif;}

Таким путем, мы подключили шрифт Roboto к сайту, и применили его ко всем типам заголовков (с H1 по H6).

Большинство современных браузеров поддерживают Google шрифты. Описанный выше способ добавления шрифта на сайт является рекомендуемым, так как вы ссылаетесь непосредственно на источник. Однако, выбранный шрифт (или шрифты) лучше все же протестировать после добавления на ваш сайт во всех популярных браузерах.

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

Поскольку Google предлагает только один формат шрифтов при скачивании — TTF, при необходимости вы можете добавить другие форматы, такие как WOFF, EOT, SVG, воспользовавшись генератором https://www.fontsquirrel.com/tools/webfont-generator.

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

К примеру, мы попробовали применить шрифт Roboto на этом сайте. Мы протестировали на 3 сервисах страницу сайта:

1. С загруженным локально (с хостинга) файлами шрифта Roboto.
2. С загруженными с внешнего источника (Google) шрифтом.
3. Контрольный тест без дополнительных шрифтов.

PageSpeed Insights

Сервис проверки скорости загрузки сайта от Google выявил проблему со шрифтами только при тесте с первым условием (1) - с загруженными файлами шрифта локально. При остальных условиях (2 и 3) тест проблем со шрифтом не выявил.

Solarwinds

Solarwinds выявил дополнительную нагрузку в графе шрифтов, при непосредственной загрузке файлов шрифта Roboto (1). При других условиях (2 и 3) дополнительная нагрузка не обнаружена.

GTmetrix

GTmetrix показал аналогичный результат предыдущим сервисам. Если перейти во вкладки Waterfall > Fonts, мы увидим файлы загружаемых шрифтов. В первом случае, кроме FontAwesome-файла, мы видим 3 дополнительных файла. Все три файла относятся к Roboto, каждый отвечает за разную жирность, что понятно из названий файлов. Мы видим какой в точности дополнительный вес имеет каждый из файлов.

Во втором тесте во вкладке Waterfall > Fonts файлы шрифтов не обнаружены. Шрифт все таки загружается, но только из внешнего источника. Чтобы убедится в этом нужно перейти во вкладку All, там вы найдете ранее добавленную в head ссылку на шрифт:

 

Третий тест без дополнительных шрифтов.

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

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

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

Скриншот страницы сайта The Washington Post

Если вы хотите узнать какой шрифт используется на том или ином сайте, вы можете посмотреть это через код выбранного элемента (кликнув на текст правой кнопкой мыши и нажав соответствующий пункт контекстного меню) или использовать специальные приложении, например: расширение WhatFonts для Chrome https://chrome.google.com/webstore/search/whatfont

Как выбрать семейство шрифта?

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

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

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

Заголовки H1 — H6

Главный заголовок на странице сайта обозначается тегом H1. Обычно это самый крупный заголовок, размещенный вверху страницы. На веб-странице рекомендуется размещать только один заголовок с тегом H1.

Подзаголовки H2-H6, т.е. второго, третьего и других уровней, имеют меньший размер. Чем ниже уровень подзаголовка — тем меньше размер шрифта.

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

От основного текста, заголовки часто отличаются не только размером (кеглем), но и жирностью шрифта. Более жирный шрифт выглядит более броским.

В CSS жирность шрифта обозначается цифрами (900, 700, 600, 500, 400) или словами (bolder, bold). Цифры имеют более точную настройку, но предусмотрены далеко не во всех семействах шрифтов, также зависят от установленных на сайте файлов шрифтов. Однако, значения “bold, bolder” — универсальны, и применимы ко всем семействам.

Кегль (размер шрифта)

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

Заголовок H1 – самый крупный текст на странице. Подзаголовки H2-H6 соответственно меньше, каждый согласно его иерархии.

Подзаголовки уровня H4-H6 на практике обычно используется реже, чем H2-H3. Вы должны понимать сколько уровней подзаголовков планируете использовать. К примеру, если вы планируете использовать всего один уровень подзаголовка, лучше чтобы он смотрелся контрастно по отношению к главному заголовку, и по отношению к основному тексту. Допустим таким заголовком будет H2, тогда он должен быть чем-то средним между главным заголовком и основным текстом.

Кегль главного заголовка страницы H1 может быть примерно в 2 раза больше, чем кегль основного текста. Кегль среднего подзаголовка (H2 или H3) может быть примерно в 1.5 раза больше. Т.е. к примеру, если основной текст = 16px, тогда главный заголовок может быть 32px, а средник заголовок — около 24px.

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

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

https://fonts.google.com/specimen/Roboto/tester
На сайте Google шрифтов, вы также можете протестировать внешний вид выбранного шрифта, включая заголовки. В примере выбран популярный шрифт Roboto. В визуальном редакторе, кроме основного текста, вы можете посмотреть как выглядят заголовки H1 – H3.

https://fontjoy.com/
Сервис который случайным образом подбирает три вида шрифтов: для заголовка, подзаголовка и основного текста. Каждый уровень имеет свой кегль.

Цвет текста и фона

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

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

Цвет текста должен контрастировать фону. Если фон белый — текст должен быть черным, или темных оттенков. И наоборот. Большинство сайтов придерживается этих простых правил.

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

Абзацы

Расстояние между абзацами (интерпараграфное расстояние)

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

Как правило, технически отступ достигается не проставлением пустой строки, а заданным отступам в коде сайта (в CSS файлах) для тега <p>.

Тег <p> - это тег применяем для обозначения абзаца в HTML-разметке. Если в визуальном редакторе вашей CMS вы отделите абзац нажатием на Enter, скорее всего новый абзац обозначится именно этим тегом - <p>...</p>.

Не стоит на веб страницах, в начале каждого абзаца делать отступ слева, в первом предложении, подобно тому как это делают в книгах.

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

Количество строк в абзаце

Строк в абзаце не должно быть слишком много, так как длинные абзацы воспринимаются труднее. Оптимальным считается абзац не более 5-10 строк.

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

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

Межстрочные интервалы

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

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

Ориентировочные рекомендации установки междустрочного интервала для основного текста ~ 1.5, для заголовков ~ 1.2. 

Цифра 1.5 - это коэффициент умножения. Если к примеру размер шрифта будет 20 px, то установленный междустрочный интервал в 1.5 будет равняться 35 px. Многие современные блоги устанавливают коэффициент побольше, например 1.7 или даже 1.9.

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

Жирность, курсив, подчеркивание, подсвечивание

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

Как и читатели, Google также обращает внимание на жирные слова, что может иметь значение для SEO.

Ссылки

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

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

Изображения, видео, графики

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

Расположение фотографий в статье, обтекаемых текстом слева или справа, выглядит старомодно. Расположение картинки по всей ширине — более современный формат.

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

Как уменьшить размер фото в МБ

Нумерованные списки

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

1. Для единства стиля, следует придерживаться одного типа нумерации в рамках одной страницы. Например: арабские цифры, (1, 2, 3), римские (I, II, III), буквы (a, b, c), или другие символы.
2. Отступы. Текст пунктов нумерованного списка обычно имеет дополнительный отступ слева. Визуально выглядит примерно как 2-3 пробела.
3. Единый стиль пунктов списка. Например, если вы начали список с заглавной буквы, оформите таким образом и остальные пункты списка. Если использовали точки в конце одного пункта, то делайте это для всех пунктов.

Таблицы

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

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

Например, вы можете:

• Предоставить информацию как нумерованный список, или другой, более простой текстовый формат.
• Сделать скриншот, и вместо текстового формата добавить изображение таблицы, которое автоматически будет подстраиваться под ширину экрана (в этом случае поисковые системы не смогут считать текст и цифры в таблице).
• Поместить таблицу в блоке со скролом. Таким образом полоса прокрутки не будет автоматически появляются внизу страницы сайта. Скрол будет непосредственно под таблицей, при этом не сможет влиять на общую ширину страницы.
• Выстроить адаптивную таблицу без использования тега <table>, а с помощью других тегов, которые могут менять порядок блоков, подстраиваясь под экран, например тег <div> и свойство «display:grid” (для этого необходимо разбираться в HTML и CSS).

Цитаты

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

В HTML есть специальный тег предназначенный для цитаты - "blockquote". Таким образом, все что вам нужно — это поместить цитируемый текст между тегами <blockquote> ...</blockquote>, и задать стиль для blockquote в CSS-файле.

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

Задавать отдельный стиль для цитаты (например другой шрифт, или фон) непосредственно в HTML (через элемент style) не совсем корректно. Обычно такая ошибка оформления происходит, когда пользователь пытается менять стиль текста, используя инструменты визуального редактора так, как он это привык делать в программах типа Word (например меняет цвет и размер шрифта), и не обращает внимания на исходный код. Таким образом, новичок нагромождая основной текст лишним кодом. При таком способе стилизации, пользователю придется изменять стиль в HTML для каждой цитаты, что не очень удобно. Таким образом страница получит дополнительный вес от повторяемого кода, а пользователь потратите больше времени на публикацию.

Специально выделенные блоки

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

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

Нет строгих правил относительно дизайна специального блока. Но общие правила типографики конкретной страницы должны быть соблюдены:

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

Содержание как элемент навигации

Для удобства навигации в статье вы можете добавить содержание в начале статьи. Это поможет пользователям ориентироваться на странице.

Пункты содержания будут еще более удобными, если добавить к ним якорные ссылки.

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

Как установить якорные ссылки в CMS Joomla

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

Если ваши мысли, идеи — это наполнение, то типографика — это форма, сосуд, или даже — упаковка. Упакуйте контент вашего сайта так, чтобы донести его идеи как можно лучше.