Типографика и верстка – Артём Горбунов. Типографика и вёрстка. Электронный учебник

Артём Горбунов. Типографика и вёрстка. Электронный учебник

Максим Ильяхов, ответственный редактор бюро

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

Илья Бирман, арт-директор бюро

«Другие книги о типографике и вёрстке, которые я прочёл, помогают повысить разрешение, но не дают ответа на вопрос, как именно нужно делать. С одной стороны, это правильно, ведь можно делать как угодно. С другой стороны, по таким книгам крайне трудно научиться. Книга Артёма даёт внятный свод правил. Творческие муки заменяются на непростой, но уверенно ведущий к результату процесс. Правила можно нарушать — но потом. Все электронные книги, которые я читал раньше, были всего лишь адаптацией бумажных книг под экран. Закладки, поиск и другие функции были надстройкой к обычному тексту с картинками. „Типографика и вёрстка“ — настоящая электронная книга, использующая технологии не только в обёртке, но и для самого изложения. Когда читаешь „увеличим расстояние между буквами“, и на иллюстрации буквы плавно расступаются, — это настоящая магия. Все дизайнеры должны прочитать »

Михаил Нозик, ведущий дизайнер бюро

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

bureau.ru

«Типографика и вёрстка» А. Горбунов – Дизайн-кабак

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

Анимация открытия книги «Типографика и вёрстка» А. Горбунова

Если вы изучали иностранный язык, то знаете, что выучить все слова из словаря не достаточно. Чтобы строить предложения из этих слов, нужно знать грамматику: члены предложения, их порядок, времена и формы их образования и т. д.
В дизайне тоже самое — чтобы что-то правильно спроектировать, нужно знать грамматику (или как это называет Илья Бирман — синтаксис). В вебе это
модульная вёрстка, типографика и цветовая палитра. О первых двух и говорится в книге.

Модульность

Страница из книги «Типографика и вёрстка» А. Горбунов

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

Соотношения между этими прямоугольниками составляется либо «золотым сечением» (прямоугольник отсекается квадратом из другого прямоугольника «золотого сечения» ~1:1,618) или по основе линейки бумаги форматов ДИН (листы формата А4, А5 и т. д.).

Самые заметные прямоугольники (объекты) на странице, называются якорными и выделяются они за счёт пустого (негативного/контрпространства) пространства вокруг себя. Т. е. если объект привязан к правому верхнему углу, то больше пространства у объекта должно быть слева и снизу. Если объект привязан к центру макета, то контрапространство распределяется равномерно.

Идеальное расположение объектов:
1.Картинка;
2.Заголовок;
3.Текст;
4.Ссылки.

Ссылки можно совместить с заголовком, либо поместить заголовок на картинку и сделать её кликабельной.

Изображение должно быть сверху или сбоку от текста. И желательно, чтобы одна из его сторон была равна по высоте или по ширине тексту.

Теория близости

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

1. у Лебедева в «Теория близости»
2. более раскрыта тема у Горбунова в «Общей теории близости»
3. и посмотреть у Штанга в «Теория графического напряжения»

Пример решения проблем с вёрсткой

Страница из книги «Типографика и вёрстка» А. Горбунов

Цитаты из книги

«Текст — несжи­ма­е­мая жид­кость, при­ни­ма­ю­щая фор­му сосу­да. Версталь­щик опре­де­ля­ет фор­му, про­пор­ции и объ­ём кон­тей­не­ра, впус­ка­ет в него воз­дух, раз­де­ля­ет на сооб­ща­ю­щи­е­ся сосу­ды. Один и тот же текст запол­ня­ет ста­кан или рас­пол­за­ет­ся лужей по плос­ко­сти страницы».

«Кегль экран­но­го тек­ста обыч­но лежит в диа­па­зоне 12…16 пунк­тов, а интер­ли­ньяж — 1,2…1,4 от зна­че­ния кегля».

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

«Поля вокруг тек­ста долж­ны быть боль­ше меж­строч­ных про­све­тов»

