Управление шрифтом и текстом с помощью таблиц стилей CSS
Цель работы: изучить основы управления шрифтом и текстом с помощью таблиц стилей CSS, освоить практические навыки по использованию свойств шрифта и текста на web-странице.
I. Управление шрифтом
Оформление – один из самых мощных способов донести идеи создателя сайта до посетителя. Правильно оформленный текст позволяет читателю наиболее быстро разобраться в содержании сайта.
Шрифт – неотъемлемая часть любого документа. Такие эффекты как курсив или полужирное начертание, позволяют дизайнерам выделить важные места в документе и обратить на них внимание посетителя.
На web-страницах с помощью CSS можно просто менять тип шрифта или придавать ему курсив или полужирное начертание, как в случае с HTML-тегами. Таблицы стилей позволяют задавать общий тип шрифта, устанавливать различную толщину букв, тип курсива и размер шрифта, используя стандартные обозначения, заимствованные из области книгопечатания.
Семейство шрифтов (font family) – это набор шрифтов с похожими характеристиками. В web существует пять основных типов шрифта (таблица 1).
Таблица 1
Типы шрифта
Тип шрифта | Пример | Характеристика шрифта |
serif | Times New Roman | На концах линий, составляющих буквы, есть маленькие черточки (засечки). Такое написание позволяет выделять отдельные буквы. Этот тип подходит для текста предназначенного для распечатки. На экране буквы будут не ясными, если размер шрифта маленький. |
sans-serif | Arial | Буквы данного шрифта не имеют засечек. И хотя символы sans-serif менее отчетливы, они больше подходят для текстов, отображаемых на экране и набранных шрифтом меньшего размера. |
monospace | Courier New | Все символы этого типа шрифта одинаковы по ширине. Например буква «i» занимает столько же места сколько и буква «m» по ширине. Этот шрифт подходит для текстов, в которых важна каждая буква, например для программных кодов. |
cursive | Monotype Corsiva | Имитирует письмо от руки, его лучше использовать для украшения текста или смысловых выделений. |
fantasy | Webdings (Webdings) | Лучше использовать в качестве украшений |
Определение типа шрифта
1. Введите название свойства и поставьте двоеточие:
2. Укажите название шрифта, который будете использовать:
3. Можно написать несколько типов шрифтов через запятую:
, “Times New Roman”, palatino
4. После последней запятой укажите семейство шрифтов, к которому относиться используемый шрифт:
Из всех перечисленных в списке шрифтов браузер выбирает первый. Если этот тип шрифта ему недоступен, браузер просматривает список далее до тех пор, пока не найдет шрифт, имеющийся на компьютере пользователя. Если не находит подходящего шрифта, используется шрифт, установленный в браузере посетителя по умолчанию. Если вы определите семейство шрифта, браузер найдет максимально похожий шрифт.
Названия шрифтов, состоящие из нескольких слов, нужно заключать в кавычки, например: “Times New Roman”
Пример 1
font-family: Georgia, "Times New Roman", Times, serif;
font-family: "Courier New", Courier, Monaco, monospace;
font-family: Arial, Helvetica, Geneva, sans-serif;
Введение
Электронная коммерция …...
Инструментарий Microsoft и электронная коммерция
Быстрое развитие коммуникационных технологий....
Рис.1. Определение типов шрифта
Определение размера шрифта
Обычно шрифт устанавливается с помощью тега (например ………<.font>). Вероятно этот способ скоро выйдет из употребления, так как в последних версиях HTML, соответствующих стандартам, тег отсутствует, его рекомендуется заменять CSS.
Основные проблемы, возникающие при использовании тега , заключаются в следующем:
1. Этот тег нужно добавлять каждый раз, когда необходимо установить шрифт. Соответственно размер файла значительно увеличивается;
2. Менять свойства шрифта нужно в каждом теге, что очень не удобно.
CSS решает обе эти проблемы. Не добавляя дополнительных тегов, можно управлять видом текста, заключенного в тег, внося изменения лишь в одну строку документа.
В HTML есть семь различных размеров шрифта, но все они связаны с размером, установленным по умолчанию посетителем страницы. С помощью CSS можно изменять размер текста на экране несколькими способами, включая традиционное изменение размера в точках, проценты, абсолютный размер и даже размер, зависящий от окружающего текста.
Алгоритм:
1. Введите font-size и поставьте двоеточие:
2. Укажите размер шрифта одним из следующих способов:
В единицах длинны – измеряется в пунктах;
Используя абсолютное выражение, например xx-small, x-small, small, medium, large, x-large, xx-large;
Smaller и larger описывает размер по отношению к размеру родительского элемента;
В процентах, определяющих размер шрифта пропорционально размеру шрифта родительского элемента (например 75%).
Пиксели и пункты:
Аббревиатура pt обозначает пункт. Это один из способов указания размеров шрифта. Обычно используется шрифт 12pt, который удобен для большинства читателей. Лучше измерять шрифт в пикселях (px ).Пиксели не всегда надежны, но результат их использования более точен.
Между пикселями и пунктами не существует однозначного соответствия, но можно считать, что 12px примерно совпадает с 12pt.
Пример 2
font-size: 12px;
font-size: large;
Введение
Электронная коммерция является одним из самых модных течений практически во всех отраслях бизнеса. Она открывает новые возможности в любой сфере,
Инструментарий
Microsoft
и электронная коммерция
Рис.2. Установление размера шрифта
Курсив
Часто путают два типа стилей – курсив (italic) и наклонный (oblique). Курсивом называется более декоративный тип шрифта с наклоном вправо. Наклонный шрифт представляет собой обычный шрифт, без каких-либо стилизованных украшений, с небольшим наклоном (рис.3).
Рис.3. Курсивное и наклонное начертание
С помощью элемента font-style можно выделить текст курсивом, сделать шрифт наклонным или оставить его начертание обычным (normal).
Пример 3
font-style: italic;
font-family: Arial, Helvetica, serif;
font-style: italic;
Введение
Электронная коммерция- является одним …...
Инструментарий
и электронная коммерция
Рис.4. Использование курсива в тексте
В примере 3 класс booktitle и все абзацы в <blockquote > выделены курсивом. Заголовок использует шрифт serif , поэтому мы видим курсивный шрифт, блокнот использует шрифт sans-serif , который является наклонным, даже если вы его задаете как курсив.
Толщина шрифта
В стандартном HTML шрифт может быть либо полужирным, либо обычным. CSS позволяет установить несколько уровней «жирности» шрифта, используя способность многих шрифтов иметь разную толщину.
Пример 4
font-weight: bolder;
font-weight: normal;
Электронная коммерция
Является одним из самых … во всех отраслях бизнеса. Она открывает новые возможности …..
Инструментарий Microsoft и электронная коммерция
Рис.5.Определение толщины шрифта
В примере 4 создается класс bolder , который делает линии шрифта толще.
Создание Small caps
Small caps полезны для выделения заголовков. С помощью Small caps строчные буквы переводятся в заглавные, размер которых меньше, чем у обычных прописных букв (рис.6).
Рис.6. Все буквы заглавные, но первая – больше остальных
Пример 5
font-size: 24px;
font-family: "Times New Roman", Times, serif;
font-variant: small-caps;
Электронная коммерция
Является одним из самых модных течений практически во всех отраслях бизнеса. Она открывает новые возможности в любой сфере,
независимо от того, ориентируетесь ли вы на конечного покупателя или работаете с деловыми партнерами.
Рис.7. Применение small-caps
В примере 5 тег заголовка второго уровня отображает текст маленькими заглавными буквами (small-caps).
Термины и определения
ШРИФТЫ ЧЕРТЕЖНЫЕ
Изображения на чертежах дополняются надписями, выполняемыми шрифтами чертежными по ГОСТ 2.304-81. Эти шрифты отличаются четкостью, простотой исполнения.
Размер шрифта h – величина, определенная высотой прописных (заглавных) букв в миллиметрах. Высота прописных букв h измеряется перпендикулярно к основанию строки. Высота строчных букв c определяется из отношения их высоты к размеру шрифта h , например, c = 7/10 h (см. рисунок 1):
Рисунок 1
Ширина буквы g – наибольшая ширина буквы (см. рисунок 1), определяется по отношению к размеру шрифта h, например, g = 6/10h, или по отношению к толщине линий шрифта d , например, g = бd .
Толщина линии шрифта d – толщина, определяемая в зависимости от типа и высоты шрифта.
Буквы применяются прописные и строчные. Стандарт устанавливает четыре типа шрифта:
А - с наклоном около 75° (d =1/14 h), рисунок 2;
А - без наклона (d =1/14 h), рисунок 3;
Б - с наклоном около 75° (d =1/10h);
Б - без наклона (d =1/10h).
Рисунок 2 – Шрифт с наклоном
Рисунок 3 – Шрифт без наклона
Написание шрифтов типа Б с наклоном и без наклона аналогично шрифтам типа А, а различие по параметрам приведено в таблице 1.
Устанавливаются следуюшие размеры шрифта: (1,8); 2,5; 3,5; 5; 7; 10; 14; 20; 28; 40. (Шрифт размером 1,8 не рекомендуется и допускается только для типа Б ).
Таблица 1
Толщина линий шрифта d меняется в зависимости от высоты прописных букв 1/14h или 1/10 h.
Параметры шрифтов приведены в таблице 1.
Построение шрифта по вспомогательной сетке (сетке, образованной вспомогательными линиями, в которую вписываются буквы), изображено на рисунке 4. Шаг вспомогательных линий сетки определяется толщиной линии шрифта d .
Вспомогательная сетка из вспомогательных линий
Рисунок 4 – Построение шрифта по вспомогательной сетке
Поскольку определение значения g по отношению к размеру шрифта предпочтительней, на нем основано определение ширины прописных букв (таблица 2).
Таблица 2
Размер шрифта соответствует высоте прописных букв в мм.
Высота строчных букв определяется из отношения их высоты к размеру шрифта 10/14h или 7/10h - в зависимости от типа шрифта.
Изучение написания букв чертежного шрифта следует вести не в алфавитном порядке, а разбив их на группы по единообразию написания. За основу следует взять принцип размещения составляющих букв относительно образующих сетки, в которую вписывается буква или цифра (рисунок 4).
Первая группа - буквы, образованные параллельными, прямоугольными элементами: Г; Е, Н, П, Т. Ш, Щ. Отростки букв Ц, Щ выполняются за счет расстояний а и b, средний горизонтальный элемент букв Е, Н проводится на высоте 8/14h или 6/10h, т. е. выше середины буквы,
Вторая группа - буквы, прямолинейные элементы которых располагаются наклонно или по диагонали: А, И, Й, К, М, Х, Ж .
Третья группа - буквы, образованные горизонтальными, вертикальными, наклонными и криволинейными элементами: Б, В, Д, Л, Р, У, Ч, Ъ, Ы, Ь, Я .
Средний элемент букв Б, В, Ъ, Ы, Ь проводится на высоте 8/14h или 6/10h в зависимости от типа шрифта. Наклонный элемент буквы Я располагается по диагонали параллелограмма
Четвертая группа - буквы, образованные криволинейными элементами: О, С, 3, Ф, Э, Ю . Средний элемент буквы Ю и Э проводится на высоте 8/I4h или на высоте 6/10h.
Верхний и нижний горизонтальный элемент буквы Ф расположен на разных расстояниях от верхней и нижней стороны габаритной клетки: снизу на 2/10h или 3/14h - в зависимости от типа шрифта. Очертание верхней половины буквы З почти касается левой стороны габаритной клетки, нужно учитывать, что буква З является частью шрифта 8 , поэтому рекомендуется ее выполнять как часть цифры 8, выполняя только правую половину знака, продлив верхнюю и нижнюю часть знака в сторону недостроенной части на величину 2/14h или 1/10h. У цифры 4 горизонтальный элемент проводится на высоте 4/14h - шрифт типа А и 3/10h - шрифт типа Б .
Расстояние между буквами, соседние линии которых не параллельны между собой (ГА, АТ, СЛ, ТА), может быть уменьшено наполовину, т.е на величину d.
Шрифты типа А и Б с наклоном и без наклона применяются широко. Это относится к «знакам» латинского и греческого алфавита, правилам написания дробей, показателей, индексов и предельных отклонений. Дроби, показатели, индексы, предельные отклонения выполняются размером шрифта на одну степень меньше, чем размеры шрифта основной величины (тип А), или одного размера с размером шрифта основной величины тип Б).
Параметры шрифта | Обо- зна че ние | Шрифт типа А (d= h/14) | Шрифт типа Б (d=h/10) | |||||||||||||||||
Относитель ный размер | Размеры, мм | Относитель ный размер | Размеры, мм | |||||||||||||||||
Размеры шрифта: высота прописных букв | h | (14/14)h | 14d | 2,5 | 3,5 | (10/10)h | 10d | 1,8 | 2,5 | 3,5 | ||||||||||
высота строчных букв | с | (10/14)h | 10d | 1,8 | 2,5 | 3,5 | (7/10)h | 7d | 1,3 | 1,8 | 2,5 | 3.5 | ||||||||
Расстояние между буквами | а | (2/14)h | 2d | 0,95 | 0,5 | 0,7 | 1,4 | 2,8 | (2/10)h | 2d | 0,95 | 0,5 | 0,7 | 1,4 | 2,8 | |||||
Максимальный шаг строк (высота вспомогательной сетки) | b |
Ширина букв g по отношению к размеру шрифта h
ГОСТ 2.304-81
Группа Т52
МЕЖГОСУДАРСТВЕННЫЙ СТАНДАРТ
Единая система конструкторской документации
ШРИФТЫ ЧЕРТЕЖНЫЕ
Unified system for design documentation. Letters for drawings
МКС 01.080.30
Дата введения 1982-01-01
ИНФОРМАЦИОННЫЕ ДАННЫЕ
1. РАЗРАБОТАН И ВНЕСЕН Государственным комитетом СССР по стандартам
2. УТВЕРЖДЕН И ВВЕДЕН В ДЕЙСТВИЕ Постановлением Государственного комитета СССР по стандартам от 28.03.81 N 1562
3. (Исключен, Изм. N 2).
5. ИЗДАНИЕ (август 2007 г.) с Изменением N 1, , утвержденными в марте 1989 г., июне 2006 г. (ИУС 7-89, 9-2006)
Настоящий стандарт устанавливает чертежные шрифты, наносимые на чертежи и другие технические документы всех отраслей промышленности и строительства.
1. ТЕРМИНЫ И ОПРЕДЕЛЕНИЯ
1. ТЕРМИНЫ И ОПРЕДЕЛЕНИЯ
1.1. Размер шрифта
- величина, определенная высотой прописных букв в миллиметрах.
1.2. Высота прописных букв измеряется перпендикулярно к основанию строки.
Высота строчных букв определяется из отношения их высоты (без отростков ) к размеру шрифта , например, =7/10 (черт.1 и 2).
1.3. Ширина буквы - наибольшая ширина буквы, измеренная в соответствии с черт.1 и 2, определяется по отношению к размеру шрифта , например, 6/10, или по отношению к толщине линии шрифта , например, 6
1.4. Толщина линии шрифта - толщина, определяемая в зависимости от типа и высоты шрифта.
1.5. Вспомогательная сетка
- сетка, образованная вспомогательными линиями, в которые вписываются буквы. Шаг вспомогательных линий сетки определяется в зависимости от толщины линий шрифта (черт.3).
Черт. 3
2. ТИПЫ И РАЗМЕРЫ ШРИФТА
2.1. Устанавливаются следующие типы шрифта:
Тип А без наклона (=1/14) с параметрами, приведенными в табл.1;
Тип А с наклоном около 75° (=1/14) с параметрами, приведенными в табл.1;
Тип Б без наклона (=1/10) с параметрами, приведенными в табл.2;
Тип Б с наклоном около 75° (=1/10) c параметрами, приведенными в табл.2.
Таблица 1
Шрифт типа A
(=)
Параметры шрифта |
Обоз- |
Относительный размер |
Размеры, мм |
|||||||
Размер шрифта: |
||||||||||
высота прописных букв |
||||||||||
высота строчных букв |
||||||||||
Расстояние между буквами |
||||||||||
Толщина линий шрифта |
Таблица 2
Шрифт типа Б
(=)
Параметры шрифта |
Обозна- чение |
Относительный размер |
Размеры, мм |
||||||||
Размер шрифта: |
|||||||||||
высота прописных букв |
|||||||||||
высота строчных букв |
|||||||||||
Расстояние между буквами |
|||||||||||
Минимальный шаг строк (высота вспомогательной сетки) |
|||||||||||
Минимальное расстояние между словами |
|||||||||||
Толщина линий шрифта |
Примечания:
1. Расстояние между буквами, соседние линии которых не параллельны между собой (например, ГА
, АТ
), может быть уменьшено наполовину, т.е. на толщину линии шрифта.
2. Минимальным расстоянием между словами , разделенными знаком препинания, является расстояние между знаком препинания и следующим за ним словом.
При выполнении документов автоматизированным способом допускается применять шрифты, используемые средствами вычислительной техники. В этом случае должны быть обеспечены их хранение и передача пользователям документов.
(Измененная редакция, Изм. N 2).
2.2. Устанавливаются следующие размеры шрифта: (1,8); 2,5; 3,5; 5; 7; 10; 14; 20; 28; 40.
Примечание. Применение шрифта размером 1,8 не рекомендуется и допускается только для типа Б.
2.3. Построение шрифта во вспомогательной сетке показано на черт.4.
2.4. Предельные отклонения размеров букв и цифр ±0,5 мм.
3. РУССКИЙ АЛФАВИТ (КИРИЛЛИЦА)
3.1. Шрифт типа А с наклоном приведен на черт.5.
3.2. Шрифт типа А без наклона приведен на черт.6.
3.3. Шрифт типа Б с наклоном приведен на черт.7.
3.4. Шрифт типа Б без наклона приведен на черт.8.
4. ЛАТИНСКИЙ АЛФАВИТ
4.1. Шрифт типа А с наклоном приведен на черт.9.
4.2. Шрифт типа А без наклона приведен на черт.10.
Черт.10
4.3. Шрифт типа Б с наклоном приведен на черт.11.
Черт.11
4.4. Шрифт типа Б без наклона приведен на черт.12.
Черт.12
4.5. Виды, форма и расположение диакритических знаков для шрифтов типов А и Б без наклона приведены в справочном приложении.
Диакритические знаки для шрифтов с наклоном следует выполнять по тем же правилам.
5. ГРЕЧЕСКИЙ АЛФАВИТ
5.1. Шрифт типа А с наклоном приведен на черт.13.
Черт.13
5.2. Шрифт типа А без наклона приведен на черт.14.
Черт.14
5.3. Шрифт типа Б с наклоном приведен на черт.15.
Черт.15
5.4. Шрифт типа Б без наклона приведен на черт.16.
Черт.16
5.5. Наименования букв греческого алфавита, приведенных на черт.13-16:
омикрон |
||||
6. АРАБСКИЕ И РИМСКИЕ ЦИФРЫ
6.1. Шрифт типа А приведен на черт.17.
Черт.17
6.2. Шрифт типа Б приведен на черт.18.
Черт.18
Примечания:
1. Римские цифры L, C, D, М следует выполнять по правилам латинского алфавита.
2. Римские цифры допускается ограничивать горизонтальными линиями.
7. ЗНАКИ
7.1. Шрифт типа А с наклоном приведен на черт.19.
Черт.19
7.2. Шрифт типа А без наклона приведен на черт.20.
Черт.20
7.3. Шрифт типа Б с наклоном приведен на черт.21.
Черт.21
7.4. Шрифт типа Б без наклона приведен на черт.22.
Черт.22
7.5. Наименования знаков приведены в табл.3.
Таблица 3
Номера знаков на чертежах |
Наименование знаков |
Двоеточие |
|
Точка с запятой |
|
Восклицательный знак |
|
Вопросительный знак |
|
Параграф |
|
Равенство |
|
Величина после округления |
|
Соответствует |
|
Асимптотически равно |
|
Приблизительно равно |
|
Меньше или равно |
|
Больше или равно |
|
Минус, тире |
|
Плюс-минус |
|
Умножение |
|
Параллельно |
|
Перпендикулярно |
|
Конусность |
|
Интеграл |
|
Бесконечность |
|
Квадратные скобки |
|
Круглые скобки |
|
Черта дроби |
|
Знак подобия |
|
Звездочка |
8. ПРАВИЛА НАПИСАНИЯ ДРОБЕЙ, ПОКАЗАТЕЛЕЙ, ИНДЕКСОВ И ПРЕДЕЛЬНЫХ ОТКЛОНЕНИЙ
8.1. Дроби, показатели, индексы и предельные отклонения выполняются в соответствии с табл.4 размером шрифта:
На одну ступень меньшим, чем размер шрифта основной величины, к которой они приписываются;
Одинакового размера с размером шрифта основной величины.
Таблица 4
Варианты выполнения |
Шрифты |
Примеры выполнения |
|
основ- |
дроби, пока- |
||
Размер шрифта на одну ступень меньше, чем размер основной величины |
|||
Размер шрифта такой же, как размер основной величины |
|||
ПРИЛОЖЕНИЕ (справочное). ДИАКРИТИЧЕСКИЕ ЗНАКИ
ПРИЛОЖЕНИЕ
Cправочное
Венгерский язык
Немецкий язык
Польский язык
Румынский язык
Чешский и словацкий язык
Электронный текст документа
подготовлен АО "Кодекс" и сверен по:
официальное издание
Единая система конструкторской документации:
Сб. ГОСТов. - М.: Стандартинформ, 2007
Начиная знакомство с таинством создания цифровых шрифтов, важно разобраться с матчастью. В буквальном смысле слова. Для плодотворной работы шрифтовой дизайнер должен понимать, как измеряются шрифты и в каких единицах.
Давайте разбираться.
А то знаний маловато!
Физика и лирика
Когда–то давным–давно буквы отливались на металических или деревянных брусках, и их размеры были довольно статичными. Высота литерной площадки называлась кеглем, а измеряли ее в пунктах (в СНГ 1 пункт равен 0,376 мм).
Литера с лигатурой ſi. 12-й кегль, шрифт Клода Гарамона
В современной полиграфии померить буквы после их печати можно при помощи полиграфической линейки. Она распечатывается на прозрачной пленке, прикладывается к готовому изделию и служит для измерения размера шрифта, толщины обводки, угла наклона растра и других метрик.
Тут тебе и сантиметры, и дюймы и все те же пункты.
Полиграфическая линейка.Однако, когда дело касается цифровой среды, на арену выходят виртуальные величины измерения.
Размер шрифта в векторе
Как правило, цифровые шрифты являются векторными, и все их метрики задаются в некоторых условных единицах, не имеющих размерности.
Основные метрики шрифта «Новая Гельветика Тонкая» в окне настроек шрифтового редактора «Фонтлаб 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 копеек » (5 Cent Regular), было важно добиться абсолютной четкости линий при «размере шрифта» (PPM) в 5 пикселей в Фотошопе или в любой другой программе.
Шрифт «5 Cent Regular» - это, пожалуй, самые большие «5 копеек» в дело пиксельной типографики
Это требование предполагало точное попадание в пиксель - размеры и метрики в итоговом рендеринге должны были ровняться целому числу пикселей. А именно, исходя из минимально возможных значений, толщина линий при заданном PPM должна быть ровна одному пикселю.
Значение UPM для шрифта предполагалось стандартное, в 1000 единиц.
Дано:
PPM в Фотошопе = 5 пикселей
UPM шрифта = 1000 у.е.
Задача : Найти количество Х у.е. для рендеринга в 1 пиксель.
Решение:
X у.е. в 1 пикселе = UPM / PPM = 1000 / 5 = 200.
Ответ: 200 у.е.
Таким образом все линии, отступы и даже кернинг в шрифте были сделаны со значениями, кратными 200 у.е.
Все по 200!
Вывод о пользе
Понимая значение метрик PPM и UPM, а также формулу зависимости между ними, можно с требуемой точностью управлять метриками при разработке цифрового шрифта.
В этой статье мы рассмотрим различные способы, с помощью которых вы можете установить размер шрифта HTML .
Обзор единиц измерения
Единицы измерения можно разделить на две категории: абсолютные и относительные.
Абсолютные единицы являются фиксированными и относятся к каким-либо физическим единицам измерения. После того, как они были заданы, размер не меняется.
Относительные единицы не имеют фактического значения. Их размер определяется относительно родительского элемента. Это означает, что размер шрифта можно изменить в HTML путем изменения размеров связанного элемента.
Вот краткий обзор некоторых единиц измерения:
Я подробнее рассмотрю те единицы измерения, которые являются наиболее значимыми — px , pt , % , em , rem и vw .
Какая между ними разница?
Разницу между этими единицами измерения трудно понять теоретически, так что лучше продемонстрировать ее на конкретных примерах увеличения размера шрифта HTML .
Пример 1 — Настройки по умолчанию
В HTML-документе , где вы еще не устанавливали никаких размеров шрифтов, существуют настройки по умолчанию. В большинстве браузеров размер шрифта по умолчанию для разделов html и body — 100%. Что соответствует следующему:
100% = 1em = 1rem = 16px = 12pt
Это означает, что, если вы установите размер шрифта для одного блока <р> в 100%, а для другого — 16px , на экране они будут выводиться с одним и тем же размером шрифта:
Пример 2 — Абсолютные и относительные единицы измерения
Разницу между абсолютными и относительными единицами измерения проще понять на примере, когда мы хотим размер шрифта в HTML задать для конкретного элемента. Если мы зададим html { font-size: 200% }, это повлияет только на блоки <р> с размером шрифта, заданным в относительных единицах:
В этом заключается преимущество использования относительных единиц измерения. Таким способом можно создавать адаптивный сайт, просто с помощью изменения размера шрифта элемента html :
Пример 3 — rem и em (и %)
Единицы измерения em (и % ) работают путем вычисления текущего размера шрифта в зависимости от размера шрифта родительского элемента.
Например:
html { font-size: 100% /* =16px */ } body { font-size: 2em; /* =32px */ } p { font-size: 1em; /* =32px */ /* font-size: 0.5em; =16px */ }
Поскольку р является дочерним элементом body , который в свою очередь является дочерним html — параграфы, font-size которых задан с помощью em и процентов, будут иметь два разных размера шрифта HTML :
При использовании Em вы должны принимать во внимание размер шрифта всех родительских элементов. В противном случае это может привести к полной неразберихе.
Решением данной проблемы является rem . Он рассчитывается только на основе размера шрифта элемента html , а не родительского элемента.
Например:
html { font-size: 100% /* =16px */ } body { font-size: 2rem; /* =32px */ } p { font-size: 1rem; /* =16px */ }
Использование rem позволяет сохранить масштабируемость em без влияния иерархии элементов.
Пример 4 — Размеры шрифта на основе ширины окна просмотра
vw — это новая единица измерения CSS3 , которая использует для изменения размера шрифта в HTML ширину окна просмотра. Это позволяет задавать размеры шрифтов в плавающих адаптивных макетах.
Это отличная единица измерения для адаптивного дизайна, но я не являюсь ее поклонником. Она не дает мне достаточного контроля над размером шрифта, который всегда оказывается слишком большим или слишком маленьким.
Мой метод
До этого исследования я использовала для установки размеров шрифта пиксели. Потому что в настоящее время большинство браузеров позволяют пользователю увеличить масштаб, если текст кажется ему слишком маленьким.
Тем не менее, я считаю этот метод ограниченным с точки зрения возможностей масштабирования. При его использовании размеры шрифта выглядят нормально на средних и малых экранах, но не на больших диагоналях. Даже если у пользователей и есть возможность увеличивать масштаб, мы ведь не хотим заставлять их делать это каждый раз.
Поэтому мое решение заключается в использовании в html коде размера шрифта rem (и пикселей в качестве запасного варианта ):
html { font-size: 62.5%; /* для простоты вычислений в качестве базового размера шрифта задается 10 пикселей */ } body { font-size: 16px; font-size: 1.6rem; /* устанавливаем размеры шрифтов по умолчанию, чтобы быть уверенными, что размера в 10 пикселей у нас нигде не будет */ } h1 { font-size: 32px; font-size: 3.2rem; }
Это позволяет мне изменять размеры шрифтов с помощью следующего кода:
@media screen and (min-width: 1280px) { html { font-size: 100%; } }
Этот метод использует пиксели в качестве запасного варианта, поскольку rem не поддерживается в IE8 и ниже. Из-за этого, когда я изменяю размер шрифта HTML для обеспечения масштабируемости, это не затрагивает резервный вариант. Но это не проблема, потому что возможность масштабирования для сверх больших экранов, является необязательной.
Перевод статьи «CSS Font Sizing » был подготовлен дружной командой проекта .