Автор: Игорь Штанг
Графический и информационный дизайнер, автор курса «Типографика и верстка».
Памятка верстальщика вызвала большой резонанс, но, судя по комментариям в ЖЖ и на Awdee, мало кто понимает, почему всё именно так, как я нарисовал. Попробую объяснить на примерах. Сегодня речь пойдет о выключке по формату.
Хорошо
Особой требовательностью к набору отличались первопечатные книги. Вот, например, Николай Йенсон, 1474:
А это Альд Мануций, 1499:
Равномерные межбуквенные и межсловные пробелы делают набор однородно серым. В нем нет ни дыр, ни темных пятен. Тон полосы спокойный, прозрачный и легкий (определения Дмитрия Карпова).
Плохо
Плохи любые попытки сделать полную выключку в вебе и на мобильных устройствах. Компьютеры еще не научились правильно расставлять переносы и следить за величиной пробелов. Издание The Daily для айпада:
Здесь лучше, но текст всё равно слишком разреженный:
Полная выключка всегда работает плохо на узком формате. Тут необходим левый флаг или центровка:
Ошибки
Выключка по формату — неестественная форма существования текста, отсюда и многочисленные сложности. Ошибки, перечисленные в памятке, делятся на два вида: первые нарушают тон полосы (разреженные и сжатые строки), вторые — ее прямоугольность (висячие и концевые строки).
Висячие предлоги, союзы и другие короткие слова не являются ошибкой при полной выключке. Ими жертвуют ради однородного тона. Исключение составляют:
— однобуквенные слова в начале предложения,
— инициалы,
— маркеры списка (цифровые, буквенные и графические),
— сокращения вроде т. е., т. к., и т. д., и др.,
— цифры.
Как сделать в Индизайне
В первую очередь настраиваем вкладку Justification. Межсловное расстояние в интервале от 95 до 130%, межбуквенное — от −3 до 6%. Обратите внимание, что минимальное значение несильно отклоняется от желаемого (Desired): сжатые строки читать труднее, чем разреженные. Разрешаем масштабировать символы, но совсем чуть-чуть, от 99 до 101%:
Эти цифры получены опытным путем и лучше всего подходят для книжного набора: 50–60 символов в строке. Для узкой колонки правила нужно ослабить.
Обязательно включаем переносы во вкладке Hyphenation. Ползунок выкручен в сторону Better Spacing:
Если не включаются, значит, выбран не тот язык:
Галочка H&J Violations в панели Preferences подсветит желтым строчки, которые Индизайн не может разверстать по заданным цифрам:
Перечисленные выше настройки уже дадут сносный результат:
Дальше работаем руками — двигаем строки в проблемных абзацах. Есть несколько способов:
1. Иногда достаточно изменить место переноса в каком-нибудь слове — поставить символ мягкого переноса. Чтобы слово стало неразрывным, мягкий перенос должен стоять перед первой буквой.
Мак: Command + Shift + — (дефис)
Винда: Ctrl + Shift + —
2. Если переносы не помогли, крутим трекинг от −10 до 10 единиц. Трекинг увеличивает или уменьшает все пробелы в строке: и между словами, и между буквами. На горячих клавишах у Индизайна слишком большой шаг, поэтому я ими не пользуюсь.
Плюс 20 единиц:
Option + → (стрелка вправо)
Alt + →
Минус 20 единиц:
Option + ← (стрелка влево)
Alt + ←
3. Можно менять только межсловные пробелы, не трогая межбуквенные.
Плюс 20 единиц:
Command + Option + \ (бэкслеш)
Ctrl + Alt + \
Минус 20 единиц:
Command + Option + Delete
Ctrl + Alt + Backspace
4. Еще одно средство — масштабирование шрифта от 99 до 101%.
5. В сложных случаях слегка растягиваем или сужаем текстовый фрейм — не более, чем на 1–2 мм. (Этого никто не заметит.)
Изменения должны касаться всего абзаца, а не отдельных строк, потому что Индизайн «думает» об абзаце целиком и учитывает соседние строки. То есть сначала выделяем весь абзац, а потом крутим настройки.
С концевыми и висячими строками также справляемся с помощью вгонки и выгонки. Концевую строку, немного не доходящую до края, втягиваем, чтобы пробел стал более внятным, либо доводим до правой границы (см. первый абзац на предыдущей картинке). О допустимости висячих строк можно долго спорить, однако в традиционной книжной верстке они запрещены.
Нельзя менять интерлиньяж и добавлять пробелы между абзацами. Как говорит Брингхерст, «такие фокусы разрушают ткань текста и… поражают книгу в самое сердце».
В конце еще раз внимательно смотрим на полосу, особенно на правый край. Проверяем правильность переносов.
Источник
Надеюсь этой записью открыть серию статей, посвящённых типографике в целом и веб-типографике в частности.
Логически следующая статья будет посвящена использованию разнообразных пробелов и разделительных интервалов (такой заказ был в комментариях к статье о тире и дефисах пользователя besisland).
Итак, тезис статьи: «до тех пор, пока браузеры не имеют возможности динамически расставлять переносы в словах, вебмастеры должны забыть выключку по ширине как страшный сон».
Это значит, что нужно забыть CSS-конструкцию « text-align: justify; » и, если вы этого до сих пор не сделали, то выжечь калёным железом все воспоминания об « align=»justify» ».
Инь и ян типографики: ширина пробелов и правый край
Как показывает практика, неравномерность ширины межсловных пробелов в тексте отрицательно влияет на удобочитаемость уже в пределах одного абзаца (я подчёркиваю, именно «межсловных»).
Ровный правый край блока текста улучшает удобочитаемость на объёмах от половины стандартной страницы (при средней ширине строки), и только в случае однородности пробелов.
Таким образом, равномерность ширины пробелов на обычно коротких текстах в Интернете является гораздо более важной, чем выравнивание правого края.
Рукописи и ксилография
Подвижности литер нет (что написал, заново переписывать только с чистого листа, либо вырезать на новой деревяшке), возможность переноса — в «ручном» режиме.
Типографская печать (ручной набор, монотипы, линотипы)
Есть и подвижность литер (поподробнее о разгонке мы поговорим в будущей статье о пробелах), и возможность переноса в «ручном» режиме.
Печатная машинка
Снова нет подвижности литер, но переносы можно расставлять вручную.
Современные текстовые процессоры
Пытаются автоматически имитировать типографский процесс. Есть подвижность литер и возможность как автоматической расстановки переносов, так и ручной. Как ни удивительно, но даже в MS Word можно добиться приличного вида блока текста, выключенного по ширине, если в тексте расставить переносы.
Без переносов текст ужасен.
Браузеры
Первый в истории тип носителя, имеющий подвижность литер, но не имеющий возможности расстановки переносов. Помимо этого, строка может иметь практически любую ширину (ведь хорошие дизайнеры предусматривают возможное изменение размера шрифта пользователем!).Теперь, чтобы совместить равномерность пробелов и выравнивание по ширине, браузеры практически должны стать интерактивными текстовыми процессорами: либо автоматически расставляя переносы в реальном времени на произвольных объёмах текста, либо адекватно обрабатывая «мягкие переносы» так же в реальном времени.
До тех пор, пока этого не произошло, в плане типографики браузер недалеко ушёл от печатной машинки. Осознавая как этот факт, так и тот факт, что в недалёком будущем технологии разовьются до нормальной обработки переносов, дизайнер должен временно отказаться от CSS-конструкции « text-align: justify; ». Надеюсь, что от кода вида « p align=»justify» » вы уже давно отказались, потому что он является не рекомендуемым (deprecated) в HTML 4.01 и может в следующих версиях стандарта перейти в разряд «устаревшего» (obsolete).
Источник
Выравнивание текста
Выравнивание или выключка текста
Текст может быть выровнен по одному или по обоим краям (отступам) текстового фрейма. Текст считается выключенным, если он выровнен с обеих сторон. Можно выбрать выравнивание всего текста в абзаце, кроме последней строки («Выключка по левому краю» или «Выключка по правому краю»), либо включая ее («Выключка по формату»). Если последняя строка содержит всего несколько символов, то, возможно, нужно будет применить специальный символ конца материала и создать концевую шпацию.
При выключке текста при помощи компоновщика абзацев Adobe, чтобы обеспечить одинаковую плотность текста в абзаце и его визуальную привлекательность, InDesign производит смещение текста. Можно произвести точную подстройку интервалов в выключенном тексте.
При размещении текста по центру или выключке текста в сетке фрейма текст больше не будет выравниваться точно по сетке. Можно также задать выравнивание для всех абзацев в сетке фрейма.
Применение к абзацу параметра «Выключка к корешку» приводит к тому, что текст левой страницы разворота выравнивается по правому, а правой – по левому краю. Аналогичным образом, применение к абзацу параметра «Выключка от корешка» приводит к тому, что текст левой страницы разворота выравнивается по левому краю, а правой страницы – по правому.
В вертикальных фреймах выключка к корешку или от корешка не оказывает никакого эффекта, поскольку выключка текста выполняется параллельно направлению корешка.
Если требуется выравнивание левого края текста по левому краю, а правого — по правому, установите точку ввода в том месте, где нужно выровнять текст по правому краю, нажмите клавишу «Tab», затем выровняйте по правому краю оставшийся текст строки.
Выравнивание абзацев по сетке из базовых линий
Сетка из базовых линий представляет интерлиньяж основного текста документа. Это значение может быть кратно изменено для всех элементов страницы, чтобы гарантировать, что текст всегда будет выровнен по столбцам и страницам. Например, если основной текст в документе имеет интерлиньяж 12 пунктов, то для текста заголовка можно задать интерлиньяж в 18 пунктов и добавить отступ 6 пунктов перед абзацами, которые находятся перед заголовком.
Использование сетки из базовых линий гарантирует единообразие размещения текстовых элементов на странице. Она позволяет настроить интерлиньяж абзаца таким образом, чтобы его базовая линия была гарантированно выровнена по основной сетке страницы. Этот метод можно использовать в том случае, если базовые линии текста находятся в нескольких столбцах, а также при выравнивании смежных текстовых фреймов. Параметры сетки из базовых линий изменяются в разделе «Сетка и направляющие» диалогового окна «Установки».
Можно выровнять по сетке из базовых линий только первую строку абзаца, что позволит остальным строкам сохранить ранее заданные значения интерлиньяжа.
Для просмотра сетки из базовых линий выберите меню «Вид» > «Сетка и направляющие» > «Показать базовую сетку».
Сетка из базовых линий отображается на экране только в том случае, если масштаб документа больше минимального масштаба отображения линий, заданного в разделе установок «Сетка и направляющие». Для их отображения может потребоваться увеличение масштаба отображения.
Источник
Автор: Игорь Штанг
Графический и информационный дизайнер, автор курса «Типографика и верстка».
Левый флаг — естественная форма существования текста. Буквы различаются по ширине, слова состоят из разного количества букв, поэтому каждая следующая строчка не равна предыдущей.
Это хорошо видно на примере манускриптов. Правая граница стремится стать ровной, но никогда такой не становится:
Евангелиарий. Регенсбург, Германия, 1430–1440
Евангелиарий. Тур, Франция, первая четверть 16-го века
Евангелиарий. Тур, Франция, первая четверть 16 века
Хорошо
Форма хорошего рваного края кажется случайной и не обращает на себя внимания:
Плакат Musica Viva. Йозеф Мюллер-Брокманн, Швейцария, 1960
Плакат Musica Viva. Йозеф Мюллер-Брокманн, 1960
Листовка компании Braun. Вольфганг Шмиттель, Германия, 1961
Листовка компании Braun. Вольфганг Шмиттель, 1961
Разворот книги Йозефа Мюллера-Брокманна «Модульные системы в графическом дизайне». Издательство Студии Артемия Лебедева, 2014
Разворот книги Йозефа Мюллера-Брокманна «Модульные системы в графическом дизайне». Издательство Студии Артемия Лебедева, 2014
Фрагмент страницы каталога «Интерьер без границ». Дизайн автора, 2010
Каталог «Интерьер без границ». Дизайн автора, 2010
Плохо
Слишком ровный край начинает походить на выключку по формату. Слишком рваный разрушает форму текстового блока. Прищурьтесь:
Всё, что находится между этими крайностями, можно считать приемлемым вариантом.
Ошибки
Частая ошибка как в печати, так и на экране — висячие предлоги, союзы и другие короткие слова. Из-за них край выглядит неопрятно. Второй важный момент — отсутствие переносов в тексте на русском языке. Русские слова в среднем длиннее английских, поэтому правая граница получается слишком рваной.
На Западе и к висячим словам, и к набору без переносов относятся спокойнее:
Фрагмент книги Эдварда Тафти The Visual Display of Quantitative Information. США, 2001
Фрагмент набора из книги Эдварда Тафти The Visual Display of Quantitative Information. США, 2001
Как сделать в Индизайне
Подбираем оптимальную форму для правого края. Нужные настройки во вкладке Hyphenation. На результат влияют:
— минимальная длина слова, которое можно разрывать переносом (первое поле),
— минимальное количество букв до и после переноса (второе и третье поля соответственно),
— максимальное количество переносов подряд (четвертое поле),
— ползунок Better Spacing — Fewer Hyphens.
Мне нравится второй вариант. Теперь инспектируем край на наличие лесенок, очевидных форм, слишком ровных участков (несколько соседних строк, случайно совпавших по длине). Проверяем правильность переносов. На этой странице смущает форма первого абзаца. Да и второго тоже:
Чтобы это исправить, крутим трекинг (от −5 до 5), межсловное расстояние, ширину символов (от 99 до 101%). Можно открыть панель Hyphenation и установить правила переносов уже для конкретного абзаца (или создать новый стиль с альтернативными настройками). Иногда достаточно всего лишь поменять место переноса в каком-нибудь слове. Подробнее в статье «Выключка по формату».
Не стоит забыть о том, что все изменения должны остаться незаметными для читателя.
Источник
Выключка по левому краю
Jul 26, 2015 · 3 min read
Левый флаг — естественная форма существования текста. Буквы различаются по ширине, слова состоят из разного количества букв, поэтому каждая следующая строчка не равна предыдущей. Это хорошо видно на примере манускриптов. Правая граница стремится стать ровной, но никогда такой не становится:
Хорошо
Форма хорошего рваного края кажется случайной и не обращает на себя внимания:
Плохо
Слишком ровный край начинает походить на выключку по формату. Слишком рваный разрушает форму текстового блока. Прищурьтесь:
Всё, что находится между этими крайностями, можно считать приемлемым вариантом.
Ошибки
Частая ошибка как в пе ч ати, так и на экране — висячие предлоги, союзы и другие короткие слова. Из-за них край выглядит неопрятно. Второй важный момент — отсутствие переносов в тексте на русском языке. Русские слова в среднем длиннее английских, поэтому правая граница получается слишком рваной.
На Западе и к висячим словам, и к набору без переносов относятся спокойнее:
Как сделать в Индизайне
Подбираем оптимальную форму для правого края. Нужные настройки во вкладке Hyphenation. На результат влияют:
— минимальная длина слова, которое можно разрывать переносом (первое поле),
— минимальное количество букв до и после переноса (второе и третье поля соответственно),
— максимальное количество переносов подряд (четвертое поле),
— ползунок Better Spacing — Fewer Hyphens.
Мне нравится второй вариант. Теперь инспектируем край на наличие лесенок, очевидных форм, слишком ровных участков (несколько соседних строк, случайно совпавших по длине). Проверяем правильность переносов. На этой странице смущает форма первого абзаца. Да и второго тоже:
Чтобы это исправить, крутим трекинг (от −5 до 5), межсловное расстояние, ширину символов (от 99 до 101%). Можно открыть панель Hyphenation и установить правила переносов уже для конкретного абзаца (или создать новый стиль с альтернативными настройками). Иногда достаточно всего лишь поменять место переноса в каком-нибудь слове. Подробнее в статье «Выключка по формату».
Не стоит забыть о том, что все изменения должны остаться незаметными для читателя.
Источник


