«Иллюстра­ция — самый замет­ный якор­ный объ­ект. Гори­зон­таль­ная иллю­стра­ция выгля­дит естественно. Вер­ти­каль­ная иллю­стра­ция выгля­дит дина­мич­нее. Если кар­тин­ка име­ет чёт­ко выра­жен­ное направ­ле­ние, луч­ше, чтобы она «смот­ре­ла» на текст»

«В модуль­ной вёрст­ке свя­зан­ные эле­мен­ты согла­со­ва­ны по ширине и высо­те, и бла­го­да­ря это­му визу­аль­но объ­еди­ня­ют­ся в пря­мо­уголь­ный модуль».

Анимация закрытия книги «Типографика и вёрстка» А. Горбунов

Надеюсь эта заметка была вам полезной. Спасибо, за ваше внимание!

designpub.ru

Набор и верстка. Основы типографики

Федеральное агентство по образованию

Уральский государственный технический университет-УПИ

С.П. Арапова А.Г. Тягунов

Учебное пособие

Научный редактор канд. филол. наук доцент кафедры русского языка и литературы и методики их применения в специальной школе УрГПУ Н.Ю. Мухин

Рекомендована Методическим советом УГТУ-УПИ

для направления 261200 — Технология полиграфического и упаковочного производства

специальности 281400 — Технология полиграфического производства

Екатеринбург УГТУ-УПИ 2007

УДК 655.1 (076)

ББК 76.17

А 79

Рецензенты

О.Н. Кропачева, зам. директора ООО «Мегаполис Медиа»; В.В. Дроздецкий, директор ООО «Печатное Поле»

С.П. Арапова, А.Г. Тягунов

А 79 Набор и верстка. Основы типографики: учеб. пособие /С.П. Арапова, А.Г. Тягунов. Екатеринбург: УГТУ-УПИ, 2007. 210 с.

ISBN978-5-321-01218-5

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

Уделено внимание моделированию изданий с учетом дизайна их оформления.

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

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

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

УДК 655.1 (076)

ББК 76.17

ISBN978-5-321-01218-5 © Уральский государственный

технический университет-УПИ,

2007

Оглавление

1.ИЗДАТЕЛЬСКИЕ ТЕКСТОВЫЕ ОРИГИНАЛЫ И ПОДГОТОВКА ИХ К НАБОРУ 5

1.1.Виды текстовых оригиналов и требования к ним 5

1.2.Подготовка оригиналов к набору 8

1.3.Особенности оригиналов акциденции. Эскиз. Макет 13

2.КОРРЕКТУРА ТЕКСТА 16

2.1.Корректура издательская и типографская 17

2.2.Корректурные знаки и их применение 21

3.ОСНОВНЫЕ ВИДЫ ПЕЧАТНЫХ ИЗДАНИЙ И ИХ ОСОБЕННОСТИ 22

3.1.Виды печатных изданий 23

3.2.Основные конструктивные и оформительские элементы печатных изданий 28

3.3.Издательская информация 32

3.4.Акцидентная продукция 35

3.5.Виды изданий 38

4.ВЫБОР ФОРМАТА ИЗДАНИЙ 39

4.1.Форматы и варианты оформления изданий 39

4.2.Выбор формата для книг и журналов 42

4.3.Газетные форматные нормативы 48

4.4.Выбор формата календарей, листовой продукции, акциденции 49

5.Основы типографики. Единицы типометрии 51

5.1.Термин «типографика» 53

5.2.Единицы типометрии 54

6.Гарнитура шрифта 63

6.1.Определения: шрифтовой файл или гарнитура? 63

6.2.Рисунок шрифта и кегельная 64

6.3.Анатомия шрифта 67

6.4.Оптические особенности рисунка шрифта 73

6.5.Основные характеристики шрифта 75

6.6.Ролевая классификация шрифтов 81

6.7.Историческая классификация шрифтов 82

6.8.Варианты классификации шрифтов 85

7.Форматы шрифтовых файлов 97

7.1.Формат PostScript 98

7.2.Формат TrueType 99

7.3.Формат OpenType 100

7.4.Межплатформенная совместимость шрифтов 100

7.5.Проблемы комплекта знаков 101

7.6.Таблицы ASCII и Unicode 102

