Pull to refresh

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

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

Содержание

  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
    1. Dolor
    2. Sit
  • Amet

  1. Lorem
  2. Ipsum
    • Dolor
    • Sit
  3. Amet



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

Заключение


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

Красивых вам текстов :)
Tags: Типографикатекстысправочниктиредефискавычкимноготочиескобкимаркерыжелтая резиновая уточка
Hubs: Typography
Total votes 154: ↑133 and ↓21 +112
Comments 90
Comments Comments 90