Как узнать размер текста в пикселях

Обновлено: 15.01.2025

В прошлых уроках вы уже узнали о единицах измерения px. Можно заметить, что стоит указать где-то 20px и это значение будет зафиксировано. Неважно что вокруг элемента с таким значением, какое разрешение экрана или какое устройство используется. 20 пикселей всегда будут 20 пикселей.

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

В противовес абсолютным единицам измерения существуют относительные единицы измерения. По их названию видно, что они зависят «от чего-то». А вот от чего они зависят мы рассмотрим в конце урока.

В этом уроке будут рассмотрены все основные единицы измерения. На самом деле их достаточно много, но не все используются постоянно. Если у вас возникнет желание познакомиться со всеми доступными единицами измерения, то в конце урока будет ссылка на официальную спецификацию.

Абсолютные единицы

Абсолютные единицы измерения можно считать самыми простыми. Достаточно получить немного опыта и вы уже на глаз сможете определять, какой размер имеет тот или иной элемент внутри документа.

Самой распространённой единицей является пиксель. С ней вы уже знакомы по другим урокам. Но что же такое пиксель? Если не вдаваться в электронику, то пиксель — это всего лишь минимальный элемент, из которого состоит изображение на экране. Значит, мы указываем, сколько таких элементов должно быть занято на экране устройства.

При этом стоит понимать, что 100 пикселей на одном экране могут быть не равны 100 пикселям на другом экране. Всё зависит от размера пикселей в мониторе. А это, в свою очередь, зависит от характеристик экрана и его разрешения.

По этим причинам можно назвать пиксель как относительной, так и абсолютной единицей измерения. Всё зависит от того, с какой точки зрения мы смотрим. Для нас важен пиксель в контексте CSS, где он является абсолютной единицей.

Другие абсолютные единицы почти не используются в разработке для веб-устройств. Стоит их перечислить, но есть вероятность, что вы никогда не будете их использовать.

cm — сантиметры
mm — миллиметры
Q — четверть миллиметра
in — дюйм
pc — пайка/пика. Термин из типографики
pt — пункт

Заметьте, что среди этих единиц есть знакомые в реальной жизни. При вёрстке для печати это может быть полезно.

Относительные единицы

Самая запутанная часть урока. Относительные единицы берут своё значение от других значений. Самой универсальной такой единицей являются проценты. Они всегда берут свои значения от ближайшего родительского элемента. Остальные единицы можно разделить на две группы:

Относительные единицы, рассчитывающиеся от размера шрифта.
Относительные единицы, рассчитывающиеся от размера экрана. Это немного грубое сравнение — на самом деле расчёт ведётся от размера viewport. О том, что это такое, вы узнаете из курса по адаптивности.

Проценты

Как уже было сказано, проценты рассчитываются от значения того же свойства ближайшего родителя. Родитель — элемент, внутри которого находится текущий блок. Например:

Рассмотрим на примере ширины и размера шрифта.

Что же здесь происходит? Разберёмся по шагам:

Для основного родительского <section> установлены размеры в абсолютных единицах измерения. Ширина 400 пикселей и размер шрифта 50 пикселей.
Вложенный <div> имеет размер 50%. Этот размер относительный и высчитывается относительно ближайшего родителя. У этого родителя размер 400 пикселей. Следовательно, размер блока будет 200 пикселей.
Параграф текста имеет размер шрифта 70%. Ближайший родитель с установленным размером шрифта — <section> . Параграфу установится размер шрифта в 70% от 50 пикселей. То есть 35px.

Интересным примером является установка процентов для тега или класса, который предполагает вложение друг в друга. Взгляните на следующий пример:

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

Поразмыслили? Молодцы! Теперь посмотрим, как это выглядит:

Размер шрифта самого первого элемента <ul> — 30 пикселей.
Все элементы <li> имеют размер шрифта 70%. Это значит, что чем глубже список, тем меньше размер шрифта:
- Элементы 1, 2, 3, 4 будут иметь размер 21 пиксель.
- Элементы 1.1 и 1.2 лежат внутри элемент 1. Размер шрифта этого элемента 21 пиксель. Это следует из прошлого пункта. Теперь размер шрифта считается именно от 21 пикселя.
- Элементы 1.1 и 1.2 будут иметь размер 14.7 пикселя.
- Элементы 1.2.1 и 1.2.2 лежат внутри элемент 1.2. Размер шрифта этого элемента 14.7 пикселей. Это следует из прошлого пункта.
- Элементы 1.2.1 и 1.2.2 будут иметь размер шрифта 10.29 пикселя.
Относительные единицы, рассчитывающиеся от размера шрифта