7.7.Поиск нужных знаков 104

7.8.Системы управления шрифтами 110

7.9.Редакторы шрифта 111

8.Основы применения шрифта 112

8.1.Удобочитаемость 112

8.2.Выделение фрагмента текста 117

8.3.Сжатые и растянутые шрифты 119

8.4.Акцидентные шрифты 120

8.5.Декоративные шрифты 121

8.6.Цветной текст 122

8.7.Выворотки 123

9.Основные правила и особенности набора текстов возрастающей сложности 124

9.1.Общие правила текстового набора на русском языке 124

9.2.Правила набора текстов 1-й–2-й групп сложности 131

9.3.Особенности набора текстов 3-й–4-й групп сложности 146

10.ОСНОВНЫЕ ПРАВИЛА ВЕРСТКИ 172

10.1.Правила книжной верстки сплошного, усложненного текста и текста с иллюстрациями 173

10.2.Технологические особенности журнальной верстки 185

10.3.Особенности газетной верстки 188

11.Качество верстки 193

11.1.Разборчивость и удобочитаемость 193

11.2.«Цвет» шрифта 194

11.3.Переносы и выключка 196

11.4.Выявление и проблем верстки 197

11.5.Коридоры в тексте 199

11.6.Кернинг и трекинг 199

11.7.Структура документа и правила типографики 203

12.Учебно-методическое обеспечение дисциплины 207

12.1.Рекомендуемая литература 207

1. ИЗДАТЕЛЬСКИЕ ТЕКСТОВЫЕ ОРИГИНАЛЫ И ПОДГОТОВКА ИХ К НАБОРУ

   1. Виды текстовых оригиналов и требования к ним

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

Все издательские оригиналы подразделяются на текстовые и изобразительные (иллюстрационные).

Текстовые оригиналы ОСТ 29.115-88в основном делятся на следующие виды:

1. машинописный,

2. полиграфический,

3. рукописный оригинал-макет,

4. репродуцируемый оригинал-макет (РОМ),

5. кодированный.

Машинописный издательский оригинал представляет собой отпечатанный, с соблюдением определенных требований, текст прорецензированной и отредактированной рукописи. Оригинал должен быть отпечатан на одной стороне листа бумаги форматом 210×297 мм. Бумага должна быть хорошего качества, чтобы при внесении дополнений или разметке оригиналов чернила не расплывались.

Текст должен быть отпечатан через два интервала; поля на странице оригинала — левое не менее 20 мм, правое — 10 мм, верхнее — 20 мм и нижнее не менее 20 мм. В одной полноформатной строке должно быть 56–57 знаков, включая пробелы, 30 строк на странице оригинала, тогда емкость такой страницы составит в среднем 1700 знаков, а емкость 24 таких страниц — 40 000 знаков.Авторский лист содержит 40 000 знаков.

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

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

Вычитка оригинала — важная задача обнаружения грамматических и стилистических ошибок и неточностей.

Печатный (полиграфический) оригинал.Полиграфический оригинал используется при переиздании. Для изготовления такого оригинала страницы книги наклеивают на одну сторону листов стандартной бумаги указанного размера. Многоколонные издания должны быть разрезаны по колонкам, точно скомплектованы по порядку следования текста и наклеены по одной колонке на стандартный лист бумаги. Шрифт должен быть не мельче кегля 10 п., нормальной плотности и прямого начертания. Оригиналы, напечатанные шрифтами узкого начертания и кеглем мельче 10 п., в производство не принимаются. Никаких исправлений и добавлений в полиграфический оригинал делать не разрешается; все страницы с добавлениями и исправлениями должны быть перепечатаны, вычитаны и включены в оригинал под общей нумерацией.

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

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

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

