Типографика вашего сайта

Большое количества народа, включая братьев-дизайнеров, считают, что типографика – это исключительно выбор гарнитуры, размера шрифта и его «жирности». К сожалению, для большей массы онлайн населения всё на этом обычно заканчивается.

Хочу заметить, что для получения качественной типографики требуется гораздо больше элементов, и зачастую такие детали часто упускаются из виду. В этой статье мы поговорим о том, как применить необходимые элементы к веб-дизайну вместе с CSS. Я предложу несколько простых способов, которые позволят вам улучшить типографику и сделать ваш ресурс более удобным.

На первое место я бы поставил размер наборной строки. Как известно, для глаза читателя короткие строки весьма утомительны. В то же время длинные уничтожают ритм чтения, так как читатель с трудом находит следующую строку текста. Исключительная ситуация, в которой можно использовать короткие строки – это малое количество текста. Для оптимальной читабельности длина строки должна быть между 40 и 80 символами, вместе с пробелами. Если вы решили создать одну колонку – 65 символов считаются эталоном. Длину строки несложно вычислить, если вы используете метод Брингхарста. В этом случае вам нужно умножать размер шрифта на 30. Представим, что размер шрифта 10px, умножайте его на 30. Получаем 300px, или примерно 65 символов в строке.

Интерлиньяж. Дизайнер с опытом знает, что это некоторое пространство между строками текста в теле заметки. Для читабельности этот фактор играет огромную роль. Если вы сможете правильно разделить строки, то читабельность текста на порядок повысится. Интерлиньяж может также видоизменять типографический цвет текста, который является тоном композиции. На интерлиньяж может влиять большое количество факторов от гарнитуры до длины строки и т.д. Чем длиннее ваша строка, тем больше интерлиньяж. Соответственно, чем больше размер шрифта, тем меньше интерлиньяж. Я бы рекомендовал вам устанавливать интерлиньяж на 2-5pt больше по сравнению с размером шрифта. Конечно, это зависит от гарнитуры. К примеру, если шрифт 12pt, то интерлиньяж должен быть 15pt или же 16pt.

Верхние и нижние висячие строчки могут создавать некрасивые куски, негативно влияя на читабельность текста. Верхняя висячая строка – это строка текста или же слово в конце параграфа. Нижняя – это слово и короткая строка текста в самом начале или в конце колонки. Она отделена от всего остального текста. Для высокой читабельности вы можете увеличить размер шрифта, длину строки, разрыв между словами и интерлиньяж. В этом случае гость вашего сайта задержится и прочитает контент до конца. Удобство чтения текста – ключевой момент, который влияет на настроение читателя.

Не забывайте подчищать рваные края. Когда вы создаете блок текста с выравниванием по правому или левому краю, нужно подчистить рваные каря и гармонично сбалансировать получившийся текст. Рваными краями я называю неровные строки. Такие строки могут отвлекать читателя. Хороший край текста должен быть равномерным, законченным и сбалансированным. Конечно, этого нельзя контролировать при помощи CSS. На этом этапе работать нужно вручную. При усердной и кропотливой работе над текстом, результаты не заставят себя ждать. Пользователей на сайте станет больше, а ваше эстетическое либидо будет целиком удовлетворено.

Немного полезной рекламы для веб-мастеров. Не сливайте свой траф впустую и работайте с профессиональными партнерами на нашем рынке. Лучшие условия, адекватный саппорт и стабильные выплаты каждую неделю. Конверт может быть намного выше, чем вы думаете.