Выдохните — самое сложное уже позади. Если вы внимательно изучили работу процентов, то другие относительные единицы не вызовут сложностей. Есть две основные относительные единицы измерения, которые зависят от размера шрифта: em и rem.

Значение em очень похоже на использование процентов. Оно показывает во сколько раз размер будет больше, чем у ближайшего вычисленого значения font-size . Если в прошлом примере со списками заменить 70% на 0.7em, то результат будет тот же самый.

Тогда в чём смысл em? Эту единицу измерения можно использовать не только для шрифта, но и для любых других свойств, которые принимают числовое значение. Например, в следующем коде размер нижнего внешнего отступа будет 60px:

Но если у параграфа выставить своё значение font-size , то единица em будет высчитываться именно от него. В этом и кроется смысл формулировки «чем у ближайшего вычисленого значения font-size ».

Второй такой единицей является rem. Её способ работы точно такой же, как у em. Но есть одно громадное отличие: rem отсчитывается от размера шрифта корневого элемента. Корневым элементом является <html> . Именно размер шрифта у этого элемента и учитывается при расчёте единицы rem.

Вернёмся к примеру со списком. Заменив em на rem получим совершенно другой результат. 0.7rem высчитываются из одного и того же места, без учёта вложенности. Итого, каждый элемент будет иметь размер шрифта 11.2px. Это связано со стандартным значением размера шрифта в 16 пикселей у большинства браузеров.

Вы можете заметить, что размер шрифта в 30 пикселей у элемента <ul> не играет, в данном случае, никакой роли.

Относительные единицы, рассчитывающиеся от размера экрана

CSS позволяет задавать размеры относительно текущего размера viewport — размера окна браузера, доступного без прокрутки. Основными двумя единицами являются vw — ширина viewport и vh — высота viewport. Вы можете рассматривать это как процент от размера viewport.

Частый «кейс» с использованием таких единиц — создание секции на всю доступную область браузера.

Попробуйте изменять размер окна браузера с примером из CodePen. Какую бы ширину вы не ставили, размер секции будет автоматически меняться. Следовательно, горизонтальная или вертикальная прокрутка никогда не появится.

Дополнительные материалы

Вам ответят команда поддержки Хекслета или другие студенты.

Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?
- задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
- расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
- изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете
- Статья «Как учиться и справляться с негативными мыслями»
- Статья «Ловушки обучения»
- Статья «Сложные простые задачи по программированию»
- Урок «Как эффективно учиться на Хекслете»
- Вебинар «Как самостоятельно учиться»
Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

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

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

Хотелось бы поделится небольшой функцией, которая может сотворить чудо, и выяснить беспрекословно требуемые размеры с помощью клонирования.

function inlineSize(el) // дополнительные стили для клона, что бы мир не заметил чуда, и размеры отображались корректно
var hiddenStyle = "left:-10000px;top:-10000px;height:auto;width:auto;position:absolute;" ;

// создаем box элемент
// для клонирования содержимого из нашего исходного inline блока
var clone = document .createElement( 'div' );

// в обязательном порядке копируем стили с исходного элемента,
// что бы размеры соответствовали исходнику.
for ( var i in el.style) try if ((el.style[i] != '' ) && (el.style[i].indexOf( ":" ) > 0)) clone.style[i] = el.style[i];
>
> catch (e) <>
>

// устанавливаем стили у клона, дабы он не мозолил глаз.
// Учитываем, что IE не позволяет напрямую устанавливать значение аттрибута style
document .all ? clone.style.setAttribute( 'cssText' , hiddenStyle) : clone.setAttribute( 'style' , hiddenStyle);

// Переносим содержимое. Аккуратно.
clone.innerHTML = el.innerHTML