Для всех частей рассмотренных оригиналов, предназначенных для набора на другом оборудовании или другими способами, изготовляются дубликаты— оригиналы, представляющие собой точную копию частей основного оригинала (например, таблицы, формулы или части текста, которые предполагается набирать отдельно от основного оригинала). Такая технология используется и в настоящее время при фотонаборе и компьютерном наборе. Наличие дубликатов позволяет производить набор по основному оригиналу и дубликатам одновременно на разном оборудовании и соединять все тексты в процессе верстки автоматически или в диалоговом режиме. Все оригиналы подписываются «в набор»; подписной корректурой, разрешающей изготавливать печатную форму и печатать издание, являются оттиски сверстанных полос, подписываемые «в печать», или оригинал-макет, подписываемый одновременно «в набор и печать» или используемый для репродуцирования (РОМ). Изготовление репродуцируемого оригинал-макета с использованием НИС — это компьютерный набор, т.е. новый способ набора, для которого также обязательны все требования и правила набора и верстки.

Закодированный текстовой оригинал— электронный файл. Он может быть в трех видах.

1. Электронный файл.Может содержать текстовую информацию и сопровождаться распечаткой и необходимыми пояснениями. Использование файла освобождает от набора, но оригиналом считается распечатка текста для первой корректуры, вычитанная корректором-вычитчиком после необходимой редакционной правки, если она предусмотрена.

2. Закодированный оригинал-макет.Он может быть изготовлен в издательстве и готов для монтажа, хранения или передачи без изменения.

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

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

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

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

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

Репродуцируемый оригинал-макет (РОМ) используется для фотографирования, если он изготовлен на бумаге, а также для копировальных процессов или контактного копирования, если он изготовлен на прозрачной основе. Репродуцируемый оригинал-макет может содержать иллюстрации, если он изготовлен на компьютерных издательских системах (КИС), или для иллюстраций могут быть оставлены места на полосах, в которые они монтируются при монтаже (традиционном или электронном).

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

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

studfiles.net

Курс Игоря Штанга «Типографика и вёрстка»

Сходил на курс Игоря Штанга «Типографика и вёрстка», остался доволен. Курс состоит из трёх больших дней и одного вечера разбора домашки.

Первый день

«Бегство от серого прямоугольника». В первой теме, до всякой глубокой теории, Игорь даёт шесть способов превратить серый прямоугольник текста во что-то интересное. Бери и используй.

«Классический стиль». Рассказывает не просто о признаках классического стиля, а о ценностях и технологиях, которые повлияли на его формирование. Проводит параллели с живописью, архитектурой. Это помогает понять классический стиль как единую систему, а не случайный набор приёмов. Например, зачем в начале главы стоит буквица, а первое слово набрано капителью? Как это связано с выключкой по ширине и отсутствием крупных заголовков? Эти детали — следствие общей идеи минимизации контраста, уравновешивания всего. Гравюры работают на это же — хорошая гравюра по «тону» дружит с полосой текстом, выглядит такой же средне-серой. В конце темы — рассказ о том, что форматы, возникшие в 19 веке (газеты, реклама) обнаружили недостатки классического стиля. Из моего конспекта: «Когда на полосе несколько рекламных блоков, выглядит ужасно. Центрирование не работает. Прекрасные шрифты не работают. Полоса не компонуется». Поиск новых способов вёрстки, разрешающих эти проблемы, и привёл в конечном итоге к появлению швейцарского стиля.

«Швейцарский стиль». Здесь все ценности перевернулись: контраст стал важнейшим выразительным средством. Заголовки застремились быть крупными против мелкого текста. Текст захотел концентрироваться в одной части макета, а не равномерно заполнять его. Фотография стала допустимым элементом книги, несмотря на полную графическую противоположность тексту — именно потому, что контраст перестал считаться злом. Скромные внутритекстовые выделения курсивом и капителью заменились контрастными жирным и цветным. Сетка стала абсолютным принципом.

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

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

Второй день

«Конструкция». Формат и поля. Три принципа позиционирования элементов на плоскости: формат, сетка, форма. Модульность. Шесть способов закрыть прямоугольник без кирпичной кладки. Шесть способов использовать сетку так, чтобы не было скучно. Сетка. Известная мысль, что сетка по себе не является конструкцией (и что она для выравнивания, а не компоновки), у Игоря звучит звонче и яснее, чем где-то ещё, потому что противопоставляя, он объясняет, что именно называет конструкцией.

Третий день

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

Надо было сверстать табличку. Ну это меня хлебом не корми. Получилась такая:

