Техники адаптивной типографской разметки текста

От автора: Когда дело доходит до адаптивного текста в Сети, помимо простого изменения размера контейнера и перезаливки текста внутри него можно сделать еще многое. Эта подробная статья раскрывает различные методы адаптации текстов.

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

СНАЧАЛА САМОЕ ГЛАВНОЕ: ДЕЛАЕМ ТЕКСТ ДОСТУПНЫМ

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

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

Выбрать читаемую гарнитуру шрифта

При выборе шрифта важно выбрать читаемый. Не все виды шрифтов подходят для тела текста. Некоторые, вроде шрифтов artistic script, могут отлично подойти для коротких заголовков, но для основного текста требуется легко читаемый шрифт. Существует множество шрифтов и сервисов, подобных Google Web Fonts и Typekit, предоставляющих длинный список опций, предлагающих помощь с выбором шрифтов.

Кроме того, правило @font-face в CSS дает вам возможность применять на своей странице пользовательские шрифты, и при весьма хорошей браузерной поддержке можно уже сейчас начать ими пользоваться, а также обеспечить неподдерживающие браузеры альтернативным шрифтом. Для определения шрифта с помощью правила @font-face в нижеприведенном примере мы собираемся воспользоваться надежным синтаксисом Пола Айриша (Paul Irish).

Из-за разнообразия поддерживаемых браузерами форматов вам придется создать «набор» шрифтов, состоящий по меньшей мере из трех файлов, для получения браузерной поддержки: eot, woff и truetype.

Доступны сотни бесплатных наборов шрифтов, содержащих все виды файлов, нужных вам для @font-face, а если вам нужен пользовательский шрифт, для которого требуется ваш собственный набор, то всегда можно применить Font Squirrel’s Font-Face Generator, отлично генерирующий все, что нужно для добавления нового шрифта на страницу, только убедитесь, что шрифт, для которого вам нужно сгенерировать @font-face, можно использовать на законных основаниях, и тогда можете продолжать.

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

Браузеры станут отображать первый шрифт из списка, на который наткнутся, поэтому если ваш пользователь просматривает страницу в браузере, поддерживающем @font-face, то увидит пользовательский шрифт. Если нет, то увидит предоставленные вами альтернативные варианты, а если это не удастся, то сможет увидеть общую опцию.

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

Источники:

Доступность цвета шрифта

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

Рекомендации по доступности контента W3C определяют минимальную контрастность текста и его фона для того, чтобы он читался людьми с умеренным снижением зрения (это вполне обычный процесс). Еще один эксперимент подтверждает, что время чтения снижается, когда текст и фон сильно контрастируют. Более того, чувствительность к контрасту с возрастом снижается.— вебсайт Contrast Rebellion

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

Есть несколько средств, позволяющих измерить уровень контрастности применяемых вами в дизайне цветов, один из них – этот инструмент, который, кроме того, можно использовать для нахождения цветовых сочетаний, и который подсчитывает контрастность согласно Рекомендациям доступности контента W3C.

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

По сути, медиазапрос освещенности luminosity дает возможность менять стили веб-страницы внутри правила CSS @media, как в обычном медиазапросе при определении новых стилей в зависимости от размера экрана, но в данном случае вы определяете новые свойства на основе определенного сенсором устройства значения освещенности, которое принимает одно из трех значений: тусклое (dim), нормальное (normal) и обильное (washed).

Например, для смены цвета фона и текста в разных условиях освещенности вы написали бы что-то вроде этого:

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

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

Прочесть больше о медиазапросе освещенности можно в рабочем проекте медиазапросов Уровня 4 W3C.

Лучше использовать «настоящий» текст, а не графический

Текст можно трансформировать в звук с помощью голосовых синтезаторов экранных скринридеров. Также его без потери качества можно увеличивать с помощью экранного увеличения или специальной программы. Существует две основных причины, почему в целях доступности так важно, чтобы содержимое было в тестовом формате. Хотя возможно обеспечить альтернативный текст для графики, чаще всего в ней нельзя увеличивать текст без потери качества (если только графика не векторная, такая как масштабируемая векторная графика [SVG] или Flash, но это означает потенциальные проблемы доступности).— Помните о веб-доступности

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