// Добавляем клон в корневой документ.
// Так, на всякий пожарный в parent, а то вдруг элемент внутри iframe?
parent. document .body.appendChild(clone);

// . и тут же удаляем
parent. document .body.removeChild(clone);

// Вот собственно говоря и все.
return rect;
>

* This source code was highlighted with Source Code Highlighter .

Тестировалось на FF2, FF3, IE7.

На данный момент существуют плагины для jQuery, extension для prototype и методы в ExtJS, которые позволяют выполнять данную функцию и может быть даже в более лучшем виде. Однако мне хотелось отразить на чистом языке, как это все происходит. Надеюсь, этот код сэкономит немного времени вашей драгоценной жизни ;)

Для обозначения размера шрифта в CSS необходимо указать соответствующее свойство и его значение. Размер шрифта определяется свойством font-size , для которого может быть установлен один из нескольких вариантов значений. Можно задать размер шрифта в пикселях, процентах, с помощью ключевых слов и т. д. Все это мы рассмотрим далее в этой подглаве, а сейчас взгляните на примеры задания размера шрифта:

Размер шрифта в пикселях

Наиболее простой и понятный способ задать размер шрифта – использовать единицу измерения px . Вы сами указываете высоту шрифта. Допустим, вам необходим шрифт размером 24 пикселя. Для этого запишите стиль CSS:

Размер шрифта в процентах

Вы наверняка уже сталкивались с ситуацией, когда размер шрифта в CSS не задан, вследствие чего браузеру приходится определять размер шрифта «по своему усмотрению». Если точнее, берется предустановленное значение по умолчанию. Именно от него зависят установленные в процентах значения. Например, базовый размер основного текста p , как правило, равняется 16 пикселям. Значение 100% эквивалентно базовому размеру шрифта, который предустановлен в браузере. Поэтому:

Если же в этом случае задать размер шрифта 50% , то он будет равен половине базового размера. Значение 200% , наоборот, увеличит шрифт в два раза.

Важно: процентные значения размера шрифта наследуются. Например, если для родительского тега задан размер шрифта 150%, то все вложенные в него теги также унаследуют это значение.

Единица измерения em

По принципу работы единица измерения em похожа на проценты. Значение 1em эквивалентно 100% и соответствует базовому размеру шрифта по умолчанию. Соответственно, 0.6em = 60% , 3em = 300% и так далее. Пример записи:

Значения размеров шрифтов, указанные в em , наследуются (как и проценты). Это создает некоторые трудности при работе с CSS. Например, если для родительского элемента div задан размер шрифта 2em , то для вложенного в него такого же элемента div шрифт будет увеличен еще в два раза. Наглядный пример можно увидеть на скриншоте:

Скриншот: наследование значений размеров шрифтов

В качестве альтернативы можно воспользоваться новой единицей измерения, введенной в CSS3 – rem , которая всегда отталкивается от базового размера шрифта. Если в нашем примере изменить значение div с 2em на 2rem , то размер шрифта вложенного элемента div станет таким же, так у родительского. Недостатком единицы измерения rem является то, что она не поддерживается некоторыми браузерами, а именно Internet Explorer версии 8 (и ранее), а также Opera Mini 8.

Ключевые слова

Задать размер текста CSS можно и с помощью специальных ключевых слов, которые также зависят от базового размера шрифта в браузере. Если ориентироваться на стандартный размер шрифта для основного текста (16 пикселей) и не брать во внимание случаи, когда базовый размер был изменен, то таблица ниже показывает соответствие между ключевым словом и размером шрифта в пикселях:

Ключевое слово Размер в пикселях

xx-small 9px

x-small 10px

small 13px

medium 16px

large 19px

x-large 24px

xx-large 32px

Как видим, значение medium соответствует базовому размеру шрифта 16px . Использование ключевых слов ограничивает возможности и лишает гибкости, поэтому профессиональные разработчики не применяют их.

Завершение

В этой подглаве вы узнали, как задать размер шрифта в CSS. Также мы рассмотрели те единицы измерения, которые наиболее часто используются для установки размера шрифта в таблицах стилей. Для этих целей могут сгодиться и другие единицы измерения CSS, такие как дюймы in , сантиметры cm , миллиметры mm . Но они не слишком хорошо подходят для определения размера текста на веб-страницах, отображаемых на мониторе.

