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

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

Принципы адаптивного шрифта

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

Изменение размера шрифта с помощью rems

Большинство дизайнеров для определения размеров шрифтов  используют либо пиксели, либо ems. Ems являются более подходящим вариантом, так как они позволяют пользователям изменять размер шрифта в своем браузере. Но ems относятся к родительскому элементу, а это означает, что они более сложные в использовании, чем пиксели, что ещё больше усложняется в адаптивном дизайне, где существуют больше размеры и нужно отслеживать соотношения.

Rems предлагают лучшую альтернативу ems. Они работают почти одинаково, за исключением одного ключевого отличия: единицы rem относятся к html элементу, а не к родительским элементам. Это делает поддерживание надлежащего размера вашего шрифта более простым.

Единицы rem в настоящее время поддерживается во всех основных современных браузерах, в том числе Opera, начиная с версии 11.6, а также IE9. 

Поскольку вы будете использовать единицы rem, нужно убедиться, что вы применяете их к элементам в html, а не к body. Это должно выглядеть так:

html { font-size:100%; }

Теперь единицы rem будут применяться по умолчанию.

Далее вам необходимо указать размер шрифта для каждого размера экрана. Нужно экспериментировать с размерами шрифта на различных устройствах, чтобы увидеть, как лучше. Это во многом зависит от выбранных шрифтов и от дизайна в целом. Например CSS-код может выглядеть примерно так:

@media (max-width: 640px) { body {font-size:1.2rem;} }

 @media (min-width: 640px) { body {font-size:1rem;} } 

@media (min-width:960px) { body {font-size:1.2rem;} }

 @media (min-width:1100px) { body {font-size:1.5rem;} } 

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

Естественно, вы хотите добавить дополнительные указания для ваших элементов, таких как, допустим, h1. Чтобы увидеть, как на самом деле будет выглядеть шрифт, можно использовать Web Font Specimen.

Поддержание оптимальной длины строки

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

В свое время было довольно много дискуссий на тему, какая длинна строки является оптимальной и более удобной для чтения. Но в соответствии с Baymard Institute был достигнут консенсус — 50 — 75 символов в строке.

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

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

Мы должны также установить максимальную ширину ( или  break points) для областей текстового контента. Посмотрите на размер шрифта, который вы используете для данного размера экрана, а затем определите ширину контейнера контента, когда в строке приблизительно 75 символов. Именно эта длина становится максимальной шириной контейнера.

Например, на используемом устройстве  размер шрифта по умолчанию 16px, и вы хотите, чтобы ваш размер шрифта стал 20px (допустим, для данного примера мы используем шрифт с засечками Droid Serif). Это означает, что вы для шрифта будете задавать размер 1.25rem. При этом размера шрифта, ширина контейнера должна быть 675px. У нас в среднем получается количество символов 60.

Чтобы задать ширину контейнера, просто используйте этот код:

@media (min-width: 950px) { .container {width:675px;} } 

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

Для больших экранов,можно разделить содержание на несколько столбцов. Например, вы работаете с IPad в альбомной ориентации. Ширина вашего экрана 2048px. Растяжение строк  делает текст трудно читаемым. Но, если центрировать контент и сделать строки короче, появляется возможность просмотра контента в горизонтальном положении.

Таким образом, можно установить две колонки, или даже три — в зависимости от размера шрифта. Размещение контента в колонках делает текст читаемым и потребность изменения макета пропадает.

Код является достаточно простым.

@media (min-width:1140px) { .content { -webkit-column-count: 2; -webkit-column-gap: 1em; -moz-column-count: 2; -moz-column-gap: 1em; column-count: 2; column-gap: 1em; } } 

Теперь на экранах шириной больше 1140 пикселей, текст будет разделен на две колонки, что помогает сделать длину строк более читаемой.

Использование альтернативных шрифтов 

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

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

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

Что мы можем сделать, так это для больших дисплеев использовать League Script  (iPad, ноутбуки, домашние компьютеры), и изменить шрифт на новый для небольших экранов (например, iPhone или на других смартфонах).

Чтобы сделать это, нужно просто указать код:

@media (min-width:960px) { h1 {font-family:"League Script", script;} } @media (max-width:960px) { h1 {font-family:"Droid Serif", serif;} } 

Конечно, это может быть сделано не только для заголовков.

Заключение

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

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

Автор: Cameron Chapman