WEBduty.ru css html javascript jquery

Правильные размеры шрифта

Статья от 23.06.09 в категории CSS
Теги: CSS, типография

В большинстве случаев базовый размер шрифта – 16px. Будем отталкиваться от него.

Шаг 1. Размер в пикселях

Как правило размер шрифта в 16px оказывается слишком большим. Установим размер шрифта в основном тексте в 14px, а в боковой панели – 12px.

.content p {
    font-size:14px;
}
.rightbar {
    font-size:12px;
}

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

Шаг 2. Размер в EM’ах.

ЕM – рекомендованная W3C типографическая единица CSS. Зададим размер шрифта, аналогично тому, который мы задавали в первом шаге.

.content p {
    font-size:0.875em; /* 16x.875=14 */
}
.rightbar {
    font-size:0.75em; /* 16x0.75=12 */
}

Установка базового размера шрифта

Для чего это нужно? IE6 и IE7 при масштабировании страницы слишком сильно увеличивают текст, для исправления этого бага используем font-size: 100% в body:

body {
    font-size:100%;
}
.content p {
    font-size:0.875em; 
}
.rightbar {
    font-size:0.75em; 
}

Теперь всё отлично.

Высота строк текста

Чтобы текст смотрелся ещё лучше установим правильные высоты строк, т.е. межстрочное расстояние. При шрифте размером в 16px, по всем нормам типографики, высота текста должна быть около 18px. В EM это 1.125em (16×1.125=18).

body {
    font-size:100%;
    line-height:1.125em;
}
.content p {
    font-size:0.875em; 
}
.rightbar {
    font-size:0.75em; 
}

Все расчеты можно делать с помощью отличного инструмента.

Подпишись на обновления

Если вам понравилась статья, подпишитесь на обновления через RSS (?), чтобы не пропустить новые интересные статьи. Также Вы можете зафолловить меня в Twitter или подписаться на обновления по email.

Закладки

Похожие статьи:

• 8 простых способов улучшить типографию на вашем сайте
• 10 полезных CSS приёмов
• CSS3 – Часть 3: Текстовые эффекты
• Великолепная галерея с помощью jQuery
• Делаем кнопку как в Skype с помощью jQuery