«Алгоритм вёрстки». У Игоря был пост, но я его не понял, на курсе было яснее.

«Наглядная типографика». Небольшая тема про всякие игры с формой букв.

Домашка

Домашка называется аж «Курсовым проектом». Надо было сверстать мартовскую афишу челябинского камерного театра. Я придумал, что пусть она здоровенная висит на театре:

И в неё, короче, весь месяц не влез целиком, а уже пора было бежать на разбор:

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

ilyabirman.ru

«Типографика и вёрстка» А. Горбунов

«Типографика и вёрстка» А. Горбунов

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

Если вы изучали иностранный язык, то знаете, что выучить все слова из словаря не достаточно. Чтобы строить предложения из этих слов, нужно знать грамматику: члены предложения, их порядок, времена и формы их образования и т. д.
В дизайне тоже самое — чтобы что-то правильно спроектировать, нужно знать грамматику (или как это называет Илья Бирман — синтаксис). В вебе это
модульная вёрстка, типографика и цветовая палитра. О первых двух и говорится в книге.

Модульность

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

Соотношения между этими прямоугольниками составляется либо «золотым сечением» (прямоугольник отсекается квадратом из другого прямоугольника «золотого сечения» ~1:1,618) или по основе линейки бумаги форматов ДИН (листы формата А4, А5 и т. д.).

Самые заметные прямоугольники (объекты) на странице, называются якорными и выделяются они засчёт пустого (негативного/контрпространства) пространства вокруг себя. Т. е. если объект привязан к правому верхнему углу, то больше пространства у объекта должно быть слева и снизу. Если объект привязан к центру макета, то контрапространство распределяется равномерно.

Идеальное расположение объектов:
1.Картинка;
2.Заголовок;
3.Текст;
4.Ссылки.

Ссылки можно совместить с заголовком, либо поместить заголовок на картинку и сделать её кликабельной.

Изображение должно быть сверху или сбоку от текста. И желательно, чтобы одна из его сторон была равна по высоте или по ширине тексту.

Теория близости

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

1. у Лебедева в «Теория близости»
2. более раскрыта тема у Горбунова в «Общей теории близости»
3. и посмотреть у Штанга в «Теория графического напряжения»

Пример решения проблем с вёрсткой

Цитаты из книги

«Текст — несжи­ма­е­мая жид­кость, при­ни­ма­ю­щая фор­му сосу­да. Версталь­щик опре­де­ля­ет фор­му, про­пор­ции и объ­ём кон­тей­не­ра, впус­ка­ет в него воз­дух, раз­де­ля­ет на сооб­ща­ю­щи­е­ся сосу­ды. Один и тот же текст запол­ня­ет ста­кан или рас­пол­за­ет­ся лужей по плос­ко­сти страницы».

«Кегль экран­но­го тек­ста обыч­но лежит в диа­па­зоне 12…16 пунк­тов, а интер­ли­ньяж — 1,2…1,4 от зна­че­ния кегля».

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

«Поля вокруг тек­ста долж­ны быть боль­ше меж­строч­ных про­све­тов»

Иллюстра­ция — самый замет­ный якор­ный объ­ект. Гори­зон­таль­ная иллю­стра­ция выгля­дит естественно. Вер­ти­каль­ная иллю­стра­ция выгля­дит дина­мич­нее. Если кар­тин­ка име­ет чёт­ко выра­жен­ное направ­ле­ние, луч­ше, чтобы она «смот­ре­ла» на текст.

«В модуль­ной вёрст­ке свя­зан­ные эле­мен­ты согла­со­ва­ны по ширине и высо­те, и бла­го­да­ря это­му визу­аль­но объ­еди­ня­ют­ся в пря­мо­уголь­ный модуль».

pshenovich.ru

Статьи Артёма Горбунова про типографику и вёрстку

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

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

Так вот по первому этапу — типографике и вёрстке — есть отличная серия статей Артёма Горбунова. Первые три из них, на мой взгляд, самые важные, и уже дадут вам +100 к пониманию дизайна.

Основы вёрстки