Теперь, когда основные моменты доступности главного шрифта раскрыты, мы исследуем различные способы создания гибкого и адаптивного веб-текста.

ДЕЛАЕМ БОЛЬШИЕ ЗАГОЛОВКИ АДАПТИВНЫМИ

Применение плагина jQuery

Существует три достаточно известных плагина для адаптации больших заголовков: FitText и slabText. С их помощью можно создавать большие, смелые адаптивные заголовки, при любых размерах заполняющие ширину своего родительского элемента.

Среди них, кажется, один имеет преимущества перед двумя остальными – это плагин slabText разработчика Брайана МакАлистера (Brian McAllister), который при отображении текста сочетает FitText с алгоритмом slabtype Эрика Лойера (Erik Loyer) для создания гибких и масштабируемых адаптивных заголовков.

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

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

Вот демо-пример использования плагина slabText. Взглянуть на его исходник можно, посмотрев код в закладках HTML, CSS и JS. Код довольно простой и говорит сам за себя. Попробуйте смотреть демо-пример в полноэкранном режиме и менять окно браузера, чтобы было видно, как размер текста адаптируется к размеру экрана.

See the Pen Responsive Headline using the slabText Plugin by Sara Soueidan (@SaraSoueidan) on CodePen

И вуаля! У вас получился полностью адаптивный, гибкий, большой и четкий заголовок, который отлично смотрится на экранах всех размеров. Плагином BigText Зака Летермана (Zach Leatherman) пользоваться тоже легко и просто. jQuery BigText принимает один элемент и меняет размер текста внутри div’а его дочернего элемента, чтобы приспособиться к ширине родительского элемента. Разметка будет выглядеть так:

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

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

Использование единиц измерения окна просмотра CSS

Эффекта, аналогичного достигнутому предыдущими плагинами, можно добиться с помощью единиц измерения окна просмотра CSS: vw, vh, vmax и vmin.

Применение таких единиц дает вам возможность обеспечить постоянное соответствие текста ширине своего контейнера, так как размер шрифта меняется относительно исходного содержащего блока, окна просмотра, который является размером окна браузера, и при изменении его ширины также меняется размер шрифта. Звучит очень похоже на то, как работают вышеприведенные FitText и slabText, верно? Это весьма удивительно, принимая во внимание, что того же эффекта можно добиться не с помощью плагинов jQuery, а путем применения одного лишь CSS. Однако результаты, достигнутые с помощью единиц измерения, менее гибкие, чем с помощью плагинов, так как fitText и slabText (а также bigText) автоматически растягивают заголовки с тем, чтобы те заполняли ширину своего контейнера во всех строках, поэтому они продолжают работать и при изменении количества текста в заголовке, но это не случай применения единиц окна просмотра, так как для них вам придется вручную регулировать размеры.

Длина на основе процентного соотношения окна просмотра относительна размеру исходного содержащего блока. При изменении высоты или ширины блока они соответственно масштабируются.

1vw = равно 1% ширины исходного содержащего блока. 1vh = равно 1% высоты исходного содержащего блока. 1vmin = равно меньшему из ‘vw’ или ‘vh’. 1vmax = равно большему из ‘vw’ или ‘vh’. — Раздел значений и единиц измерения W3C Уровень 3

При использовании этих единиц с font-size всего одна буква принимает размер шрифта, но, цитирую Криса Койера (Chris Coyier): «Как известно, в немоноширинных шрифтах ширина буквы довольно произвольна. Думаю, нужно лишь настроить значения так, как вам требуется. Чем, в общем, мы и занимаемся, правильно?».

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

See the Pen Responsive Headline Using CSS Viewport Units by Sara Soueidan (@SaraSoueidan) on CodePen

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

Обратите внимание на то, что при изменении окна браузера шрифт не приспосабливается к новому размеру окна просмотра, что, скорее всего, является дефектом. Размер шрифта меняется так, чтобы подходить к размеру своего контейнера при обновлении страницы. Чтобы исправить эту проблему (позволить изменение размера без необходимости в обновлении страницы) вам нужно вызвать «перерисовку» (repaint) элемента. Сделать это можно, последовав примеру Криса Койера (Chris Coyier) и применив для перерисовки jQuery. Ради того, чтобы вышеприведенный демо-пример заработал, я использовал фрагмент кода Криса, меняющий z-index заголовка при изменении размера окна, вызывая перерисовку и, следовательно, из примера видно, как заголовок меняется при изменении размера браузера.

Если хотите побольше узнать о единицах измерения окна просмотра CSS, предлагаю к рассмотрению следующие ресурсы:

Использование медиазапросов

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

Предположим, у вас в разметке имеется заголовок первого уровня, его можно заставить менять размер на разных экранах с помощью медиазапросов, как здесь:

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

ДЕЛАЕМ АДАПТИВНЫМ ТЕКСТ BODY

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

Применение em и медизапросов

Итан Маркотт (Ethan Marcotte), прародитель идеи адаптивного веб-дизайна, написал великолепную статью в блог Adobe Typekit, объясняя, почему применять em (и rem, который мы рассмотрим в следующем разделе) для изменения размера шрифта гораздо лучше, чем пиксели.

До детализации преимуществ применения em важно знать, почему пиксели – это плохая идея. Пиксели обеспечивают высокий уровень контроля над размером текста, но имеют широко известный недостаток: текст не масштабируется при изменении его размера в Internet Explorer’е, отчего у вашего читателя нет возможности при необходимости увеличить размер шрифта на странице, когда вы пользуетесь пикселями. «Сейчас, совершенно верно, многие браузеры настольных компьютеров, включая более поздние версии IE, могут некоторым образом увеличивать/уменьшать страницу, что позволяет увеличить размер всего дизайна, включая текст. Но более старые версии IE, увы, все еще отстают». С другой стороны, применение для изменения размера текста em совершенно избавляет нас от этой проблемы.

Более того, рекомендуется использовать значение процентного соотношения для размера шрифта body страницы и определять размер контента пропорционально этому значению. Заявив размер шрифта body в процентах, вы гарантируете гибкую основу, на базе которой можно менять размеры текста с помощью относительных единиц вроде em. Определение размера шрифта body в 100% устанавливает текст на размер браузера по умолчанию, который обычно составляет 16px.

Многие разработчики склонны – или предпочитают – пользоваться базовым значением body в 62,5% вместо 100%, так как окончательный примененный к нему размер шрифта будет в точности 10px и, таким образом, становится гораздо легче определять размеры остальных шрифтов страницы относительно этого числа, но Ричард Раттер (Richard Rutter), автор исходной методики 62,5%, написал статью для A List Apart, где рекомендует 100% как гораздо лучшую основу, гарантирующую более стабильные кроссбраузерные результаты.

Итак, помня об этом, можно сделать текст своей страницы адаптивным с помощью em и медиазапросов. Простейший пример будет примерно таким:

Чтобы изменить шрифт для более маленьких экранов с помощью медиазапросов, достаточно просто изменить размер шрифта body, а так как текст страницы масштабируется пропорционально ему, весь текст целиком тоже изменится, если поменять всего одну строку CSS:

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

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

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

Значение высоты строки, которое облегчает чтение и не действует отрицательно на зрение — 1,4em для текста тела и 1,2em – для заголовков. Они могут меняться в зависимости от применяемых вами шрифтов, но по сути они обычные. Так, добавив к вышеприведенным правилам пропорциональные значения высоты строки, мы получим:

Еще лучше, более гибко и удобно, получится, если установить высоту строк с помощью значений без единиц измерения. Эрик Мейер (Eric Meyer) написал отличную и очень понятную статью, объясняющую, почему предпочтительнее установить высоту строки в них. Найдите время ее прочесть. Некоторые важные моменты:

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

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

Браузеры по умолчанию обращаются с абзацами, устанавливая им верхнее и нижнее поле в 1em. В нашем случае это дает промежутки между абзацами в 12px и, следовательно, нарушает заданную ритмику текста. Чтобы ее поддерживать, промежутки между абзацами нужно привязать к основной единице измерения строки. Это сравнительно просто сделать, если установить значения верхнего и нижнего полей равными высоте строки.— Ричард Раттер (Richard Rutter) «Сочиняйте вертикальную ритмику», блог 24Ways

3. Для установки размеров шрифта в em есть простое правило, которому нужно следовать при определении альтернативы em пиксельному значению. Статья Итана Маркотта (Ethan Marcotte) в блоге Typekit объясняет, как точно высчитать размеры шрифта в em, поэтому постарайтесь прочесть ее, если не знаете этого.

Применение rem и медиазапросов

Как и em, rem – тоже относительная единица измерения CSS. Она очень похожа на em за исключением того, что размер шрифта, определенный с помощью rem, устанавливается относительно размера шрифта корневого элемента – html, а не body, вот откуда взялась буква r в rem, так как rem означает “root em“.

Изменение размера текста с помощью rem очень похоже на то же самое с em, с теми же преимуществами и одним маленьким отличием: вы устанавливаете размер шрифта в 100% к элементу html вместо элемента body, а затем для изменения текста в медиазапросах меняете значение элемента html, как мы это делали ранее с элементом body.

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

