Размеры шрифтов: как и какой лучше выбрать, список примеров

пикселей — это сокращение от пикселя… хотя в большинстве случаев это уже не буквально пикселя. Это использовал , когда дисплеи имели тенденцию быть довольно предсказуемым соотношением пикселей с низким разрешением, например 1024×768. В те дни 1px обычно равнялись одному фактическому пикселю на физическом экране.

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

Однако, когда появились экраны с высоким разрешением (иногда называемые «ретина»), и устройства начали упаковывать больше пикселей в меньшее пространство, эти физические пиксели устройства стали сверхмалыми . Просматривая веб-страницы на экране с высоким разрешением, было бы крайне сложно что-либо прочитать, если бы 1px в CSS по-прежнему соответствовало одному буквальному пикселю устройства, поскольку сами пиксели быстро уменьшались. В конце концов, современные смартфоны имеют разрешение даже выше, чем HD-телевизоры.

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

Итак, в наши дни 1px обычно соответствует размеру увеличенного, «увеличенного» пикселя, а не буквального пикселя на реальном оборудовании. Что-то 1px в нашем CSS, вероятно, будет занимать несколько физических аппаратных пикселей, и у нас нет никакого способа в чистом CSS указать буквальный пиксель устройства. Но это нормально, потому что они, как правило, слишком малы, чтобы мы могли с ними связываться.

Пример: пиксели на iPhone 14 Pro настолько микроскопичны, что 16 пикселей в буквальных пикселях устройства будут примерно размером печатного шрифта при размере шрифта 2pt. Хорошо, что браузеры масштабируют их для нас!

Большая часть из этого не очень важна в контексте этого обсуждения, но я думаю, что это все равно полезно знать. Важная часть: 1px равно тому, что браузер считает одним пикселем (даже если это не буквально пиксель на аппаратном экране).

Это приводит нас к em и rem , которые похожи друг на друга. Чтобы продолжить с , не совсем релевантные, но все же интересные мелочи : «em» — это типографский термин, который на самом деле появился на много десятилетий раньше, чем компьютеры. Типографически один em равен текущему размеру шрифта.

Если у вас установлен размер шрифта 32pt («pt» — это pt , еще один старый типографский термин, который все еще иногда используется), то 1em — это 32pt. Если текущий размер шрифта 20px , то 1em = 20px (но опять же : вы не должны устанавливать размеры шрифта в пикселях — это просто для примера ).

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

Em первоначально относился к ширине символа «M», откуда и произошло название. Но теперь это относится к текущему размеру шрифта, а не к размерам конкретного глифа.

Разница между

Чтобы различать их: 1rem всегда равно размеру шрифта браузера или, точнее, размеру шрифта элемент html . rem означает «root em», а корнем веб-страницы является тег . Итак, 1rem = любой размер шрифта документа. (Что, опять же, по умолчанию равно 16px , но может быть переопределено пользователем.)

em , с другой стороны, это размер шрифта текущего элемента . Возьмите следующий CSS:

  .контейнер {
  размер шрифта: 200%;
}
п {
  размер шрифта: 1em;
}  

Учитывая приведенный выше CSS, параграфы внутри элемента .container будут в два раза больше. Это потому, что 1em означает «текущий размер шрифта», а внутри . container это 200%. 1em × 200% = 2em ( 32px по умолчанию).

Абзацы вне элемента .container , тем не менее, по-прежнему будут иметь нормальный размер шрифта 1em ( 16px по умолчанию).

Если бы мы изменили em на rem в приведенном выше CSS, то все теги абзаца всегда были бы размером шрифта браузера по умолчанию, независимо от того, где они были.

размер шрифта: 1em эквивалентно размер шрифта: 100% .

em и % единицы не всегда эквивалентны в других контекстах; например, ширина : 1em и ширина : 100% , скорее всего, будут очень разными, поскольку в этом случае процент основан на ширине родительского контейнера, а не на размере его шрифта. Но % и em совпадают в том, что касается свойства font-size .

Итак, подытожим:

• 1em размер шрифта текущего элемента
• 1rem (root em) — это размер шрифта документа (т. е. браузера)

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

Почему все это имеет значение

Опять же, распространенное заблуждение: поскольку 1em равно 16px , в любом случае не имеет значения, какую единицу измерения вы выберете. И это кажется логичным ; если 16px = 1rem , то какое значение имеет способ ввода?

Помните, em и rem являются относительными ; по умолчанию они оба (в конечном счете) основаны на размере шрифта браузера.

px , однако, это не так; это просто статическое значение, которое не основано ни на чем другом и не зависит от него.

2rem — удвоенный размер шрифта браузера; 0. 5rem это половина и так далее. Таким образом, когда или если пользователь изменит свой предпочтительный размер шрифта, если вы используете em и rem , весь текст на вашем веб-сайте изменится соответствующим образом, как и должно быть. 2rem по-прежнему вдвое больше размера шрифта; 0.5рем еще половина.

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

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

эм и rem work с размером пользовательского шрифта;  пикс.  полностью переопределяет его.