1. Правило внутреннего и внешнего. Вёрстка смотрится гармонично, когда внутреннее пространство не больше внешнего. К примеру, если строки стоят к краям блока ближе, чем друг к другу, кажется, что тексту тесно.
2. Модульность. Страницы состоят из прямоугольных блоков. Эти блоки не должны пересекаться. Прямоугольники должны согласовываться по ширине и высоте, чтобы образовывать более крупные прямоугольники.
3. Правило якорных объектов. Его было трудно понять с первого раза 🙂 Крупные и яркие объекты должны располагаться ближе к углам своего прямоугольника, или наоборот в центре. Выглядит нелепо, когда отдельный, но более лёгкий объект сдвигает якорный объект из центра. Совет про вёрстку плаката хорошо иллюстрирует это правило.
4. Формат и поля. Формат — это внешняя граница блока (border box). Поля — это паддинги. Пропорции полей влияют на ощущение вёрстки. Совет о полях рассказывает о связи между полями и межстрочным расстоянием, и заодно иллюстрирует правило внутреннего и внешнего.
5. Точка, линия и прямоугольник. Про основные формы в вёрстке. Точка (круг) очень активная и тянет на себя внимание. Много кругов — атас. Впихнуть невпихуемое можно в строку, ей всегда найдётся место.
6. Совет о выравнивании на примере текста в инпутах. Когда и как выравнивать. Выравнивание зависит от масштаба текста.

Базовые элементы

1. Заголовок
2. Текст
3. Иллюстрация
4. Элемент управления
5. Ссылка
6. Подпись

Модули

1. Текст без иллюстраций
2. Лента
3. Текст с илююстрациями
4. Форма текста и порядок чтения
5. Доминирующие и вспомогательные иллюстрации, вертикальные иллюстрации

Страницы

1. С модульной сеткой
2. Без иллюстраций
3. С иллюстрациями
4. Текстовая страница
5. Главная страница
6. Ушки, цитаты, фактоиды, врезки

Заключение

1. Выход из прямоугольника
2. Культурные традиции

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

Если вы пока не планируете становиться дизайнером, думаю, вам хватит бесплатных статей.

isqua.ru

Типографика и верстка книг. Часть 2

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

В продолжении моего конспекта «Облика книги» Яна Чихольда мы углубимся в правила набора и форматирования текста и в верстку иллюстраций. Будет познавательно и интересно :-)

---

Издательские правила набора текста

От качества набора зависит вид книги. Если выполнять все ниже перечисленные правила, то можно добиться красивого вида набранного текста.

1. Во всех заголовках и тем более в сплошном наборе пробел должен составлять одну треть кегельной шпации (кегельная шпация — пробельный элемент, равный по высоте и ширине кеглю данного шрифта).
2. После точек в конце предложений и после сокращений нужно ставить только нормальный пробел, как во всей строке.
3. Отдельные буквы и сокращения, такие как т.д., н.э., К. Ф. Майер, всегда набираются с уменьшенным пробелом.
4. В конце заголовков и титулов точка не ставится.
5. Нельзя набирать строчные буквы вразрядку. Вместо разрядки всегда применяется курсив.
6. Прописные буквы всегда набираются с разрядкой (от 8 пунктов и выше минимум 1 1/2 пункта), а пробелы между ними тщательно выравниваются, причем лучше в сторону увеличения разрядки, а не уменьшения.
7. Абзацный отступ всегда делается в круглую. Слишком большой отступ может привести к тому, что последняя строка абзаца будет короче отступа следующей строки.
8. Кавычки должны быть одинаковой формы во всей книге: в русском языке независимо от шрифта традиционно используются кавычки-елочки « », а в цитате второго уровня применяются кавычки-лапки “ ”.
9. Цифры, обозначающие примечания, должны быть набраны тем же шрифтом, что и основной текст. После знака примечания в виде цифры или звездочки не ставится скобка — ни в тексте, ни тем более в примечании.
10. Подстрочные примечания отделяются от основного текста пустой строкой или сплошной тонкой линейкой. Пустое пространство выше и ниже этой линейки должно быть не меньше интерлиньяжа основного текста страницы.
11. Умляуты Ä, Ö, Ü не должны обозначаться Ae, Oe, Ue.
12. При наборе чисел запятая используется только в десятичных дробях. Разряды тысяч разделяются шпациями, а не запятыми или точками. 300,000 — не триста тысяч, а просто триста. Триста тысяч набирают так: 300 000. Для разделения разрядов тысяч точки не используются. В десятичных дробях используется запятая: 3,45 м; 420,500 кг. Но, обозначая время, набирают точку: 2.30 ч. В русском языке принято использовать двоеточие: 2:30 ч. При наборе телефонных номеров лучше разделять цифры шпациями или дефисами, разделяя цифры на группы по две или три цифры: 123—45—67 или 123 45 67.

