Задумывались вы хоть раз о том, как правильно писать размер шрифта при верстке сайта? Что-бы было максимально удобно и совместимо? До сегодняшнего момента я всегда размер шрифта прописывал в пикселях(px), но сегодня задумался, а правильно ли я делаю?

В итоге, пошарив интернет, я нашел самый удобный, совместимый и прогрессивный способ.

Вообще мне известно 4 способа указывать размер шрифта. Это пиксели(px), проценты(%), points(pt) и «Ems»(em). Про них я ничего рассказывать не буду, все это легко можно найти в интернете.

Для себя я выбрал способ «Ems»(em).
1em = текущему font-size документа. И вот тут очень интересный момент, а если мы не указали font-size для body? Все просто. Во всех современных браузерах по умолчанию принят размер шрифта 16px. Т.е. если явно не указать размер шрифта, то 1em будет равняться 16px.

Отсюда вытекает очень удобный способ указывать размер шрифта. Допустим верстаем некий сайт, где 16px для нас слишком большой размер. Нам нужно 12px, нет ничего проще, смотрим код:

style.css

body { font:.75em Verdana, sans-serif; }
h1 { font-size:2.5em; }
h2 { font-size:2em; }

Как видим, все проще простого. .75em = 12px, это простая арифметика. К примеру, если вам нужно 8px, то это будет .5em. И 2em = 32px соответственно.

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

Помните — за em будущее 🙂