Если вы решите, что пункты списка должны быть font-size: 1.1em, а затем в них должны быть вложенные списки, они будут каскадироваться и увеличивать размер шрифта дочерних списков. Оно вам наверняка не нужно. Можно исправить все с помощью li li { font-size: 1em; }, но это один из тех моментов, которые способны разрушить всю работу. Тут-то и пригодится rem, но из-за не слишком большой браузерной поддержки (IE 9+) он оказаться весьма коварным.— Почему Em’ы? (статья Криса Койера (Chris Coyier)

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

Если вы пользуетесь препроцессором CSS вроде Sass, что я настоятельно рекомендую делать, то можно применить микс, который проделает для вас все вычисления альтернативного варианта. Для rem есть несколько миксинов, можно выбрать самый подходящий и начать уже сегодня применять rem в своих проектах.

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

Применение единиц измерения окна просмотра CSS

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

Применение этих единиц для текста body обладает явными преимуществами перед предыдущими методами – с em и rem текст становится на 100% гибким и не зависит от набора контрольных точек медиазапроса; он будет менять размер и подстраиваться к размеру своего контейнера без оглядки на то, как или когда меняется ширина.

Пример использования единиц измерения окна просмотра при создании гибкого текста вы увидите в следующем разделе.

Использование плагина jQuery

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

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

Если строка лишком короткая, взгляд придется часто переводить обратно, нарушая ритм чтения. Слишком короткие строки также имеют тенденцию ввергать читателей в напряженное состояние, заставляя их начинать чтение следующей строки до окончания текущей (и таким образом пропуская потенциально важные слова).—Читаемость: оптимальная длина строки

Хорошая длина позволяет взгляду читателя легко и естественно скользить от окончания одной строки к началу следующей. Оптимальной длиной строки текста тела считается 50-60 символов включая пробелы, а кое-кто говорит, что позволительно до 75 и даже 80 символов.

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

Помня об этом, лучше всего отыскать способ уменьшить размер шрифта на маленьком экране и увеличить его на большом, таким образом уменьшая количество слов на больших экранах и увеличивая его на маленьких с сохранением разумного количества слов и улучшением читаемости. И желательно добиться такого изменения размера автоматически – без ручной установки размера шрифта в медиазапросах, получив, таким образом, на 100% гибкий текст body, что в сочетании с относительной высотой строки и сбалансированной ритмикой по вертикали создаст оптимальное впечатление от чтения или, по меньшей мере, приблизит нас к идеалу.

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

Ниже приведен пример использования единиц измерения окна просмотра для текста body. При изменении размера браузера и окна просмотра ширина уменьшается, текст становится слишком мелким для нормального чтения по достижении ширины окна просмотра примерно в 480px. Я добавил пару медиазапросов для регулировки размера на маленьких экранах и прокомментировал их для того, чтобы было видно, что шрифт продолжает уменьшаться в размерах, пока не станет совершенно нечитаемым. Уберите комментарии правил медиазапросов, если хотите отрегулировать размер шрифта на маленьких экранах.

See the Pen Fluid Body Type using Viewport Units by Sara Soueidan (@SaraSoueidan) on CodePen

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

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

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

See the Pen Fluid Body Type using FlowTypeJS by Sara Soueidan (@SaraSoueidan) on CodePen

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

Использование запросов к элементам

Запросы к элементам похожи на медиазапросы тем, что при соответствии условию будет применен некий CSS. Условия таких запросов (как min-width, max-width, min-height и max-height) основаны на элементах, а не экранах. Но дело в том, что запросы к элементам в CSS еще даже не существуют.

Концепция родилась в статье Иана Сторма Тейлора (Ian Storm Taylor), где он объясняет, почему добиться действительно модульного CSS нельзя с помощью медиазапросов, и что возможность назначения контрольных точек к элементу, а не браузеру – гораздо лучший способ построения элементов многократного использования с модульными стилями. Запрос к элементу будет выглядеть примерно так:

Вслед за статьей Иана была опубликована еще одна статья на эту тему в Smashing Magazine, и Тайсоном Матанихом (Tyson Matanich) представлен полифил запросов к элементу. С другой стороны, полифил ElementQuery использует аналогичный вышеприведенному синтаксис, поддерживая селектор атрибута ~= для проверки того, содержится ли значение в разделенном пробелами списке. Например:

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

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

Чтобы сделать навигацию полностью гибкой и, таким образом, многократной используемой, можно было бы определить адаптивные стили в зависимости от того, как меняется ее собственная ширина. Получится, что вы скажете: без разницы, где находится навигация – в широком верхнем колонтитуле или узкой боковой колонке – мне нужно, чтобы ее ссылки «плавали» рядом друг с другом и размер шрифта был 1em, когда она достаточно широкая, чтобы содержать свои плавающие элементы – например, когда ее ширина больше или равна 400px, а если она менее 400px, нужно, чтобы пункты навигации находились один над другим, а размер их шрифта уменьшился до 0,8em.

Итак, видите: этот метод похож на предыдущие, где использовались em и rem с медиазапросами, но последние заменены на запросы к элементам.

Тайсон Матаних (Tyson Matanich) создал подборку демо-примеров на сайте Codepen, демонстрирующих, как можно сделать некоторые элементы адаптивными с помощью полифила ElementQuery. Ниже приведен один из них, показывающий изменение стилей навигации в зависимости от ее собственной ширины. Посмотрите в закладке CSS и сами поиграйте с кодом, чтобы увидеть изменение стилей.

See the Pen Responsive menu using elementQuery by Sara Soueidan (@SaraSoueidan) on CodePen

ИНТЕРАКТИВНО АДАПТИВНЫЙ ТЕКСТ?

Весьма свежая и довольно интересная концепция «адаптации» текста на основе близости пользователя к экрану была представлена хорватским веб-дизайнером Марко Дугонжичем (Marko Dugonjic), где он применяет для изменения размера текста страницы опознавание лица и веб-камеру, что, должен вам сказать, грандиозная идея!

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

Текст демо-пример увеличивается, если вы отодвигаетесь от экрана, и уменьшается при вашем приближении, поддерживая читаемую длину строки, не превышающую рекомендуемое количество слов при уменьшении текста. Правда, здорово? 🙂

ПОСЛЕСЛОВИЕ

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

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

Сделать типографику текста своей страницы читаемой несложно, но очень важно, если вы занимаетесь адаптивными вебсайтами. Надеюсь, эта статья помогла вам рассмотреть спектр тех техник, из которых можно выбирать при «адаптации» текстов, и надеюсь, что вы почерпнули из нее что-то новое и она оказалась вам полезной. Благодарю за прочтение! =)

Автор: Sara Soueidan

Источник: //tympanus.net/

Редакция: Команда webformyself.

Комментарии Вконтакте:

Комментарии (1)