Абзацные отступы

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

Набор без отступа затрудняет восприятие текста

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

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

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

Курсив, капитель и кавычки в наборе книг и научных журналов

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

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

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

Не слишком известные названия, малоупотребительные выражения, а также выражения, употребляющиеся в переносном смысле, заключаются в кавычки, но набираются строчными, а не курсивом.

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

Если, например, в предисловии основным шрифтом является курсив, то выделения делаются прямым начертанием, а не курсивом вразрядку.

Цитаты набирают обычным шрифтом в кавычках. Также в кавычки заключается прямая речь; это не обязательно, да и не очень красиво, но текст становится более понятным, чем без кавычек.

Есть несколько видов кавычек.

• Немецкие гусиные лапки: „n“. Концевые кавычки — это перевернутые запятые (“), а не висящие хвостиками вниз (”), потому что это получается двойной апостроф.
• Французские кавычки: «n». В Германии их набирают уголками к букве: »n«. В российском типографском жаргоне французские кавычки называются кавычки-елочки, они считаются основными и применяются уголками наружу: «n». Немецкие кавычки называются кавычки-лапки, они считаются дополнительными и применяются так: „n“.
  Если нужно набрать цитату внутри цитаты, некоторые набирают «— , ‘ — » (только не ,n’ — апостроф не кавычка!), другие « — „ “ — ».
• Англичане различают single quotation marks (‘n’) и double quotation marks (“n”). Чтобы набрать цитату в цитате, в Великобритании принято использовать одинарные кавычки как основные, а двойные — как дополнительные, а в Америке наоборот: ‘такие “кавычки” в Англии’, а “такие ‘кавычки’ в Америке”.

В разных странах свои формы кавычек и правила их употребления. Например, в Финляндии, Греции и Турции одна и так же форма кавычек применяются и как открывающая, и как закрывающая: ”кавычки в Финляндии”.

Об интерлиньяже

Интерлиньяж —  расстояние между строками.

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

Увеличив интерлиньяж, можно спасти текст, набранный со слишком большими межсловными пробелами, то есть набранный плохо. Но большой интерлиньяж никак не освобождает от необходимости делать правильные межсловные пробелы.

Если интерлиньяж размером в кегль или больше кегля, можно набирать слова в строке немного «шире», чем при компактном наборе: иначе из-за большого расстояния между строками создается ощущение, что слова в строке слипаются, и это уменьшает удобочитаемость.

Интерлиньяж в книге зависит от размеров полей. Большой интерлиньяж предполагает широкие поля, тогда плоскость шрифта воспринимается гармонично.

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

Набор надстрочных цифр и примечаний

Теперь поговорим о том, что уродливо, а потому и неправильно.

В надстрочных цифрах сносок в тексте книги:

1. Неподходящее начертание мелких надстрочных цифр. Форма надстрочных цифр должна соответствовать основному шрифту или хотя бы приближаться к нему.
2. Лишняя скобка после надстрочной цифры. Скобка после цифры уместна в рукописи, а в книге она ни к чему.
3. Отсутствие отбивки между словом и последующей надстрочной цифрой. При хорошем наборе обязательно нужно отбивать тонкой шпацией цифру ссылки, иначе цифра не выделяется. Она не должна приклеиваться к слову.

В примечаниях:

