—»     —»   Развивая тему «эмов»
  Раздел: Шрифты   Нет комментариев  

Развивая тему «эмов»



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

Развивая тему «эмов»

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

Цифры без единиц измерения

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

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

Развивая тему «эмов»

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

Развивая тему «эмов»

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

Развивая тему «эмов»

Но ведь параметрам абзаца присваивается вычисляемое значение (в нашем случае, 24 пкс), то есть, высота его строк соотносится с размером шрифта заметки, а не самого текстового фрагмента. Увеличим размер шрифта абзаца до значения, эквивалентного 20 пкс:

Развивая тему «эмов»

... а высота строк застряла на значении 24 пкс. Нам же, в идеале, хотелось бы получить высоту строк, равную 1.5 * 20 = 30 пкс.

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

Развивая тему «эмов»

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

Развивая тему «эмов»

Любопытный, однако, нюанс: межбуквенные пробелы таким образом не выверить. А о ширине полей, отступов с красной строки и т. п. можно, вообще, забыть.

Если вас занимает эта тема, то можете обратиться к подробному исследованию её аспектов в работе Эрика Мейера (Eric Meyer) 2006 года, а пару лет назад вышел отличный обзор единиц измерения Гарри Робертса (Harry Roberts).

"Эмы" и макротипографика

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

Взгляните на этот пример разметки с гибкими границами столбцов:

Развивая тему «эмов»

Придраться не к чему; двумя элементами 'div' задаётся разбивка точно по 50 % ширины с межстолбцовыми промежутками, заполненными пробелами слева и справа (очевидно, в каждом из 'div'-элементов используется структура * { box-sizing: border-box }). Обычно в таких случаях есть соблазн задать величину пробельной "набивки" в пикселях или (ещё лучше) в процентах, если вы стремитесь к предельной гибкости разметки.

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

.column {
width: 50%;
float: left;
padding: 0 3%;
}

Развивая тему «эмов»
Это рабочий демонстрационный образец, посмотрите и опробуйте его в действии...

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

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

Гораздо лучше было бы задать размер боковых пробелов в "эмах":

.column {
width: 50%;
float: left;
padding: 0 1.2em;
}

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

Развивая тему «эмов»
Попробуйте поэкспериментировать с этим образцом...

Старая добрая 62.5 %-ная разметка

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

Во втором случае вам поможет метод "62.5%" (впервые предложенный Ричардом Раттером (Richard Rutter) ещё в 2004 году). Пользоваться им очень просто - за базовую величину шрифта нужно принимать не 100 % (допустим, это 16 пкс), а 62.5 %, то есть, 10 пкс.

Тогда у нас 1 "эм" = 10 пкс. Отсюда:

Em-ыПиксельный эквивалент
0.5em5px
1.1em11px
1.2em12px
1.3em13px
1.4em14px
47.3em473px


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

"Эмы" в CSS-блоках параметров устройств вывода Media Queries

Чуть позже мы вернёмся к разговору о методе "62.5%", но сначала определимся с основными понятиями.

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

@media only screen and (min–width: 600px) {
/*some stuff*/
}

Попробуем применить это к нашему предыдущему примеру, разобьём столбцы в определённой точке.

Развивая тему «эмов»
Следуя принципу "Мобильный - первый", столбцы разбиваются для окон просмотра размером от 600 пкс...

Произвольно заданное в 600 пкс значение здесь очень к месту; оптимальная длина (или протяжённость) строки - предмет весьма спорный, но послушаем, что говорит на этот счёт Роберт Брингхёрст (Robert Bringhurst):

"Более-менее приемлемой длиной строки для страницы стандартного текста, набранного шрифтом с засечками, при одностолбцовой разметке считается 45-75 символов. Строка длиной в 66 символов (вместе с пробелами) считается, в общем, оптимальной." - Роберт Брингхёрст – "Элементы стилистики типографского оформления" (Robert Brighurst – The Elements of Typographic Style).

В нашем примере, при калибре шрифта в 1 "эм" строка разбивается на два столбца, достигая протяжённости символов этак в 70.

Развивая тему «эмов»
Развивая тему «эмов»

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

Развивая тему «эмов»

С выбором "очень крупного" шрифта (у меня Chrome) наши строки становятся совсем уж куцыми, а текст - едва читаемым. Поэтому наши Media Queries-параметры нужно задавать и с учётом размера шрифта тоже.

Помните формулу из нашей предыдущей статьи?

Развивая тему «эмов»

Мы стремимся к величине в 600 пкс, исходя из имеющегося размера шрифта в 16 пкс. 600/16 = 37.5 "эмов", и пусть наши Media Queries-параметры отражают это, внесём в них правку:

Развивая тему «эмов»

Теперь, при изменении размера шрифта в настройках браузера, мы замечаем и иную реакцию наших Media Queries-параметров. Вот, что мы видим с укрупнением шрифта в окне просмотра шириной около 630 пикселов, при Media Queries-параметрах, заданных в пикселях:

Развивая тему «эмов»

Задав же Media Queries-параметры в "эмах", мы при той же самой ширине экрана аккуратно удержим текст в одном столбце; красиво и читабельно.

Развивая тему «эмов»
Помасштабируйте шрифт, чтобы понаблюдать эффект влияния Media Queries-параметров в действии...

Итак, метод "62.5%"

Дело в том, что Media Queries-параметрам в "эмах" совершенно безразличны размерные установки HTML-разметки, самого текста и чего бы то ни было ещё; они реагируют на размер шрифта браузера. То есть, задав любой не 100 %-ный базовый размер шрифта, вам придётся по отдельности настраивать две группы параметров в "эмах".

Начинайте с базового уровня в 100 %, и тогда сможете равномерно варьировать ваши параметры. Кроме того, по мнению Filament Group, вы таким образом избавитесь от необходимости "мыслить пикселями", что уже хорошо.

"Эмы", "ремы", функции и примеси (mixins)

Средства предварительной CSS-обработки, такие как Sass, LESS и Stylus, помогут вам определиться с примесями и функциями. Задаёте им нужные параметры, а они уж сами всё рассчитывают, выдавая на-гора готовые CSS-значения.

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

Возьмите этот простой пример, который приводит Гэрретт Уайндер (Garrett Winder) из команды Erskine. Сначала он задаёт функцию (под названием "эм"), содержащую два значения (точно как наша формула, рассмотренная выше), хотя значение "context" по умолчанию равняется 16 и без необходимости не требует повторного указания.

Развивая тему «эмов»

Так что, далее мы можем задействовать эту "эм"-функцию в CSS-вёрстке, поручив ей вычислить нам значение, эквивалентное 30 пкс:

Развивая тему «эмов»

На выходе получим "сырой" фрагмент CSS-кода:

Развивая тему «эмов»

Далеко не единственный пример подобного рода – тысячи разработчиков интерфейсной части приложений "набивали руку" в освоении модулей предварительной обработки путём составления собственных "эм"-примесей. То же касается "ремов"; введя желаемое значение в пикселах среди параметров данной примеси от Криса Койера (Chris Coyier), можно столь же легко получить расчёт значения в "ремах", а в придачу ещё и в пикселях.

Развивая тему «эмов»
Вот эта примесь.

Развивая тему «эмов»
Вот она в действии.

Развивая тему «эмов»
А вот его результат.

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

Sass

* Примеси для калибровки шрифтов в на сайте CSS Tricks
* Новейшая ПКС/Рем примесь от Хьюго Жироделя (Hugo Giraudel)
* rem от bitmanic на сайте GitHub
* Примесь вычислений значений в - от Адама Симпсона (Adam Simpson) из команды Sparkbox

Less

* Примеси для калибровки шрифтов в на сайте CSS Tricks
* Запасной вариант REM средствами Sass или LESS от Ханса Кристиана (Hans Christian)
* Расчёты в - автор некто Кори Симмонс (Cory Simmons)
* Less-примесь от Мартина Михалека (Martin Michálek) на сайте Codepen

Stylus

* Расчёт размера шрифта в от Юя Сэйто (Yuya Saito)
* Комментарий пользователя Maxim на сайте CSS Tricks
* Ох... помогайте составлять этот список

Заключение

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

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

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

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


Фотосъёмка купить
Аналитика, цены, новости рынка. Куплю Москва
fotograf-pro.ru
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Февраль 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
2728