Позвоните нам
8 800 555-23-46
звонок по Роcсии бесплатный
+7 (495) 580 30 45 Москва
+7 (8442) 98 54 54 Волгоград
+7 (917) 338 51 54
Все контакты и офисы
Напишите нам: info@onvolga.ru

Спросить онлайн

Типографика на сайте

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

Типографика (от греч. τύπος — отпечаток + γράφω — пишу) — графическое оформление текста посредством его набора и верстки в соответствии с правилами и нормами, применяемыми для конкретного языка.

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

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

Текст, который пользователь захочет прочесть еще не вникая в его смысл, как правило, отвечает таким характеристикам как:

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

Пример печатного и электронного текста - «серебро набора»

Пример печатного и электронного текста - «серебро набора»

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

Различимость — используется для характеристики текста в условиях пониженной видимости и/или ограниченного времени прочтения.

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

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

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

Шрифт — набор символов определенного размера и рисунка.

Кегль — размер знака (буквы) по вертикали, включая ее верхние и нижние выносные элементы. Иногда вместо термина «кегль» используется термин «размер шрифта». Измеряется в типографских пунктах (pt).

Интерлиньяж — расстояние между базовыми линиями соседних строк или междустрочный пробел. В компьютерной верстке также используется термин «межстрочный интервал».

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

Трекинг — равномерное изменение расстояния между знаками (межбуквенных пробелов).

Висячая строка — неполная строка (меньше 2/3 длины полной строки) в начале или в конце абзаца. Если одно слово или очень короткая строка приходится на конец абзаца или страницы соответственно, то такие строки называют «вдовами». «Сирота» - висячая строка, расположенная в начале новой колонки или страницы.

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

Абзац — фрагмент текста, выражающий законченную мысль.

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

Глиф —  конкретное графическое отображение графемы.

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

Правила веб-типографики

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

Правильно выбираем шрифт

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

1. Обращайте внимание на гарнитуру

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

 Пример шрифта антикваПример шрифта гротеск

Визуальное отличие антиквы и гротеска

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

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

2. Грамотно сочетайте разные шрифты

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

3. Не пренебрегайте начертанием

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

  • нормальное (normal),
  • курсивное (italic),
  • полужирное (demi bold),
  • жирное (bold),
  • жирное курсивное (bold italic),
  • сверхжирное (extra bold),
  • светлое (light),
  • сверхсветлое (extra light),
  • узкое (narrow).

 Различные варианты начертания шрифта

Различные варианты начертания шрифта

Варьируя различными вариантами начертания можно добиться визуально «нескучного» текста даже в рамках стандартного шрифта. Но, опять же — не более 3-х в одном тексте.

4. Шрифт должен отображаться у всех пользователей

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

Есть несколько вариантов избежать подобной ситуации:

  • превратить специальный шрифт в изображение и загрузить его на сайт (что скорее «не есть хорошо»);
  • использовать шрифты с ресурсов с fonts.google.com и webfont.ru

Правильно набираем и верстаем текст

5. Размер имеет значение

Размер основного текста на сайте не должен быть меньше 12 пикселей, а дополнительного текста - не менее 10 пикселей. Рекомендуемые значения - в пределах 14–18 пикселей.

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

Заголовки и подзаголовки имеют свою иерархию и разбиваются на шесть уровней по степени важности (H1, H2, H3, H4, H5, Н6). Соответственно размеры шрифта заголовков и подзаголовков должны поддерживать эту иерархию, т.е. размер H3 не может быть больше размера H1. И, безусловно, размер шрифта любого подзаголовка должен быть больше размера основного текста.

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

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

7. Это необычное слово «интерлиньяж»

Помимо размера шрифта и длины строки влияние на восприятие текста оказывает расстояние между строками. Оптимальное значение данной характеристики при верстке текста должно быть равно или чуть больше размера шрифта. Иными словами, текст должен «дышать». Рекомендуемые соотношения примерно таковы:

Абзацный отступ/интерлиньяж = 0,8
Интерлиньяж/размер основного текста = 1,5
Длина строки/интерлиньяж = 28

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

8. Цвет текста

Цвет текста и цвет фона рекомендуется делать контрастными по отношению друг к другу для лучшей различимости текста. Для текстов с небольшим размером шрифта минимальный коэффициент контраста текста к фону имеет соотношение 4,5:1, а для текстов с крупным шрифтом (от 14 полужирным или от 18 стандартным) - 3:1 соответственно. При этом не стоит перебарщивать: слишком высокая контрастность создаст дополнительную нагрузку при чтении и даже вызовет раздражение читателя. Классическое и самое популярное решение — темный текст и светлый фон. После выбора цветовой гаммы шрифта и фона предложите потенциальным пользователям прочесть текст и отследите их реакцию, а также возможные трудности с распознаванием текста. Для людей с ограниченными возможностями зрения рекомендуется интегрировать на сайт версию для слабовидящих.

Примеры контрастности шрифта и фона

Примеры различимости текста

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

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

9. Направо пойдёшь – коня потеряешь...

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

10. Дьявол кроется в деталях или микротипографика

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

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

11. Соблюдайте единообразие

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

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

«А мы тут плюшками балуемся...»

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

www.anotherpony.com

Anotherpony

crudo.nl

Crudo

www.designdisruptors.com

 Designdisruptors

www.hermesemployeur.com

Hermesemployeur

Index-std.com

Index-std

melaniedaveid.com

Melaniedaveid

moonshinegrill.com

Moonshinegrill

www.rufinaehijas.com

Rufinaehijas

species-in-pieces.com

Species-in-pieces

theestatetrentham.com.au

Theestatetrentham

 Ваш запрос или вопрос по теме:

Интернет-агентство сегодня:

ТОП20 веб-студий России по разработке интернет-магазинов по доступной цене в рейтинге CMSMagazine, 1 место в ЮФО и ТОП10 Центрального ФО.

ТОП100 веб-студий Партнеров Битрикса по созданию интернет-магазинов и 11 место среди разработчиков интернет-магазинов на Битриксе по низким ценам в рейтинге РейтингРунета-2016.

ТОП10 разработчиков интернет-магазинов Москвы по доступной цене в рейтинге РейтингРунета.

ТОП120 SEO-компаний России, специализирующихся на поисковом продвижении интернет-магазинов по версии РейтингРунета.

Золотой Сертифицированный Партнер 1С-Битрикс.

Государственная аккредитация в области информационных технологий (№5291 Министерства связи РФ).

Отзывы о веб-студии

Митрофанов Кирилл, интернет-магазин косметики, Симферополь

Благодарим Центр интернет-решений и технологий "ONVOLGA" за создание интернет-магазина!

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

Все отзывы о веб-студии

ПОЛУЧИТЕ БЕСПЛАТНУЮ КОНСУЛЬТАЦИЮ или ОТПРАВЬТЕ ЗАПРОС

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