Масштаб шрифта: Как изменить размер шрифта на компьютере – Масштаб, шрифт и кодировка. Помощь

06.12.2020 alexxlab 0

Содержание

CSS: Стиль и размер шрифта

Стиль шрифта

Свойство font-style позволяет выделить текст курсивным, наклонным начертанием или наоборот придать тексту стандартный вид. Данное свойство имеет всего три значения:

  • normal — стандартный текст, имеющий обычное начертание, то есть не курсивное и не наклонное
  • italic — курсивное начертание
  • oblique — наклонное начертание
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      p.exnormal { font-style: normal; }
      p.exitalic { font-style: italic; }
      p.exoblique { font-style: oblique; }
    </style>
  </head>

  <body>
    <p>Абзац со значением normal.</p>
    <p>Абзац со значением italic.</p>
    <p>Абзац со значением oblique.</p>
  </body>
</html>
Попробовать »

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

Размер шрифта

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

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

Пиксели

Значения в пикселях используются часто, поскольку такой подход предоставляет очень точный контроль над размером. Числовое значение заканчивает буквенными символами px, которые должны следовать сразу после числа (между числом и px не должно быть пробела).

body { font-size: 14px; }
Проценты

По умолчанию размер шрифта в браузерах равен 16px. Таким образом, значение 100% соответствует 16px, а 200% — 32px. Если вы определите правило, задающее всему тексту внутри элемента <body> значение 75% от размера по умолчанию (это будет соответствовать 12px), а затем определите еще одно правило, которое задает значение 75% для его дочернего элемента, то размер шрифта в этом элементе будет равен 9px (то есть 75% от 12px).

body { font-size: 100%; }
EM

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

body { font-size: 14px; }
h3 { font-size: 1.2em; }

В примере мы задали элементу <body> размер шрифта 14px, а для всех элементов <h3> — 1.2em. Это означает, что размер шрифта заголовков второго уровня будет масштабирован с коэффициентом 1,2. В нашем случае размер всех заголовков <h3> будет составлять 1,2 размера шрифта элемента <body>, что означает в 1,2 раза больше, чем 14px, и примерно равняется 17px. (На самом деле размер будет равняться 16,8, но большинство браузеров округлит его до 17.)

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

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

CSS предлагает семь ключевых слов, которые позволяют назначить размер шрифта относительно размера по умолчанию (16px): xx-small, x-small, small, medium, large, x-large и xx-large.

p { font-size: small; }

Среднее значение medium — размер шрифта по умолчанию в браузерах. Остальные значения уменьшают или увеличивают размер шрифта с различными коэффециентами. Самый маленький размер шрифта xx-small равен примерно 9 пикселям, каждый последующий размер примерно на 20% больше предыдущего:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      p.class1 { font-size: 120%; }
      p.class2 { font-size: 18px; }
      p.class3 { font-size: x-small; }
    </style>
  </head>

  <body>
    <p>Изменение размера с помощью процентов.</p>
    <p>Изменение размера с помощью пикселей.</p>
    <p>Изменение размера с помощью ключевого слова x-small.</p>
  </body>
</html>
Попробовать »

С этой темой смотрят:

Чертёжный шрифт — Википедия

Чертёжный шрифт
Technical Lettering.jpg
Стиль рублёный, пропорциональный, минималистичный
Классификация технический
Использование в чертежах
Набор символов русский, латинский, греческий алфавиты, технические символы
Commons-logo.svg Медиафайлы на Викискладе

Чертёжный шрифт — рукописный и компьютерный шрифт, который применяется для оформления чертежей и других технических документов. Шрифт стандартизован, его описывает международный стандарт ISO 3098 и такие национальные стандарты, как ГОСТ 2.304-81 и DIN 6776-1. Надписи чертёжным шрифтом могут выполняются от руки с использованием прямоугольной или наклонной сетки, могут использоваться трафареты и сухой перенос, а также компьютерный набор.

[1]

Согласно требованиям системы стандартов ЕСКД все надписи на чертежах должны быть выполнены чертёжным шрифтом по ГОСТ 2.304-81[источник не указан 442 дня], а в текстовых документах чертёжный шрифт должен использоваться при рукописном способе выполнения[2].

