Блог студии 77

Типографика в вебе

5 сентября 2016

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

ПУНКТУАЦИЯ

Проводим тонкую грань между дефисами, тире, черточками и минусом.

Дефис

Дефис (-) – та самая горизонтальная черточка, набираемая с клавиатуры по-умолчанию. Употребляется:

  • для присоединения префиксов: во-вторых, по-украински;
  • для присоединения частиц: кто-нибудь, что-то;
  • в роли знака сокращения: ф-ция, р-н;
  • в сложносоставных словах и сочетаниях: промо-сайт, интернет-магазин;
  • в странных фамилиях: Новиков-Прибой, Салтыков-Щедрин, Мамин-Сибиряк;
  • при наращении числительных: 1-й, 2-го;
  • в телефонных номерах.
ПравильноНеправильно
+ 38 050 123-45-67+ 38 050 123—45—67
+ 38 097 495 - 73 - 02

Дефис не отбивается пробелами:

ПравильноНеправильно
Кое-чтоКое - что (с пробелами)

Минус

Минус (−) – используется только в математических выражениях. Как и дефис, короткое и длинное тире – длина минуса варьируется взависимости от шрифта. Тем не менее, минус длиннее дефиса, но короче тире.

Короткое и длинное тире

Короткое тире (–) – по ширине можно сравнить с буквой «n». Спецсимвол – &ndаsh;.

Длинное тире (—) – по ширине равна букве «М». Спецсимвол – &mdаsh;.

В редакционной политике нашей студии принято использовать короткое тире.

Кавычки: «елочки» и „лапки“

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

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

Остальные виды кавычек используются крайне редко.

ПравильноНеправильно
мама сказала дочке: «Завтра мы идем в танцевальную студию „Н“ и это не обсуждается»мама сказала дочке: “Завтра мы идем в танцевальную студию «Н» и это не обсуждается”

Скобки

Основные правила:

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

Двойные пробелы

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

НАРАЩЕНИЕ ОКОНЧАНИЙ ЧИСЛИТЕЛЬНЫМ

Неправильное наращение окончаний числительных добавляет «дегтя» даже в идеальный текст. Читаешь статью, вроде все хорошо и тут: «в 2016 ом году наша компания…» – разбила все впечатления о себе незнанием правил написания числительных.

Чтобы этого не случилось, рекомендуем выучить эти легкие правила.

Порядковые числительные

Всегда пишутся через дефис. Вот так: «в 2016-м».

Непозволительно устанавливать «свои» правила и писать по типу: «в 2016-ом», «в 2016 м», «в 2016 ом».

Количественные числительные

Пишутся без наращения. Употребляйте их на письме в виде слова или цифры. Вот так: «В течении десяти» или «В течении 10».

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

Не числительные

Слова наподобие «десятка», «сотня» – нельзя писать с наращением «10-ка», «100-ня».

Число-летний

Чтобы правильно написать количество лет с наращением, нужно запомнить два правила. Первое – слова по типу «пятилетний», «двадцатилетний» – пишутся слитно. Второе – поэтому они сокращаются так: «5-летний», «20-летний». Легче усвоить правила добавления окончаний к числительным можно, если на рабочем месте повесить вот такую таблицу:
первый1-й1-го1-му1-й1-мо 1-м
первая1-я1-й1-й1-я1-йо 1-й
первое1-е1-го1-му1-е1-мо 1-м
первые1-е1-х1-м1-е1-мио 1-х

ИСПОЛЬЗОВАНИЕ ПРОПИСНЫХ БУКВ

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

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

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

Строчные и прописные буквы

Важный момент! Разряжать допускается только прописные буквы. Иначе возникнет другая проблема – огромное расстояние между символами.

ПОДЧЕРКИВАНИЕ

Будем кратки. Подчеркивание используется только для ссылок. Следуйте этой норме и выбросьте привычку подчеркивать ради подчеркивания. Чтобы ссылка не бросалась в глаза, а тонко напоминала о себе, вместо ярко-синей сделайте ее бледно-синей.

ОФОРМЛЕНИЕ ССЫЛОК

Ссылки по типу «Читать далее» и «Подробнее» считаются признаком невнимательного отношения к содержанию. Подчеркнуть важность сообщения и одновременно отобразить ссылку можно, если сделать кликабельным заголовок или часть абзаца. Анонс статьи – это самостоятельный текст. Если его не грамотно обрезать, он не выполнит свою главную миссию – не заинтересует читателя.

ПравильноНеправильно
«Фабрика мебели «Н» выпустила линейку современных диванов в украинском стиле. Первым заказчиком стал известный украинский телеканал»«Фабрика мебели «Н» выпустила линейку современных диванов в «Читать далее»

КРАСНАЯ СТРОКА

Под «красной строкой» подразумевают первую строку абзаца, которая начинается с отступа. По правилам старой русской типографики, красная строка – это строка с буквицей. Современное использование красной строки – обычный отступ. Стандартного размера расстояния от поля до начала абзацной строки нет. Единственный с тандарт – ее соблюдение. Ведь с отступами текст выглядит приятнее.

ШРИФТЫ

Используйте стандартные шрифты. Какими скучными они бы не казались, они выглядят и читаются здорово. Декоративные шрифты не для этого случая. В статье для сайта не должно быть более 2 шрифтов. Это смотрится безвкусно. Также не «наряжайте» каждую букву в отдельный цвет. Выделяйте таким образом только важную информацию. Здесь также лучше обойтись парой цветов. Соблюдайте правила контраста, как в шрифтах (к примеру, чередуйте шрифты с засечками и без), так и в цветовом оформлении (к примеру, чередуйте холодные цвета с тёплыми). Оптимальный размер шрифта для веб – 14-18 px. Длину строки удерживайте в пределах 45-75 символов.

МЕСТОИМЕНИЯ: ВЫ, ВАМ, ВАШ

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

И кстати, слово «интернет» также пишется с маленькой буквы. Это не имя собственное. Так, что не поддавайтесь на уловки автоисправления.

ОБОЗНАЧЕНИЕ ЭЛЕМЕНТОВ СПИСКА

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

Простой переченьСоставной перечень
Мебель бытовая:
  • для жилых комнат;
  • для кухни;
  • для ванной, террасы;
  • для различных помещений.
  1. Для жилых комнат:
    1. Шкафы:
      • встроенные;
      • корпусные.
    2. Тумбы;
    3. Столы;
    4. Диваны.
  2. Для кухни:

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

ТОЧКИ И ТОЧКА С ЗАПЯТОЙ В СПИСКАХ

Когда заголовок предполагает последующее членение текста, в конце него ставится двоеточие, если же последующего членения не будет, ставится точка.

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

ПростыеСложные
Мебель бытовая:
  1. Для кухни:
    • шкафы,
    • столы,
    • табуреты.
Мебель бытовая:
  1. Для кухни:
    • шкафы, разукрашенные цветами;
    • столы, сделанные из натурального дерева;
    • табуреты, изготовленные из ДСП, металла и пластмасс.

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

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

Типографика в вебе

Другие статьи автора: