31 октября 2015
.
Антон Кулешов
1em или 16px
1em – высота шрифта заданная в браузере по умолчанию или настроенная пользователем, и, на мой взгляд, начисто забытая верстальщиками, а зря! Конечно, на это есть и некоторые причины: пиксели привычнее, ощутимее и не зависят от настроек браузера. Вот мы и лепим их везде, борясь за то, чтобы наши проекты везде и всегда выглядели одинаково, только вопрос, а надо ли? Да, кроссбраузерность это хорошо и к этому надо стремиться, но согласитесь – рассматривать страничку в 1024рх на мониторе в 24 дюйма как-то совсем не очень, сайт сразу теряет свой колорит. Даже так называемая «резиновая» верстка не спасает ситуацию, а почему? Да потому, что хоть и задали ширины в процентах, а шрифты и отступы оставили в px, и таких примеров кучи!
Вот и поговорим сегодня про «резиновую» задачу отступов и размеров шрифта. Варианта есть два: или использовать em, или ex. По сути, 1ex это высота символа «x» в нижнем регистре и на него распространяются абсолютно те же правила, что и на 1em. Пользуйтесь тем, что нравится. Главная причина, по которой данные единицы не заслужили широкой любви – отсутствие визуального ориентира. Мы легко можем представить себе разницу в шрифте между размерами 10px и 16px, не правда ли? А вот на сколько для визуального восприятия отличаются между собой шрифт в 0.625em и 1.25em, при том что 1em величина относительная, ответить сможет далеко не каждый.
Вот, собственно, мы и подошли к героям сегодняшней статьи – это два интернет ресурса: type-scale и modularscale. Первый позволяет подобрать шрифты исходя из «золотого сечения», а второй модульная линейка, при помощи которой можно значительно расширить свои представления об интервалах в вебе. Рассказывать о принципе работы этих сервисов я не буду, хоть они и англоязычные, но интерфейс интуитивно понятен, да и оптимизированы они исключительно как рабочие инструменты: никакой рекламы и лишнего текста. Помимо всего прочего type-scale забирает шрифты напрямую из базы Google Fonts – отличная копилка латиницы, причем все шрифты, там представленные, оптимизированы именно для веба. Загружаем понравившийся, немного экспериментируем с предложенными вариантами и забираем сгенерированный CSS.
