Содержание

Размер шрифта CSS. Единицы измерения px, em, проценты — учебник CSS

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


/* в процентах: */
h2 {
	font-size: 100%;
}


/* в единицах измерения em: */
h3 {
	font-size: 1em;
}


/* в пикселях: */
h4 {
	font-size: 18px;
}


/* с помощью ключевого слова: */
p {
	font-size: small;
}

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

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


font-size: 24px;

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

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


p {
	font-size: 100%;
}

/* ...то же самое, что и значение в браузере по умолчанию: */

p {
	font-size: 16px;
}

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

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

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

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

3em = 300% и так далее. Пример записи:


font-size: 0.9em;

/* перед точкой можно опустить ноль: */

font-size: .9em;

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

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

В качестве альтернативы можно воспользоваться новой единицей измерения, введенной в CSS3 –

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

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

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

Ключевое словоРазмер в пикселях
xx-small9px
x-small10px
small13px
medium16px
large19px
x-large24px
xx-large32px

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

Завершение

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

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

font-size | lesson-web.ru

Дальше мы начинаем работать с текстом, поэтому я для начала вставлю в нашу страничку lorem ipsum. Я надеюсь, что вы помните, как его найти, но, если не помните, давайте повторюсь. Для этого в Google вводите «lorem ipsum» и заходите по первой ссылочке.

Нажимаете «сгенерировать» и копируете какой-нибудь абзац, этого будет достаточно.

И в «box» вставляем этот текст. 

<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla gravida nulla urna, ac congue tortor dictum porttitor. Sed et leo augue. Nam ac vestibulum erat, et condimentum nibh. Pellentesque et tellus a orci porttitor ultrices ac at mi. Donec scelerisque eros nec aliquam sollicitudin. Etiam convallis eros eget sapien dapibus hendrerit. Vestibulum tincidunt, magna nec aliquet hendrerit, velit elit laoreet nisi, non dapibus nunc purus sit amet est. Sed eget elementum risus. Nunc dignissim aliquet ultrices. Vestibulum ut rhoncus sapien. Fusce id ultricies ipsum, sit amet scelerisque magna. Praesent rhoncus accumsan neque, eu ultricies massa luctus et. In cursus, leo vitae varius laoreet, dui velit volutpat enim, id convallis ex ipsum efficitur ipsum.
</div>

Итак, первое свойство для работы с текстом, которое мы изучим, – это «font-size». Свойство, которое позволяет изменять размер нашего шрифта.

.box{
  font-size:40px;
}

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

Давайте ещё немножечко поговорим про пиксели. Во-первых, стандартный размер шрифта – 16px. То есть, если вы «font-size» не задали, то у вас на странице будет 16-пиксельный размер, чтобы вы сразу же понимали, что, если вам нужно задать шрифт размером 16px, то можете ничего не задавать.

Я в основном использую минимум 12px, 14px, если нужно чуть-чуть уменьшить, 18 px, если нужно чуть увеличить, 20px, 30px, 40px – заголовки, ну, и 50px, если нужен какой-то очень большой заголовок, просто огроменный. Остальные размеры я использую по мере какой-то очень важной надобности. По факту: 12, 14, 16, 18, 20, 30, 40, на крайняк 50 пикселей. Можете та же использовать, если хотите.

С пикселями всё довольно-таки просто, теперь поехали к em-ами. Em – относительная величина, то есть, если вы задаёте размер 2em, то это есть по формуле 2*16,то есть, 32px.

Для чего это надо? Для того, чтобы можно было одноразово изменить весь размер текста на странице, то есть один какой-то параметр, и изменятся все параметры. Давайте для примера, для «body» мы зададим «font-size: 20px», то есть 20px это будет стандартный размер, то есть изначально стандартный размер 16px, теперь мы для «body», то есть для всей абсолютно страницы, задаём 20, и тогда главный шрифт будет размером 20px. Относительно умножаем на 2, получаем 40, и, вот, размер 40px.

К примеру, у вас будет на странице очень много em-ов и вам нужно шрифт всего сайта увеличить чуть-чуть на пару пикселей. То вы будете все пиксели прописывать, изменять с 20 на 22 пикселя, а так вы просто берёте и «font-size» прописываете 18px. И, вот, с 16 до 18 увеличивается и весь сайт увеличивается.

Для чего это ещё нужно? А по большей части ещё для мобильных устройств. Там из-за того, что сайт ужимается до размера мобилки и меняется вообще пиксельность местами, то размер шрифта в пикселях может прочитаться немножечко иначе. Иногда, когда вы прописываете шрифты в пикселях и открываете сайт на мобильных устройствах, то некоторые шрифты могут увеличиться или уменьшиться относительно того, как они должны выглядеть. Это всё из-за того, что пиксели. Поэтому, если вы делаете сайты для мобильных устройств, то лучше делать em-ы, и тогда на мобилке всё будет выглядеть так, как должно выглядеть в плане пропорций шрифтов относительно самого сайта. 

<!— Тут я упущу дальнейшее описание. Лучше посмотрите в видео. Очень сложно эту тему описать текстом))) —>

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

Что делает font-size: 100% на элементе html?



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

font-size: 100% к элементу html , когда я все равно использую единицу em ?

Что значит этот 100% — 100% по сравнению с чем?

html css
Поделиться Источник Sven     21 октября 2013 в 19:37

2 ответа

  • Что значит font-size:1em/2em?

    В некоторых шаблонах я вижу, что некоторые разработчики используют свойство font-size , которое выглядит следующим образом: font-size:1em/2em Что это значит ? Я думаю, что 1em — это min-font-size , а 2em-это max-font-size Это правда ?

  • font-size:62.5% против font-size:10px

    В течение длительного времени я использую body {font-size:62.5%;} в документах CSS, так как предполагается, что 1em равно 10px . Однако недавно я заметил, что это не так для меня в Internet Explorer. Поэтому вместо этого я попробовал код: html {font-size:100%} body {font-size:10px} Теперь это…


4

размер шрифта 100% на html равен размеру шрифта по умолчанию в браузерах, который может быть 14px или 16px.

Поделиться Minder Saini     21 октября 2013 в 20:33


3

