Сайт

Верстка сайта по макету psd: Как научится верстать из PSD макетов в html+css? — Хабр Q&A

19.08.2023

Верстка psd макета — находим подходящий размер шрифта.

Оцените материал

  • 1
  • 2
  • 3
  • 4
  • 5

(2 голосов)

Недавно во время верстки одного проекта я обнаружил следующую проблему: размер шрифта в программе “Adobe Photoshop” не соответствует аналогичному размеру шрифта в таблице стилей. То есть надпись в “Adobe Photoshop” размером, например, 24 pt выглядит намного мельче, чем текст такого же размера в окне браузера.

Обнаружил я это в тот момент, когда стал переводить размер шрифта из pt в em.

Как известно пункты (pt) как и пиксели (px) — величины абсолютные, а em и проценты — динамические. Однако, размер em зависит от размера в px, установленной по-умолчанию. Например, по-умолчанию размер шрифта в браузере установлен в 16px, значит в данном случае 1em будет равен 16px.

Пользовался таблицей приведенной ниже:

CSS: таблица соответствия px, pt, em и %.
PointsPixelsEmsPercent
6 pt 8 px 0.5 em 50 %
7 pt 9 px 0.55 em 55 %
7.5 pt 10 px 0.625 em 62.5 %
8 pt 11 px 0.7 em 70 %
9 pt 12 px 0.75 em 75 %
10 pt 13 px 0.8 em 80 %
10.5 pt 14 px 0.875 em 87.5 %
11 pt 15 px 0.95 em 95 %
12 pt 16 px 1 em 100 %
13 pt 17 px 1.05 em 105 %
13.5 pt 18 px 1. 125 em 112.5 %
14 pt 19 px 1.2 em 120 %
14.5 pt 20 px 1.25 em 125 %
15 pt 21 px 1.3 em 130 %
16 pt 22 px 1.4 em 140 %
17 pt 23 px 1.45 em 145 %
18 pt 24 px 1.5 em 150 %
20 pt 26 px 1.6 em 160 %
22 pt 29 px 1.8 em 180 %
24 pt 32 px 2 em 200 %
26 pt 35 px 2.2 em
220 %
27 pt 36 px 2.25 em 225 %
28 pt 37 px 2. 3 em 230 %
29 pt 38 px 2.35 em 235 %
30 pt 40 px 2.45 em 245 %
32 pt 42 px 2.55 em 255 %
34 pt 45 px 2.75 em 275 %
36 pt 48 px 3 em 300%

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

Данный рисунок иллюстрирует мои поиски правильного способа расчета размера шрифта.

Итог таков — чтобы добиться схожести в размере текста, нужно размер шрифта в Adobe Photoshop разделить на 15,6 и округлить до целого числа.

Также могу посоветовать читателю воспользоваться онлайн-сервисом для пересчета размера шрифта в разные единицы измерения. С его помощью можно пересчитать размер шрифта из px в em, из px в %, из px в pt, а также из em в px и из em в %.

Надеюсь, что эта небольшая заметка поможет вам при верстке Ваших страничек.

Другие материалы в этой категории: « Размещаем блок по центру окна браузера. Верстка формы без использования таблиц. »

Наверх

Категории блога

  • Битрикс (40)
  • HTML-верстка (54)
  • Joomla (18)
  • JavaScript, jQuery (26)
  • PHP (10)
  • Базы данных (5)
  • Разное (23)

Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию:

  • Шаблон документа HTML5 (zip, 35. 41 Кб)
  • Шаблон jQuery-плагина (zip, 426 байт)
  • Шаблон сайта 1С-Битрикс (zip, 3.11 Кб)

Полезное