Размеры шрифта в Word, OpenOffice и LibreOffice

Размер шрифта измеряется в пунктах (раньше использовался термин кегль, но сейчас этот термин почти полностью вышел из употребления). 72 пункта составляют один английский дюйм (примерно 2,54 см). Высота букв шрифта в 12 пунктов будет равна 1/6 дюйма, или 4,233 мм. Шрифт также можно измерять в пиках: 1 пика равна 12 пунктам. Часто меня спрашивают: почему я все время говорю, что используется английский дюйм, как будто может быть другой. На самом деле существует еще и французский дюйм, вышедший из практического применения более 200 лет тому назад, но который по-прежнему применяется во многих полиграфических организациях для определения размеров шрифтов (пункт Дидо, цицеро и т. д.). Многие пользователи считают, что разрешены только те размеры шрифта, которые предлагаются в списке размеров шрифта. На самом деле в этом списке находятся те размеры, которые имеют общепризнанные названия в полиграфии, и то не все, а начиная с 8 пунктов. Таблица 1. Общепризнанные названия единиц измерения шрифтов Название Величина в пунктах Система Дидо, мм Англо-американская шрифтовая система, мм Бриллиант или цицеро 3 1,127819549 1,058334 Диамант или полупетит 4 1,503759398 1,411112 Перл 5 1,879699248 1,76389 Агат 5,5 2,067669173 1,940279 Нонпарель 6 2,255639 2,116668 Петит 8 3,007519 2,822224 Боргес 9 3,383458647 3,175002 Корпус 10 3,759398 3,52778 Малая пика 11 4,135338346 3,880558 Миттель 14 5,263157895 4,938892 Терция или треть квадрата 16 6,015037594 5,644448 Парагон 18 6,766917293 6,350004 Текст или Двойной корпус 20 7,518796992 7,05556 Двойная малая пика 22 8,270676692 7,761116 Двойное цицеро или квадрата 24 9,022556391 8,466672 Малый канон 32 12,03007519 11,288896 На самом деле размер шрифта можно определить в диапазоне от 1 до 1638 пунктов. Для выбора пользовательского размера выделите текст, к которому нужно применить размер, в поле предлагаемого размера шрифта введите с клавиатуры нужный размер, нажмите на клавишу Enter. Если текст не был предварительно выделен, то новый размер шрифта будет применен, начиная с точки, в которой мигает курсор в момент изменения размера шрифта. Точность можно выбрать с точностью до 0,5 пункта. В качестве десятичного знака в России используется только запятая. При вводе других дробных значений размера шрифта выдается сообщение об ошибке (например, при выборе размера «14,25» выводится сообщение об ошибке «Указано неверное число»). В приложении OpenOffice.org Writer выбор размеров шрифтов более удобный: там градация размеров шрифтов более сложная, но немного запутанная для начинающих. В диапазоне от 0 до 0,5 пункта разрешены нечетные дробные значения, то есть, 0,1, 0,3, 0,5. В диапазоне от 0,5 до ближайшего целого пункта разрешены четные дробные значения, то есть, 0,6, 0,8. Никаких сообщений об ошибках при определении размеров шрифта в этой программе нет: если пользователь ошибся, то дробное значение просто автоматически выбирается как ближайшее меньшее значение к разрешенному дробному значению.

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

Beget Сайт компьютерной графики, создания электронных книг: http://obrazovanie-saratov. ru/

Учебник CSS 3. Статья «Единицы измерения CSS, размер шрифта»

Цветовое оформление в CSS

Форматирование текста в CSS

МЕНЮ

Данная статья учебника посвящена вопросам, связанным с управлением размера шрифта в CSS, в том числе существующие ключевые слова. Рассмотрено применение всех единиц измерения современного стандарта, а именно: дюймы, сантиметры, миллиметры и четверь миллиметра, пики, пункты, пиксели, процентные значения, единица измерения еm, rem, еx, ch и масштабируемые величины относительно экрана — vw, vh, vmin и vmax.

---

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

---

В CSS за установку размера шрифта отвечает CSS свойство font-size, которое имеет поддержку всеми основными браузерами.
Свойство font-size записывается следующим образом:

Селектор {
font-size: значение с единицей измерения величины;
{

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

p {
font-size: 10px; /* установить размер шрифта 10 пикселей для всех абзацев */
{

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

Абсолютные величины

Физические единицы:

• Дюймы (in), 1in = 2.54cm (сантиметры) = 96px (пиксели).
• Сантиметры (cm), 1cm = 96px/2.54.
• Миллиметры (mm), 1mm = 1/10 от 1cm.
• Четверть миллиметра, (q) 1q = 1/40 от 1cm.
• Пики (pc), 1pc = 1/6 от 1 дюйма, 1pc = 12pt = 1/6 дюйма.
• Пункты (pt), 1pt = 1/72 дюйма.

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

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

Визуальные единицы:

Пиксели (px), 1px = 1/96 от 1in (дюйма).

body {
font-size: 16px; /* установить размер шрифта 16px для всего видимого содержимого */
}

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

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

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

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

Процентные значения.

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

html {
font-size: 16px;
}

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

Давайте рассмотрим пример. Допустим, у всех параграфов (элемент <p>) установлен базовый размер шрифта 16px и мы хотим отобразить в одном параграфе определённую информацию шрифтом в два раза больше, а в другом в два раза меньше. Для этого мы создадим для них отдельные блоки описаний (стили):

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования процентных значений</title>
<style>
.halfFontSize {
font-size: 50%; 
}
.doubleFontSize {
font-size: 200%; 
}
</style>
</head>
	<body>
		<p>Обычный параграф на странице</p>
		<p>Параграф, к которому применен стиль с размером шрифта 50% от родительского элемента.</p>
		<p>Параграф, к которому применен стиль с размером шрифта 200% от родительского элемента. </p>
	</body>
</html> 

Результат нашего примера:

Рис.51 Пример использования процентных значений.

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

Первый параграф: 16px * 100% = 16px
Второй параграф: 16px * 50% = 8px
Третий параграф: 16px * 200% = 32px

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

<!DOCTYPE html>
<html>
<head>
	<title>Пример наследования процентных значений</title>
<style>
div {
font-size: 12px; /* устанавливаем базовый размер шрифта для всех блоков <div> */
}
.doubleFontSize { /* устанавливаем размер шрифта в два раза больше чем родительский */
font-size: 200%; 
}
.doubleFontSize > div { /* использовали селектор дочерних элементов, который устанавливает, что все вложенные элементы <div> внутри элемента <div> с классом doubleFontSize получат размер шрифта в два раза больше чем родительский */
font-size: 200%; 
}
</style>
</head>
	<body>
		<div>Родительский div 12px
			<div>Блок, к которому применен стиль с размером шрифта 200% от родительского элемента. 
				<div>Блок, который наследует значение</div>
			</div>
		</div>
	</body>
</html> 

Результат нашего примера:

Рис.52 Пример наследования процентных значений.

В данном примере для вложенного блока <div> с классом doubleFontSize мы установили размер шрифта в два раза больше чем родительский. В этом случае родительским выступает блок <div>, для которого мы установили размер шрифта 12px.

Расчёт размера шрифта для вложенного блока будет выглядеть следующим образом:

12px * 200% = 24px

Если бы мы не изменили значение размера шрифта для блока <div>, то расчёт бы происходил исходя из базового шрифта:

16px(базовый размер шрифта) * 200% = 32px

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

Надо понять, что для этих вложенных элементов размер шрифта в 100% теперь равен 24px, а значение в 200% равно 48px, т.к. расчёт происходит исходя из размера шрифта родительского элемента:

размер шрифта родительского элемента * 200% = 48px

Единица измерения еm.

Em является стандартной единицей измерения, используемой в типографской системе, она соответствует размеру заглавной буквы «M» шрифтом Цицеро. Но это, что касается типографской системы, давайте рассмотрим, как она применяется на веб-страницах и чему соответствует.

---

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

---

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

Например:

базовый размер текста = 1em = 100%
базовый размер текста * 2 = 2em = 200%
базовый размер текста * 0.5 = 0.5em = 50%

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

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования значений em</title>
</head>
<body>
	<p style = "font-size:.8em;">font-size:0.8em</p>
	<p style = "font-size:80%;">font-size:80%</p>
	<p style = "font-size:1.5em;">font-size:1.5em</p>
	<p style = "font-size:150%;">font-size:150%</p>
	<p style = "font-size:1.8em;">font-size:1.8em</p>
	<p style = "font-size:180%;">font-size:180%</p>
</body>
</html> 

Результат нашего примера:

Рис.53 Пример использования значений em.

Многие создатели сайтов выбирают именно эти единицы измерения при создании своих таблиц стилей.

Единица измерения rеm.

Стандарт CSS 3 подарил нам новую относительную единицу измерения rem, что является сокращением от Root em – значение основано на размере текста корневого (root) элемента.

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

<!DOCTYPE html>
<html>
<head>
	<title>Пример наследования значений em</title>
<style>
div {
font-size: 1.25em; 
}
</style>
</head>
	<body>
		<div>Блок 1
			<div>Блок 2
				<div>Блок 3
					<div>Блок 4
						<div>Блок 5
							<div>Блок 6
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html> 

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

Если у Вас где-то размер не соответствует Вашим ожиданиям, ищите проблему в наследовании 🙂

Рис.54 Пример наследования значений em.

Оставим единицу измерения em и рассмотрим этот же пример с использованием единицы rem.

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования значений rem</title>
<style>
div {
font-size: 1.25rem; 
}
</style>
</head>
	<body>
		<div>Блок 1
			<div>Блок 2
				<div>Блок 3
					<div>Блок 4
						<div>Блок 5
							<div>Блок 6
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html> 

В данном примере, мы вложили блоки последовательно один в другой и установили значение размера шрифта равным 1. 25rem. В результате, как Вы можете заметить, размер каждого блока одинаков, это происходит по той причине, что размер текста рассчитывается исходя из размера текста корневого (root) элемента, а не родительского элемента.

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

Рис.55 Пример использования значений rem.

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

Единица измерения еx.

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

В большинстве шрифтов высота прописной «x» соответствует 0.5em. Если браузер не может определить размер прописной «x», то в этом случае будет установлено значение равное 0.5em.

Единица измерения ch.

Единица измерения ch зависит от того шрифта, который вы применяете, так как его размер рассчитывается исходя из ширины символа ‘0’ (ноль, символ Юникода U+0030). Данная единица измерения имеет очень редкое применение, например, если вы хотите создать блок моноширинным шрифтом (имеет символы одной ширины) с заданным количеством символов, которые он может вместить:

.width50 {
width: 50ch; /* ширина блока равняется 50 символов (необходим моноширинный шрифт) */
}

Если браузер не может определить размер «0», то в этом случае будет установлено значение равное 0.5em.

Масштабируемые величины относительно экрана

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

---

Область просмотра (viewport) это то место, где браузер отображает сайт минус зарезервированное пространство браузера.

---

В CSS 3 существуют 4 (четыре) различных единицы измерения величины относительно экрана — две для каждой оси и две единицы измерения, определяющие минимальное и максимальное значение:

• 1vw (viewport width) = 1% от ширины области просмотра. При уменьшении ширины окна пропорционально уменьшается тот параметр элемента, который был задан.

  Например, если ширина области просмотра 1000px, то 1vw будет соответствовать 10 (десяти) пикселям.

• 1vh (viewport height)= 1% от высоты области просмотра. При уменьшении высоты окна пропорционально уменьшается тот параметр элемента, который был задан.

  Например, если высота области просмотра 500px, то 1vh будет соответствовать 5 (пяти) пикселям.

Рассмотрим пример:

<!DOCTYPE html>
<html>
<head>
	<title>Масштабируемые единицы измерения</title>
<style>
* {
margin: 0 ; /* внешние отступы для всех сторон*/
}
.viewportHeight30 {
font-size: 5vw; /* размер шрифта*/
width: 100vw; /* ширина блока */
height: 30vh; /* высота блока */
background-color: orange; /* цвет заднего фона */
}
.viewportHeight50 {
font-size: 4vw;
width: 75vw;
height: 50vh;
background-color: yellow;
}
.viewportHeight20 {
font-size: 3vw;
width: 50vw;
height: 20vh;
background-color: red;
}
</style>
</head>
	<body>
		<div class = "viewportHeight30">font-size: 5vw; width:100vw; height:30vh;</div>
		<div class = "viewportHeight50">font-size: 4vw; width:75vw; height:50vh;</div>
		<div class = "viewportHeight20">font-size: 3vw; width:50vw; height:20vh;</div>
	</body>
</html> 

В данном примере мы установили для трёх блоков разные значения таких параметров как размер шрифта (для первого – 5vw (5% от ширины области просмотра), для второго — 4vw, для третьего — 3vw), ширину блоков (для первого – 100vw (100% от ширины области просмотра), для второго — 75vw, для третьего — 50vw) и высоту блоков (для первого – 30vh (30% от высоты области просмотра), для второго — 50vh, для третьего — 20vh).

---

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

---

Чтобы избавится от полосы прокрутки, мы установили универсальный селектор *, который выбирает все элементы и убирает внешние отступы у всех элементов. Это мы сделали по той причине, что некоторые браузеры при работе с данными единицами измерения при 100vw добавляют полосу прокрутки, чего быть не должно (этот баг возникает при overflow : auto – свойство, которое отвечает за переполнение элемента содержимым, установленное по умолчанию).

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

Результат нашего примера:

Рис.57 Масштабируемые единицы измерения.

Минимальное и максимальное значение области просмотра

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

Давайте рассмотрим, в чем заключается разница между vmin и vmax на следующем примере:

.viewportMin { . viewportMax {
width: 40vmin; width: 40vmax;
height: 40vmin; height: 40vmax;
} }

<!DOCTYPE html>
<html>
<head>
	<title>Vmin и vmax c масштабируемыми единицами измерения</title>
<style>
* {
margin: 0;
}
div {
display: inline-block; /* элементы <div> блочно-строчные (выстраиваем в линейку) */
color: white; /* цвет шрифта*/
}
.viewportMin {
width: 40vmin; /* ширина блока */
height: 40vmin; /* высота блока */
background-color: black; /* цвет заднего фона */
}
.viewportMax {
width: 40vmax; /* ширина блока */
height: 40vmax; /* высота блока */
background-color: blue; /* цвет заднего фона */
}
</style>
</head>
	<body>
		<div class = "viewportMin">viewportMin<br>w&h - 40vmin</div>
		<div class = "viewportMax">viewportMax<br>w&h - 40vmax</div>
	</body>
</html>

В нашем примере мы создали два блока, которые разместили в «линейку» (используя свойство display : inline-block), как и в прошлом примере убрали все внешние отступы свойством margin со значением 0.

Первый блок с классом viewportMin (черный на изображении) имеет значения для высоты и ширины 40vmin. Это означает, что выбирается минимальное значение между высотой и шириной окна просмотра и устанавливается 40%. В нашем случае разрешение окна браузера было 400 пикселей ширина и 700 пикселей высота. В этом случае 400 пикселей минимальное значение и браузер выбирает его. Ширина высчитывается как:

 400px (текущее минимальное значение viewport области просмотра) * 40% = 160px

Для высоты расчёт аналогичен:

 400px (текущее минимальное значение viewport) * 40% = 160px.  

В итоге мы получили «квадрат Малевича».

Что касается второго блока с классом viewportMax, то всё происходит с точностью да наоборот. Браузер определяет текущее максимальное значение viewport (область просмотра), оно у нас равно 700px на изображении и высчитывает ширину и высоту элемента:

Ширина - 700px(текущее максимальное значение viewport) * 40% = 280px. 
Высота - 700px (текущее максимальное значение viewport) * 40% = 280px.

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

Рис.58 Пример использования vmin и vmax c масштабируемыми единицами измерения.

Масштабируемые единицы измерения, надеюсь, имеют счастливое будущее, но в настоящее время не так активно используются по тем основным причинам, что:

1. Отсутствует полная поддержка данных единиц измерения некоторыми мобильными браузерами (например, Opera Mini и UC Browser for Android – полностью не поддерживают, IE Mobile – не поддерживает vmax, iOS Safari – стабильная поддержка только с 8 версии (6 версия — не поддерживала vmax, 7 версия – некорректно работала единица измерения vh).
2. Internet Explorer и Edge не имеют полную поддержку данных единиц измерения:

• IE работает только с версии 9. 0 (поддерживает значение vm, вместо vmin).
• IE 10, IE 11 не поддерживают значение vmax.
• Edge 12, 13, 14 не поддерживают значение vmax.

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

Например:

i {
font-size: small; /* устанавливает размер шрифта маленького размера для всех элементов <i> */
}

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

Значение	Описание
medium	Устанавливает размер шрифта среднего размера. Это значение по умолчанию.
small	Устанавливает размер шрифта маленького размера. Эквивалент 13px (пикселов).
x-small	Задает размер шрифта очень маленького размера. Эквивалент 10px (пикселов).
xx-small	Задает размер шрифта сверх маленького размера. Эквивалент 9px (пикселов).
smaller	Устанавливает размер шрифта меньшего размера, чем у родительского элемента.
large	Устанавливает размер шрифта большого размера. Эквивалент 18px (пикселов).
x-large	Устанавливает размер шрифта очень большого размера. Эквивалент 24px (пикселов).
xx-large	Задает размер шрифта сверх большого размера. Эквивалент 32px (пикселов).
larger	Устанавливает размер шрифта большего размера, чем у родительского элемента.

Рассмотрим пример использования ключевых слов на странице:

<!DOCTYPE html>
<html>
<head>
	<title>Ключевые слова для управления размером шрифта</title>
<style>
.medium {font-size: medium;}
.small {font-size: small;}
.x-small {font-size: x-small;}
.xx-small {font-size: xx-small;}
.smaller {font-size: smaller;}
.large {font-size: large;}
. x-large {font-size: x-large;}
.xx-large {font-size: xx-large;}
.larger {font-size: larger;}
</style>
</head>
	<body>
		<div class =  "medium">Блок с ключевым словом medium</div>
		<div class =  "small">Блок с ключевым словом small</div>
		<div class =  "x-small">Блок с ключевым словом x-small</div>
		<div class =  "xx-small">Блок с ключевым словом xx-small
			<div class =  "smaller">Блок с ключевым словом smaller</div>
		</div>
		<div class =  "large">Блок с ключевым словом large</div>
		<div class =  "x-large">Блок с ключевым словом x-large</div>
		<div class =  "xx-large">Блок с ключевым словом xx-large
			<div class =  "larger">Блок с ключевым словом larger</div>
		</div>
	</body>
</html>

В нашем случае ключевое слово smaller (одноименный класс) устанавливает шрифт на один пиксель меньше, чем у родительского элемента с классом xx-small, а ключевое слово larger устанавливает шрифт на 6 пикселей больше, чем у родительского элемента (xx-large).

Результат нашего примера:

Рис.59 Использование ключевых слов для управления размером шрифта.

---

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите следующие практические задания:

• Практическое задание № 13
  У нас имеются следующие стили, в которых элемент <body> и элементы <div>, имеют размер шрифта 150%:

  body, div { /* создаем групповой селектор */
  font-size: 150%; /* устанавливает размер шрифта 150% */
  }
  

  Сделаем следующую разметку:

  <body>Текст внутри тела документа
  	<div>Текст внутри блока
  		<div>Текст внутри вложенного блока</div>
  	</div>
  </body>
  

  Ответьте на следующие вопросы к практическому заданию:

  • Сколько в пикселях составляет размер шрифта текста, вложенного внутри тела документа — <body>.
  • Сколько в пикселях составляет размер шрифта текста, внутри блока <div>, вложенного в <body>.
  • Сколько в пикселях составляет размер шрифта текста, вложенного внутри блока <div>, вложенного в другой блок <div>.

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

• Практическое задание № 14
  У нас имеются следующие стили, в которых элемент <body> и элементы <div>, имеют размер шрифта 1.5em:

  body, div { /* создаем групповой селектор */
  font-size: 1.5em; /* устанавливаем размер шрифта 1.5em */
  }
  

  Сделаем следующую разметку:

  <body>Текст внутри тела документа
  	<div>Текст внутри блока
  		<div>Текст внутри вложенного блока</div>
  	</div>
  </body>
  

  Ответьте на следующие вопросы к практическому заданию:

  • Сколько в пикселях составляет размер шрифта текста, вложенного внутри тела документа — <body>.
  • Сколько в пикселях составляет размер шрифта текста, внутри блока <div>, вложенного в <body>.
  • Сколько в пикселях составляет размер шрифта текста, вложенного внутри блока <div>, вложенного в другой блок <div>.

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

• Практическое задание № 15
  У нас имеются следующие стили, в которых элемент <body> и элементы <div>, имеют размер шрифта 1.5rem:

  body, div { /* создаем групповой селектор */
  font-size: 1.5rem; /* устанавливаем размер шрифта 1.5rem */
  }
  

  Сделаем следующую разметку:

  <body>Текст внутри тела документа
  	<div>Текст внутри блока
  		<div>Текст внутри вложенного блока</div>
  	</div>
  </body>
  

  Ответьте на следующие вопросы к практическому заданию:

  • Сколько в пикселях составляет размер шрифта текста, вложенного внутри тела документа — <body>.
  • Сколько в пикселях составляет размер шрифта текста, внутри блока <div>, вложенного в <body>.
  • Сколько в пикселях составляет размер шрифта текста, вложенного внутри блока <div>, вложенного в другой блок <div>.

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

Цветовое оформление в CSS

Форматирование текста в CSS

МЕНЮ

---

© 2016-2023 Денис Большаков, замечания и предложения по работе сайта Вы можете направить по адресу [email protected]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

Высота в л.с.

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

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

Высота прописных букв

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

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

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

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

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

терминология — Что означает размер шрифта?

«Размер шрифта» шрифта относится к «высоте em» шрифта, которая не обязательно совпадает с высотой определенных символов в шрифте.

Обычно высота шрифта в em соответствует той же основной идее — она ​​будет примерно равна расстоянию от самого нижнего выносного элемента (например, нижней части буквы g ) до самого верхнего выносного элемента (например, начало буквы h ):

Как видите, нет общих символов, покрывающих весь этот интервал.

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

Как ни странно, многие шрифты теперь содержат символы, которые делают выходящими за пределы высоты em. Например, современные шрифты часто содержат заглавные буквы с диакритическими знаками (например, Ć ) — эти диакритические знаки расширяют за пределы традиционного типографского надстрочного элемента , и, таким образом, эти (и, возможно, другие специальные символы) выходят за пределы верхней части шрифта. «Эм». Чтобы сохранить согласованность со старым шрифтом, мы не корректируем размер em, чтобы разрешить это — мы сохраняем размер em и просто расширяем его. Любой типограф, использующий такие акценты, должен убедиться, что есть место для их расширения, хотя обычно межстрочный интервал подходит для основного текста.

Промежуток между строками в основном тексте — это пробел между нижним выносным элементом одной строки текста и верхним выносным элементом строки под ним. Указанный «размер шрифта» текста , а не , включает межстрочный интервал в его измерении. Вот почему, когда вы выбираете размер 12 пунктов, линии не находятся точно в 12 пунктах (1/6 дюйма) друг от друга.

На межстрочный интервал для любого текста могут влиять многие факторы, включая программное обеспечение, которое его отображает. На это может повлиять поле CSS line-height , где 1.4 означает, что межстрочный интервал в 0,4 раза больше высоты em, и, таким образом, вся строка основного текста будет занимать в 1,4 раза больше высоты em, включая межстрочный интервал. В других приложениях межстрочный интервал может быть указан по-другому: текстовые процессоры часто определяют значение «межстрочного интервала» как кратное некоторому «одиночному межстрочному интервалу», но, в отличие от CSS, «одиночный» интервал не означает отсутствие межстрочного интервала, но некоторый разрыв строки «по умолчанию», когда приложение пытается найти значение по умолчанию на основе метаданных в файле шрифта, если он там существует.