Здравствуйте. Сегодня я вам расскажу, как определять в css размер шрифта, причем расскажу именно о правильной технике задания размеров. Но сначала давайте рассмотрим само свойство, которое отвечает за размер.
Font-size
Итак, это css свойство font-size, именно с его помощью определяется размер букв. Собственно, определять его можно:
- абсолютными значениями;
- относительными значениями;
Задание размеров в абсолютных значениях
Для этого используют следующие единицы измерения: 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;
}
Все очень просто. Определите размер шрифта таким образом для всех элементов в вашей верстке и читабельность текста будет отличной при любых настройках. А на этом у меня пока что все. Надеюсь, вы будете применять вышеописанный прием при верстке сайтов.