Как выставить шрифт в HTML-файле исходя из PSD файла
Простой и верный способ отрегулировать(установить) размер шрифта (font-size
) для вашего сайта исходя из существующего дизайна в PSD формате.
Открываем PSD-файл и выявляем размер шрифта для преобладающего текста. Открыли, видим, что размер преобладающего шрифта равен 14pt.
Итак, далее идем в браузер и выставляем в px
(в браузере, можно через firebug), такой же размер шрифта (в масштабе 1 к 1);
делаем скрин с браузера и проверяем, чтобы шрифт выставленный в браузере совпадал со шрифтом из PSD файла(в масштабе 1 к 1).
Получив полное совпадение, мы можем сказать, какой размер шрифта(font-size
) у текста в браузере (13.6px
).
Теперь, учитывая что почти во всех браузерах по умолчанию стоит размер шрифта(font-size
) в 16px
(а то что стоит в настройках браузера это и есть 1em
),
вычисляем в em
размер шрифта у преобладающего текста. В моем случае размер преобладающего текста будет равен 0.85em
.
Итак, чтобы облегчить себе работу в дальнейшем, я рекомендую использовать для шрифтов у всех остальных элементов единицы измерения проценты.
Итак, можно отметить, что наши 14pt
это 100%
. Для преобладающего текста, у селектора body
, выставляем 0.85em
.
И, если мы видим, что в PSD-ке какой-либо текст имеет, например, font-size
равный 16pt
, то
вычислить этот текст нетрудно: 16*100/14, что приблизительно равно 115%
.
Комментарии к статье