Основы адаптивной веб-типографики

Posted on by riasevastopol

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

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

По словам Марко Дагонжика (Marko Dugonjic), арт-директора консалтингового агентства Creative Nights, дизайнеры смогут добиться значительно большего, в случае если смогут синтезировать современные наработки в области адаптивного дизайна с маленькой толикой собственного креатива.

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

  • Адаптивный дизайн — новая эра мобильного маркетинга

Базисные правила

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

1. Размеры шрифтов должны пребывать в прямой зависимости от существующего расстояния между экраном и пользователем. Интернет-ресурс посредством инструмента CSS — медиа запроса (media queries) — обязан распознавать тип экрана и машинально подстраивать сайт под его особенности. Но, как говорит Марко, это разработка не примет решение всецело всей неприятности.

Он рекомендует обратиться к «Калькулятору размеров» Ника Шермана (Nick Sherman) для расчета физического либо принимаемого размера шрифта при том либо другом расстоянии.

2. Сохраняйте гармоничные и удобочитаемые пропорции в параграфе, применяя межбуквенный промежуток, промежутки между словами и высоту строчка. Универсальная типографика (Universal Typography) за авторством Тима Брауна (Tim Brown) — лучшее подспорье в этом вопросе.

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

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

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

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

Это базисные правила, на которых держится вся адаптивная типографика. Ниже представлен опыт создания интернет-брошюры на базе семейства шрифтов Benton Modern с применением максимально дешёвых разработок адаптивного дизайна. Была поставлена задача создать два макета: первый — формальный, второй — экспрессивный.

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

  • Вы кое-что забыли! либо Как неудачные шрифты смогут убить конверсию лендинга

Изучение шрифтов

Сперва был совершён тест всех шрифтов громадных и малых размеров: любой шрифт сжимался и растягивался до предела. Были использованы оптические размеры группы шрифтов The Reading Size (особые шрифты, созданные для маленьких экранов, размеры от 9 до 14 пунктов) для подзаголовков, и дисплейные оптические размеры (созданы для заголовков), каковые употреблялись для главной массы текста.

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

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

Графема — это единица письменной речи (в алфавитных совокупностях — буква). Оказался следующий прототип.

Основы адаптивной веб-типографики

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

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

  • Как типографика воздействует на конверсию лендинг пейдж?

Форматирование контента

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

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

К тому же это разрешило показать возможности скобок в роли графических элементов.

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

Кроме этого кроме этого был использован знак параграфа §.

Но и все это не хватало прекрасно, так что дизайнеры опять просмотрели бессчётные глифы, дабы отыскать подходящие знаки для других разделов. В итоге они предпочли следующее: &какое количество; для раздела «О компании», • для «оптических размеров», курсивный i для «Как это применять», + для раздела с бонусами и т. д. Все эти знаки достаточно редко употребляются в веб-дизайне, исходя из этого их использование в качестве декоративных элементов смотрелось в полной мере естественным.

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

Ширина области просмотра для плавного масштабирования

Единственные параметры в CSS, каковые поддерживают плавное масштабирование — это:

  • vw (1% от ширины области просмотра);
  • vh (1% от высоты области просмотра);
  • vmax (1% от долгой стороны);
  • vmin (1% от маленькой стороны).

Результирующий CSS для одного лишь заголовка складывается из трех различных блоков кода: rems и ширины области просмотра. Как раз они несут ответственность за адаптацию страницы к различным типам экранов:

Как вы имеете возможность видеть, тут использован слишком общий класс (mixin) от Saas (Syntactically Awesome StyleSheets — это метаязык на базе CSS, предназначенный для повышения уровня абстракции CSS упрощения и кода файлов каскадных таблиц стиля).

Функции OpenType

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

Функции OpenType

В случае если вам весьма интересно, как включить функции OpenType в CSS, обратите внимание на эту несколько примеров с префиксами:

  • Сплит-тест: адаптивный дизайн против стандартного макета мобильного лендинга

Экспрессивные подробности

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

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

Как еще возможно привнести что-то броское и необыкновенное в стандартную веб-типографику?

3d-эффекты

Такие эффекты смогут создаваться методом наложения нескольких слоев текстовых теней.

Буквицы

Буквица создается достаточно легко: первая буква обтекается остальным массивом текста. Но в этот самый момент появляются собственные сложности: кросс-браузерное несоответствие не разрешает отображать буквицу верно. К счастью, инженеры из Adobe смогли написать маленький скрипт dropcap.js, что решает эту проблему.

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

Установка ясных подзаголовков

Дабы установить адаптивные подзаголовки, вам потребуется сделать две вещи:

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

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

Пример позиционирования с полями:

Пример безотносительного позиционирования:

  • 5 способов расширить эффективность контента на сайте

Вместо заключения

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

Высоких вам конверсий!

По данным smashingmagazine.comImage source: Victoria Pickering

Случайные статьи:

Занятие 17 Основы типографики, веб типографика


Подборка похожих статей:

riasevastopol

More Posts