Типографика  настолько обширная область, что ей нет ни конца ни края. Это, своего рода, отдельный вид искусства, базирующийся на определенных правилах посредством набора и верстки.

типографика буквы

Оформление текста включает выбор гарнитуры, кегля, длины строк и расстояния между ними (интерлиньяж), изменение пробелов между буквами (кернинг) и группами букв (трекинг).

оформление текста

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

Но многие веб-дизайнеры до сих пор недооценивают значимость типографики  и необходимость более глубокого изучения. Недостаточные знания по данному вопросу  - это не результат невежества, просто большинство веб-дизайнеров либо ещё не осмыслили значимость типографики, либо это самоучки, которые просто не имеют должного специального образования. Именно поэтому мы на нашем бесплатном курсе «Взрывной старт» уделяем этой теме большое внимание.

Давайте рассмотрим некоторые правила, которые уже сейчас помогут вам начать знакомство с типографикой и зададут правильное направление в изучении этой важной темы.

Цвет шрифта и его размер

Это одно из основополагающих и важных правил в типографике, ведь одна из множества ошибок, которые совершают веб-разработчики — это чрезмерно миниатюрный размер текста. Ещё в начале 2000-х по умолчанию было принято набирать весь текст размером 11px. Но тогда и экраны были меньше, и их разрешение гораздо ниже.  Следовательно, 11px выглядели больше, чем сейчас. Общим правилом считается устанавливать размер основного текста так, чтобы он был равен размеру текста в книге на расстоянии вытянутой руки.

на расстоянии

(Источник: iA)

Рекомендованный размер для современных экранов: 16px для смартфонов и 18-22px для десктопов. От самого шрифта также многое зависит. Некоторые из них будут казаться больше или меньше других при равнозначно заданных значениях.

Цвет текста очень тесно связан как с композицией в целом, так и с главными её элементами. Цвет - самый влиятельный психологический инструмент, имеющийся в распоряжении веб-разработчика. Чтобы настроить читателя на нужный лад,  достаточно сделать акцент на цвете, который соответствует контексту ситуации.

Длина строки

При чтении объемных и длинных текстов наши глаза достаточно быстро устают. Им необходимы паузы, которые возникают благодаря обрыву строки. В момент перехода со строки на строку глаза успевают немного передохнуть. Пусть момент очень краток, но этого вполне достаточно. Чем-то схоже с двигателем, который не всегда работает на полную мощность и поэтому дольше не перегревается.

табличка

Идеальная длина текстовой строки — 40-60 символов с пробелами ( максимально допустимый рубеж — 80 символов с пробелами). При большей длине строки текст будет читать сложнее, глаза не будут успевать передохнуть. Если длина строки будет меньше, то придётся чаще переключаться на последующие текстовые строки.

Высота строки

Интерлиньяж — так принято называть высоту строки. Это основа вертикальной ритмичности во всей типографике. Понимание её сути является одним из ключевых факторов создания хорошей типографики и в цифровом пространстве.

Многие дизайнеры и разработчики рассматривают интерлиньяж как обособленную характеристику текста. Поэтому обычно опираются на собственные представление и понимание о правильности. Вот и получается, что высота строки устанавливается без лишних раздумий, что иногда нарушает целостность текста. Однако интерлиньяж слишком важен, чтобы можно было так безрассудно с ним обращаться. Высота строки всегда зависит от её длины, это очень важно. И, следовательно, чем длиннее строки, тем больше места необходимо оставлять между ними. Также, чем больше размер шрифта, тем больше должен быть интерлиньяж, ведь высота напрямую зависит от размера шрифта.

Цвет шрифта также влияет на выбор высоты. Наиболее тяжелому и темному тексту просто необходимо большее межстрочное пространство. Даже сам шрифт может иметь значение. Некоторые шрифты — в особенности шрифты с насечками — будут казаться тяжелее. Из этого следует, что им также необходимо больше пространства.

Теперь, когда вы уже знаете, что высота строки — это очень важная штука, которую нельзя рассматривать изолированно, давайте обратим внимание на самые оптимальные общепринятые правила. Для абзаца идеальная высота строки должна быть от 1.3 до 1.7. Поэтому текст, имеющий размер 16px должен быть с высотой строки где-то 21-26px. Все это будет зависеть от факторов, о которых было сказано выше: дизайн шрифта, его размер, вес и так далее.

Это основные постулаты, запомните их и применяйте в своей работе. Также, советую Вам ознакомиться с другими статьями в нашем блоге. Уверена, это будет познавательно и интересно. Удачи и отличных заказов!

Как вам материал?