О сайтеПравилаКонтакты
  • Крипто
  • Новости
  • Статьи
  • Люди
  • Теги
» Статьи » Разное » 1em или 16px
  • Разработка
  • Инструменты
  • Заработок
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.

#Шрифты
3 671
Антон Кулешов
Ищем шрифты для оформления сайта Набор русских шрифтов – верстайте и радуйтесь
Комментарии не найдены

И еще 30 CSS эффектов при наведении

Ещё одно адаптивное меню

Популярное
1 Пишем парсер контента на PHP2 Кликджекинг как соцфишинг, пишем скрипт для получения id пользователя вконтакте3 Лучший способ прижать футер используя flexbox4 Пишем первый модуль для 1С-Битрикс с использованием ядра D75 Делаем подгрузку контента при прокрутке страницы
Обратите внимание
kwork