Стандарт устанавливает высоту и ширину символов, толщину линии, расстояния между символами строками и словами.

Главным требованием к шрифту было, чтобы текст был прост в написании и удобен в прочтении.

[источник не указан 442 дня] ISO 3098 и ГОСТ 2.304-81 определяет написание для латинского, кириллического и греческого алфавитов, арабских и римских цифр.

Международный стандарт ISO 3098 состоит из шести частей под общим наименованием «Документация техническая на продукцию. Шрифт для надписей и обозначений»:[3][4]

  1. ISO 3098-1:2015 Общие требования
  2. ISO 3098-2:2000 Латинский алфавит, цифры и знаки
  3. ISO 3098-3:2000 Греческий алфавит
  4. ISO 3098-4:2000 Диакритические и специальные знаки для латинского алфавита
  5. ISO 3098-5:1997 Шрифт из букв латинского алфавита, цифр и знаков для систем автоматизированного проектирования
  6. ISO 3098-6:2000 Кириллица

Входящий в Единую систему конструкторской документации (ЕСКД) межгосударственный стандарт ГОСТ 2.304-81 Шрифты чертёжные введён в 1982 году, полностью соответствует стандартам Совета экономической взаимопомощи СТ СЭВ 851-78-СТ СЭВ 855-78 и заменяет предшествовавший стандарт ГОСТ 2.304-68.

Стандарт Немецкого института стандартизации DIN 6776-1 «Чертежи технические. Надписи, шрифтовые знаки» соответствует стандарту ISO 3098.

Commons-logo.svg Размеры шрифта: высота прописных (
h) и строчных (c) букв, ширина буквы g, толщина линии d

Высота шрифта[править | править код]

Размером шрифта называется высота прописных (заглавных) букв в миллиметрах. Размер (высота) шрифта обозначается буквой h.

Стандарт устанавливает следующие размеры шрифта: 1,8; 2,5; 3,5; 5; 7; 10; 14; 20; 28; 40. Размер 1,8 не рекомендуется, но допускается. Размеры 1,8 и 2,5 не допускаются, если чертёж выполняется карандашом. Для стандартного чертежа предпочтительными являются размеры 3,5; 5 и 7. Высота строчных букв равна предыдущему размеру шрифта. Так, если размер шрифта — 10, то высота прописных букв — 10 мм, а высота строчных —7.

Выносные элементы[править | править код]

Термин «высота шрифта» не учитывает выносных элементов символов, которые выполняются за счёт промежутков между строками. Выносные элементы имеют прописные буквы Д, Й, Ц, Щ и строчные буквы

Толщина линии шрифта[править | править код]

Толщина линии шрифта обозначается буквой d.

Существуют два типа шрифтов — тип А, у которого толщина линии в 14 раз меньше его размера (d = 1/14 h) и тип Б (в ISO 3098 обозначается латинской «B»), у которого толщина линии в 10 раз меньше его размера (d = 1/10 h). Поскольку ширина шрифта прямо пропорциональна толщине линии, шрифт А более узок, чем Б.

Ширина шрифта[править | править код]

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

Ширина шрифта обозначается буквой g и является прямо пропорциональной величине

d. Самая широкая буква шрифта — Щ (g = 9d). Самые узкие буквы шрифта — з, с (g = 4d).

Ширина всех русских букв приведена в таблице.

Ширина русских букв
ШиринаБуква
9dЩ
8dЖ, Ф, Ш, Ъ, Ы
7dД, М, Х, Ю, ж, т, ф, ш, щ, ы, ю
6dБ, В, Е, И, К, Л, Н, О, П, Р, Т, У, Ч, Э, Я, а, м, ц, ъ
5dГ, З,С, б, в, г, д, е, и, й, к, л, н, о, п, р, у, х, ч, ь, э, я
4dз, с

Расстояния[править | править код]

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

