Типографика является одним из наиболее важных аспектов адаптивного веб-дизайна, и оптимизация ваших шрифтов для мобильных устройств является абсолютной необходимостью, если вы хотите, чтобы ваш контент был приемлемым для всех размеров экрана. К счастью, процесс создания гибких шрифтов не очень сложен. Когда мы говорим о гибкости (которая является руководящим принципом в данном случае), мы не можем упускать из виду указанный размер шрифта, который мы выбрали для адаптации к нашему адаптивному веб-сайту. Для этой цели мы можем использовать разные показатели, включая пиксели, ems, rems или проценты. Выбор правильной метрики имеет решающее значение для разработки гибкого, отзывчивого интерфейса.
В этом продолжении по адаптивному веб-дизайну я объясню, как реагировать на динамические шрифты, и проанализирую все вышеупомянутые метрики, сравнивая сильные и слабые стороны каждого варианта.
Пиксели
В течение долгого времени пиксели были предпочтительной единицей веб-дизайнера из-за присущей им точности и точности. Как только значение шрифта будет выбрано для шрифта, размер шрифта останется точно на всех устройствах и браузерах. Хотя такой подход обеспечивает очень точное управление, он противоречит нашей потребности в гибкости и оперативности.
Как большинство читателей уже знают, когда вы устанавливаете размеры для «родительского» элемента, они автоматически применяются к любым «дочерним» элементам посредством наследования. (Вот почему они назвали CSS « каскадными » таблицами стилей.) Например, установка фиксированного значения в пикселях для размера шрифта тела будет проникать почти во все другие элементы вашего дизайна. Когда разработчик хочет назначить разные объявления стилей для каждого отдельного элемента страницы, он или она должны будут вручную установить различные параметры, чтобы переопределить существующие стили.
В результате базовые изменения и корректировки потребуют тщательного изменения всех предыдущих настроек. Это гораздо больше, чем просто неудобно; это может привести к серьезным проблемам с доступностью в различных браузерах и устройствах, многие из которых мешают преднамеренному выбору размера шрифта. У некоторых посетителей могут возникнуть трудности с чтением текста ниже определенного размера, и этого следует абсолютно избегать, особенно учитывая нашу главную цель — создать адаптивный дизайн, который работает со всеми размерами экрана и глазными яблоками.
Если вы применяете дальновидный подход к своим проектам, вариант назначения жестких значений пикселей в качестве размеров шрифта не кажется лучшим выбором. Сегодня устройства имеют разные размеры экрана, а также разную плотность пикселей. Использование универсального размера шрифта для этого огромного ассортимента продуктов противоречит нашему адаптивному подходу.
Эмс
Давайте продолжим, рассматривая ЭМС. Em — это эквивалент размера (в пикселях), определенного в CSS-правиле font-size . Например, если мы создадим <div> Размер Ems можно изменять во всех браузерах, и нет необходимости устанавливать значение для каждого элемента, потому что в этом случае правило может быть применено к «родительскому» элементу и автоматически к его соответствующим «дочерним» элементам посредством каскадного процесса.
Очевидно, что работа с ems подразумевает плюсы и минусы. Хотя они упрощают поддержку типа сайта (поскольку, как упоминалось ранее, все изменения будут автоматически применяться ко всему контенту), это может помешать разработчику, который ищет контроль, точность и предсказуемость с помощью своих шрифтов. К счастью, проблему можно легко решить, используя те же единицы измерения для большей части содержимого, масштабируя только несколько текстовых элементов, таких как headerfooter
Процентное соотношение
Как и ems, проценты являются изменяемыми единицами измерения размера шрифта, и их декларации CSS могут наследоваться. Теоретически, нет большой разницы между процентами и ems; они обе податливые единицы измерения. Не менее важным, чем понимание различий (хотя и незначительных) между ems и процентами, является решающее значение в отношении того, какую единицу измерения вы собираетесь использовать в своем проекте. Вы определенно не хотите использовать ems для определенных элементов вашего дизайна и проценты для других. Один из способов исключить проценты — просто сделать следующее объявление CSS по всему сайту:
{font-size: 100%; }
Это эффективно переопределяет любые настройки браузера по умолчанию или другие нежелательные процентные объявления и оставляет размер шрифта доступным для других методов и метрик. В этом случае содержимое может быть измерено с помощью ems.
Rems
Некоторые из вас могут не знать, что существует другая опция, которая обеспечивает гибкость в определении размера шрифта: rem rem («root Em»). Его поведение аналогично вышеупомянутому модулю em с одним важным отличием: его значение относится к корневому элементу документа (в HTML это элемент <html> Это важное различие позволяет решить многие проблемы, возникающие с вложенными элементами. И, как знает большинство дизайнеров, подавляющее большинство их дизайна по своей сути состоит из вложенных элементов; подобно людям, почти каждый из них где-то имеет «родителя» и наследует определенные качества от них.
Тем не менее, важно отметить, что rems — это совершенно новая единица, и поэтому не все браузеры для настольных компьютеров будут их поддерживать, интерпретировать или отображать правильно. Пока, по крайней мере.
Выводы
Изучив различные варианты измерения для ваших шрифтов, каков наилучший способ приблизиться к вашему типу с точки зрения адаптивного веб-дизайна?
Конечно, ems упрощает масштабирование шрифтов и существенно упрощает обслуживание веб-сайтов. Если вы решите, например, увеличить размер шрифта с помощью процентов, вам просто придется изменить процент, примененный к телу, и ничего больше. Техническое обслуживание на самом деле является большой проблемой, которая заслуживает серьезного рассмотрения в вашем дизайне. Было бы неплохо игнорировать рутинные повседневные аспекты, такие как простота обслуживания и простота таблиц стилей, и полностью сосредоточиться на эстетике и функциональности. Но, вне процесса планирования голубого неба, хороший дизайнер будет уделять большое внимание полезности и прагматизму.
Во-первых, вы должны преобразовать все элементы с фиксированным размером во что-то, что обеспечивает более высокую текучесть. Во-вторых, вы всегда должны помнить о пропорциях элементов страницы и вносить осторожные изменения, чтобы сохранить эти пропорции. Позже в этой серии, с некоторыми примерами, мы увидим практическое применение всех принципов адаптивного веб-дизайна, которые мы описываем в этих статьях. Важно понять основные методологии этих методов в первую очередь. В следующем посте мы перейдем к макету жидкости и к тому, как вы можете комбинировать фиксированную ширину и ширину жидкости на одной странице.
Хотите узнать больше о адаптивном веб-дизайне? Ознакомьтесь с новой книгой SitePoint « Адаптивный веб-дизайн Jump Start» !