Как делать в css адаптивный текст (размер шрифта)?

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

Я поделюсь с вами одной фишкой, как верстать сайты более правильно. Наверняка все вы задаете размер шрифта в пикселях, верно? Это достаточно простой и удобный подход, но у него есть 1 проблема — при смене масштаба или размера шрифта в настройках браузера иногда могут возникать определенные проблемы.

Чтобы их вообще не было, нужно задавать все размеры с помощью относительной единицы em. Чтобы корректно это делать, для начала необходимо сбросить все css-настройки, которые браузер сам ставит по умолчанию.

О том, как это делать, вы можете прочитать в этой статье, там же находится нужный код. В частности, если вы просмотрите тот код, то одна из строк в нем такая:
font-size: 100%;

Такой размер шрифта задается для всех элементов. Что значит 100%? Запомните, что в пикселях это равно шестнадцати (16px). Итак, 100% = 16рх.

Что делать дальше?

Отлично, от этого мы и будем плясать. Смотрите в макет на размеры шрифтов и задаете их не в пикселях, а в em. Расчет такой: 1em = 16px и 1em = 100%.

Например, заголовкам нужно задать размер шрифта 30 пикселей. Хорошо, берем калькулятор и делим 30 на 16. Получается 1,875. Теперь остается только прописать это в стилях:

selector{
       font-size: 1,875em;
}

Или какой-то подсказке в форме, например, нужно задать размер текста 9 пикселей:
9/16 = 0,5625 em.

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

Да, это реклама, но надеюсь, она будет полезна вам. GetUniq это сервис для вебмастеров и всех работающих с трафиком людей, с помощью которого можно выгоднее пополнять счета в кабинетах рекламных сетей, таких как Яндекс.Директ, MyTarget, ВК Таргет и другие. Без использования сервиса вам придется заплатить 1180 рублей за пополнение счета в Директе на 1000, а используя возможности Getuniq за эти же 1180 на ваш счет поступит 1100-1200 рублей! То же самое для всех других сетей. Я сам уже начал использовать и порекомендовал всем знакомым вебмастерам, рекомендую и вам. При желании, по этой ссылке вы можете почитать мой обзор сервиса.

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

Комментариев: 1
  1. Юрий Ваценко

    Сколько статей по CSS)))

Добавить комментарий