Многие веб-дизайнеры до сих пор недооценивают значимость типографики. За все время я встречал лишь нескольких, кто действительно разбирается в построении шрифтов и понимает, как применять свои знания в работе. Но недостаточные знания по этому вопросу — это вовсе не результат невежества. Я выяснил, что обычно веб-дизайнеры или самоучки, поэтому еще не осмыслили значимость типографики, или они имеют специальное образование, но типографика для них — всего лишь одна из многих дисциплин
Одна из самых значимых вещей в типографике — создание беспрепятственного чтения, которое привлекает читателя и при этом объективно отражает содержимое. Для этого необходимо создавать идеальные абзацы. Существует три способа, и как сказал прославленный типограф и визуальный пропагандист 20 века Джозеф Мюллер-Брокманн
Одна из ошибок большинства веб-сайтов — слишком маленький размер основного текста. Еще в начале 2000-х было по умолчанию было принято писать весть текст размером 11px. Но тогда экраны были меньше, и разрешение экрана ниже. И 11px выглядели больше, чем сейчас.
Общим правилом считается устанавливать размер основного текста так, чтобы он был равен размеру текста в книге на расстоянии вытянутой руки.
Рекомендованный размер для современных экранов: 16px для смартфонов и 18-22px для декстопов. Также многое зависит от самого шрифта. Некоторые шрифты при размере 16px могут казаться значительно больше других, как вы можете увидеть на примере ниже.
Тот же самый текст в Merriweather кажется больше и тяжелее, чем в Georgia
«Цвет шрифта» в типографике не означает непосредственно цвет типа красного, синего или зеленого. Цвет шрифта — это то, как темный тяжелый текст выглядит на светлом фоне. Два шрифта одинакового размера и веса могут ощущаться по-разному. Отличие шрифта Merriweather в приведенном выше примере — он ниже по сравнению с Georgia (если сравнивать засечки и разные основы). Поэтому он воспринимается тяжелее, а цвет шрифта кажется темнее.
При чтении очень длинных текстовых строк наши глаза довольно сильно устают. Им необходимы постоянные паузы, которые возникают благодаря обрыву строки. В момент переключения на следующую строку они успевают немного отдохнуть. Совсем чуть-чуть, но этого вполне достаточно. Чем-то напоминает двигатель, который не все время работает на полную мощность, поэтому дольше не перегревается.
Идеальная длина текстовой строки — 45-75 символов с пробелами. Если длина больше, текст гораздо сложнее читать, так как глаза просто не будут успевать отдохнуть. Если же длина меньше, придется слишком часто переключаться на следующие строки.
Рекомендованная длина строки в гиде Material Desigin от Google
Высота строки или, как часто говорят в печати, интерлиньяж — это основа вертикальной ритмичности во всей типографике. Понимание ее сути является одним из ключевых факторов создания хорошей типографики и в цифровом пространстве.
В интернете интерлиньяж работает иначе: он равномерно распространяется на области нижу и выше самой строки.
Слишком многие дизайнеры или разработчики, рассматривают высоту строки как обособленную характеристику текста. Поэтому обычно они опираются на собственное понимание о правильности.
А это значит, высота строки устанавливается без лишних раздумий. Однако интерлиньяж слишком важен, чтобы с ним можно было так обращаться. Высота строки всегда зависит от ее длины. И чем длиннее строки, тем больше места необходимо оставлять между ними. Кроме того, высота также зависит от размера шрифта. Чем он больше, тем соответственно, больше должен быть интерлиньяж.