Что является единицей измерения шрифта пункт пиксель миллиметр дюйм точка

Обновлено: 15.01.2025

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. Относительные единицы, рассчитывающиеся от размера шрифта.
2. Относительные единицы, рассчитывающиеся от размера экрана. Это немного грубое сравнение — на самом деле расчёт ведётся от размера 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 и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

  Что-то не получается или материал кажется сложным?

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

  Об обучении на Хекслете

  • Статья «Как учиться и справляться с негативными мыслями»
  • Статья «Ловушки обучения»
  • Статья «Сложные простые задачи по программированию»
  • Урок «Как эффективно учиться на Хекслете»
  • Вебинар «Как самостоятельно учиться»

  Открыть доступ

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

  
  

  ПОЖАЛУЙСТА ПОМОГИТЕ ОЧЕНЬ СРОЧНО Черепашке был дан для Повтори 11 [Вперёд 40 Налево 15 Налево зо] Какая фигура появится на экране? 1) правильный шести … угольник 2) правильный восьмиугольник 3) правильный девятиугольник 4) незамкнутая ломаная линия Ответ:​

  СРОЧНО ПОМОГИТЕ ДАМ 20 БАЛЛОВ надо только решить 2,5,4 вопросы ​

  Почему не заводится Юмаха Викинг Акум меняли при прокрутке ключа что то щёлкает и свечи тоже меняли​

  Моделью какого объекта является макет в мастерской архитектора? Земного шара Воображения мастера Рисунка на картине Застройки города Чем является инфо … рмационная модель объекта моделирования? Уменьшенной копией Рисунком Описанием Виртуальной копией Что из перечисленного является информационной моделью человека? Манекен Гравюра Рисунок человека Личные карточки, анкеты Что из перечисленного является информационной моделью корабля? Деревянная модель Уменьшенная копия Чертёж Что из перечисленного является натуральной моделью? Карта Таблица Муляж Схема На каком языке осуществляется описание объекта моделирования для информационной модели? На формальном языке На естественном языке На математическом языке На русском языке

  Пж помогите срочно. Дам 20 баллов! Команды восьмиклассников и семиклассников сражались в игре пейнтбол. Каждая команда должна была в течение заданн … ого времени поразить как можно больше участников команды-противника, выстрелив в соперника шариком с краской. По окончании игры оказалось, что каждый семиклассник сумел отметить краской 4 восьмиклассников, а каждый восьмиклассник – 5 семиклассников, при этом в обеих командах были ученики, в которых соперники попадали неоднократно. Какое наибольшее количество участников могло быть в обеих командах вместе, если известно, что общее количество участников не превышает 100 и обе команды израсходовали одинаковое количество «пуль». В ответе запишите одно число – общее количество участников двух команд. Формат вывода В ответе запишите одно число – общее количество участников двух команд.

  
  

  Для каждой ситуации в верстке лучше использовать подходящие единицы измерения. Верстать только в пикселях значит не учитывать адаптивность. Применять только проценты — делать макет с зависимыми друг от друга блоками. Не использовать rem — переписывать весь код, если заказчик попросит сделать «покрупнее». В верстке десятки единиц измерения и лучше сочетать их, чтобы облегчить работу себе и добиться лучших результатов.

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

  Измеряются в точных (абсолютных) значениях:

  • Дюйм — in (inch).
  • Пика — pc (pica).
  • Поинт — pt (point).
  • Сантиметр — cm (centimeter).
  • Миллиметр — mm (millimeter).
  • Пиксель — px (pixel).

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

  1in = 6pc = 72pt = 96px

  1pc = 12pt = 16px

  1cm = 10mm = 37,8px

  Посмотрите, как выглядит текст в разных абсолютных единицах измерений.

  
  

  
  

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

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

  Процент берется от различных свойств. 1% всегда равен 1/100 родительского элемента.

  Viewport — область просмотра, т.е. та часть окна браузера, которая доступна пользователю. У браузера есть техническая часть: адресная строка, открытые вкладки, виджеты — они не входят. Но в viewport входят полосы прокрутки.

  1vw = 1/100 ширины окна браузера

  1vh = 1/100 высоты окна браузера

  1vmin = меньшее из значений 1vw и 1vh.

  1vmax = большее из значений 1vw и 1vh

  Поддерживается не всеми браузерами. Проверяйте с помощью ресурса Can I Use.

  
  

  Иногда возникает путаница при выборе «проценты или viewport». Размер в процентах будет считаться от размера контейнера, а viewport — от области просмотра экрана. Допустим, вы установили значение 10vw. Тогда на экране с шириной 800px размер составит 80px.

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

  Viewport помогает добиться масштабируемости текста. Чем больше экран, тем более крупный шрифт будет показываться. Однако может случиться ситуация, когда шрифт станет слишком мелким и нечитаемым. Чтобы этого избежать, применяйте функцию calc (). Поставьте базовый размер шрифта, допустим, 12px, и добавьте значение vw:

  Тогда текст станет более динамичным и предсказуемым. Если не хотите использовать calc, работайте с препроцессорами.

  Шрифтозависимые единицы

  1em = размер родительского элемента

  1rem = размер шрифта корневого элемента

  1ex = высота символа X

  1ch = ширина символа 0

  Единицы измерения привязаны к шрифту. Они помогают связать размер шрифта с размерами блоков и отступов. При смене семейства шрифта размеры, установленные через ex и ch, меняются. На практике ex и ch используются редко. Основные используемые единицы — em и rem. Если em не задан, берется значения по умолчанию, установленное в большинстве браузеров — 16px. Единица rem считается от базового значения, а em — от родителя.

  Использование rem помогает изменять шрифт всего сайта. Это очень удобно при верстке адаптивных страниц. Задавайте размеры шрифта для каждого устройства отдельно. Например, десктоп-версия — 16px, планшеты — 12px, смартфоны — 10px. На экране устройства шрифт будет отображаться в зависимости от присвоенного значения.

  На примере шрифт для сайта задан 16px. Это и есть заданное значение rem для сайта. Дополнительно прописали значение rem для экранов маленьких размеров шириной до 400px — 10px. Таким образом, на десктопах шрифт будет 16px, а на мобильных устройствах — 10px. Ширина экрана изменялась, автоматически поменялся шрифт на всем сайте.

  
  

  Единица em работает иначе и зависит от родителя. Поэтому на разных участках кода она принимает разные значения. Есть отличный пример для иллюстрации. Допустим, мы задаем нижние отступы относительно размера текста в блоке через em. В обоих случаях, и в заголовке и абзаце, отступ равен 1em. Но в заголовке em = 32px, потому что font-size родителя 32px, а в абзаце — 16px, и здесь размер шрифта — 16px.

  
  

  Еще пример. Мы задали отдельный класс для родительского блока. Теперь размер зависит только от него, а не от размера шрифта всего документа.

  
  

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

  Что использовать?

  Выбор единиц зависит от задач проекта, поэтому принимайте отдельное решение в каждом конкретном случае. На ресурсах, откуда пользователи распечатывают материалы, используйте pt или pc. Если при печати нужны точные размеры, задавайте cm и mm. Для пропорциональных дизайнов, привязанных к размерам друг друга, берите em и rem. Для мультимедийных и резиновых форматов задавайте в процентах или через viewport.

  Основное правило — подбирайте единицы измерения, наиболее простые в поддержке данного проекта.

  Когда–то давным–давно буквы отливались на металических или деревянных брусках, и их размеры были довольно статичными. Высота литерной площадки называлась кеглем, а измеряли ее в пунктах (в СНГ 1 пункт равен 0,376 мм).

  
  

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

  Тут тебе и сантиметры, и дюймы и все те же пункты.

  
  

  Однако, когда дело касается цифровой среды, на арену выходят виртуальные величины измерения.

  Размер шрифта в векторе

  Как правило, цифровые шрифты являются векторными, и все их метрики задаются в некоторых условных единицах, не имеющих размерности.

  
  

  Основные метрики шрифта «Новая Гельветика Тонкая» в окне настроек шрифтового редактора «Фонтлаб 5»

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

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

  
  

  Глиф G из шрифта «Новая Гельветика Тонкая» в окне глифа программы «Фонтлаб 5»

  Для связи безразмерного мира векторных знаков с миром реальным, в котором шрифт используется и измеряется в пикселях, сантиметрах или других осязаемых величинах, существует специальный параметр «UPM шрифта».

  
  

  Окно настроек шрифта в редакторе «Фонтлаб 5». Обратите внимание, что параметр UPM является глобальным и влияет на все глифы в шрифте.

  UPM (Units Per Em) — это количество условных единиц на кегельную (литерную) площадку.

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

  Другими словами, UPM — это плотность тех самых единиц, в которых измеряются различные метрики векторного шрифта: размеры глифов, их полуапрошей, отступов для кернинговых пар и другие.

  Здесь можно провести аналогию с разрешением монитора и физическими пикселями, из которых он состоит. Чем больше у.е. вмещается в наш прямоугольник, тем выше наша степень свободы, выше «доступное разрешение».

  Будьте осторожны, изменяя значение UPM с 1000 на какое-то другое. Ходят слухи, что не все компьютерные программы корректно работают со шрифтами, у которых значение этого параметра отличается от стандартного.

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

  Например, в окно тестирования/предпросмотра шрифта или в Фотошоп.

  Размер шрифта в Фотошопе

  О, как обманчивы могут быть привычные вещи! Многие дизайнеры и простые обыватели годами работают в Фотошопе, но так никогда и не задумывались, а как измеряется шрифт в этой программе.

  Чтобы понять, что происходит с векторными метриками шрифта в Фотошопе, давайте разберемся, а что же означают пиксели в параметре «размер шрифта»?

  
  

  Когда вы выбираете размер шрифта, например, в «16 px», на самом деле вы устанавливаете это значение для параметра PPM.

  PPM (Pixels Per Em) — это количество пикселей на кегельную площадку.

  Другими словами, это плотность все той же условной кегельной площадки, но в пикселях.

  То есть, ни одна из вертикальных метрик шрифта не станет при этом равной 16 пикселям! Ни высота строчных, ни высота прописных, ни расстояние между верхними и нижними выносными элементами.

  Шрифт Helvetica, PPM = 16 пикселей, сглаживание в режиме Strong. Высота прописных букв равна 12 пикселям, а строчных — 9 пикселей

  Так что же в действительности изменяет параметр «размер шрифта»? Вы уже догадались? Молодцы, совершенно верно.

  Коэффициент масштабирования

  Изменяя «размер шрифта» в Фотошопе, мы, ни много ни мало, изменяем коэффициент масштабирования при переносе условных единиц из безразмерного мира векторов в мир размерных пикселей. Он служит «мостиком» при переходе условных векторных метрик в пиксели.

  Происходит это следующим образом.

  Как вы уже поняли, величины UPM и PPM связаны между собой элементом «M», общим множителем — неопределенным размером условной кегельной площадкой. Отсюда получаем простую формулу:

  Х у.е. в 1 пикселе = UPM / PPM

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

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

  Живой пример

  В процессе создания шрифта «5 копеек» (FE 5Cent), было важно добиться абсолютной четкости линий при «размере шрифта» (PPM) в 5 пикселей в Фотошопе или в любой другой программе.

  
  

  Шрифт FE 5Cent — это, пожалуй, самые большие «5 копеек», добавленные в вопрос пиксельных шрифтов

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

  Значение UPM для шрифта предполагалось стандартное, в 1000 единиц.

  Дано:

  PPM в Фотошопе = 5 пикселей

  UPM шрифта = 1000 у.е.

  Задача: Найти количество Х у.е. для рендеринга в 1 пиксель.

  Решение:

  X у.е. в 1 пикселе = UPM / PPM = 1000 / 5 = 200.

  Ответ: 200 у.е.

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

  
  

  Вывод о пользе

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

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

    
  • Как упаковать бревна в mud runner на ps4
    
  • Как установить пиксель фейсбук на турбо страницу яндекс
    
  • Как сохранить зрение при работе за компьютером книга лихачевская
    
  • Как открыть документ с росреестра с электронной подписью
    
  • Какой от планшета номер