Читайте далее: как установить жирный шрифт и курсив в CSS.

Перевести единицы: пиксель (X) в пункт (типографский)

Наука приготовления кофе: помол, угловая скорость, время и температура

Общие сведения

Типографика изучает воспроизведение текста на странице и использование его размера, гарнитуры, цвета и других внешних признаков для того, чтобы текст лучше читался и красиво выглядел. Типографика появилась в середине 15-го века, с появлением печатных станков. Расположение текста на странице влияет на наше восприятие — чем лучше его расположить, тем больше вероятность, что читатель поймет и запомнит то, что написано в тексте. Некачественная типографика, наоборот, делает текст плохо читаемым.

Гарнитуры подразделяют на разные виды, например на шрифты с засечками и без. Засечки — декоративный элемент шрифта, но в некоторых случаях они облегчают чтение текста, хотя иногда происходит и наоборот. Первая буква (голубого цвета) на изображении набрана шрифтом с засечками Бодони. Одна из четырех засечек обведена красным цветом. Вторая буква (желтая) — набрана шрифтом Футура без засечек.

Существует множество классификаций шрифтов, например, согласно времени их создания, или стилю, популярному в определенное время. Так, есть шрифты старого стиля — группа, которая включает самые старые шрифты; более новые шрифты переходного стиля; современные шрифты, созданные после переходных шрифтов и до 1820-х годов; и, наконец, шрифты нового стиля или модернизированные старые шрифты, то есть, шрифты, выполненные по старому образцу в более позднее время. Эта классификация в основном используется для шрифтов с засечками. Существуют и другие классификации, основанные на внешнем виде шрифтов, например на толщине линий, контрасте между тонкими и толстыми линиями, и форме засечек. В отечественной печати существуют свои классификации. Например, классификация по ГОСТу группирует шрифты по наличию и отсутствию засечек, утолщению в засечках, плавному переходу от основной линии к засечке, закруглению засечки, и так далее. В классификациях русских, а также других кириллических шрифтов часто бывает категория для старославянских шрифтов.

Скриншот программы для верстки Adobe InDesign компании Adobe Systems.
Главная задача типографики — регулируя размер букв и выбирая подходящие шрифты, разместить текст на странице так, чтобы он хорошо читался и красиво выглядел. Существует ряд систем для определения размера шрифта. В некоторых случаях, одинаковый размер букв в типографских единицах, если они отпечатаны в разных гарнитурах, не означает одинаковый размер самих букв в сантиметрах или дюймах. Эта ситуация более подробно описана ниже. Несмотря на вызванные этим неудобства, применяемый на данный момент размер шрифта помогает дизайнерам аккуратно и красиво скомпоновать текст на странице. Это особенно важно в верстке.

В верстке необходимо знать не только размер текста, но и высоту и ширину цифровых изображений, чтобы разместить их на странице. Размер можно выразить в сантиметрах или дюймах, но существует также специально предназначенная для измерения размера изображений единица — пиксели. Пиксель — это элемент изображения в виде точки (или квадрата), из которых оно состоит.

Определение единиц

Размер букв в типографике обозначается словом «кегль». Существует несколько систем измерения кегля, но большинство из них основано на единице «пайка» в американской и английской системе измерения (англ. pica), или «цицеро» в европейской системе измерения. Название «пайка» иногда пишут как «пика». Существуют несколько видов пайки, которые слегка отличаются по величине, поэтому, используя пайку, стоит помнить, какая именно пайка имеется в виду. Изначально в отечественной печати использовали цицеро, но сейчас часто встречается и пайка. Цицеро и компьютерная пайка похожи по величине, но не равны. Иногда цицеро или пайку напрямую используют для измерения, например, чтобы определить размер полей или колонок. Чаще, особенно для измерения текста, используют производные единицы, полученные от пайки, такие как типографские пункты. Размер пайки определяется в разных системах по-разному, как описано ниже.

Буквы измеряют так, как показано на иллюстрации:

Измерение высоты буквы. 1. высота верхнего заплечика, 2. базовая линия строчных знаков, 3. линия шрифта или базовая линия, 4. высота нижнего заплечика, 5. высота знака, 6. высота литерной площадки
1. линия верхних выносных элементов: линия, отмечающая верхнюю часть самой высокой буквы, включая верхние выносные элементы (например, верхний хвостик буквы «б»);
2. базовая линия строчных знаков: верх основной части буквы, без выносного элемента, который продолжается до линии верхних выносных элементов;
3. линия шрифта или базовая линия: низ основной части буквы, без выносного элемента, который продолжается до линии нижних выносных элементов;
4. линия нижных выносных элементов: самая низкая часть самой длинной (вниз) буквы, включая нижней выносной элемент (например, нижний хвостик буквы «у»);
5. высота знака: высота буквы без учета выносных элементов. В американской типографской системе эту высоту приравнивают к высоте английской буквы x;
6. высота литерной площадки: исторически — размер площадки свинцовой литеры, которую использовали для печати этой буквы.
Чаще всего размер шрифта определяется в типографских пунктах. Например, большая часть научных статей, а также писем и документов в деловой переписке, выполнена в размере от 10 до 12 пунктов. Один пункт равен 1/12 пайки, или 1/12 цицеро, в зависимости от системы счисления. Размер буквы в пунктах, и соответствующий ему размер в миллиметрах или дюймах соответствует высоте литерной площадки (номер 6 на иллюстрации выше). Раньше, когда набор текста происходил вручную, для каждой буквы использовали свинцовую литеру, похожую на современные печати. Представьте себе печать с одной буквой, например M, как на изображении. Размер в пунктах — это высота этой печати. В веб-дизайне, особенно в CSS и LaTeX иногда используют не высоту литерной площадки, а высоту знака.

Для измерения размера цифровых изображений используют пиксели, описанные ниже.

Разные способы вычисления значений типографских единиц

В разных системах типографских единиц пайки, и, соответственно, пункты, определяются по-разному. Это произошло потому, что технологии печати развивались в каждой стране по-разному. Типографские единицы основаны на местных единицах длины, а так как они различны (даже дюймов до недавнего времени использовалось несколько), то и размер пайки не одинаков и не полностью соответствует размеру цицеро, хотя и очень к нему близок. Сегодня во многих странах наиболее широко используется компьютерная пайка. Эта величина была введена специально для обеспечения единого стандарта типографских единиц.

Компьютерная пайка

Компьютерная пайка равна 1/6 дюйма или 4,23 миллиметра. Компьютерный типографский пункт соответственно равен 1/72 дюйма или 0.35 миллиметра. Их широко используют в формате PostScript и для измерения текста, изображенного на экране компьютерного монитора. Также эта величина часто применяется в печати на принтерах в домашних условиях.

Иногда в веб-дизайне используют пункты, величина которых основана на величине компьютерной пайки, описанной выше. Иногда размеры пункта и пайки определяют относительно размера пикселя, установленного для конкретного веб-сайта. Такие пиксели называются относительными.

Относительные пиксели

Стандартный размер пикселей заменяется на относительные пиксели в том случае, если страница предназначена для просмотра на устройствах с нестандартным размером экрана, или для тех устройств, на которые смотрят с нестандартного расстояния. Например, размер экрана многих смартфонов рассчитан на то, чтобы на него смотрели с расстояния примерно 25 сантиметров (10 дюймов), но если появится новый телефон с экраном стандартного размера, но предназначенный для просмотра с расстояния вдвое меньше (13 сантиметров или 5 дюймов), то относительный пиксель также должен быть в два раза меньшего размера. Иначе изображение будет нечетким и пользователю будут видны точки, из которых состоит рисунок.

Угол зрения

Производители экранов заметили взаимосвязь между размером экрана, расстоянием между экраном и глазом, размером пикселя, и относительным размером точки. Понятия «угол зрения» и «пиксели на градус» помогают наглядно понять эту взаимосвязь.

