1em или 16px

31 октября 2015 Антон Кулешов 677 0

1em – высота шрифта заданная в браузере по умолчанию или настроенная пользователем, и, на мой взгляд, начисто забытая верстальщиками, а зря! Конечно, на это есть и некоторые причины: пиксели привычнее, ощутимее и не зависят от настроек браузера. Вот мы и лепим их везде, борясь за то, чтобы наши проекты везде и всегда выглядели одинаково, только вопрос, а надо ли? Да, кроссбраузерность это хорошо и к этому надо стремиться, но согласитесь – рассматривать страничку в 1024рх на мониторе в 24 дюйма как-то совсем не очень, сайт сразу теряет свой колорит. Даже так называемая «резиновая» верстка не спасает ситуацию, а почему? Да потому, что хоть и задали ширины в процентах, а шрифты и отступы оставили в px, и таких примеров кучи!

Реклама

Вот и поговорим сегодня про «резиновую» задачу отступов и размеров шрифта. Варианта есть два: или использовать em, или ex. По сути, 1ex это высота символа «x» в нижнем регистре и на него распространяются абсолютно те же правила, что и на 1em. Пользуйтесь тем, что нравится. Главная причина, по которой данные единицы не заслужили широкой любви – отсутствие визуального ориентира. Мы легко можем представить себе разницу в шрифте между размерами 10px и 16px, не правда ли? А вот на сколько для визуального восприятия отличаются между собой шрифт в 0.625em и 1.25em, при том что 1em величина относительная, ответить сможет далеко не каждый.

Вот, собственно, мы и подошли к героям сегодняшней статьи – это два интернет ресурса: type-scale и modularscale. Первый позволяет подобрать шрифты исходя из «золотого сечения», а второй модульная линейка, при помощи которой можно значительно расширить свои представления об интервалах в вебе. Рассказывать о принципе работы этих сервисов я не буду, хоть они и англоязычные, но интерфейс интуитивно понятен, да и оптимизированы они исключительно как рабочие инструменты: никакой рекламы и лишнего текста. Помимо всего прочего type-scale забирает шрифты напрямую из базы Google Fonts – отличная копилка латиницы, причем все шрифты, там представленные, оптимизированы именно для веба. Загружаем понравившийся, немного экспериментируем с предложенными вариантами и забираем сгенерированный CSS.

Реклама
Комментариев еще не оставлено
no_avatar
Читайте далее

Случайный вывод картинок при помощи PHP

21 декабря 2014 Антон Кулешов

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

«Дюжина» ховер эффектов в одном флаконе

21 февраля 2015 Антон Кулешов

Продолжаем развивать тему hover effects и обратим наше внимание на весьма интересный плагин на jQuery, при помощи которого можно реализовать кучу различных эффектов ховера.

Протокол IMAP, или о том, как мы данные из писем вытаскивали

16 ноября 2015 Антон Кулешов

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