Это очень плохо. Он недоступен и может даже помешать кому-то вообще использовать сайт.

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

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

При наиболее может быть приемлемым значение вроде calc(1rem + 1vw) , так как оно все еще содержит rem в качестве базы. Однако даже в этом случае я бы рекомендовал использовать clip() или медиа-запросы для установки минимального и максимального значений, поскольку размеры экрана часто выходят далеко за рамки того, что мы могли бы ожидать или тестировать.

Различия помимо размера шрифта

Хорошо, теперь давайте поговорим о том, как меняются px и em / rem , даже когда нам 9 лет.0233, а не , относящийся конкретно к свойству font-size .

Разработчики обычно тестируют, увеличивая или уменьшая масштаб страницы, и я думаю, что именно отсюда происходит неправильное представление, лежащее в основе этого поста. При масштабировании все увеличивается (или уменьшается), и в этом случае выбор px или em / rem в качестве единицы CSS обычно не имеет значения. Оба ведут себя одинаково, что касается масштабирования. И большинство разработчиков с хорошим зрением, вероятно, не поймут, что это еще не все. Однако самое сложное:

Даже за пределами font-size , px не ведет себя так же, как em и rem .

px единиц по-прежнему привязаны к масштабированному значению пикселей на экране. Однако em и rem привязаны к размеру шрифта документа , а , а не к масштабу или масштабу страницы.

Для демонстрации взгляните на этот CodePen:

См. «Перо без названия» Джоша Коллинсворта (@collinsworth) на КодПене.

У нас есть несколько абзацев, каждый с границей 2px внизу и полем 20px между ними. Обратите внимание, мы используем пикселей единиц для обоих.

Если вы увеличиваете или уменьшаете масштаб, размер и расстояние между элементами остаются относительными . То есть: чем больше вы увеличиваете масштаб, тем толще становится эта линия и тем больше становится расстояние между абзацами.

Чтобы избавить вас от хлопот, вот скриншот, показывающий то же перо с увеличением 400%. Текст, строка и интервал равны 9.0485 все В 4 раза больше; они остаются одинакового размера относительно друг друга:

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

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

На снимке экрана ниже я установил размер шрифта Firefox по умолчанию на 64px . Посмотрите:

Сравните текст на скриншоте с текстом над ним. Обратите внимание, что на этот раз линии толще на 90 233, а не на 90 234, а поля между абзацами увеличились на 90 233, а не на 90 234 пропорционально. Только сам текст больше. Поскольку ширина границы и поля были установлены на пикселей , они остаются такими, как были, и не масштабируются.

Однако вы заметите, что если вы измените px в CSS на эквивалентные значения rem , линии и интервал сделают больше!

Все это означает, что есть важные, реалистичные дизайнерские причины для выбора px вместо em и rem или наоборот.

Подведем итог:

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

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

See the Pen Разница между px и rem в масштабировании шрифта Джош Коллинсворт (@collinsworth) на КодПене.

Что выбрать

Итак, зная, что em и rem будут масштабироваться по отношению к размеру шрифта, но значения px будут , а не , что мы оставляем? Должны ли мы просто никогда не использовать пикселей для что-нибудь !?

Хотя я думаю, что вы, вероятно, согласитесь пойти по этому пути, если вы того пожелаете, я все же думаю, что есть место для px .

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

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

Лично я: Я бы рекомендовал ставить все размеры с помощью rem . Я добавляю em только там, где хочу, чтобы что-то было пропорционально текущему размеру шрифта (например, значок рядом с текстом, который должен быть точно такой же высоты, как символы, и на полсимвола сбоку). Я бы нигде не использовал px , кроме элементов дизайна, которые я явно не хотел масштабировать с размером шрифта.

Но еще раз, если вы что-то уберете из этого поста:

Никогда не устанавливайте font-size в пикселей единиц — по крайней мере, если вы не уверены в том, что делаете, как он будет себя вести и будет ли он по-прежнему доступен, когда вы это сделаете.

Важное примечание о медиа-запросах

Это запоздалое дополнение к этому сообщению, но: важно избегать px в запросах @media по тем же причинам, что и выше; он будет работать нормально, когда пользователь увеличивает масштаб, но медиа-запрос, использующий px подведет пользователей, если они самостоятельно установят больший размер шрифта.

  @media (минимальная ширина: 800 пикселей) {
  /* Изменение размера шрифта НЕ влияет на эту точку останова */
}
@media (минимальная ширина: 50 бэр) {
  /* Изменение размера шрифта ДЕЙСТВИТЕЛЬНО влияет на эту точку останова */
}  

Это связано с тем, что по мере увеличения размера шрифта 50rem становится другим значением в зависимости от этого предпочтения, а 800px — нет.

Скорее всего, когда мы пишем CSS для больших точек останова, мы считаем само собой разумеющимся, что на экране достаточно места для распространения элементов. Это может быть не так, если пользователь установил очень большой размер шрифта, и установка наших медиа-запросов в rem вместо px помогает нам избежать этого предположения и реагировать на предпочтения пользователя.

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

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

Последнее слово о доступности