Меню

Как называют единицы измерения шрифта



Структура и единицы измерения шрифта

Существует несколько терминов для описания структуры и размеров шрифта.

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

та (продленных вниз элементов букв) до крайней точки верхнею вынос­ ного элемента (продленных вверх элементов букв).

Наиболее часто в рекламных объявлениях используются размеры пе­ чати в 6, 8, 10, 11, 12, 13, 14, 18, 24, 36, 42, 60, 72, 84, 96 и 120 пунктов (см. рис. 10-8). Однако при наличии современных компьютеризированных фотонаборных аппаратов можно использовать любые размеры. Самые малые размеры, от 6 до 14 пунктов, используются для текстовых шриф­тов, а более крупные — для выделительных (заголовки).

Единица измерения ширины печатных строк по горизонтали называется цицеро. В одном дюйме точно шесть цицеро, а в одном цицеро — 12 пунктов (см. рис. 10-9).

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

Прописные и строчные буквы

Английские названия прописных ( uppercase ) и строчных ( lowercase )букв произошли от названий двух отделений в наборной кассе, предназначен­ ной для ручного набора.

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

Выбор способа печатного исполнения

Искусство выбора шрифта и набора текстов называется печатным ис­полнением. Поскольку почти все рекламные объявления включают ма-

териал для чтения, то печатное исполнение играет очень важную роль в рекламе. Выбор шрифта определяет обший вид, конструкцию и читае­мость объявления. Хотя правильный выбор шрифта не может компенси­ровать недостатки содержания заголовка, основного текста или неумест­ ность иллюстраций, он, тем не менее, способен привлечь внимание чи­тателя и вызвать в нем интерес к объявлению (см. лабораторную работу 10-А).

Знание особенностей и символического значения шрифтов приходит с опытом. Очень немногие специалисты из числа работающих в рекламе могут точно интерпретировать воздействие того или иного способа печа­ ти на облик рекламного объявления. Это такое дело, которое требует опытности и мастерства, и его ни в коем случае не следует поручать кому попало. Такую ошибку часто допускают рекламодатели местного уровня.

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

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

Разумеется, легче всего читать тексты, набранные крупным, жирным и простым шрифтом. Но рекламодатели ограничены наличием места в объ­явлении и количеством текста, который должен быть напечатан. На чи­таемость влияет также длина строчек, состаатяющих основной текст. Га­ зетная колонка обычно не превышает в ширину 2 дюймов, журнальная — чуть шире. Для рекламных объявлений обычно рекомендуется использо­ вать текстовые колонки шириной менее 3 дюймов (18 цицеро).

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

Печатная строка, набранная литерами в 10 пунктов с пропуском в 2 пункта (междустрочный пробел) между строчками, называется 10 на 12 , или 10/12 . Те же термины используются и в современном фотонабор­ном производстве.

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

Читайте также:  Как измерить зрачок глаза

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

Источник

Единицы измерения CSS, размер шрифта

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

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

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

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

В 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 (дюйма).

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

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

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

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

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

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

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

Давайте рассмотрим пример. Допустим, у всех параграфов (элемент

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

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

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

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

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

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

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

В данном примере для вложенного блока

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

Если бы мы не изменили значение размера шрифта для блока

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

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

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

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

Читайте также:  Вес тела формула расчета единица измерения

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Читайте также:  Что такое условия для обеспечения единства измерения

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

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

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

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

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

1vmin = 1vw или 1vh. Выбирает минимальное значение между высотой и шириной области просмотра.

1vmax = 1vw или 1vh. Выбирает максимальное значение между высотой и шириной области просмотра.

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

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

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

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

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

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

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

Рис.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.

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

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

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

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

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

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

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

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

    Практическое задание № 13
    У нас имеются следующие стили, в которых элемент и элементы

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

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

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

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

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

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

Источник