Открыть меню    

Как выставить шрифт в 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%.

Комментарии к статье

Добавить комментарий к сниппету