Существует много типов объявления размера шрифта как одного и того же значения для браузера.

  1. font-size: 1em;

  2. font-size: 100%;

  3. font-size: 16px; // this is default

Таким образом, вы можете получить размер шрифта по умолчанию. Но обратите внимание, что 16 пикселей изменят размер шрифта, однако em и % будут зависеть от размера шрифта, используемого в теге body.

Fiddle: http://jsfiddle.net/afzaal_ahmad_zeeshan/5Wkus/

Таким образом, вы увидите, что em полностью зависит от шрифта, объявленного в body . Или, можно сказать, она передается от ребенка к родителю. Он продолжает искать изменение размера шрифта в ближайшем родителе. Который в большинстве случаев направляет код к элементу body или таблице стилей по умолчанию агента пользователя.

Поделиться Afzaal Ahmad Zeeshan     21 октября 2013 в 20:38

Похожие вопросы:


Невозможно переопределить свойство font-size:100% & font-inherit в другом файле CSS

В моем проекте у нас есть один глобальный файл CSS ‘global-css’, который используется на всех веб-страницах сайта. Содержимое этого файла, font-size: 100%; font: inherit; properties for…


Установка ‘font-size’ с jQuery не работает на последнем элементе выделенного текста

Я пытаюсь изменить font-size всего выделенного текста. Он работает нормально, но я не могу изменить шрифт последнего элемента в массиве. Ниже приведен мой код: <!DOCTYPE html> <html>…


Что делает этот CSS?

input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;} input,textarea,select{*font-size:100%;} Это из YUI reset css. Что делает * before font-size:100%?


Что значит font-size:1em/2em?

В некоторых шаблонах я вижу, что некоторые разработчики используют свойство font-size , которое выглядит следующим образом: font-size:1em/2em Что это значит ? Я думаю, что 1em — это min-font-size ,…


font-size:62.5% против font-size:10px

В течение длительного времени я использую body {font-size:62.5%;} в документах CSS, так как предполагается, что 1em равно 10px . Однако недавно я заметил, что это не так для меня в Internet…


Почему «font-size: 1em» больше в IE10, чем Chrome?