1. Надстрочные цифры, потому что они слишком малы, часто не читаются и к тому же обычно бывают из других, совсем неподходящих шрифтовых гарнитур. Они должны быть ясно различимы, ведь ищут именно их. Поэтому номер сноски нужно набирать только нормальными цифрами того же кегля, что и текст, ни в коем случае не мелкими (в русскоязычном наборе цифра ставится на верхнюю линию шрифта с полукегельной отбивкой от текста примечания без точки).
2. Отсутствие знака препинания после номера сноски. После порядкового номера примечания, набранного цифрой нормальной формы и размера, обязательно ставится точка. В первой строке сноски правильно будет сделать отступ в круглую шпацию (эта рекомендация не относится к русскоязычному набору, см. пункт 1).
3. Ненужная и некрасивая тонкая линейка на формат 4 цицеро слева над примечанием. Чтобы отделить текст от сноски, достаточно уменьшить кегль в сноске. Если разделение с помощью тонкой линейки все же требуется, нужно сделать ее на формат полосы.
4. Слишком маленький интерлиньяж в строках. Полоса получится гармоничной, если и текст и примечание имеют одинаковый интерлиньяж, независимо от размера кегля. Но можно набирать примечание с интерлиньяжем на 1 пункт меньше, чем расстояние между строками в тексте, это не будет ошибкой. Сильное различие в интерлиньяже делает примечание заметно темнее основного текста, что нехорошо.
   И в основном тексте книги между абзацами не должно быть отбивки, и между отдельными примечаниями на странице отбивка не нужна.
5. Путаное построение примечания из-за отсутствия абзацных отступов в нем. Непрофессиональное разделение сносок с помощью интерлиньяжа в несколько пунктов, даже в 1 пункт, дает нечеткую картину набора. Это так же неприемлемо, как и набор простого текста без абзацного отступа. 

В дополнение к вышесказанному:

1. Если в книге только одна сноска или же примечания встречаются по одному на странице, лучше набирать звездочку (астериск) вместо цифры 1.
   В тексте звездочку не отбивают от предшествующего слова, но в примечании после звездочки должна быть отбивка в 2 пункта (в русскоязычном тексте звездочка отбивается от предшествующего слова на два пункта и не отбивается от закрывающих кавычек).
2. Если примечание состоит из одного или немногих слов и стоит одно на странице, его можно выключить по центру; при общей выключке по центру это будет смотреться гармонично.
3. Бывает так, что несколько коротких примечаний следуют подряд, и они нарушат равновесие разворота, если их набрать одно под другим. Такие примечания можно набирать друг за другом по горизонтали, разделяя их пробелами величиной в круглую. В конце ставится точка.
4. Очень длинное примечание можно разделить, поставив одну половину на левую, а другую на правую часть разворота, но не нужно этот прием слишком часто использовать.
5. Если формат полосы набора основного текста очень широкий и кегль шрифта равен цицеро или еще больше, можно попробовать набрать примечания в две колонки.
6. Начинать сноски на каждой полосе с цифры 1 не стоит, лучше сквозная нумерация сносок для всей книги или хотя бы для отдельных глав.

Многоточие

Многоточие означает, что несколько букв слова, или одно слово, или несколько слов пропущены. Никогда не ставят более трех точек или две точки. Правильно использовать именно три точки.

Точки нужно набирать без шпаций, ни в коем случае не вразрядку, получаются дыры в ткани страницы. Перед многоточием, обозначающим слова, правильно ставить обычный для строки межсловный пробел: «Я думаю, что я очень … боялся бы». Если после многоточия стоит знак препинания, он отбивается от последней точки шпацией в 1 пункт (в русском языке запятая ни до, ни после многоточия не ставится).

Точки, поставленные вместо пропущенных букв, также набираются без разрядки, и перед ними шпация не ставится.

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

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

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

Верстка полосных иллюстраций

Есть два способа расположения полосных иллюстраций в книге: одни могут быть заверстаны вместе с текстом или воспроизводиться отдельно.

Максимальная ширина иллюстрации равна ширине полосы набора; максимальная высота меньше высоты полосы набора на 7—11 миллиметров, оставленных для одной или двух строк подписи к иллюстрации, подпись входит в полосу набора (рис. 1).

miraispace.ru