Шрифт типа А
Параметры шрифтаОбозначениеОтносительный размерРазмеры, мм
Размер шрифта — высота прописных буквh(14/14)h2,53,557101420
Высота строчных буквc(10/14)h1,8[T 1]2,53,5571014
Расстояние между буквамиa(2/14)h0,350,50,711,422,8
Минимальный шаг строк (высота вспомогательной сетки)b(20/14)h3,55710142028
Минимальное расстояние между словамиe(6/14)h1,051,52,134,268,4
Толщина линий шрифтаd(1/14)h0,180,250,350,50,711,4
Шрифт типа Б
Параметры шрифтаОбозначениеОтносительный размерРазмеры, мм
Размер шрифта — высота прописных буквh(10/10)h1,8[T 1]2,53,557101420
Высота строчных буквc(7/10)h1,3[T 1]1,8[T 1]2,53,5571014
Расстояние между буквамиa(2/10)h0,350,50,711,422,84
Минимальный шаг строк (высота вспомогательной сетки)b(14/10)h3,13,55710142028
Минимальное расстояние между словамиe(6/10)h1,11,52,134,268,412
Толщина линий шрифтаd(1/10)h0,180,250,350,50,711,42
  1. ↑ 1 2 3 4 Размер шрифта 1,8 мм отсутствует в ISO 3098 и «не рекомендуется» стандартом ГОСТ 2.304-81
Использование двух треугольников для начертания сетки под углом 75°

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

Набор трафаретов для нанесения шрифтов DIN 6776

В тех случаях, когда требуется сделать надпись чертёжным шрифтом вручную, проводят верхнюю и нижнюю линию строки. Для выполнения средних элементов букв Б, В, Е, Н, Р, У, Ч, Ъ, Ы, Я проводят горизонтальную линию посредине строки. Для букв З, О, Ф, Ю проводят ещё две горизонтальные линии, указывающие границы скруглений.

Существуют специальные трафареты для быстрого выполнения надписей.

  • ГОСТ 2.304-81 «Единая система конструкторской документации. Шрифты чертежные».
  • А. Д. Ботвиников, В. Н. Виноградов, И. С. Вышнепольский. Техника выполнения чертежей и правила их оформления. Правила оформления чертежей. 2.4. Шрифты чертёжные // Черчение 9 класс. — Москва: ACT, Астрель, 2008. — С. 22—25. — 223 с. — ISBN 978-5-17-045068-8.
  • osifont — свободный шрифт, соответствующий ISO 3098

Устанавливаем размер шрифта с помощью HTML и CSS

Серёжа Сыроежкин

Серёжа СыроежкинКопирайтер

Размер шрифта на сайте можно задать как при помощи HTML, так и с помощью CSS. Рассмотрим оба варианта.

Задание размера шрифта с помощью HTML

Размер шрифта на странице можно определить при помощи тега font HTML. В статье Цвет шрифта HTML мы уже рассматривали тег font и его атрибуты. Одним из атрибутов этого тега является size, который и позволяет установить размер шрифта. Применяется он следующим образом:

Конструктор сайтов <font size="7">"Нубекс"</font>

Size может принимать значения от 1 до 7 (по умолчанию равен 3, что соответствует 13,5 пунктам для шрифта Times New Roman). Другой вариант задания атрибута – “+1” или “-1”. Это означает, что размер будет изменен относительно базового на 1 пункт больше или меньше, соответственно.

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

Устанавливаем размер шрифта при помощи CSS

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

<html>
 <head>
  <title>Меняем размер шрифта при помощи CSS</title>
   <style>
	.nubex {
	font-size: 14px;
	}
   </style>
 </head>
 <body>
	<div>Шрифты HTML-блока div класса nubex получают размер 14px при помощи свойства font size.</div>
 </body>
</html>

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

  • large, small, medium — задают абсолютный размер (маленький, средний, большой). Также могут применяться значения экстра-маленький (x-small, xx-small), экстра-большой (x-large, xx-large).
  • larger, smaller — задают относительный размер (меньше или больше относительно родительского элемента).
  • 100% — задается относительный размер (в процентах относительно родительского). Например: 
    h2 {
	font-size: 180%;
}
    Это означает, что размер тега h2 будет составлять 180% от базового размера шрифта.
  • Другие варианты задания относительного размера:
    • 5ex — означает, что размер составит 5 высот буквы x от базового шрифта;
    • 14pt — 14 пунктов;
    • 22px — 22 пикселя;
    • 1vw — 1% от ширины окна браузера;
    • 1vh — 1% от высоты окна браузера;

Смотрите также:

em vs. px vs. pt vs. percent / Habr

Одним из наиболее запутанных аспектов 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» — это новый и предстоящий стандарт размера шрифта в Интернете, но на практике, единицы в «%» позволяют отображать текст для пользователей более последовательно и удобно. При смене параметров клиента, текст в «%» изменялся в разумных пропорциях, что позволяет дизайнерам сохранить читабельность, доступность, и дизайн.

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

Размер шрифта 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.

Мобильная типографика / Habr

При разработке дизайна необходимо учитывать корректность его отображения не только на больших экранах, но и на мобильных устройствах. И в первую очередь это касается читаемости контента. Поэтому необходимо уделять особенное внимание типографике, которая является основой веб-дизайна. На эту тему есть полезная статья шестилетней давности — Web Design is 95% Typography (автор Oliver Reichenstein).

Для начала рассмотрим основные моменты веб-типографики с примерами на мобильных устройствах.

Размер

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

В целом, размер шрифта на страницах может полностью менять внешний вид и привлекательность сайта. Modular Scale Calculator — калькулятор от Тима Брауна (Tim Brown), который поможет подобрать размеры шрифтов для сайта, в том числе в «золотой пропорции» (1:1.618).

Пример сайта с соотношением размеров шрифтов 16/24/72:

Контраст

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

Кстати, есть даже сервис, который проверяет контрастность цветов на сайте — checkmycolours.com. Ниже представлены несколько сайтов с хорошим контрастом контента.

Отступы

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

Выбор шрифта

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

Эту проблему помогут решить специальные веб-сервисы: Web Font Specimen, Typecast app и Typekit’s font browser. Иногда целесообразно использовать разные шрифты для разных размеров экранов. Такое практикует, например, сайт A List Apart.

Кроме того, не стоит использовать нестандартные шрифты в неподходящих местах. Вот так, например, выглядит League Script, читать невозможно:

Адаптивный дизайн


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

На большинстве сайтов используются px или em для того, чтобы задать размер шрифта. Em предпочтительнее, потому что позволяет пользователю менять размер шрифта в браузере. Но есть и недостаток — размер в em зависит от font-size родительского элемента. Поэтому лучше использовать rem: размер шрифта будет зависеть от корневого элемента — html:
html { font-size: 62.5%; } 
body { font-size: 1.4rem; } /* =14px */
h2   { font-size: 2.4rem; } /* =24px */

Пример с media queries:
@media (max-width: 640px) { body {font-size:1.2rem;} } 
@media (min-width: 640px) { body {font-size:1rem;} } 
@media (min-width:960px) { body {font-size:1.2rem;} } 
@media (min-width:1100px) { body {font-size:1.5rem;} }
Отступы и длина строк

Согласно исследованию Baymard Institute, оптимальная длина строки для удобного чтения — от 50 до 75 символов. Непросто добиться автоматического соответствия этому правилу на любом устройстве. Например, размер шрифта девайса по-умолчанию — 16 px, а мы хотим использовать 20 px. Получается, что наш шрифт должен быть размером 1.25 rem. Блок текста делаем шириной 675 px, тогда в строке будет помещаться 60 символов:
@media (min-width: 950px) { .container {width:675px;} }

Таким образом можно прописать контейнеры для экранов с любыми размерами. Для лучшей читаемости на больших экранах можно еще разместить контент в две колонки:
@media (min-width:1140px) { .content { -webkit-column-count: 2; -webkit-column-gap: 1em; -moz-column-count: 2; -moz-column-gap: 1em; column-count: 2; column-gap: 1em; } }

При ширине более 1140 пикселей текст будет разбит на два столбца.

Хорошие примеры мобильной типографики


Полезно почитать


Единицы измерения шрифта или «Как сделать шрифт нужного размера?»

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Окно настройки шрифта в программе Адобе Фотошоп.

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

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

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

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

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

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

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

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

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

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

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

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

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

Живой пример

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

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

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

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

Дано:

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

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

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

Решение:

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

Ответ: 200 у.е.

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

Все по 200!

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

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

Leave a comment