В настоящее время я работаю над разработкой сайта, и я не могу понять, почему текст отображается больше в IE10, чем в Chrome. (Я убедился, что оба браузера настроены на 100% zoom-ни больше, ни…


Что делает текст на элементе <button> вертикально центрированным?

Кажется, есть какая-то магия вокруг элемента <button> , которую я не понимаю. Рассмотреть этот markup: <button class=button>Some Text</button> <div class=button>Some…


Установите размер шрифта на <html> или <body> ?

Как лучше всего установить базовый размер шрифта в вашем файле CSS? Лучше объявить размер шрифта на элементе <html> или элементе <body> ? Я использую REM единицы измерения (с резервным…


Тег <font size=…> не работает в Text.text

Мой код: import QtQuick 2.6 import QtQuick.Window 2.2 Window { visible: true Text { text: ‘ <font size=100>Large</font> <font size=50>Medium</font> <font…


Есть ли смысл в единицах rem на элементе HTML?

Единица rem CSS — это сокращение от “root em”. При использовании в CSS 2rem вычисляется значение “two times the font size on the root element”, которое в документе HTML в два раза превышает размер…

em vs. px vs. pt vs. percent / Хабр

Одним из наиболее запутанных аспектов

CSS

является применение

font-size

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



Знакомьтесь — единицы

1. «Ems» (em): «em» — это масштабируемая единица, которая используется в веб-документах. «em» равна текущему font-size, например, если font-size в документе 12pt, 1em равен 12pt. «em» масштабируема по своей природе, так 2em будет равен 24pt, 0.5em будет равна 6pt и т.д. Использование «em» становятся все более популярным в веб-документах из-за масштабируемости и возможности с пользой применять в мобильных устройствах.

2. Pixels (px): «px» имеют фиксированный размер единиц, которые используются на экранах (например, для чтения на экране компьютера). Один пиксель равен одной точки на экране компьютера (самый малый элемент разрешения вашего экрана). Многие веб-дизайнеры используют px в веб-документах в целях получения пиксель-идеального(pixel-perfect) представления своего сайта, отображаемого в браузере. Одна из проблем, с использованием px заключается в том, что эти единицы не позволяют изменять масштаб для слабовидящих читателей или мобильных устройств.

3. Points (pt): «pt», традиционно используются в печатных СМИ (все, что должно быть напечатано на бумаге, и т.д.). Один «pt» равен 1 / 72 дюйма. «pt», так же, как и «px», имеют фиксированный размер единицы и не могут масштабироваться.

4. Percents (%): Единицы измерения в % похожи на «em», за исключением нескольких принципиальных различий. Во-первых, текущий font-size равен 100% (т.е. 12pt = 100%). При использовании «%», ваш текст становится полностью масштабируемым для мобильных устройств и удобства пользователя (accessibility).

Итак, в чем же разница?

Легко будет понять разницу между единицами font-size, когда вы увидите их в действии. Как правило, 1em = 12pt = 16px = 100%. При использовании этих размеров шрифта, давайте посмотрим, что происходит, когда вы увеличиваете базовый размер шрифта (с использованием CSS селектора body) от 100% до 120%.


Изменение Font-size от 100% до 120%.

Как вы можете видеть, «em» и «%» увеличили размер шрифта, в то время как «px» и «pt» этого не сделали. Установка абсолютного размера для вашего текста может быть простым делом, но гораздо лучше для ваших посетителей использовать масштабируемый текст, который может быть отображен на любом устройстве или любой машине. По этой причине, единицы «em» и «%» предпочтительнее в использовании для текста веб-документа.

«em» vs «%»

Мы выяснили что единицы «px» и «pt», не лучшим образом подходят для веб-документов, что заставляет нас использовать «em» и «%». В теории, единицы «em» и «%» являются идентичными, но на практике они имеют незначительные различия, которые важно учитывать.

В приведенном выше примере мы использовали в качестве базовой единицы font-size проценты (в тэге body). Если вы измените вашу базовую единицу font-size c «%» на «em» (то есть body {font-size: 1em;}), вы, должны бы не заметить разницы. Давайте посмотрим, что происходит, когда «1em» является нашей базовой единицей, и когда клиент меняет «Размер шрифта» в настройках своего браузера (такая возможность предусмотрена в во многих браузерах, например, Internet Explorer).


Размер шрифта, когда клиент изменяет размер текста в браузере.

Когда в браузере клиента размер текста установлен в «средней», то незаметно никакой разницы между «em» и «%». Однако, если параметр изменять, разница становится очень большой. При установке «Smallest» «em» гораздо меньше, чем «%», а при установке «Largest» наоборот «em» отображается гораздо большим, чем «%». И хотя многие утверждают, что единицы в «em» масштабируются так, как задумано, на практике текст в «em» масштабируется слишком резко, и при этом наименьший текст становится неразборчивым на некоторых машинах.

Вердикт

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

Победитель: процент (%).

font-size-adjust | CSS справочник

Поддержка браузерами

Описание

CSS свойство font-size-adjust позволяет лучше контролировать размер шрифта, когда первый выбранный шрифт не доступен.

Когда первый заданный шрифт не доступен, браузер использует второй указанный шрифт. Это может привести к большой разнице в размера шрифта. Чтобы этого не случилось, используйте свойство font-size-adjust.

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

Значение по умолчанию: none
Применяется: ко всем элементам, а также к псевдо-элементам ::first-letter и ::first-line
Анимируется: да
Наследуется: да
Версия: CSS3
Синтаксис JavaScript: object.style.fontSizeAdjust=»0.58″

Синтаксис

font-size-adjust: число|none|inherit;

Значения свойства

Значение Описание
число Определяет значение аспекта для использования.
none Нет регулировки размера шрифта.
inherit Указывает, что значение наследуется от родительского элемента.

Пример


<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Пример</title>
  <style>
    .divVerdana { font-family: verdana; }
    .divTimes { font-family: 'times new roman'; }

    #div1 { font-size-adjust: 0.58; }
    #div2 { font-size-adjust: 0.58; }
  </style>
</head>
<body>

  <div>
    Пример свойства font-size-adjust
  </div>
  <div>
    Пример свойства font-size-adjust
  </div>

  <br><br>

  <div>
    Пример свойства font-size-adjust
  </div>
  <div>
    Пример свойства font-size-adjust
  </div>

</body>
</html>

Результат данного примера в окне браузера:

CSS font size adjust



Пример

При указании свойства Font-readjust (размер шрифта) браузер будет изменять размер шрифта одинаково независимо от семейства шрифтов («Verdana» имеет значение аспекта 0,58)

div {
    font-size-adjust: 0.58;
}

Определение и использование

Свойство font-size-adjust позволяет лучше контролировать размер шрифта, если первый выбранный шрифт недоступен.

Если шрифт недоступен, обозреватель использует второй указанный шрифт. Это может привести к большим изменениям размера шрифта. Чтобы предотвратить это, используйте свойство font-size-adjust.

Все шрифты имеют «значение аспекта», которое является размер-разница между строчной буквы «x» и прописной буквы «x».

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

Значение по умолчанию:none
Inherited:yes
Animatable:yes. Читайте о animatable
Version:CSS3
Синтаксис JavaScript: object.style.fontSizeAdjust=»0.58″

Поддержка браузера

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

Свойство
font-size-adjustНе поддерживаетсяНе поддерживается3.0Не поддерживаетсяНе поддерживается

Синтаксис

font-size-adjust: number|none|initial|inherit;

Значения свойств

ЗначениеОписание
numberОпределяет используемое значение аспекта
noneЗначение по умолчанию. Нет регулировки размера шрифта
initialПрисваивает этому свойству значение по умолчанию. (Читайте о initial)
inheritНаследует это свойство из родительского элемента. (Читайте о inherit)

Похожие страницы

HTML DOM Справочник: fontSizeAdjust Свойство


Свойство font-size-adjust — контроль размера шрифта

Свойство font-size-adjust позволяет контролировать размер шрифта, при неизменном font-size (увеличивать или уменьшать).

Применение: пусть в font-family задано два шрифта через запятую, например, Georgia, «Times New Roman». Пусть на компьютере пользователя нет шрифта Georgia — в этом случае применится «Times New Roman». Однако, нас ждет проблема — при одинаковом значении font-size шрифты будут выглядеть по-разному. В примере ниже обоим абзацам задан font-size в 16px, но разные font-family. Посмотрите, как отличаются размеры:

<p> Lorem ipsum dolor sit amet. </p> <p> Lorem ipsum dolor sit amet. </p>

:

Это происходит из-за того, что отображаемый размер шрифта зависит в большей степени не от свойства font-size, которое определяет лишь общий размер шрифта, а от соотношения значений свойства font-size и величины x-height (x-height — это разница между размером строчной буквы «x» и прописной буквы «X» для определенного шрифта).

Это соотношение называется аспектом шрифта и рассчитывается по формуле: аспект = font-size / x-height.

Проблему размеров решает свойство font-size-adjust (оно позволяет менять аспект шрифта), которое заставит выглядеть второй шрифт такого же размера, как и первый.

Давайте сделаем так, чтобы шрифт Times New Roman был такого же размера, как и Georgia. Нам известен аспект Georgia — это 0.5 (см. таблицу ниже).

Установим font-size-adjust для текста с Times New Roman в значение 0.5 и увидим, что второй текст стал такого же размера, как и первый:

<p> Lorem ipsum dolor sit amet. </p> <p> Lorem ipsum dolor sit amet. </p>

:

Синтаксис

селектор { font-size-adjust: число | none; }

Значения

ЗначениеОписание
ЧислоЧисло задает аспект шрифта.
noneНет регулировки размера шрифта.

Значение по умолчанию: none.

Как определить значение аспекта для шрифта?

Посмотрите отрывок из спецификации W3C: Коэффициент пропорциональности (аспект) для выбранных шрифтов может быть высчитан путем сравнения одного и того же текста, но с разным значением font-size-adjust. Если значение свойства font-size-adjust подобрано верно, то при одинаковом размере шрифта текст останется неизменным для всех используемых на странице шрифтов.

Привожу известные мне значения аспекта для некоторых шрифтов: Georgia — 0.5, Times New Roman — 0.46, Verdana — 0.58.

Пример

Сравните как выглядит текст с разным значением font-size-adjust и одинаковом font-size и font-family:

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>

:

Пример . Применение в реальной жизни

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

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elitorire aenean a dapibus magna, ac interdum nisl suspendisse egetile. </p> p { font-size: 16px; font-family: Georgia, "Times New Roman"; font-size-adjust: 0.5; }

:

Что такое размер шрифта?

Обновлено: 01.02.2021, Computer Hope

Размер шрифта или Размер текста — это размер символов, отображаемых на экране или напечатанных на странице.

Как измеряется размер шрифта?

Размер шрифта часто составляет пунктов ( пунктов ). Очки определяют высоту надписи. В одном дюйме или 2,54 см примерно 72 (72,272) точки. Например, размер шрифта 72 будет около одного дюйма в высоту, а размер шрифта 36 — около половины дюйма.На изображении показаны примеры размеров шрифта от 6 до 84 пунктов. В вычислениях размеры шрифта также измеряются как пикселей, ( пикселей, ) и пикселей, ( пикселей, ).

Как изменить размер шрифта

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

Подсказка

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

Почему большинство шрифтов везде маленькие?

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

Размер шрифта в веб-дизайне

В веб-дизайне и CSS размер шрифта изменяется в зависимости от набора заранее определенных размеров шрифта. Некоторые из этих размеров включают xx-small, x-small, small, medium, large, x-large и xx-large. Размер шрифта также можно указать с помощью точек, пиков, дюймов, сантиметров, миллиметров, em и процентов.

Указание размера шрифта в теге HTML

Пример HTML ниже — это один из способов использования атрибута style в теге абзаца для настройки размера шрифта.

 
 Вот пример шрифта 2pt.

Указание размера шрифта в CSS

В приведенном ниже примере кода CSS любой тег h3 на странице будет иметь большой размер шрифта.

 h3 {font-size: large;}

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

Шрифт, масштабирование шрифта, точка, размер, тип, термины типографики, термины веб-дизайна

Что такое размер шрифта? Определение, размер и значение pt на самом деле

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

Интернет изобилует рекомендациями по размеру шрифта для студентов и других целевых аудиторий.Например, некоторые университеты по-прежнему предписывают, какой шрифт (Times New Roman) и кегль (12 пт) использовать для диссертации, что не обязательно способствует разборчивости диссертации. Многие люди не уверены в размерах шрифтов. И это вполне понятно, учитывая отсутствие лаконичных и понятных рекомендаций по этому поводу. Пора пролить свет на этот вопрос.

Типографские единицы

При работе со шрифтом мы используем не метрическую систему измерения, а типографские единицы.Итак, когда мы говорим о размере шрифта, мы используем не метры и миллиметры, а наименьшую типографскую единицу, , точку , установленную на заре печати и сохранившуюся до наших дней. На протяжении многих лет и столетий применялись разные единицы измерения: точка Дидо, модифицированная версия, основанная на точке Фурнье, долгое время была стандартом в мире типографики. На 0,375 мм это было немного больше, чем сегодняшняя точка PostScript или DTP, которая составляет 0,353 мм .Поэтому, если вы вводите размер шрифта 10 пунктов в Microsoft Word или Adobe InDesign, вы определяете, что ваш шрифт будет иметь размер 3,53 мм. По крайней мере, теоретически.

Что такое размер шрифта?

Давайте сначала определим термин «размер шрифта». Строго говоря, этот термин вводит в заблуждение, поскольку мы не определяем размер шрифта при установке значения точки в InDesign, Word или других приложениях, а указываем высоту основного текста. При ручном наборе высота корпуса определяется высотой грифеля или сорта металла, на котором отлита фактическая поверхность шрифта, печатная поверхность шрифта.Он окружен пустыми или пустыми частями формы буквы, так называемыми счетчиками.

Металлический сорт времен ручного набора

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

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

Шрифт PT Sans установлен в InDesign с размером 12 пунктов; серый прямоугольник за шрифтом имеет высоту 12 пунктов, что равняется 4,233 мм и соответствует высоте корпуса.

Различные результаты измерений

Теперь можно предположить, что вам просто нужно убрать 15 процентов счетчика, то есть пустые или пустые части формы буквы, для каждого шрифта.Таким образом, при вводе 12 pt минус 15 процентов каждый шрифт будет иметь измеряемую высоту 10,2 pt. Но это не тот случай, как вы, наверное, заметили: два разных шрифта, установленных с одинаковым размером точки, могут выглядеть одинаково по размеру или выглядеть удивительно разными. Помимо оптического размера, который также важен, использование высоты тела является решающим для действительно измеримого конечного размера.

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

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

Гарнитуры в этом отношении существенно различаются. Иногда они даже выходят за пределы, установленные высотой тела, как в случае со шрифтом Scrubble.

Различный внешний вид

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

Буква имеет разные анатомические особенности. Например, «p» проходит ниже базовой линии, «a» остается посередине, «b» поднимается над средней линией, «E» располагается посередине и вверху, «O» поднимается вверх. еще немного и подчеркнутые столицы выигрывают соревнование по высоте.Это проиллюстрировано на рисунке ниже:

Анатомия шрифта

Помимо формы, ширины линии и ширины букв, именно x высота имеет решающее значение для оптического размера. Высота по оси x — это высота строчных букв в гарнитуре, например «m», «a» или «z». Эта высота отличается от высоты крышки, то есть букв «M», «A» или «Z». Часто буквы имеют соотношение размеров в соответствии с золотым сечением с коэффициентом 1,6, что означает, что «M» в 1,6 раза больше, чем «m».

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

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

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

Измерение размера шрифта

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

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

Высота в л.с.

Высота в л.с. является стандартной величиной; он измеряет высоту от верхнего края буквы «h», «b», «d» или «l» до нижнего края «p» или «q». Для этого на большинстве типометров нанесены прямоугольники с печатью. Все, что вам нужно сделать, это найти прямоугольник, который точно соответствует буквам «h» и «p», и вы знаете размер шрифта. Если бы только не было вопроса об использовании другой высоты тела, описанной выше…

Типометр, используемый для измерения размеров шрифта

Высота крышки

В качестве альтернативы, некоторые дизайнеры работают с высотой крышки, которая измеряет только высоту заглавной буквы без чашек , например, буквы «H» или «M».Но их тоже сложно измерить, особенно в случае курсивных и рукописных шрифтов. Конечно, высота крышки не совпадает с размером пункта, который вы вводите в InDesign и других приложениях. Здесь необходимо указать рост. Таким образом, вы можете рисовать на собственном опыте или знать, где искать, чтобы рассчитать размер шрифта или высоту текста по высоте кепки.

Какой размер шрифта для какой цели?

Учитывая описанную выше ситуацию, вряд ли возможно дать надежные рекомендации по размеру шрифта.Размер легко читаемого шрифта для более длинного основного текста, который используется в журналах и книгах, обычно составляет от 8 до 12 пунктов. Чтобы сузить круг вопросов, вы должны знать, какой шрифт используется для надежного утверждения. То же самое касается визитных карточек или фирменных бланков, для которых одинаково хорошо подходит размер шрифта от 8 до 12 пунктов. Подписи, информация об авторских правах, сноски и аналогичные аннотации могут по-прежнему быть читаемыми в 7 pt. Но это сильно зависит от используемого шрифта и других деталей, таких как длина строки, количество текста или фон.Шрифты размером 6 пунктов обычно требуют от читателя хороших очков или используются для мелкого шрифта в контрактах, которые в любом случае никто не хочет читать.

Вывод: мы знаем, что ничего не знаем.

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

font-size · WebPlatform Docs

Сводка

font-size устанавливает размер шрифта текста внутри элемента, к которому он применяется, и его потомков.Вы можете изменить размер текста, используя абсолютные измерения или измерения относительно родительского или корневого элемента затронутого элемента. Обзор CSS Text Styling Fundamentals.

Обзорная таблица

Начальное значение
средний
Относится к
Все элементы
Унаследовано
Да
Медиа
визуал
Расчетное значение
, как указано, но с относительной длиной, преобразованной в абсолютные значения пикселей.
Анимационный
Да
Свойство объектной модели CSS
шрифт Размер

Синтаксис

  • font-size: absolute ключевые слова
  • font-size: наследовать
  • font-size: length
  • font-size: процент
  • font-size: относительные ключевые слова

Значения

абсолютные ключевые слова
Набор ключевых слов, указывающих предопределенные размеры шрифта, масштабируемые в соответствии с настройками шрифтов или значениями по умолчанию для каждого браузера.Возможные значения от наименьшего до наибольшего: xx-small , x-small , small , medium , large , x-large и xx-large .
относительных ключевых слов
Набор ключевых слов, интерпретируемых относительно размера шрифта родительского элемента — либо меньше , либо больше .
длина
Абсолютное значение единицы: допустимы любые стандартные единицы длины css.Отрицательная длина запрещена.
процентов
Процентное значение указывает абсолютный размер шрифта относительно размера шрифта родительского элемента .
наследовать
Ключевое слово inherit заставляет элемент перенимать размер шрифта своего родительского элемента.

Примеры

Подборка примеров, демонстрирующих типичное использование свойства font-size.

  
 Пример первый: мы ♥ Документы WebPlatform! 


 Пример второй: Lorem ipsum dolor sit amet, conctetur adipisicing elit.Officiis, eos, dicta nihil aliquid quia dolores labore nesciunt unconctetur blanditiis ex eius consquatur qui incidunt voluptatem Inventore fugit quos amet! 


 Пример третий: Eius, earum unde eum distinctio ex accusamus rem eligendi optio mollitia deleniti? Iure, accusamus, fuga ipsa quas doloremque enim velit sed est earum pariatur ab optio quia molestiae repllendus non. 

  
  .example-one {
    размер шрифта: 1.2em;
}

.example-two {
    размер шрифта: маленький;
}

.example-three {
    размер шрифта: 28 пикселей;
}

Посмотреть живой пример

Переопределение типичного размера шрифта по умолчанию для браузера 16px среднего значения как 10px , с последующим изменением размера текста, который следует за ним, пропорционально этому.

  html {размер шрифта: 62,5%; }


.example-one {размер шрифта: 3.6rem}
.example-two {размер-шрифта: 2.4rem}
.example-three {размер шрифта: 1.4rem}

Посмотреть живой пример

Использование 

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

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

Хотя исходный средний размер широко применяется, браузеры применяют таблицу стилей по умолчанию, которая изменяет ее для различных семантических элементов, например, увеличивая размер заголовков. Браузеры также автоматически изменяют размер шрифтов при масштабировании страницы, переходя по значениям, которые могут не точно соответствовать коэффициенту масштабирования.Если не отключено с помощью text-size-adjust , шрифты также изменяют размер при переключении между книжной и альбомной ориентацией в мобильных браузерах. Для обзора проблемы см. Мобильное окно просмотра и ориентация.

Значение font-size также влияет на значение line-height при использовании значений по умолчанию или относительных измерений.

Наряду со многими другими свойствами CSS, размер шрифта также может применяться непосредственно как атрибут SVG:

Связанные спецификации

Модуль шрифтов CSS, уровень 3
Осадка рабочий
Модуль значений и единиц CSS, уровень 3
Кандидат в рекомендации
Каскадные таблицы стилей, уровень 2, редакция 1 (CSS 2.1) Спецификация
Рекомендация W3C

См. Также

Статьи по теме

CSS Шрифт
Шрифты
Текст

Другие статьи

Внешние ресурсы

веб-типографики | Размер шрифта

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

Измерение фиксированной высоты

  • балла (пт)
  • picas (шт)
  • дюймы (дюймы)
  • сантиметра (см)
  • миллиметры (мм)

Два других измерения фиксированной высоты доступны только для полотна:

  • Высота по оси X (пример) На основе высоты строчного символа x [рис.2].
  • Пикселей (пикселей) В зависимости от разрешения экрана.

Использование фиксированной высоты в Интернете не рекомендуется, поскольку Интернет обычно просматривается на экране, а разные экраны имеют разное разрешение. Когда вы указываете 14-точечный шрифт, он может отображаться намного больше или меньше, чем вы ожидаете, на разных экранах. Чаще всего это замечается при переключении между компьютерами Windows и Macintosh: шрифт обычно отображается на Mac почти на 25% меньше.

Таким образом, лучший способ установить размер шрифта в Интернете — использовать относительное измерение шрифта.

Относительный размер шрифта

  • Ems (em) На основе размера шрифта по умолчанию в браузере средства просмотра.
  • Проценты (%) Как ems, на основе настроек браузера по умолчанию и вычисленных относительно окружающего текста.
    1 em = 16 пикселей (размер шрифта по умолчанию в большинстве браузеров) *

Думайте в пикселях, используйте Ems для измерения.
Размеры шрифтов наследуются в DOM дочерними элементами от своих родительских элементов. Это может затруднить расчет размера вложенных элементов. Хорошая идея — сначала измерить все в пикселях, а затем преобразовать измерения в EMS.

Масштабирование

Хорошее практическое правило — выбирать удобный размер шрифта: от 14 пикселей и выше. Используйте шкалы [рис.3], чтобы различать заголовки, основной текст, нижние колонтитулы, примечания на полях и другую текстовую информацию.

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

* Подробнее о Em

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

Вот формула для преобразования пикселей в em:

    требуемое значение пикселя ÷ родительский размер шрифта = значение em

Например, размер шрифта h2 составляет 18 пикселей.Чтобы преобразовать его в em, 18 ÷ 16 = 1,125em (размер шрифта тела по умолчанию — 16 пикселей).

    1 Сравнение в дюймах, точках и пиктограммах
    2 Определение ex
    3 Шкала
    Пример классической шкалы: Пример шкалы на основе последовательности Фибоначчи:

    Хорошим решением для обеспечения единообразия размера шрифта во всех браузерах является объединение процентов и em.Установите размер основного шрифта по умолчанию в процентах, а остальное — в em.

    body {font-size: 100%;}
    h2 {font-size: 2.5em;}
    h3 {font-size: 1.875em;}
    p {font-size: 0.875em;}

Руководство по размеру шрифта

— преобразование точек в дюймы

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

Большинство преподавателей давали письменные задания со следующими инструкциями: 5 страниц, двойной интервал, 12 пунктов. шрифт — Times New Roman (и если они не давали рекомендаций, я знаю, что вы увеличили размер шрифта до 14). Размер точек отлично подходит для обеспечения единообразия документов в школе, на вашем веб-сайте или в вашем бизнесе, но преобразование точек в дюймы или миллиметры — это то, что многие владельцы малого бизнеса и сотрудники должны ежедневно пытаться вычислять, чтобы соответствовать отраслевым нормам. .Мы часто получаем клиентов, разрабатывающих этикетки с помощью нашего инструмента для создания этикеток, у которых есть строгие правила, которым они должны соответствовать. К сожалению, выбор размера шрифта — это равные части искусства и науки, и это может немного сбить с толку.

Размер шрифта с фиксированной высотой

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

Итак, какой размер пункта составляет 3/8 дюйма, спросите вы?

Ну … это зависит от того.

Вот некоторые факты (и полезный наглядный материал
от Школы медиа и дизайна Университета Джеймса Мэдисона) об измерении размера точки и дюймах. Но есть некоторые непредвиденные обстоятельства, которые я объясню позже.


1 дюйм примерно равен 72 точкам

  • ШРИФТ ИМЕЕТ 3 ЭЛЕМЕНТА:
  • X-HEIGHT — высота строчного символа «x».
  • ВСТРЕЧИ — строки, продолжающиеся над основанием символа «x».
  • ДЕСЦЕНДЕРЫ — линии, продолжающиеся ниже основания символа «x».
  • РАЗМЕР ТОЧКИ — включает все три элемента.

РАЗМЕР ТОЧКИ

Размер в пунктах измеряется от высоты верхнего восходящего элемента (пика) до базовой линии строчной буквы x. Затем он измеряет расстояние от самого нижнего нижнего нижнего элемента (впадины) шрифта до верхней части строчной буквы x. Стандартизированные шрифты (например,г. Arial, Times New Roman, Calibri и т. Д.), Как правило, очень строго соблюдают эти правила, поэтому это ваша самая точная ставка для преобразования очков в дюймы. Однако …

Теоретически, если выбрать 27 пт. Шрифт, независимо от шрифта, он должен быть 3/8 дюйма в высоту, используя наше соотношение 72 пункта к 1 дюйму. К сожалению, многие шрифты не стандартизированы (например, рукописные, напуганные, вычурные шрифты), поэтому эти соотношения могут не применяться. Но даже если мы будем придерживаться стандартизированных шрифтов, могут возникнуть некоторые проблемы.Если взять наш предыдущий пример, который использует 3/8 дюйма в качестве минимального требования к высоте шрифта , , вам все равно придется использовать шрифт большего размера, чем 27 pt, если вы используете строчные буквы . В зависимости от того, насколько буквы вроде «d» поднимаются от высоты x, «d» вполне может составлять 3/8 дюйма в 27 точках, в то время как простые «c» или «x» будут намного меньше. потому что у них нет зажимов или зажимов.

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

Лучшее решение для нормативов высоты шрифта при разработке этикеток и упаковки

Лучшее решение для обеспечения соответствия минимальным требованиям к высоте шрифта при использовании нашего инструмента настраиваемых этикеток или при попытке получить точный размер текста в дюймах — это писать заглавными буквами стандартным шрифтом (например, Arial, а не FontDiner Swanky) и поставьте себе пару дополнительных очков — на всякий случай, если это возможно. Всегда следите за тем, чтобы у вас было несколько дополнительных очков, если это возможно, на случай, если выбранный вами шрифт не соответствует стандарту на процент.Если у вас есть какие-либо вопросы о выборе размера шрифта для пользовательских этикеток, сообщите нам об этом по телефону 1-800-750-7764.

Как размер мобильного шрифта влияет на SEO?

  1. WooRank
  2. Руководства по SEO
  3. Как размер мобильного шрифта влияет на SEO?

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

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

Каков идеальный размер мобильного шрифта?

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

Идеальный размер шрифта base для экранов мобильных устройств составляет 16 пикселей. Все, что меньше, пользователям придется щипать и увеличивать, чтобы прочитать. В CSS вашего сайта рекомендуется установить атрибут font-size в em, чтобы упростить масштабирование.

Использование ems полезно, потому что оно изменяет текст относительно размера, установленного в документе.

Как сделать текст читаемым на всех экранах

1. Изучите мобильную тему или шаблон

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

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

Большинство тем предоставляют живую демонстрацию перед покупкой, так что вы можете протестировать тему на своем рабочем столе и нажать «Проверить элемент», чтобы просмотреть макет шаблона сайта на основе нескольких размеров экрана:

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

2. Реализация адаптивного дизайна для мобильных устройств

Вы можете использовать CSS для управления размером шрифта вашего сайта на разных устройствах. Процедура очень проста:

Размер шрифта может использовать разные единицы измерения, чтобы объявить, насколько большим должен быть ваш текст:

  • пикселей (px)
  • баллов (pt)
  • EMs (em)
  • процентов (%)

Общая рекомендация — использовать браузер по умолчанию 1.2em, 12pt, 16px или p {font-size: 120%;}.

Вот список преобразований для каждого показателя:

пикселей EMs процентов Очки
6 пикселей 0,375 em 37,5% 5pt
7 пикселей 0,438em 43,8% 5pt
8 пикселей 0,500 эм 50,0% 6pt
9 пикселей 0.563em 56,3% 7pt
10 пикселей 0,625em 62,5% 8pt
11 пикселей 0,688em 68,8% 8pt
12 пикселей 0,750em 75,0% 9 пунктов
13 пикселей 0,813em 81,3% 10 точек
14 пикселей 0.875em 87,5% 11 п.
15 пикселей 0.938em 93,8% 11 п.
16 пикселей 1.000em 100,0% 12 точек
17px 1.063em 106,3% 13 точек
18px 1,125em 112,5% 14 п.
19 пикселей 1.188em 118,8% 14 п.
20 пикселей 1.250em 125,0% 15 точек
21 пикс. 1.313em 131,3% 16pt
22 пикс. 1.375em 137,5% 17pt
23 пикс. 1.438em 143,8% 17pt
24 пикс. 1.500em 150,0% 18pt

Выберите разумный размер шрифта для каждого типа: заголовок, заголовки, абзацы. 16 пикселей — это настройка CSS по умолчанию. Большинство тем, которые вы установили для своего сайта, будут иметь дополнительные настройки тем, чтобы упростить вам изменение размера в зависимости от вашего сайта и потребностей посетителей.

Вот пример параметров темы Muffin Builder:

Не используйте слишком большой размер [размер 20 или более].Оставьте это для заголовков и заголовков. Большой размер шрифта означает, что пользователям придется дольше прокручивать страницу, что неудобно для пользователя.

Практическое правило:

Классическая теория читабельности предполагает, что идеальный столбец должен содержать от 70 до 80 символов в строке (примерно от 8 до 10 слов на английском языке). Таким образом, каждый раз, когда ширина текстового блока превышает 10 слов, подумайте о добавлении точки останова.

Отрегулируйте этот размер шрифта в зависимости от особенностей используемого шрифта.

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

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

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

Для ссылок вам нужно будет оставить еще больше места между строками текста для готовности экрана касания.

В трех приведенных выше примерах абзацев, предоставленных css-tricks, высота строки установлена ​​на 150%, 200% и 250% или 30 пикселей, 40 пикселей и 50 пикселей.

Google рекомендует использовать по крайней мере высоту строки браузера по умолчанию, равную 1,2, что означает, что промежутки между строками текста как минимум в 1,2 раза превышают размер самого текста.

4. Медиа-запросы для разных размеров экрана

Размер текста вашего сайта определяется медиа-запросами, объявленными для экранов разного размера.Вы можете настроить каждый размер шрифта в зависимости от размера экрана в вашем файле CSS. Пример:

  html {font-size: 100%;}

@media (min-width: 60em) {html {font-size: 100%}}

Есть несколько различных элементов, по которым вы можете запросить: min-width , max-width , min-height и max-height .

Вот несколько правил медиа-запросов, основанных на рекомендации Google:

  • Когда размер браузера составляет от 0 пикселей, до , 640 пикселей, пикселей, макс-640 пикселей.css применяется.

  • Когда ширина браузера составляет от 500 пикселей, до , 600 пикселей, пикселей, применяются стили в пределах @media .

  • Если размер браузера 640 пикселей или больше , применяется min-640px.css .

  • Когда ширина браузера больше высоты , применяется landscape.css .

  • Когда высота браузера больше ширины , книжная.css применяется.

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

5. Создавайте разные версии своего сайта для разных устройств

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

Наиболее распространенный способ сделать это — использовать так называемые «m-точки». «M-точка» — это совершенно новый сайт, предназначенный для мобильных устройств, а затем размещенный на субдомене, обычно «m.example.com». Отсюда и термин «m-точка».

Затем вы перенаправляете мобильных пользователей на мобильную версию своего сайта.

Дополнительные ресурсы о мобильности

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

Размер шрифта бесполезен; давай исправим @tonsky.me

Переводы: Китайский Японский Русский

Что произойдет, если вы установите "font_size": 32 в вашем любимом редакторе? Я бы все равно сказал вам, но я рад, что вы спросили.

Попробуем угадать.Я использую Sublime Text 4 в macOS:

Если измерить сами буквы, то числа 32 нигде не видно:

32 не является ни шириной, ни высотой буквы, ни высотой заглавной буквы, высотой буквы x, высотой верхнего и нижнего нижнего края. Что происходит?

Во-первых, этот размер не в пикселях, а в точках. Пункт — это физическая единица измерения, равная 1⁄72 дюйма (0,353 мм), заимствованная из типографики.

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

На практике так никто не делает. Вместо этого macOS всегда использует 72 PPI для преобразования точек в пиксели. Если вы установите macOS на 32-дюймовый и 24-дюймовый монитор, оба с разрешением 1080p, вы получите одинаковый размер в пикселях, но не физический, что подрывает исходную идею.

Почему число 72? Оказывается, у оригинальных Mac были дисплеи с ровно 72 PPI. Если вы просматриваете там текст, его физический размер на экране будет соответствовать его физическому размеру при печати.Хороший! Конечно, с тех пор дисплеи Mac улучшили свой PPI, но конвенция остается.

В духе настоящего сотрудничества Windows использует 96 пикселей на дюйм вместо 72. Почему не 72? Не потому, что у них были лучшие дисплеи (их не было), а потому, что 72 давало вам слишком мало пикселей для отображения разборчивого текста. Поэтому они подумали, почему бы не сделать все ⅓ больше?

И они действительно это сделали. Это справедливо и по сей день: текст размером 16 пунктов в Windows на ⅓ больше, чем текст размером 16 пунктов в macOS. Веселье!

Тот же шрифт, тот же размер pt, без относительного масштабирования

стр.S. VS Code, кажется, принимает значение editor.fontSize непосредственно в пикселях. Это начало!

Таким образом, пользователь, запрашивающий шрифт 32 pt, на самом деле запрашивает 32 пикселя в macOS и 43 пикселя в Windows. Но этих цифр пока не видно.

Это потому, что font-size устанавливает так называемый размер «em».

В традиционном металлическом шрифте размер em — это высота символа.

Почему рост был назван «em size»? Потому что буква «m» по совпадению была квадратом, а ширина «m» == высота символа == размер em.Простой!

Источник изображения

В цифровом же виде «em-квадрат» (и я цитирую Википедию):

сетка произвольного разрешения, которая используется как пространство дизайна цифрового шрифта.

Это означает, что если я открою код Fira и нарисую квадрат, он вообще ни с чем не согласуется :

Короче говоря, этот квадрат равен , что вы фактически контролируете при установке размера шрифта. Этот квадрат будет 32/43 пикселей в высоту / ширину, если вы установите размер шрифта 32 pt.Жаль, что он невидимый, и ни один элемент шрифта не соответствует ему.

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

Это означает, что разные шрифты с одинаковым размером могут иметь совершенно разный воспринимаемый размер. Например, если я выравниваю em-квадраты (== устанавливаю одинаковый размер шрифта) из двух разных шрифтов, я получаю очень разную высоту «m»:

Другой пример. Все эти шрифты имеют одинаковый размер 22 pt:

У меня проблемы с размером шрифта:

  • Непредсказуемо: вы не можете угадать, что получите.16 pt означает, сколько именно пикселей?
  • Непрактично: вы не можете получить то, что хотите. Хотите, чтобы буквы были высотой 13 пикселей? Не могу.
  • Не стабильно. Переключитесь на другой шрифт, оставьте тот же размер, увеличьте / уменьшите буквы.
  • зависит от ОС. Получите другой рендеринг при открытии документа в другой ОС. Невозможно обмениваться конфигурацией редактора между macOS и Windows.
  • Укажите высоту крышки, а не размер квадрата.
  • Укажите в пикселях.

Заглавные буквы — это то, что человеческий глаз воспринимает как границу текстового блока. Таким образом, имеет смысл контролировать размер , что , а не какой-то другой произвольно выбранный показатель:

Вот несколько шрифтов с одинаковым размером шрифта:

А вот все те же шрифты, но с измененным размером в соответствии с высотой шапки:

На мой взгляд, последнее дает гораздо лучшую согласованность. Посмотрите, например, на Cascadia и Consolas. Или Взломать и IBM Plex Mono. Или Ubuntu Mono и Victor Mono (два последних).

А пока давайте поправим высоту строки? Не волнуйся, я быстро.

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

Почему? Проблема с высотой строки в том, что она вычисляется по тем же границам абстрактных символов:

Это условное обозначение имеет смысл для шрифта «металл». В конце концов, у вас не может быть строки короче тела письма:

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

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

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

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

Что делать? Разумный способ — установить высоту строки непосредственно в пикселях, игнорируя любые метрики шрифта. Может быть, и в процентах от высоты кепки, но определенно не в размере шрифта или «автоматической» высоте строки!

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

Вместо этого следует использовать расстояние между базовыми линиями:

Кроме того, я не вижу причин соблюдать так называемую «высоту строки по умолчанию».По сути, это личные предпочтения дизайнера шрифтов, которые навязываются каждому пользователю шрифта в любых условиях просмотра. Это может быть любое количество (а часто бывает)! Но 200% высоты крышки всегда составляет 200%.

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

И это то, что я хочу: сменить шрифт, но все строки останутся там, где были:

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

Я пытаюсь достичь с помощью этих предложений очень простого варианта использования:

  1. Я настраиваю свой редактор на предпочтительный размер шрифта и высоту строки один раз .
  2. Могу попробовать разные шрифты.
  3. Мне не нужно каждый раз заново настраивать размер шрифта и высоту строки.

Вот так (высота крышки и высота линии точно совпадают):

Моя мечта UI:

Второй вариант использования тоже довольно прост: мне нужен предсказуемый и надежный способ центрировать текст на кнопке.

Это всегда была проблема в Интернете, но недавно macOS подхватила и эту болезнь:

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

Добираемся до нижней части высоты строки в Figma. Figma приключения в поиске компромисса между тем, чего хотят люди, и тем, что на самом деле делает Интернет.

Deep dive CSS: параметры шрифта, высота строки и выравнивание по вертикали.Отличная статья, объясняющая, как именно работают шрифты и алгоритм высоты строки CSS. Также: видите ли, я не единственный человек с ужасным цветом фона на сайте 🙂

Опрокидывающийся. Библиотека JS, которая позволяет вам делать именно то, что я описал в этой статье, сегодня в пределах Интернета.

Leading-Trim: будущее цифрового набора. Как подрезка (~ размер крышки) упростила бы жизнь всем.

Привет!

Я Никита.Здесь я пишу о программировании и дизайне пользовательского интерфейса. Подписаться

Я также создаю вещи с открытым исходным кодом: Fira Code, AnyBar, DataScript и Rum. Если вам нравится то, что я делаю, и вы хотите получить ранний доступ к моим статьям (наряду с другими преимуществами), вы должны поддержать меня на Patreon.

No related posts.