—»     —»   Побеждая предвзятость к «эмам»
  Раздел: Шрифты   Нет комментариев  

Побеждая предвзятость к «эмам»



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

Побеждая предвзятость к «эмам»

Главное - размер

Конструируя веб-сайты, нам приходится искать способы оповещения браузеров о величине различных объектов: "этот заголовок такого-то размера", "этот вкладыш такой-то высоты", "этот бланк шире, чем тот" - таким образом и размечается страница. Пиксели всегда служили нам оптимальной единицей измерения; ведь конечный продукт нашего труда будет отображаться на экране, в чём же ещё измерять его параметры?!

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

Проблемность пикселей

Оливер Райхенштайн (Oliver Reichenstein) давно заметил: "Лицо веб-ресурса на 95% формируется типографикой", но нам понадобились годы, чтобы свыкнуться с этой мыслью. Контент и пользователь - вот наши, веб-дизайнеров, приоритеты, а владение приёмами дизайна типографского оформления помогает нам отдавать им должное.

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

Побеждая предвзятость к «эмам»

Веб-дизайнеры часто "намертво" закладывают базовый размер шрифта в CSS-вёрстке...

Побеждая предвзятость к «эмам»

... мешая пользователю создавать себе условия, более удобные для чтения, явно снижая доступность контента.

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

Побеждая предвзятость к «эмам»

а от этой величины уже можно отталкиваться.

Наша шкала типографских значений

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

Побеждая предвзятость к «эмам»

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

Адаптируем эту шкалу к условиям нашей типографской разметки, "одев" её в CSS-"обёртку" примерно таким образом:

Побеждая предвзятость к «эмам»

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

Призовём на помощь "эмы"

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

1 "эм" равен текущему размеру шрифта. Если размер шрифта внутри 'div'-блока задан в 16 пкс, то и 1 "эм" для текста внутри этого 'div'-блока составляет эквивалент 16 пкс. Если размер шрифта внутри этого же 'div'-блока меняется на 20 пкс, то и 1 "эм" для данного 'div'-блока становится эквивалентен 20 пкс.

Название "эм" пришло из печатной типографики. Когда именно появился этот термин, неизвестно, но происхождение его таково: прописная буква "М" (произносимая как "эм") очерчивается почти точно по краям литой квадратной печатной формы, служащей "фундаментом" символа, отсюда и её заимствование в качестве единицы измерения. Каков бы ни был размер конкретного шрифта в пунктах, "эм" будет отражать величину печатной формы его прописной буквы "M".

"Эм" обычно чуть больше самого символа, но вы понимаете, почему.

Побеждая предвзятость к «эмам»
Прописная буква "M" шрифта Calendas Plus – квадрат, несущий её на себе, составляет 1 "эм" в высоту и 1 "эм" в ширину.

Перевод из пикселей

Мы уже начали составлять нашу шкалу типографских значений в пикселях, как же перевести её в "эмы"? Формула расчёта проста – отношение искомого размера шрифта к текущему размеру шрифта нашего текста:

Побеждая предвзятость к «эмам»

Работая с текстом, набранным шрифтом, скажем, в 16 пкс, и переводя в "эмы" 36-пиксельный заголовок 'h1', мы получаем:

Побеждая предвзятость к «эмам»

А таким вот образом по этому методу переводится в "эмы" наша шкала:

Побеждая предвзятость к «эмам»

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

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

Проблема каскадного переноса значений

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

Побеждая предвзятость к «эмам»

А теперь посмотрите на этот безобидный фрагмент разметки:

Побеждая предвзятость к «эмам»

Как и следовало ожидать, в браузере всё отображается правильно. И текст абзаца, и связка масштабируются в калибр 1.2 "эма", соответственно размеру шрифта основного текста (1.2 * 16 пкс = 19.2 пкс).

Побеждая предвзятость к «эмам»

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

Побеждая предвзятость к «эмам»

Связка внутри абзаца сохраняет калибр 1.2 "эма", но теперь размер её шрифта задаётся размером шрифта самого абзаца, равным 19.2 пкс – (1.2 * 19.2 пкс = 23.04 пкс). Таким образом, связки тут и там на нашей странице становятся слишком крупными; вряд ли нам это понравится.

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

Решение проблемы

У этой проблемы нет решения; вам менее всего захочется вводить дополнительные правила для сжатия связок до масштабов текста содержащих их абзацев – это билет в город Мигреньбург, причём, без надежды вернуться. Залог подконтрольности вам вашей CSS- и HTML-вёрстки в её Простоте™.

* Стремитесь к простоте и блочному структурированию разметки.
* Задавайте значения ваших параметров в "эмах" строго продуманно и к месту – не где попало.
* Старайтесь, чтобы размеры шрифтов присваивались только элементам типографской разметки; осторожнее с обозначением размеров структурных элементов подобным образом.

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

"Ремы"

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

Годятся ли "эмы" для чего-нибудь ещё?

Мы рассмотрели с вами CSS-свойство размера шрифта; освоение использования "эмов" разумно начинать именно с этого, а теперь давайте возьмём ещё высоту строки. Если найдётся параметр типографского оформления, который не выдержит и криком закричит "не задавайте значения в пикселях", так это как раз высота строки. Высота строки (о которой более подробно говорилось в одной из предыдущих публикаций) должна всегда соотноситься для элементов типографской разметки текста с размером его шрифта. Если размер шрифта вашего заголовка указан в "эмах", а высота строки в пикселях, то результат может огорчить вас уродливым наползанием строк друг на друга или просто непрезентабельным внешним видом.

Нет правила, строго оговаривающего высоту строк, но 1.5 "эма" - вполне разумная величина, стоит попробовать, в этом масштабе ваша типографская разметка будет легко читаться.

Побеждая предвзятость к «эмам»
В данном примере 1.5 "эма" составляют 1.5 * 18 пкс, то есть, 27 пкс.

Рекомендация: Обратите внимание на комментарий-предложение Брайана Грюлке (Bryan Gruhlke) по использованию для обозначения высоты строк "голых" значений, то есть, чисел без единиц измерения...

Примечание: Сложности может вызывать задание в "эмах" параметров базовой линии внутри разметочной сетки, но это уже тема для отдельной статьи.

Структурные элементы

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

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

Разгонка набора по вертикали выполняется в "эмах" очень легко; это, опять же, вопрос опрятности структуры и внешнего наполнения вашей разметки. Подумайте, не оставить ли под вашими элементами поле-ограничитель, чтобы облегчить себе настройку координат объектов по вертикали.

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

Кнопка с округлыми краями? Задавайте радиус сглаживания углов в "эмах", и вся структура целиком будет масштабироваться плавно.

Побеждая предвзятость к «эмам»
Взгляните на этот пример со страницы Codepen, он нагляднее продемонстрирует вам то, о чём я говорю...

Оттеняется текст, оттеняется само окно, впрочем, не будем повторяться.

Адаптивный веб-дизайн

А если вам нужно, чтобы в определённых условиях масштабировались все элементы, например, при открытии страницы в меньшем окне просмотра? Заложите изменение базового размера шрифта основного текста в соответствующем блоке Media Query body { font-size: 90%; } - и бац! Ваш сайт полностью масштабируется в один момент, стоит лишь нажать на кнопку "enter".

Исключения

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

Вы её тогда просто не разглядите.

Побеждая предвзятость к «эмам»
Взгляните на этот демонстрационный образчик...

Величину горизонтальных рёбер можно задавать через CSS-стили таким, примерно, образом:

hr {
height: .02em;
border: none;
background: white;
margin: 2em 0;
outline: none;
display: block;
clear: both;
width: 100%;
}

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

min-height: 1px;

Ну, вот. Один пиксель. Чёрт с ним.

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

Заключение

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

Если вы знаете, в каком случае использование "эмов" совершенно исключено, то очень хотелось бы прочесть об этом в комментариях!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: шрифты, rem, верстка сайта
Опубликовал Design FactoRy   Прочитано (раз): 5403   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц November по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Декабрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031