Основные понятия типографики и принципы верстки
Мы рассмотрим общие понятия и знания по работе с текстом, которые сформировались и утвердились еще в книгоиздании и стали фундаментальными, частично перешли в журналы и другие печатные формы. В веб типографике есть свои особенности, которые мы рассмотрим в разделе «Типографика в вебе. Функциональные компоненты статьи».
Типографика и верстка — два тесно связанных друг с другом понятия. Для начала нужно определиться, что это такое.
Верстка — работа с текстовым материалом. Прежде всего, это мастерство дизайнера или верстальщика распределить и оформить текст в макете.
Типографика — это результат верстки. Любой набранный, написанный или нарисованный текст можно оценивать с точки зрения типографики.
Работа над ней — очень важный процесс, он требует внимания и умения «копаться в деталях», это особый труд и довольно кропотливый. Любой продукт с недоработанным текстом будет выглядеть плохо, какие бы интересные и качественные не были бы в нем картинки.
Как начинающему дизайнеру определить качество типографики? Главное свойство хорошо cверстанного текста — незаметность, лаконичность. При чтении вам ничто не должно мешать воспринимать информацию.
Существует понятие – «Серебро набора». Это свойство хорошо сверстанного текста, который смотрится в проекте ровным и цельным серым блоком. Эта самая равномерность и называется «Серебром набора». Для текста, особенно рассчитанного на линейное чтение, это незаменимое качество.
Текстовый блок на странице смотрится ровным серым полотном, и даже выделения в тексте незаметны и не вызывают зрительного дискомфорта
Структуризация текста
Для чего нужен анализ текста, что такое рубрики и элементы навигации
Для того, чтобы опубликовать какую-то информацию, весь текст структурируют и присваивают его частям свое назначение. Есть текст основной информации, есть тот, который его дополняет.
Основной текст предназначен для сплошного или линейного чтения. Он должен выглядеть максимально простым и не выделяющимся. Мы воспринимаем текст намного лучше, если нас ничто не отвлекает.
Дополнительный текст — предисловия, примечания, сноски, цитаты, комментарии, поясняющие или подтверждающие слова. Такие тексты содержат важные сведения, но не отражают основную мысль послания.
Примеры оформления основного и дополнительного текстов. Они отличаются друг от друга графически: размером кегля, насыщенностью, дополнительными графическими элементами
Рубрикация и навигация
С чего нужно начинать, если у вас есть интересная история, статья, или вы написали целую книгу и хотите опубликовать готовый продукт? Для начала, текст нужно структурировать, разделить на отдельные смысловые части и главы, то есть провести рубрикацию, структуризацию текста.
Рубрикация — система заголовков и подзаголовков, связанных между собой по смыслу и имеющих иерархию значимости. Заголовок может делить текст на большие разделы, внутри которых будут свои заголовки меньшей значимости.
Рубрики — заголовки частей публикации (большие заголовки разделов, внутренние заголовки их подразделов).
Структурируют все для того, чтобы зритель мог ориентироваться в большом тексте. Опять же, воспринимать объемный текст без каких-то смысловых пауз очень тяжело. Открывая текст, мы знакомимся с ним с помощью рубрик.
В рубрикации можно выделить простые и сложно-составные заголовки
Заголовок / основной текст
Заголок / подзаголовок / основной текст
Заголок / подзаголовок / описание / основной текст
Размеры текста дизайнер регулирует, исходя из своего опыта. Но существуют и рекомендуемые математически вычисленные значения:
16–22px для оcновного текста55–75 символов в строке
В печатных изданиях размеры шрифтов измеряются в пунктах (pt), а на экране — в пикселях (px). Эти е можно вычислить по формуле, как на примере:
12 пунктов × (96/72) = 16 пикселей.
Также для вычисления пропорций можно использовать формулу «Золотого сечения»: заголовок / подзаголовок = 1,618. Оно поможет найти гармоничное сочетание размеров в тексте, но «Золотое сечение» — не догма.
Золотое сечение — гармоничная пропорция, где большее значение числа относится к меньшему так же, как их сумма к большему, а математический коэффициент равен 1, 618. Золотое сечение было открыто еще в древности, принципу Золотого сечения в той или иной мере соответсвует все живое на Земле, (пропорции человека или строение раковины моллюска) поэтому его еще называют «Божественной пропорцией».
К навигации в тексте относятся: оглавление, колонцифры, колонтитулы, ссылки, пометки. Иногда в навигацию добавляют вспомогательные графические элементы. Для удобства восприятия информации важно делить объемный текст на абзацы.
Оглавление
Оглавление — список разделов или глав с указанием номера страницы, на которых они находятся. Оглавление — важный элемент навигации, в книгах его чаще всего располагают в начале или в конце издания.
Графически оглавление оформляют по-разному. Важно, чтобы оно отвечало общему стилю и не выглядело чужеродным. Нестандартно оформленная страница не должна терять свое функциональное значение. Читатель должен сразу определить в каком месте искать интересующий его материал.
В вебе нет оглавления как такового, его роль выполняет меню. Например, в лонгридах удобным способом ориентироваться по главам служит меню «гамбургер».
Лонгрид — мультимедийный формат подачи объемных текстов и визуального контента в виде статьи.
Колонцифра и колонтитул
Колонцифра — номер страницы. Так как это навигационный элемент, он не должен мешать воспринимать основную информацию. Чаще всего в книгах их проставляют на полях, или внизу блока основного текста.
Колонтитул — элемент навигации наравне с колонцифрой. Колонтитулы используют в основном в печатной продукции, выглядят они как короткие строки текста на полях, в которых дублируют название раздела, имя автора или название рубрики.
Шмуцтитул
Шмуцтитул — это «мини-обложка» перед началом нового раздела в книге или журнале. Традиционно, его располагают на правой полосе издания. Если оглавление расскажет вам, какие разделы есть в издании, то шмуцтитул расскажет, что будет в следующей рубрике.
В данном случае каталог поделен на разделы по шрифтовым классам. В заголовках указан раздел и номер его страницы
Шмуцтитул — тоже больше полиграфическая история. Подобные блоки можно найти и в лонгридах, например. В них разделы часто отделяют друг от друга обложками с названием раздела.
Лонгрид об истории анимации поделен на шесть глав. В качестве шмуцтитула используется обложка с номером и названием главы.
Абзац
Абзац — это часть текста, выражающая законченную мысль. Абзацы принято отделять друг от друга графически, а способов это сделать довольно много.
Самый распространенный в полиграфии пример выделения абзацев: с помощью «Красной строки».
Вариант выделения абзацев с помощью отбивок, так называемый «Швейцарский абзац». Между блоками помещается пустая строка.
Абзацы выделены с помощью втяжки. Это сокращение строк абзаца или их отступ слева или справа.
Пример выделения абзацев графическими элементами. Графики не должно быть много — текст должен оставаться удобочитаем.
Удобочитаемость — комфортное считывание текста
Рекомендации по работе с версткой
За чем следить и над чем работать в тексте. Основные проблемы верстки и их решение
Заливая текст, дизайнер или верстальщик должен знать, о чем текст, объективно соотносить его количество и количество места для него. Уже внутри макета начинается более тонкая работа (микротипографика).
Текст заверстывают с помощью системы сеток, в которых располагаются тестовые блоки и колонки. В зависимости от типа сетки и задумки дизайнера текст может заполнять, например, одну колонку, две, три или больше.
Внутри блоков текст может быть по-разному ориентирован, в зависимости от поставленной задачи. Основные типы: полная выключка (justify), выключка по центру (align center), флаговая выключка (align left, align right).
Блок текста с автоматически выставленной выключкой по формату (justify) выглядит «дырявым» и нуждается в сложных настройках межбуквенных и межсловных расстояний. Поэтому намного чаще в текстах можно встретить флаговую выключку.
«Дырявые» и «жидкие» строки (loose line)
«Жидкие» строки — явление в текстовом блоке, когда межсловные расстояния в каких-то местах становятся значительно больше других, образуя «дыры» в тексте.
«Коридоры» или «ручьи» — явление, когда межсловные пробелы совпадают в соседних строках по вертикали или диагонали.
«Дыры» и «ручьи» в тексте чаще всего встречаются при полной выключке (выключке по формату). Такой блок сложнее всего редактировать.
Рваные края текстового блока
Рваный край — слишком большие расстояния между словами и знаками в тексте. Частое свойство текстового блока с флаговой выключкой, так как только один край блока зафиксирован, ровность второго края зависит от того, сколько знаков поместится в строку.
Не обязательно ровнять весь блок как при полной выключке, но слишком большая разница длин строк создает дисбаланс, лишнюю контрформу и выглядит неаккуратно.
За краем верстки текста следят в основном в полиграфии. В вебе рамки не такие жесткие.
Контрформа — пространство, которое образуется между двумя формами (изображение и текстовый блок, графическая форма и край фона)
Проще говоря, если представить текст и иллюстрации серыми формами, то форма белого листа, которая ничем не заполнена, — и есть контрформа.
Может быть активной и неактивной, выразительной и нет. Дизайнеры часто используют ее как визуальный эффект и ключевой элемент оформления текстов.
Предлоги и союзы в конце строки
Еще часто называют «висячими предлогами». Их не оставляют в конце строки, так как в этом месте читатель невольно делает паузу, а предлог или союз напрямую связан с последующим словом. Несколько строк подряд с повторяющимися союзами разрушают первоначальный ритм строки и создают «коридор».
Однобуквенные слова, союзы и предлоги не оставляют в конце строки
В полиграфии однобуквенные слова регулируют специальными вставками символов в программах верстки.
Неразрывный пробел — символ, который соединяет соседние слова и не дает им оказаться на разных строках.
Мягкий перенос — используйте его, чтобы перенести слово, перед которым он стоит, на следующую строку.
В вебе это специальные невидимые символы в языке HTML, которые ставятся между символами текста и либо связывают их, либо указывают место внутри слова, по которому это слово может быть перенесено на другую строку.
— мягкий перенос
— неразрывный пробел
Случаи использования неразрывного пробела:
ИнициалыСокращения с точкамиЧисла с последующим словом или единицей измеренияПредлоги, союзы и некоторые частицыТире с предыдущим словом
Старайтесь правильно подготовить свой текст в редакторе еще до начала верстки: проверьте орфографию, нет ли лишних пробелов или отбивок.
1
Не используйте больше одного пробела подряд, это «дырявит» текст и делает его «жидким»
2
Настройка текста с переносом поможет выровнять текстовый блок и избавить его от «дыр» и «коридоров»
3
Попробуйте незаметно отрегулировать ширину текстового блока. Это может помочь выровнять край колонки, избавиться от «коридоров» и сделать текст визуально чище
Есть сервисы, которые помогут улучшить качество вашего текста и просканируют текст на наличие ошибок в грамматике или пунктуации:
http://www.typograf.ru/flog/http://www.http://orfogrammka.ru/http://www.hemingwayapp.com/
Висячие и короткие концевые строки (widows and orphans)
Это проблема в наборе, когда в начале новой колонки мы видим последнюю строку абзаца или наоборот, когда его первая строка заканчивает текстовый блок. Висячие и кроткие концевые строки нарушают размер блока, делают его визуально короче.
В конце абзаца могут образоваться короткие концевые строки. Их тоже лучше избегать, они разрушают ритм и создают впечатление отбивки между строками в тексте. К тому же, иногда они могут совпасть с абзацным отступом. Следите, чтобы в начале и в конце текстового блока помещалось не менее трех полных строчек.
Примеры висячих и коротких концевых строк. В начале и в конце текстового блока оставляйте не меньше трех полных строк
Трекинг и кернинг
Трекинг — это равномерное изменение расстояний между символами во всем текстовом блоке. То есть изменение его плотности.
Кернинг — это корректировка расстояния между отдельной парой знаков.
Настройка этих параметров может помочь с проблемой висячих строк и висячих предлогов. Кернинг регулируют для составления заголовков, дизайна логотипов, для придания тексту определенной стилистики.
Если слово набрано крупным кеглем, стоит иногда немного уменьшить расстояния между буквами, чтобы они не разлетались и не нарушалась цельность строчки.
Если буквы маленькие, можно немного увеличить эти расстояния, чтобы дать больше воздуха и облегчить визуально текст.
Существует понятие «кернинговые пары». Это пары знаков, расстояние между которыми приходится иногда регулировать вручную из-за особенности их начертания.
Апрош — расстояние между соседними буквами. Он состоит из двух полуапрошей стоящих рядом знаков.
Полуапрош — расстояние от края кегельной площадки до крайней точки рисунка буквы. Выделите одну букву и увидите, что границы выделения по бокам чуть выходят за пределы рисунка букв. Эти расстояния по бокам и называются полуапрошами.
Когда проектируют шрифт, то кроме самой буквы закладывают еще прямоугольную площадку (кегельная площадка), на которой эта буква помещается. В цифровых шрифтах она тоже учитывается, просто ее не видно.
Короткие и длинные строки
Слишком длинная сбивает с толку и заставляет делать большую паузу после каждой строки.
Слишком короткая зацикливает чтение и заставляет перечитывать одно и то же по второму разу.
Существует правило, что стандартно в строке должно быть около 55-60 знаков для комфортного чтения. Строки в текстовом блоке для линейного чтения не должны быть ни слишком длинными, ни слишком короткими.
Чтобы текст можно было комфортно читать, важно найти баланс между количеством знаков и расстоянием между строчками.
Интерлиньяж
Интерлиньяжем — расстояние между базовыми линиями соседних строк в тексте.
Межстрочный интервал — просвет между строками или расстояние от базовой линии до верхней точки строчных букв на следующей строке.
Интерлиньяж
Межстрочное расстояние
Комфортность чтения текста зависит от синтеза длины строк, расстояния между этими строками и размером букв текста.
Оптимально интерлиньяж основного текста примерно должен быть равен или чуть больше высоты букв. Дизайнер интуитивно понимает какой размер кегля выбрать и какой интерлиньяж подобрать, но есть рекомендуемые соотношения величин, которые помогут вам сделать правильный выбор:
Длина строки / интерлиньяж = 28Интерлиньяж / размер основного текста = 1.5Абзацный отступ / интерлиньяж = 0.8
Существует понятие — «Отрицательный интерлиньяж». Это значит, что расстояние между строчками в тексте меньше, чем высота букв. Это применимо в тексте крупного кегля, например, в заголовках.
Если Вы только начинаете заниматься типографикой и не уверены в выборе размеров шрифтов, интерлиньяжа и длины строк, существуют сервисы, которые помогут вам рассчитать и сгенерировать оптимальные значения этих величин.
Например, на сайте pearsonified.com можно получить советы по улучшению типографики на основе размера шрифта, ширины блока контента и количества символов в строке.
Знаки препинания
Полезные сведения о выборе знаков и расстановке их в предложении
Знаки препинания — это такой же полноценный и требующий внимания организм, как и буква. Ими нужно уметь пользоваться, это показывает грамотность и подготовленность автора.
К знакам препинания относятся: кавычки, скобки, точки, запятые, тире и дефисы, вопросительный и восклицательный знаки.
Кавычки
Кавычки используют для обозначения названия чего-либо, в прямой речи или цитатах. В русской типографике есть свои правила и иерархия использования кавычек.
«Ёлочки» — главные кавычки в наборе в русском языке
«Лапки» — второстепенные, можно использовать только в том случае, если внутри цитаты нужно сделать еще одно выделение.
«Английские одиночные» кавычки — их используют, если слово переведено с другого языка
В разных лингвистических системах свои правила постановки кавычек, и их рисунок тоже может отличаться.
Так, например, в английском языке используют английские одиночные и двойные кавычки. Одиночные считаются основными, а двойные применяются внутри выделенного текста. В Америке иерархия обратная.
Знак препинания рядом со скобками или кавычками
Если знак препинания относится по смыслу только к выделенной фразе, то его ставят внутри кавычек и скобок, а если ко всему предложению, то за их пределами.
Многоточие
Многоточие часто по ошибке называют «троеточием». На самом деле, многоточие — это самостоятельный знак, а не три точки, набранные подряд. Отличаются они шириной знака. Для использования многоточия вместе с вопросительным и восклицательным знаком для него устанавливают положительный кернинг.
Не набирайте три точки подряд для оформления незаконченной фразы. В палитре символов для этого есть специальный знак многоточия
Тире и дефис (dash and hyphen)
Дефис — самая короткая черта. Используют ее для переносов в тексте и соединения сокращенных слов. По бокам дефиса не ставят пробелы.
Короткое тире используют при обозначении интервалов в датах или времени. По бокам тоже не ставят пробелов, потому что, как правило, в самом знаке предусмотрены полуапроши.
Длинное тире используют для оформления прямой речи (стоит в начале предложения), между словами, образующими смысл «от — до» и со словами-определениями. Длинное тире отбивают пробелами с двух сторон.
Строка не должна начинаться с дефиса или тире, кроме прямой речи, поэтому эти знаки всегда завершают строчку. Составные слова, типа «человек-слон» старайтесь заверстать так, чтобы второе слово не переходило на следующую строку, цельность и семантика слова не нарушались.
Тире — это1990–1915гг.ИТАР-ТАСС
Постановка пробела
Частая ошибка верстки — лишние пробелы или их нехватка. Отсутствие пробелов в нужных местах путает чтение, а лишние пробелы, опять же, «дырявят» текст. Примеры, когда и где нужно ставить пробел:
Пробел ставится после запятой, точки, двоеточия, точки с запятой, восклицательного и вопросительного знака в конце предложения. Слева их не отбивают от предложения, к которому они относятся
Если за скобкой или кавычкой стоит знак препинания, то пробел между ними не ставится
Внутри скобок и кавычек пробелы не ставятся, но можно ставить перед открывающим знаком и после закрывающего
Математические знаки
Математические знаки, такие как: = + - / × и другие тоже имеют правило написания с цифрами.
Если знак стоит между двумя цифрами, от он отбивается по бокам пробелами.Если же знак принадлежит одной цифре, то их пишут слитно.
Никогда не используйте вместо математических знаков похожие обозначения. Минус — это не тире и не дефис, вместо нуля нельзя использовать букву «О». Для математических знаков есть специальные символы в палитре глифов.
Есть сервисы, которые помогут подготовить ваш текст для верстки в вебе , правильно расставить символы, неразрывные пробелы, тире, кавычки: