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

Веками типографика была ремеслом строгих правил. Типографы жили в своем мире, в котором царили пики, кегли и цицеро. Единицы измерения того времени перекочевали в современную компьютерную графику:

• размер текста измеряется кеглем. Вы никогда не скажете: «я использовал размер шрифта 3.527 мм». Вы скажете: «Я использовал 10й кегль»;
• 1 дюйм равен 72 кеглям. Соответственно, 1 кегль равен 1/72 дюйма, или 1 кегль = 0.3527 мм. Это правило стало общепринятым в восьмидесятые годы. До этого существовало несколько типографических кеглей, рассчитанных на основе футов, дюймов или миллиметров;
• пики (пайки) используются в компьютерном языке PostScript. Этот язык отвечает за описание разметки и используется для печати в высоком разрешении;
• в CSS используются пиксели и цицеро: стили веб-дизайна переводятся в CSS, где как правило используются пиксели, но могут использоваться и цицеро.

Главная задача дизайнера при работе с текстом – обеспечить его читаемость.

Слишком длинные строки делают процесс чтения долгим, сложным и утомительным. Чтобы этого избежать, нужно сделать строки «узнаваемыми» — точные пропорции зависят от высоты и длины текста, расстояния между символами и словами, формы и веса символов. Также играет роль количество символов в строке. Главные правила звучат так:

• не более 60 символов: это правило действует при работе со строками текста (без колонок);
• не более 45−60 символов: это правило действует, если текст представлен в нескольких колонках;
• не более 70−75 символов: это правило действует, если текст представлен в одной колонке.

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

Несколько полезных формул:

• кегль текста, умноженный на 2 = ширина столбца (в пиках);
• 1 пика = 12 кегль;
• 1 цицеро = текущее значение кегля.

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

Рассмотрим использование этих правил на реальном примере.

Необходимо определить ширину столбца текста в цицеро (не в пиках) при том, что используется текст 10 кегля.

• 10 кегль * 2 = 20 пик (ширина столбца в пиках);
• 20 пик * 12 кегль = 240 кегль;
• 1 цицеро = 10 кегль (текущее значения), следовательно, ширина столбца текста в цицеро: 240 / 10 = 24 цицеро.

При работе с адаптивной типографикой у дизайнера появляется ряд дополнительных сложностей. Главная из них — практически полное отсутствие контроля CPL при изменении разрешения отображаемого дизайна. Адаптивный дизайн дает возможность использовать всю ширину экрана, но это не значит, что стоит использовать текст 16 кегля в столбце шириной 2000 пикселей… Также не стоит забывать о хинтинге, кернинге и других технических аспектах.

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

Разные авторы по-разному толкуют понятие адаптивной типографики и те задачи, которые она ставит перед дизайнером. Среди предлагаемых решений:

• увеличение размера текста и использование относительных размеров;
• использовать шрифты для иконок (у них изменяемый размер, а стиль можно корректировать через CSS);
• использовать веб-шрифты, оптимизированные под мобильные устройства (для разных разрешений экрана — разные шрифты);
• использовать соотношения размеров, основанные на золотом сечении;
• использовать рекомендуемый CPL (50−75);
• масштабировать основной размер текста в зависимости от размера и разрешения экрана;
• соотносить размер текста со средним расстоянием между лицом и мониторов (это — один из более нестандартных подходов).

Каждый подход основан на своей собственной логике: градация шрифтов, хинтинг и оптическая градация напрямую связаны с качеством типографики, а золотое сечение — в целом отличный инструмент определения пропорций, который широко применяется в дизайне.

Из всех перечисленных подходов мы подробно разберем два:

• использовать рекомендуемый CPL (50−75);
• масштабировать основной размер текста в зависимости от размера и разрешения экрана.

Ряд специалистов для этих целей использует относительные величины, такие как цицеро и проценты (в противоположность абсолютным величинам наподобие кегля). Преимущество в данном случае заключается в том, что размер всех текстов привязан к единственному параметру и изменяется вместе с ним. Однако в таком случае не учитываются CPL и разрешение экрана. Для того, чтобы решить эту проблему, применяется сбалансированный подход, или принцип Златовласки.

Уникальность этого подхода в том, что он создает макет, который сохраняет значение CPL 66 на столбец и адаптирует размер текста на разных устройствах (учитывая разрешение). И все это — в файлах CSS весом не более 3 кб! Большое достижение, особенно без использования Java Script. Но и здесь есть свои ограничения:

1. сбалансированный подход предполагает, что размер цицеро определяется размером текста по умолчанию в браузере. Таким образом частично теряется контроль за тем, как будет выглядеть страница. Сложно использовать цицеро, т.к. размер картинок всегда определяется в пикселях;
2. сбалансированный подход не позволяет использовать адаптивный макет.

Преимущество сбалансированного подхода – в его простоте, однако что делать, если перед нами стоят следующие требования:

• использовать 100% пространства экрана (вне зависимости от его размера);
• сохранять значение CPL 60;
• использовать адаптивный макет.

Вместо того, чтобы измерять ширину столбца в цицеро, сделаем это в пикселях. Помним, что 1 цицеро равен текущему размеру текста. В таком случае, чтобы сохранить адаптивность и CPL 60:

• использовать несколько столбцов. В CSS это можно сделать с помощью column count;
• изменить значения ширины столбцов с цицеро на пиксели. Рассчитать размер можно по простой формуле: размер = ширина столбца / требуемая ширина столбца в цицеро.