Обнаружил я это в тот момент, когда стал переводить размер шрифта из pt в em.
Как известно пункты (pt) как и пиксели (px) - величины абсолютные, а em и проценты - динамические. Однако, размер em зависит от размера в px, установленной по-умолчанию. Например, по-умолчанию размер шрифта в браузере установлен в 16px, значит в данном случае 1em будет равен 16px.
Пользовался таблицей приведенной ниже:
| Points | Pixels | Ems | Percent |
|---|---|---|---|
| 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 в %.
Надеюсь, что эта небольшая заметка поможет вам при верстке Ваших страничек.