Рецепты хорошей типографики

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

Содержание

1. Дефисы, тире, минусы и другие палочки
2. Кавычки и чёрточки
3. Скобки
4. Многоточие
5. Заголовки, списки

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

Почему‐то не работает тег <cоdе>…</cоdе>, поэтому рекомендую набирать все коды символов вручную, а не копировать из текста.

1. Дефисы, тире, минусы и другие палочки

Дефис (‐) — это символ U+2010 (&#х2010; в HTML).

Правильно	Неправильно
Кое‐кто Что‐нибудь Светло‐серый Никотинамидадениндинуклеотид‐фосфат (предпочтительней писать названия химических веществ так: никотинамидадениндинуклеотид фосфата) Сами‐Знаете‐Кто	Кое ‐ кто (отбивка пробелами) Светло-серый (другой, похожий по начертанию знак)

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

Цифровая черта (figure dash, ‒) — служит для разделения цифр в телефонных номерах. По своей сути это не минус, т.к. в номере телефона не производятся математические действия. Это символ U+2012 (&#х2012; в HTML).

Правильное написание телефонных номеров:

Местные номера	С кодом города	С кодом страны и города	Мобильные телефоны
123‒45‒67 12‒34‒56 1‒23‒45 12‒34	(123) 123‒45‒67 (1234) 12‒34‒56 (12345) 1‒23‒45 (123456) 12‒34	+7 123 123‒45‒67 +7 (123) 123‒45‒67	8 123 456‒78‒90

Неправильное употребление:

• 123—45—67 (использование тире или других похожих по начертанию знаков)
• 123 45 67 (использование пробелов)
• 123 ‒ 45 ‒ 67 (отбивка пробелами)

Также нельзя отбивать скобками код оператора в номере мобильного телефона: 8 (987) 123‒45‒67

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

Пример:

• эн&shу;цик&shу;ло&shу;пе&shу;дия
• никотин&shу;амид&shу;аденин&shу;динуклеотид фос&shу;фатa

Короткое тире (–, en dash, чёрточка шириной с букву «n», &ndаsh;) и длинное тире (—, em dash, чёрточка шириной с букву «M», &mdаsh;) — символы всем известны. Отмечу лишь, что в русской типографике рекомендуется использовать только длинное тире.

Статья по теме: Чёрточки: только ли тире, минус и дефис?

2. Кавычки и чёрточки

Кавычка (", U+0022, &#х0022; в HTML) — в Unicode имеет название «QUOTATION MARK». Не является ни кавычкой, ни знаком дюйма, ни знаком угловых секунд. Используется в программировании. Разрешается использовать только в том случае, если нет возможности заменить на другой знак. Соответственно любое употребление в тексте ошибочно.

Апостро́ф (', U+0027, &#х0027; в HTML) — на самом деле не является апострофом, в Unicode имеет название «APOSTROPHE», но его употребление в тексте также не рекомендуется. Этот знак не является знаком фута или знаком угловых минут. Используется в программировании.

UPD: Спасибо хабраюзеру Qbit за подробную справку:

>Почему кавычка — не кавычка, а апостроф — не апостроф?

По историческим причинам. Во времена телетайпов кодировки были маленькими, клавиатурные раскладки бедными. Один и тот же символ заменял открывающую английскую двойную кавычку, закрывающую английскую двойную кавычку, дюймы, etc. При переходе к Юникоду обратную совместимость не стали ломать, и клавиша рядом с Enter'ом по прежнему печатает этот «усреднённый» символ. А для правильных знаков введены самостоятельные code points. Популярность старого «искусственного» недосимвола вызвана тем, что он есть на клавиатурной раскладке, а правильных знаков — нет. Поэтому в быту (в аське, в постах, в SMS) используется «программистская кавычка». Но серьёзная типографика должна учитывать различия этих знаков — как разницу в семантике, так и во внешнем виде.

Например, в гарнитуре Times New Roman эти символы имеют совершенно разное начертание:
открывающая английская двойная кавычка: «две-шестёрки-вверху»
закрывающая английская двойная кавычка: «две-девятки-вверху»
дюймы: два наклонных штриха в ви��е клина (не закорючки)
«программистская кавычка»: два прямых клина, утолщённых сверху.

Французские кавычки («ёлочки», U+00AB и U+00BB, &lаquо; и &rаquо; в HTML) — традиционные кавычки в русской типографике.

Правильно	Неправильно
Книга «Мёртвые души» Образовательное учреждение «Центр образования «Звёздочка» Толстый кот любил поговаривать: «Ребята, давайте жить дружно!»	Книга Мёртвые души Книга Мёртвые души Образовательное учреждение «Центр образования «Звёздочка»» Толстый кот любил поговаривать: " Ребята, давайте жить дружно!"

Немецкие кавычки („лапки“, U+201E и U+201C, &bdquо; и &ldquо; в HTML) — традиционные вложенные кавычки, или кавычки второго рисунка.

Правильно	Неправильно
НИИ «РНЦ „РусАтом“»	НИИ „РНЦ «РусАтом»“

Английские одинарные кавычки (‘ма́рровские’, U+2018 и U+2019, &lsquо; и &rsquо; в HTML) — используются филологами при составлении словарей (как показывает практика, используются не всегда). В обычных текстах не употребляются.

Правильно:

• От латинского appellatio ‘сообщение’
• Со словом ‘посёлок’ не склоняется

Апостро́ф (’, U+2019, &rsquо; в HTML) — английская одинарная закрывающая кавычка. Чаще всего используется в иностранных именах и наращениях.

Правильно	Неправильно
Д’Артаньян, Сара О’Коннор Intel’овский процессор	Д'Артаньян, Сара О'Коннор Intel'овский процессор

Знак ударения, аку́т (´, U+0301, &асutе; в HTML) — используется только в тех случаях, когда от ударения зависит смысл слова. Также употребляется с любыми словами в букварях. Символ ставится после ударной гласной.

Пример:

• Река у́же. Бо́льшая часть.

UPD: Шрифты Verdana плохо обрабатывает знак ударения, но в версии 5.01 глюк с акутом исправлен. Если вы видите знак ударения не над ударной гласной, обновите шрифт. Можно скачать целиком или обновить для Win.

Знаки минуты и секунды, фута и дюйма (′и ″, U+2032 и U+2033, &рrimе; и &Рrimе; в HTML) — употребляются только для обозначений угловых минут и секунд, в русской типографике футы и дюймы рекомендуется обозначать словами.

Правильно	Неправильно
59° 57′ 00″	59° 57' 00"

Статья по теме: Штрихи, штришки и штришочки

3. Скобки

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

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

Правильно	Неправильно
Сегодня в Москве (утром) шёл снег. Река вышла из берегов (навсегда). Кролики (такие животные) — это не только ценный мех… Река вышла из берегов. (В этом году выпало рекордное количество осадков.) КОТ: (осторожно) Аня, что ты задумала?	Сегодня в Москве ( утром ) шёл снег. Кролики (такие животные)— это не только ценный мех… (В этом году выпало рекордное количество осадков). КОТ: (осторожно) Аня, что ты задумала?

4. Многоточие

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

5. Заголовки, списки

5.1. Заголовки

Существует несколько правил оформления заголовков:

• Заголовок должен выделяться на фоне основного текста
• Должна существовать чёткая иерархия: шрифт основного заголовка больше, чем шрифт любого вложенного
• Нельзя подчёркивать заголовки, если они не являются ссылками

Правильно	Неправильно
Верхний заголовок Подзаголовок Основной текст.	Верхний заголовок. Подзаголовок. Основной текст.

5.2. Списки

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

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

Хабр предлагает только один тип нумерованного списка и один тип маркированного. Даже при таком раскладе можно добиться верного построения вложенных списков путём их смешивания:

Lorem Ipsum Dolor Sit Amet

Lorem Ipsum Dolor Sit Amet

Помимо привычных маркеров‐кругов и квадратов есть так называемый «чёрточный буллит»: &#х2043;, «⁃». Вообще не существует определённого правила, каким должен быть маркер, поэтому вы можете поставить даже картинку.

Заключение

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

Красивых вам текстов :)