Как определять в css размер шрифта правильным образом?

Здравствуйте. Сегодня я вам расскажу, как определять в css размер шрифта, причем расскажу именно о правильной технике задания размеров. Но сначала давайте рассмотрим само свойство, которое отвечает за размер.

Font-size

Итак, это css свойство font-size, именно с его помощью определяется размер букв. Собственно, определять его можно:

  1. абсолютными значениями;
  2. относительными значениями;

Задание размеров в абсолютных значениях

Для этого используют следующие единицы измерения: px (пиксели), pt (пункты) и 7 ключевых слов: xx-small, x-small, small, medium, large, x-large, xx-large. Чтобы вы примерно понимали, каковы будут размеры букв при применении в качестве значения font-size этих ключевых слов, я применил к каждому абзацу соответствующее значение от xx-small до xx-large. И вот что получилось:
размеры букв
В целом, я не рекомендую задавать размер шрифта таким способом. Если говорить об абсолютном задании, лучше использовать только пиксели. Обычно для основного текста на странице используется размер шрифта в 14-16 пикселей, для заголовков — 20-40, для малозначимых надписей — 9-10 пикселей.

Относительные величины или как задавать в css размер шрифта оптимальным способом?

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

Итак, суть оптимального способа в том, чтобы для начала указать для body:

body{
	font-size: 100%;
}

Как видите, используется относительная величина, а именно 100%. А сколько это в пикселях? Запомните, что по умолчанию так определено, что 100% или 1em равняется во всех браузерах 16 пикселям. Вот это вам желательно запомнить.

Отлично. Теперь для всех элементов на странице, которым надо определить размер шрифта, определяем его в единицах измерения em. Например, вы решили сделать заголовки первого уровня у себя на сайте величиной 32 пикселя. Пишите не так:

h1{
	font-size: 32px;
}

А так:

h1{
	font-size: 2em;
}

Результат будет одним и тем же, но второй способ гораздо правильнее. Почему? Потому что при смене размера шрифта в настройках браузера, все размеры будут изменяться пропорционально. Таким образом, вы один раз задаете относительные размеры и текст на вашем сайте будет отлично читаться в любом случае. Если же все будет задано абсолютно, то никаких проблем при обычных настройках браузера тоже не будет, но при смене размеров в настройках веб-обозревателя нет 100%-й гарантии, что все поменяется пропорционально, из-за чего читабельность может немного ухудшаться.

В общем, описанный прием является хорошим тоном веб-разработки.

Как правильно высчитать размеры в относительных величинах?

Допустим, вы решили попробовать этот метод на практике. Вам нужно задать для какого-нибудь текстового элемента размер 9 пикселей, но использовать em. Как высчитать правильное значение? Конечно же, с помощью калькулятора.
высчитываем размер
Просто разделите 9 на 16. Как вы помните, 16 пикселей — это значение по умолчанию. Получилось 0,5625. Значит, пишем в css:

selector{
	font-size: 0,5625em;
}

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

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: