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

размещено в: Техподдержка для клиентов | 0

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

razgovor-o-shriftach

Введение в типографику

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

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

Правила экранной типографики

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

Внешний вид букв

При создании сайта, веб мастером задаются шрифты, которые будут использоваться по умолчанию. Тем не менее в текстовом редакторе остается возможность выбрать другой шрифт, чего делать не рекомендуется. Гораздо лучше, когда во всех статьях используется одинаковый шрифт. Чтобы текст удобно читался на смартфонах и больших мониторах, размер букв устанавливайте на 16–18 пикселов. Расстояние между строчками 150 – 180% высоты букв.

Жирное начертание используется для выделения коротких фраз до 2-3 слов. Для выделения заголовков применяются настройки тегов H1 – H6. Тег H1 имеет размер больший, чем тег H2. Внешний вид H3 мельче H2, и так до H6. Тонкий курсив предназначен для выделения коротких фраз с меньшим акцентом. Текст с подчеркиванием используется только для обозначения активных ссылок. Присваивать отдельным предложениям другой цвет не рекомендуется. Иначе статья будет выглядеть как пестрая вышиванка.

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

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

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

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

  • с его компьютера
  • с хостинга, на котором находится ваш сайт
  • или с серверов Google

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

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

Секунда экономится, если использовать безопасные системные шрифты, которые установлены по умолчанию на ПК и смартфонах. На своем сайте, в качестве основного, я использую Verdana и гарнитуру с засечками Times New Roman.

Выбор определяется тем, что шрифт Verdana созданный для компании Microsoft и оптимизирован для отображения на экранах. При длительном чтении глаза не устают. Он присутствует на устройствах Windows и Mac OS. Гарнитура Times New Roman устанавливается в компьютеры с 90-х годов прошлого века, начиная с Microsoft Windows 3.1. Этот шрифт используется правительством США для печати официальных документов.

Распределение строк

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

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

  • Первый пункт
  • Второй пункт

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

  1. Посмотрите пункт 1
  2. Прочитайте пункт 2
  3. Аргумент пункта 3

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

Расстановка знаков препинания

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

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