От чего зависит номер или размер шрифта. Единицы измерения размеров шрифтов CSS. Проценты: самый запутанный вариант
Существует множество способов настройки размера шрифта CSS. Значительная часть верстальщиков по-прежнему пользуется пикселями, но это не совсем верный подход. Пиксель - слишком простой вариант, который не всегда пригоден для верстки адаптивных страниц. Рассмотрим все существующие методы изменения размера шрифта CSS.
Что вообще такое этот «размер шрифта»?
Есть мнение, что под размером понимается величина самого большого символа указанного шрифта. Это не так. На самом деле величина встроена в шрифт, и померить ее вручную, линейкой, вряд ли получится. Обычно размер чуть больше, чем расстояние от верхней части самой большой буквы до нижней части самой маленькой. Это делается для того, чтобы в заданном пространстве поместилось любое сочетание символов. Также важно указывать параметр «размер строки» (line-height), иначе буквы p, q и им подобные могут выйти за пределы.
Пиксели
Самый распространенный вариант. Устанавливается следующим образом:
font-size: 16px;
Преимущество у пикселей только одно - никаких сложностей с величиной. Ничего не надо подсчитывать. Какой размер указан, такими и будут символы на экране. Недостаток - трудности с адаптивным размером шрифта CSS. Не получится установить соотношения между разными размерами.
К числу «пиксельных» можно отнести устаревшие единицы измерения. К ним относятся pc, cm, mm и pt. Так, mm - это миллиметр, cm - сантиметр. Pt и pc - типографский пункт и типографская пика. Почему эти способы устарели? Потому что они не были «самостоятельными» - браузер автоматически пересчитывал значения в пиксели. Соответственно, проблемы были такими же, как и в случае с px. Кстати, в одном cm с точки зрения браузера содержится 38px.
Em: величина зависит от размера шрифта родительского элемента
Все просто. Допустим, у вас есть div, для которого задан font-size 16px. В нем находится еще один div, для которого размер шрифта CSS установлен как 2em. Соответственно, 1em - это будет 16px (т. е. размер шрифта родительского элемента), а 2em - вдвое больше, т. е. 32px.
В родительском элементе можно также задавать величину в em. В таком случае она будет зависеть от базового размера, заданного в body или html. Em - это относительный размер шрифта CSS, который будет увеличиваться и уменьшаться вместе с величиной знаков родительского элемента. Это удобно - чтобы изменить величину в большом количестве мест, надо только поменять параметры родителя.
Для профессионалов: ex и ch
Практически не используются обычными верстальщиками и frontend-разработчиками. Ex - это величина символа «Х», а ch - символа «0». В выбранном шрифте может не иметься таких знаков, но параметры все же можно использовать. Доподлинно неизвестно, для каких случаев лучше всего подходят такие размеры. Попробуйте поэкспериментировать - может, вам так будет удобнее? Однако помните, что ex и ch являются «условными» единицами, так что точная настройка параметров будет затруднительной.
Проценты: самый запутанный вариант
Как задать размер шрифта в CSS в процентах? Казалось бы, все просто - нужно только указать желаемый параметр и поставить после него символ «%». Но тут в дело вступает важный вопрос: «Процентом от чего будет являться заданный размер?»
В большинстве случаев параметр высчитывается в зависимости от величины родителя, но не всегда. Если задать свойство margin-left, процент будет вычисляться в зависимости от ширины родительского блока. Если установить line-height, то процент будет браться в зависимости от текущего размера шрифта.
Настройка параметров в процентах требует тщательных экспериментов. Будьте осторожны с этой единицей измерения, поскольку она легко может изменить внешний вид вашей верстки.
Rem: простая и универсальная единица
Выше перечислено множество способов настройки размеров шрифта в CSS, но ни один из них не является действительно удобным. Для упрощения работы был придуман параметр rem, который вычисляется в зависимости от заданной для тега html величины.
Это проще, чем кажется на первый взгляд. Например, для тега html, в который обернут весь контент страницы, вы задали в CSS font-size 16px. Соответственно, 1rem теперь будет являться 16px. 2rem - это 32px, и т. д. Можно использовать любые пропорции: 0,2rem, 1,1rem, 100rem… Браузер аккуратно пересчитает параметры.
В html можно вообще ничего не трогать, поскольку браузеры сами устанавливают для обертки определенный размер шрифта. Но для более тщательной настройки лучше все-таки переопределить показатель. Главное достоинство rem в том, что можно легко масштабировать шрифты в определенном месте, не влияя на другие элементы. Однако помните, что старые браузеры (IE ниже 9-й версии) не поддерживают этот показатель.
Vw и vh: экзотические параметры
Новейшие единицы измерения, созданные для мобильных устройств. Vw - это 1 % от ширины окна, на котором пользователь просматривает ваш сайт. Vh - 1 % от его высоты. Величина символов будет автоматически масштабироваться в зависимости от экрана устройства посетителя. Чтобы выбрать подходящий размер во время верстки, увеличивайте и уменьшайте размер экрана.
Подводим итоги
Уже давно можно не задавать размеры шрифтов CSS только через px. Гораздо удобнее использовать rem, vh и vw (особенно при адаптивном дизайне), а также em. Каждый из этих вариантов имеет свои достоинства и недостатки, так что перед использованием проверьте несколько методов. Современные верстальщики часто прибегают к rem, поскольку это один из самых простых способов сменить размер шрифта. Однако у него есть недостаток - компоненты становятся менее модульными.
- если свойства надо масштабировать относительно font-size, лучшим выбором станет em;
- в остальных случаях рекомендуется применять rem.
Em часто применяется для установки размеров padding и margin. Будьте осторожны, если указываете в нем величину символов для списков, поскольку из-за большой вложенности знаки могут оказаться нечитаемыми.
Размер шрифта на сайте можно задать как при помощи HTML, так и с помощью CSS. Рассмотрим оба варианта.
Задание размера шрифта с помощью HTML
Размер шрифта на странице можно определить при помощи тега font HTML. В статье мы уже рассматривали тег font и его атрибуты. Одним из атрибутов этого тега является size , который и позволяет установить размер шрифта. Применяется он следующим образом:
Конструктор сайтов "Нубекс"
Size может принимать значения от 1 до 7 (по умолчанию равен 3, что соответствует 13,5 пунктам для шрифта Times New Roman). Другой вариант задания атрибута - “+1” или “-1”. Это означает, что размер будет изменен относительно базового на 1 пункт больше или меньше, соответственно.
Приведенный способ довольно прост в использовании и незаменим при необходимости изменения размера шрифта небольшого куска текста. В остальных случаях рекомендуется определять стиль текста с помощью CSS.
Устанавливаем размер шрифта при помощи CSS
В CSS для изменения размера шрифта применяется свойство font-size , которое применяется следующим образом:
В приведенном примере размер шрифта устанавливается в пикселях. Но существуют и другие способы задания размера:
- large, small, medium - задают абсолютный размер (маленький, средний, большой). Также могут применяться значения экстра-маленький (x-small, xx-small), экстра-большой (x-large, xx-large).
- larger, smaller - задают относительный размер (меньше или больше относительно родительского элемента).
- 100% - задается относительный размер (в процентах относительно родительского). Например: h1 { font-size: 180%; } Это означает, что размер тега H1 будет составлять 180% от базового размера шрифта.
- Другие варианты задания относительного размера:
- 5ex - означает, что размер составит 5 высот буквы x от базового шрифта;
- 14pt - 14 пунктов;
- 22px - 22 пикселя;
- 1vw - 1% от ширины окна браузера;
- 1vh - 1% от высоты окна браузера;
Начиная знакомство с таинством создания цифровых шрифтов, важно разобраться с матчастью. В буквальном смысле слова. Для плодотворной работы шрифтовой дизайнер должен понимать, как измеряются шрифты и в каких единицах.
Давайте разбираться.
А то знаний маловато!
Физика и лирика
Когда–то давным–давно буквы отливались на металических или деревянных брусках, и их размеры были довольно статичными. Высота литерной площадки называлась кеглем, а измеряли ее в пунктах (в СНГ 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-верстке далее.
Что такое шрифт?
Шрифт - это набор изображений символов алфавита, цифр, исполненных в одном формате, стиле, дизайне, иначе говоря - это аналог почерка. Первые шрифты для машин создавались на основе официального "ручного" почерка. Рукописный полуустав лежит в основе многих кириллических шрифтов, а стало основой для латинских стилей символов.
Абсолютно все компьютерные "почерки" различаются друг от друга всего по трем параметрам: размер, гарнитура, начертание шрифта.
Гарнитура шрифта
Самый важный параметр в типографике. Гарнитура шрифтов - это набор в одном или нескольких размерах, отличающийся стилевым единством изображения алфавитно-цифровых, пунктуационных и спецсимволов. Нередки гарнитуры, состоящие только из математических значений или специальных знаков, например картографических.
Понятия "гарнитура" и "шрифт" достаточно часто путают из-за схожести их предмета, особенно в текстовых редакторах. Однако первое намного шире, ведь гарнитура шрифта определяет стилистику всего текста, а сам он может ограничиваться единством исполнения только, например, курсивного начертания.
Многие гарнитуры известны пользователям ПК: Courier New, Calibri, Arial, Times New Roman. Все названия пишутся латинскими буквами, даже если гарнитура шрифтов создана российскими разработчиками, используется ее транслитерация или перевод на английский.
Разновидности гарнитур
Гарнитура шрифтов в основном разделяется на группы по данному классификатору:
- Рукописные. Для этой группы характерна схожесть с рукописным текстом, начертанным кистью или пером. Это могут быть как раздельно, так и слитно написанные символы.
- Рубленые. Иное название - sans serif (франц. "без"). Используются буквенные символы без засечек. Это один из самых удобных шрифтов как для маленьких надписей, так и для крупных выделенных заголовков - они приятны глазу, легко читаются. Используют такой четкий и разборчивый шрифт-гротеск и для маркировки, надписей на этикетках, "вывороченного" текста (обращенного по отношению к основному тону страницы).
- Антиква - с засечками (serif). Производились экспериментальные исследования, установившие, что эти шрифты наиболее удобны для скорочтения "сплошных" текстов - засечки автоматически переводят взгляд от одного символа к другому, не дают буквам сливаться. Однако для заголовков, выделений они не хороши - кажется, что буквы "теснятся", создается ощущение беспорядочности. Антиква характерна своим традиционным официальным внешним видом, поэтому широко используется в соответствующих текстах.
- Декоративные. Эта гарнитура шрифтов, иначе называемая акцидентной, создана, чтобы передать и какой-то невербальный смысл написанного. Сюда относятся самые причудливые и необычные стили символов. Однако в тексте ими не следует увлекаться - акцидентным шрифтом лучше украсить только демонстрационный подзаголовок.
- Символьные. Эти гарнитуры не содержат в себе стандартных цифр, букв, знаков пунктуации - тут только специальные, нужные для тематических текстов символы - картографические, арифметические, рамки и т. д.
Размер шрифта
Гарнитура - первый параметр текста, второй же - размер. Иначе его именуют
Этот параметр создан для облегчения чтения текста: крупными символами выделяют заголовки, важную информацию, второстепенное (сноски, примечания) набирают более мелким шрифтом.
В текстовых редакторах мы привыкли к стандартным размерам: 8, 11, 12, 14, 18, 24 и т. д. Каждая из этих величин обозначает общую высоту символов гарнитуры от самого высокого до самого низкого (к примеру от "Д" до "р"). Измеряется она в особых единицах - типографских пунктах. Один punkt (немц. "точка") равен 0,3528 мм.
Начертание шрифта
Заключительным параметром являются насыщенность и стиль - начертание символов. Гарнитура шрифтов в основном набирается "прямым" стилем или с небольшим наклоном - курсивом.
Насыщенность - это толщина начертания символа. Кроме стандартной, есть еще "толстые" разновидности - жирный, полужирный. Существует и более детальное разделение на сверхсветлую, светлую, жирную и гипержирную насыщенность.
Стили и насыщенности перекликаются между собой, оттого можно встретить полужирный и жирный курсив.
Изменение параметров шрифта
Изменить гарнитуру шрифта и схожие с ней параметры в текстовом приложении MS Word можно одним из трех удобных способов:
- Через панель инструментов. Она располагается на главной рабочей вкладке редактора непосредственно над листом текста. С ее помощью можно не только изменить гарнитуру (имя шрифта), задать нужный кегль, стиль, насыщенность текста, но и выбрать необходимый цвет символов, выделить важные моменты подчеркиванием.
- Окно-диалог для форматирования. В "Ворде" вызывается правой клавишей мыши или сочетанием "горячих кнопок" CTRL+D. Таким способом можно вызвать диалог и в программе "Блокнот". Он позволяет также задать индивидуальные параметры текста: гарнитуру, размер, начертание.
- Использование "горячих" сочетаний кнопок. При вызове "Справки" или нажатия на ссылку "О программе" можно найти раздел, где раскрыт полный их список. Чтобы воспользоваться таким методом, нужно сначала выделить текст, а затем нажать нужное сочетание. Для Word ходовыми являются: CTRL+I - курсив, CTRL+B - полужирный.
Для HTML-редактирования процедура изменения гарнитуры выглядит несколько сложнее:
- Первым делом надо выделить тот текст, гарнитура шрифтов которого должна быть изменена.
- Далее следует поставить тег
Рис.20. Основные параметры шрифта: а) прямой шрифт; б) наклонный шрифт.
Стандарт устанавливает четыре типа шрифта: а) тип А без наклона (d =1/14 h ); б) тип А с наклоном около 75 0 (d =1/14 h ); в) тип Б без наклона (d =1/10 h ); г) тип Б с наклоном около 75 0 (d =1/10 h ). Отличие между типами шрифта заключается не в конструкции букв и цифр, а только в величине d – толщине линий шрифта. Параметры шрифтов типа А и типа Б приведены в таблицах 3 и 4.
Таблица 3. Параметры шрифта типа А
Таблица 4. Параметры шрифта типа Б
Вспомогательная сетка - сетка, образованная вспомогательными линиями, в которые вписываются буквы. Шаг вспомогательных линий сетки определяется в зависимости от толщины линий шрифта d (рис.21).
Рис.21. Вспомогательная сетка для прямого и наклонного шрифтов.
Примеры начертания шрифта русского алфавита типа А приведены на рис.22, 23; размеры шрифта даны в таблице 5. Пример начертания арабских и римских цифр приведен на рис.24.
Рис.22. Шрифт типа А с наклоном.
Рис.23. Шрифт типа А без наклона.
Рис.24. Шрифт типа А: арабские и римские цифры.
Таблица 5. Параметры шрифта типа А
Примечания:
1. Расстояние а между буквами, соседние линии которых не параллельны между собой (например, ГА, АТ), может быть уменьшено наполовину, т.е. на толщинуd линии шрифта.
2. Вертикальные отростки у букв Д, Ц и Щ идут за счет промежутков между строками; боковые отростки у букв Ц и Щ идут за счет промежутка между буквами.
3. Минимальным расстоянием между словами, разделенными знаком препинания, является расстояние между знаками препинания и следующим за ним словом.
4. Шрифт без наклона употребляют сравнительно редко, главным образом для наименований, заголовков, обозначений в основной надписи, на поле чертежа и т.д.
1.2. Основные требования к оформлению графических работ
Все графические задания должны быть выполнены на стандартных листах чертежной бумаги (А3 или А4) и иметь рамку поля чертежа и основную надпись по форме № 1 ГОСТ 2.104-68 (кроме задания «Титульный лист»). Рамка поля чертежа выполняется сплошной основной линией толщиной S на расстоянии от внешних границ листа: справа, снизу и сверху – 5мм, слева – 20 мм. Основная надпись всегда располагается в правом нижнем углу листа. Поле величиной 20 мм с левой стороны предназначается для подшивки и брошюровки чертежей. Основная надпись выполняется сплошными основными и тонкими линиями. Размеры, расположение и содержание основной надписи представлены на рисунке 25.
Рисунок 25. Размеры таблицы основной надписи по форме 1.
В графах основной надписи и в дополнительных графах указывают:
– в графе 1 – наименование изделия по ГОСТ 2.109-73;
– графе 2 – обозначение документа по ГОСТ 2.101-80.;
– в графе 3 – условное обозначение материала (эта графа заполняется только на чертежах деталей);
– в графе 4 – литеру, присвоенную данному документу по ГОСТ 2.103-68 (графу заполняют последовательно, начиная с крайней левой клетки. Для учебных чертежей используем литеру "У");
– в графе 5 – массу изделия в килограммах по ГОСТ 2.109-73;
– в графе 6 – масштаб (проставляется в соответствии с ГОСТ 2.302-68);
– в графе 7 – порядковый номер листа документа, если чертеж выполнен на нескольких листах. На документах, состоящих из одного листа, графу не заполняют;
– в графе 8 – общее количество листов документа. Графу заполняют только на первом листе;
– в графе 9 – наименование, различительный индекс или шифр предприятия, выпустившего документ, для заданий по инженерной графике – ВТУЗ, гр. ХХХХ;
– в графах 10 – характер работы, выполняемой лицом, подписывающим документ;
– в графах 11 – фамилии и инициалы лиц, подписывающих документ:
– в графах 12 – подписи лиц, фамилии которых указаны в графах 11;
– в графе 13 – дата подписания документа;
– в графах 14–18 – графы таблицы изменений, вносимых в документ в соответствии с ГОСТ 2.503-68, на учебных чертежах не заполняют;
– в графе 19 – обозначение документа (см. графу 2), повернутое на 180 0 для формата А4 и для форматов больше А4 при расположении основной надписи вдоль длинной стороны листа и на 90 0 для форматов больше А4 при расположении основной надписи вдоль короткой стороны листа.
