Мёртвый блог живого человека

SEO-оптимизация, манимейкинг, веб-разработка

Hint: размер шрифта(font-size)

Задумывались вы хоть раз о том, как правильно писать размер шрифта при верстке сайта? Что-бы было максимально удобно и совместимо? До сегодняшнего момента я всегда размер шрифта прописывал в пикселях(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; }<br />
h1 { font-size:2.5em; }<br />
h2 { font-size:2em; }

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

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

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



На заметку: Предлагаю вам скачать Mozilla Firefox, улучшенную версию, дополненную Яндекс-баром.

Оставить комментарий

Подтвердите, что Вы не бот — выберите человечка с поднятой рукой:

Комментарии

  1. Илья Житенёв

    Ноябрь 24, 2009 в 03:11

    Помним, но привыкнуть достаточно трудно. Старая привычка берёт верх, но я продолжаю с ней бороться =)

    VA:F [1.9.22_1171]
    -1
  2. тоже относительно недавно открыл для себя EM-ы.

    особо актуально, когда размер кнопки фиксированный, а в ней — текст. вот тогда-то и выплывают косяки с использованием PX. правда, согласен — к новому привыкаешь не сразу ))

    VA:F [1.9.22_1171]
    0


Подпишись и будь вкурсе всех новых тем на блоге — узнаешь много нового!