Пример использования величин: пиксели на градус (точки на отрезках E и F) и угол зрения (угол A)
Величина пиксели на градус — общее число пикселей на экране на один градус зрительного угла по отношению к расстоянию от глаза до экрана. На рисунке желтый угол D равен одному градусу (на самом деле он больше одного градуса, так как иначе трудно было бы увидеть, что изображено на рисунке). Пиксели на градус — число точек на красном отрезке E или на красном отрезке F. В нашем случае точки на градус равны 3-м точкам, как видно на изображении (здесь 2 серых и одна темно-серая точка на каждом из экранов). Производители дисплеев определяют количество точек на градус так, чтобы точки были достаточно малы и сливались в один рисунок. Обычно эта величина намного выше, чем на нашей иллюстрации. Так, например, компания Apple утверждает, что они используют как минимум 53,53 точки на градус, а иногда и до 79.

Зная количество точек на градус, можно легко вычислить размер одной точки, используя расстояние от глаза до экрана и угол зрения в градусах. В нашем примере расстояние до первого экрана — 10 дюймов, а до второго — 20. Первое расстояние — среднее расстояние, от глаз до экрана смартфона, а второе — расстояние до экрана монитора компьютера. Угол зрения — это угол, для которого длина отрезка, который он покрывает на экране, равно одному пикселю (это расстояние на иллюстрации — зеленые отрезки B и C). Угол зрения на иллюстрации обозначен оранжевым цветом. Используя понятия угла зрения и точек на градус, можно вычислить размер пикселя как для обычных, так и для нестандартных дисплеев.

О том, как использовать эти понятия на практике можно подробнее узнать на сайте W3C.

Другие единицы

Хотя компьютерная пайка постепенно вытесняет другие единицы, и возможно заменит более привычные цицеро, наряду с ней также используются другие единицы. Одна из таких единиц — американская пайка Она равна 0,166 дюйма или 2.9 миллиметра. Существует еще и типографская пайка. Она равна американской.

В некоторых отечественных типографиях и в литературе о печати до сих пор используют цицеро — единицу, которая широко применялась в Европе (за исключением Англии) до появления компьютерной пайки. Один цицеро равен 1/6 французского дюйма. Французский дюйм немного отличается от современного дюйма. В современных единицах один цицеро равен 4,512 миллиметра или 0,177 дюйма. Эта величина почти равна компьютерным пайкам. Один цицеро — это 1,06 компьютерных пайки.

Круглая шпация (em) и полукруглая шпация (en)

Описанные выше единицы определяют высоту букв, но существуют также единицы, обозначающие ширину букв и символов. Круглая и полукруглая шпации — как раз такие единицы. Первая также известна как кегельная шпация или em, от английского, обозначающего букву M. Ее ширина исторически равнялась ширине этой английской буквы. Аналогично, полукруглая шпация, равная половине круглой — известна под названием en. Сейчас эти величины не определяют с помощью буквы M, так как эта буква может иметь разный размер у разных шрифтов, даже если кегль одинаков.

В русском языке используются короткое и длинное тире. Для обозначения диапазонов и интервалов (например, во фразе: «возьмите 3–4 ложки сахара») используется короткое тире, называемее также тире-en (англ. en dash). Длинное тире используется в русском языке во всех остальных случаях (например, во фразе: «лето было коротким, а зима — длинной»). Оно называется также тире-em (англ. em dash).

Проблемы с современными системами единиц

Многим дизайнерам не нравится нынешняя система типографских единиц, основанная на пайках или цицеро, а также на типографских пунктах. Главная проблема в том, что эти единицы не привязаны к метрической или имперской системе мер, и в то же время их приходится использовать вместе с сантиметрами или дюймами, в которых измеряется размер иллюстраций.
Размер всех трех шрифтов в типографских пунктах одинаков, но высота знака везде разная.
Кроме этого, буквы, выполненные в двух разных гарнитурах, могут сильно отличаться размером, даже если они одинакового размера в типографских пунктах. Это вызвано тем, что высота буквы измеряется как высота литерной площадки, которая не связана напрямую с высотой знака. Это затрудняет задачу дизайнеров, особенно если они работают с несколькими шрифтами в одном документе. На иллюстрации — пример этой проблемы. Размер всех трех шрифтов в типографских пунктах одинаков, но высота знака везде разная. Некоторые дизайнеры для решения этой проблемы предлагают измерять кегль как высоту знака.

Читайте также:

Ключевое слово	Размер в пикселях
xx-small	9px
x-small	10px
small	13px
medium	16px
large	19px
x-large	24px
xx-large	32px