Типографика в вебе
Когда-то текст верстали в основном профессионалы с заботой и вниманием ко книгопечатной традиции — набирали текст в распорку, контролировали межсловные расстояния, длину строки, подбирали интерлиньяж без настройки line-height: auto, смотрели на то, какой узор образуют пробелы на странице, даже придумали для таких узоров термин — rivers (коридоры).
А потом у людей появился компьютер с Вордом и возможность создавать свои веб-странички на «народ дот ру».
Когда я бегал за лягушками в плаще князя Владимира и кинжалом Маугли, которые мне сделал дед, в вебе был бардак с текстом. Ширина строки была равна ширине экрана, абзацы отбивались одновременно красной и слепой строкой, картинки обтекались текстом, а по книжной привычке люди верстали текст в распорку (выравнивание по ширине, justify)
То что эти проблемы исчезли, не значит что люди научились верстать. Навык не хуй — его ловким движением из штанины не вынешь. Стоит зайти на лучший сайт в интернете про лучшие сайты в интернете, рандомно потыкать колесиком на превьюшки и посмотреть на то, как люди относятся к тексту.
Самое ужасное это то, что люди искренне хотят сделать лучше. Почти все со старых и новых скринов исчезло, если бы люди просто сохранили стандартное поведение. Даже обидно как-то. Намерения то хорошие.
Те, кто знаком с версткой текста, просто ставят табу на сложную типографику в вебе. А многоколоночная верстка с ровными краями это сложно.
В газетах колонка текста всегда одного размера, поэтому текст можно упихнуть в прямоугольную колонку красиво. Если какие-то слова мешают красоте, то применяют редакторские приемы.
При наведении красоты надо следить за тем, чтобы не было «вдов» и «сирот», большого количества переносов подряд, переносы должны быть правильными — желательно не переносить по две буквы на новую строку, не должно быть коридоров из просветов и, конечно, надо следить за тем, чтобы пробелы были равномерными.
Идеальные колонки встречаются не всегда даже в печатной продукции, где есть инструменты для того, чтобы все наладить вручную.
В вебе можно подобрать ширину колонки и размер текста так, чтобы колонка смотрелась довольно прилично. Но веб это не газета, тут одна страниц для всех размеров экрана. Поэтому если зайти с телефона, то можно заметить дырени.
Верстка с ровными краями нужна была, чтобы экономить деньги на производстве. Ну и еще это красиво, видимо.
И тут возникает классический баланс между красотой и экономией. Если просто сделать текст во всю ширину страницы, то, конечно, какой-то процентик бумаги сэкономится, а капиталисты не привыкли забивать на процентики.
Но если ты хочешь добиться красивых колонок, то сверстать текст с рваным правым краем будет дешевле.
Чисто ради эксперимента я вставил в классический шаблон ворда на страницы А5 полный текст «Войны и мира». Текст в распорку занял 1250 страниц, а текст с рваным правым краем — 1272. Книга стала длиннее почти на 2%, зато на каждой странице есть абзац с рваными ритмом и иногда коридорчиком.
К тому же текст с ровным левым и рваным правым краем удобнее читать. Я не читал исследований, но чисто по опыту я намного чаще терял начало следующей строки именно в книгах, где у текста ровные края.
Но что делать, если очень-очень хочется бомбануть свою страницу типографическими изысками?
В ЦСС появились свойства, которые позволяют расставлять переносы в тексте, следить за краем текста и обрезать «коробку», в которой находятся литеры букв.
Поддержка пока плохая, но часть проблем уже можно пофиксить.
Добавляем строчку hyphenate: auto, которая автоматически расставляет переносы по словарю. В Хроме пока нет поддержки других свойств, но скоро можно будет указать: ограничение на количество переносимых символов; зону переноса, попав в которую текст перенесется; максимальное количество последовательных переносов.
Когда мы задаем font-size, то на самом деле задаем размер площадки, внутри которой рассчитывается размер шрифта. Из-за этого возникают проблемы с расстановкой расстояний и выравниванием.
Чтобы ровно поставить крупный заголовок рядом с обычным текстом, дизайнеры в Фигме ломали текстовый контейнер, а их за это били по рукам разработчики.
Теперь «поломанный» контейнер это норм, в ЦСС появилось экспериментальное свойство, которое позволит настроить такое же поведение.
leading-trim: both;
text-edge: cap alphabetic;
Ровно из-за этих же контейнеров текст иногда плохо встает в кнопки и инпуты по вертикали:
Вроде как есть проблема с тем, что при обрезании текстового контейнера, его высота может быть не целым значением и придется округлять либо вверх, либо вниз. Я может чего-то не понимаю, но вроде тут проблемы нет. Округляем всегда в верхнюю сторону, чтобы не срезать вылезающие элементы у букв, а два лишних пикселя намного лучше, чем двадцать.
Помимо плохого выравнивания большие заголовки не влезают в экран, а слова перескакивают по одному. В полиграфической продукции заголовки балансируют, то есть не допускают того, чтобы строки заголовка были слишком разными по длине.
Я уже говорил про то, что можно контролировать сирот с помощью orphans, а можно сказать тексту text-wrap: pretty; На сайте W3C сказано: «The pretty value is intended for body text, where the last line is expected to be a bit shorter than the average line». Я немного потыкал и иногда получается, что свойство убирает много висячих предлогов, а не только убирает вдов.
И там еще куча всего в разработке. Веб постепенно внедряет инструменты, которые позволяет делать типографику, близкую к полиграфической.
Так глядишь, в ГОСТы добавят требования, чтобы была включена галочка на переносе слов.
