Я предлагаю относиться к тексту как к жидкости, которую можно налить в стакан или кувшин любой формы. То есть текст может менять свою ширину, длину, высоту, кегль и так далее
В зависимости от того, какую форму он принимает, надо его слегка подкручивать. Сейчас мы посмотрим, как всё устроено.
Предлагаю запомнить базовую рекомендацию, какое‑то соотношение кегля и интерлиньяжа. Я предлагаю всегда начинать с того, что вы берёте какой‑то кегль, условно 16‑20 пунктов или пикселей, а интерлиньяж где‑то на 4‑5, максимум 6 пунктов больше. Благодаря этому почти всегда вы получите какое‑то хорошее или приемлемое соотношение кегля и интерлиньяжа для набора основного текста в основной колонке, как мы здесь сейчас с вами видим. Видите, у меня кегль 24, интерлиньяж 30:
Это соотношение может меняться в зависимости от того, какой шрифт вы используете. Здесь у меня шрифт «Бюросанс», у которого строчные буквы по отношению к прописным довольно маленькие, и шрифт хочет быть покрупнее.
Если я сейчас поставлю «Вердану», то она уже крупная для основного текста:
«Вердана» просит других соотношений:
Сразу запомните, что нет универсального соотношения. Есть соотношение кегля и интерлиньяжа, с которого можно начинать. Но дальше его придётся корректировать в зависимости от выбранного шрифта, ориентируясь на правило внутреннего и внешнего в первую очередь. Вы помните, что пробелы не должны быть больше, чем просветы между строками.
Выбор кегля зависит и от того, какая у вас ширина колонки. При такой ширине колонки основного текста тексту в целом неплохо.
Если я захочу сделать ещё и узкую боковую колонку со сносками на полях, становится очевидно, что для такой узкой колонки этот кегль очень большой. Когда в колонку влезает по два с половиной слова, текст очень мучительно читать, не говоря уже о том, что колонка занимает гораздо больше места:
Поэтому мы уменьшаем кегль для боковой колонки и интерлиньяж. Сразу работает:
А если мы обратно эту штуку растянем, то сразу что‑то здесь не так:
Мы поговорили о том, как ширина колонки влияет на кегль, но ширина колонки ещё влияет на интерлиньяж. Здесь зависимость очень простая — чем больше у вас ширина колонки, тем больше надо делать интерлиньяж, чем колонка уже, тем интерлиньяж можно делать меньше:
В широкой колонке соотношение 19/26. То есть интерлиньяж больше кегля на целых 7 пунктов. А в узкой 13/16, то есть всего лишь на 3 пункта, потому что колонка уже. Если бы я её сделал ещё уже, скорее всего, нужно было бы ещё сильнее поджать интерлиньяж, и это выглядело бы вполне прилично.
Вот такая простая зависимость. Конечно, не строго математическая, надо всё равно поглядывать. Просто надо запомнить, что это влияет.
Мы поговорили с вами о том, что интерлиньяж должен быть больше основного кегля на столько‑то пунктов. Теперь я сделаю заголовок, руководствуясь теми же параметрами:
Видно, что для него такое соотношение не очень хорошо работает. Во‑первых, между «о» и «Тиле» огромный пробел, который соотносим с межстрочными просветами. И, возможно, стоит сделать интерлиньяж другим. Я сделал на 8 пунктов больше, чем кегль, и это плохо.
А если я поменяю шрифт на «Бюросанс», то сюрприз — интерлиньяж кажется огромным:
Его, наоборот, хочется уменьшить. Опять же ориентируясь на правило внутреннего и внешнего:
Вопрос из зала: «Получается, интерлиньяж для заголовка меньше, чем кегль?»
Да, соотношение вполне допустимо. Понятное дело, что это зависит от шрифта. Я сделал такое с «Бюросансом», если я ставлю «Гельветику», то кажется, что интерлиньяж надо увеличить:
Комментарий из зала: «Хочется больше».
Да. Я призываю вас к тому, чтобы не искать какую‑то универсальную математическую формулу. Её в принципе не может быть, потому что очень много факторов может повлиять на окончательное решение. Просто помните, какие вещи могут повлиять на выбор кеглей и интерлиньяжа. И каждый раз, когда вы что‑то меняете: шрифт, ширину колонки, кегль заголовка, — обязательно переоцените все отношения между элементами.
Теперь возвращаемся к тексту. Текст бьётся на абзацы. Абзацы надо отделять друг от друга. Есть два способа. Первый — красная строка:
А если говорить про веб и про печатные издания — здесь больше принято отбивать абзацы друг от друга расстояниями:
Расстояние между абзацами надо всегда подбирать с оглядкой на правило внутреннего и внешнего. Самый классический способ — делать его равным одной пустой строке. Но в некоторых случаях такое расстояние слегка избыточное. Оно слишком большое и требует, чтобы вы и вокруг делали большие расстояния, и тогда у вас макет начнёт расползаться:
Поэтому в большинстве случаев достаточно сделать расстояние, может быть, в полтора раза больше, чем отступ между обычными строками. И будет хорошо:
Важно следить, чтобы это расстояние было достаточно велико, чтобы читатель без напряга мог понять, что здесь не обычный отступ, а два разных абзац. Здесь они уже слишком похожи:
На всякий случай ещё раз напомню, что абзацы обязательно надо отделять друг от друга. Так делать нельзя:
Поговорим про флаг. Когда мы говорим про кириллицу, латиницу, а не про иврит или японский, то по умолчанию текст набирается по левому краю с правым флагом. То есть слева ровный край, справа лесенка:
Когда мы говорим про лесенку, важно следить за тем, чтобы она не была слишком рваной. Рваная она становится, если вы неудачно подбираете соотношение кегля и ширины строки.
Здесь всё хорошо с соотношением кегля и интерлиньяжа, а край получится рваный. Это произошло просто потому, что колонка достаточно узкая, а в тексте появляются какие‑то длинные слова. Из‑за того что текст набран крупно, они так переносятся:
Идеально, чтобы правый край струился, чтобы не было каких‑то резких перепадов, каких‑то горных пиков или Марианских впадин по ходу дела. Сейчас плюс‑минус адекватный край.
Рекомендую следить за тем, чтобы не было висячих союзов и предлогов. Видите, у меня здесь «по» висит. Это надо решать с помощью неразрывных пробелов. Ни в коем случае не сложным переносом.
Некоторые ребята любят делать Shift + Enter. Это приведёт к тому, что если дизайнер решит что‑то поменять, то весь текст сломается.
А если сделать всё‑таки по уму — неразрывный пробел, то просто «по» и «прозвищу» склеятся. И что бы я ни делал, они будут жить вместе:
Это гораздо лучше, особенно когда речь идёт про сайты, которые могут менять свою ширину в зависимости от браузера, и, соответственно, текст в них переставляется.
Следите за тем, чтобы текст переносился осмысленно. Например, «главный» и «герой» — прилагательное отвалилось от своего существительного, выглядит неприятно. Когда у вас уже есть какой‑то окончательный текст и вёрстка, хорошо пройтись по тексту и такие штуки по возможности склеить:
Мы поговорили о том, что в конце строки не должны висеть предлоги и союзы. А в начале не должны висеть тире. Если такое происходит, надо склеить тире со словом до него. Тире висит в конце строки, но не в начале, а союзы и предлоги наоборот:
Когда речь идёт о тексте, который вы можете до самого конца контролировать, — следите за последними строками. Хорошо, когда на последней строке в абзаце не одно слово, а хотя бы два, причём достаточно длинных. Иначе эта строка выглядит недоделанной, слабой, и между абзацами образуется увеличенная дыра:
Поэтому можно склеить слова или изменить ширину колонки или кегль, чтобы стало лучше.
Внутритекстовые выделения — это отстой. Эту картинку прислали в советы на сайт бюро — какая‑то листовка или брошюра Ельцин‑центра в Екатеринбурге. Ребята хотят рассказать что‑то о Ельцин‑центре — и всё это рассказывают миллионом стилей. Здесь и капитель и «Ельцин‑центр» жирным, как будто это кому‑то чем‑то поможет. Я и так понимаю, что я читаю листовку Ельцин‑центра. В результате эту штуку очень тяжело читать и совершенно непонятно, на что именно здесь обратить внимание. Читать в принципе не хочется. Выглядит уродливо:
Поэтому лучше всего набирать всё спокойно. Просто аккуратно набрал тот же текст. Как только я это сделал, я смог его спокойно прочитать, разобраться, что мне тут хотели сказать, и следующим шагом я просто это аккуратно разложил по полочкам. Теперь у меня не кусок огромного текста, в который надо вчитываться, а аккуратные блоки: покупки, еда, досуг, контакты. Такую штуку воспринять гораздо приятнее и проще:
Следите за тем, как у вас в тексте проходят пробелы. Здесь ребята что‑то набрали, получился колодец из пробелов — и в результате связались «спускаемый пилотируемый союз» и «аппарат корабля МС‑10». Так делать не надо:
Вопрос из зала: «А что тут можно было сделать?»
Самое простое — не выравнивать странно по центру. Просто аккуратно написать и выровнять по левому краю, там бы сразу пробелы не собирались в странный колодец. Они просто не стояли бы друг над другом.
Ещё немного по поводу выравнивания текста по обоим краям. Есть форматы, в которых принято текст выравнивать по обоим краям, чтобы получалась ровная полоса, кирпичная.
Я хочу сказать, что это далеко не всегда так необходимо, как может показаться. В качестве примера хочу привести газету «Учёт. Налоги. Право»:
Газета — это как раз формат, в котором это общепринято выравнивать текст по обоим краям. А вот мы взяли и сделали газету без выравнивания по обоим краям. Никто не умер.
Наоборот, редакции стало легче, потому что, когда ты выравниваешь текст по обоим краям, непременно приходится следить за тем, чтобы в каждой строчке пробелы были не слишком большие, всё подгонять, выгонять и добиваться какого‑то более‑менее ровного набора. Есть всякие умные программы типа Индизайна, которые умеют делать это в полуавтоматическом режиме. Но всё равно это требует ручного контроля.
А, скажем, в вебе пробелы при таком выравнивании вообще нереально контролировать. Насколько я знаю, пока нет такой технологии, которая бы делала это однозначно хорошо. В результате получается дырявость. Поэтому не бойтесь даже в таких вещах, как газета, а может быть, и в книгах, набирать текст по левому краю.
Иногда ради достижения каких‑то эффектов с текстом можно экспериментировать. Перед нами развороты «Гипнэротомахии Полифила», это одно из самых первых изданий и образец для печатников:
Здесь дизайнерская вёрстка. Автор и издатели настолько упоролись с вёрсткой, что в некоторых случаях, даже доделывали звёздочки внизу и чтобы добиться таких аккуратных пирамид.
Иногда такое может сработать для достижения какого‑то эффекта, но по умолчанию основной текст набирать по центру не стоит.
На что надо смотреть, когда вы набираете текст по центру?
Если вы помните, при наборе текста по левому краю надо следить за тем, чтобы справа был воздух, чтобы флаг дышал.
Если говорить про набор текста по центру, он должен дышать с обоих краёв. Если вы сделаете такое, это плохо:
Текст, набранный по центру, требует воздуха с обеих сторон. Тогда у него всё работает. Он работает примерно как якорные объекты, когда они стоят по центру:
При наборе текста по центру нужно следить и за формой текста. Она не должна быть очень навязчивой. Если вдруг у вас где‑нибудь образуется навязчивая пирамида — это плохо. То есть сама пирамида — она может быть и в обратную сторону — привлекает к себе гораздо больше внимания, чем текст:
Поэтому, когда набираете, следите за тем, чтобы форма была наименее навязчивой.
Если вы набираете текст по центру и хотите поставить его в какую‑нибудь форму, например в кружок, то следите, чтобы форма текста хоть немного согласовывалась с той формой, в которую она вписана.
Вот перед нами какой‑то скриншот сервиса «Яндекса» по образованию:
Смотрите, как здесь набрали текст, и он плюс‑минус дружит с формой кружка, в которую вписан. Выглядит в результате аккуратно и опрятно.
А вот, например, кружочки, которые бюро сделало на сайте автопроката «Энви» на Гавайях:
И мы здесь тоже специально очень долго добивались, чтобы текст старался дружить с формой этих кружочков. Прямо сидели и переписывали, подбирали кегль и добивались, чтобы в каждом кружочке было хорошо.