Уверен, что никому не нужно объяснять почему сайты должны быть гибкими и адаптивными. Все используют проценты и медиа-запросы в своей верстке. Сейчас это уже стандарт.
Но типографика до недавнего времени не была столь гибкой. Все что мы могли - изменять размеры шрифта от брейкпоинта к брейкпоинту. В таком случае мы получали скорее адаптивную типографику нежели отзывчивую. Для каждого медиа-запроса нужно задавать свои значения. Можно конечно использовать компонентный подход с относительными размерами шрифта, что может существенно ускорить процесс редактирования, но принципиально это ничего не меняет. При перемещении компонента в другое место нужно будет опять пробегать по всем медиа запросам и подставлять новые значения.
Но потом появились они - vw , vh , vmin , vmax - единицы измерения, которые базируются на viewport. У нас появился шанс на отзывчивую типографику.
Коротко о viewport-зависимых единицах
100vw равно ширине (100vh - высоте) экрана в пикселях (или будет приведено к другим величинам если использовать в calc() ). 100vmax - равно большему из пары высота/ширина, 100vmin - меньшему. Сразу же начали появляться рецепты использования этих чудо величин в типографике.
Но в таком виде их сложно контролировать. Иногда попадались рецепты с использованием каких-то магических процентных величин. Но меня не устраивал вариант разбираться откуда они, а потом считать или подбирать вручную их для получения нужных мне размеров в моих условиях.
Задача
Хотелось иметь универсальный рецепт, который позволял бы задавать минимальное и максимальное значения для размера шрифта, да еще и привязать эти цифры к конкретным размерам viewport. Например, при ширине экрана в 480px иметь ровно 16px , а при 1280px - 24px .
Путь к решению
Вспомнив курс школьной математики пришел к выводу что моя задача не что иное, как уравнение прямой проходящей через 2 точки. Первая точка - меньшая ширины экрана и размер шрифта на ней, вторая - бОльшая ширина и соответствующий ей размер шрифта.
На оси X - ширина окна браузера, на оси Y - наш размер шрифта. Получаем уравнение с двумя неизвестными:
y - наш неизвестный размер шрифта, x - текущий размер экрана. x 1 - минимальное значение шрифта, x 2 - максимальное значение шрифта. y 1 и y 2 минимальное и максимальные значение ширины экрана соответственно.
А теперь самое интересное: имея CSS функцию calc() и текущее значение вьюпорта благодаря vw можно получить динамический размер шрифта:
font-size: calc((100vw - Vmin)/(Vmax - Vmin) * (Fmax - Fmin) + Fmin);
Эту формулу уже можно использовать в чистом CSS. Только нужно помнить, что при операциях умножения/деления хотя бы один из аргументов должен быть без единиц измерения, а при сложение/вычитании - оба с единицами. Подставив наши значения получим рабочий вариант (обратите внимание на использование единиц измерения):
font-size: calc((100vw - 480px)/(1280 - 480) * (24 - 16) + 16px);
Единицы измерений можно использовать любые, главное, чтобы они совпадали. Тоже самое, только в rem :
font-size: calc((100vw - 30rem)/(80 - 30) * (1.5 - 1) + 1rem);
Используем Sass/SCSS
Имея под рукой такой инструмент как Sass можно большую часть вычислений спрятать от браузера.
Для этого больше подойдет следующее уравнение прямой:
Коеффициенты k и b можно получить из уравнения прямой по двум точкам:
Получим функцию:
@function calcFluidFontSize($f-min, $f-max, $v-min, $v-max) { $k: ($f-max - $f-min)/($v-max - $v-min); $b: $f-min - $k * $v-min; $b: $b * 1px; @return calc(#{$k} * 100vw + #{$b}); } .fluid-font-size { font-size: calcFluidFontSize(16, 48, 480, 1280); }
В случае, если мы хотим иметь возможность использовать не только px но и другие единицы измерений, можно передавать их одним из параметров:
@function calcFluidFontSize($f-min, $f-max, $v-min, $v-max, $units: px) { $k: ($f-max - $f-min)/($v-max - $v-min); $b: $f-min - $k * $v-min; $b: $b + $units; @return calc(#{$k} * 100vw + #{$b}); } .fluid-font-size { font-size: calcFluidFontSize(1, 3, 30, 80, rem); }
Для защиты от неверно введенных данных, можно обрезать единицы измерений при получении данных. Для этого можно использовать функцию strip-unit или взять ее из библиотеки bourbon :
@function strip-unit($number) { @if type-of($number) == "number" and not unitless($number) { @return $number / ($number * 0 + 1); } @return $number; } @function calcFluidFontSize($f-min, $f-max, $w-min, $w-max, $units: px) { $f-min: strip-unit($f-min); $f-max: strip-unit($f-max); $w-min: strip-unit($w-min); $w-max: strip-unit($w-max); $k: ($f-max - $f-min)/($w-max - $w-min); $b: $f-min - $k * $w-min; $b: $b + $units; @return calc(#{$k} * 100vw + #{$b}); }
Расширяем возможности нашей функции
Функцию для вычисления размера шрифта мы имеем. Теперь на ее основе можно создать миксин, который можно расширять как угодно.
Например, мы хотим фолбек для старых браузеров:
@mixin fluidFontSize($f-min, $f-max, $w-min, $w-max, $fallback: false) { @if ($fallback) { font-size: $fallback; } font-size: calcFluidFontSize($f-min, $f-max, $w-min, $w-max, px); } .fluid-font-size { @include fluidFontSize(16px, 24px, 480px, 1280px, 18px); }
Теперь можно в качестве фолбека передавать оптимальный размер шрифта на случай, когда vw не поддерживается.
Можно ограничить размеры шрифта нашим минимальным и/или максимальным значением:
@mixin fluidFontSize($f-min, $f-max, $w-min, $w-max, $fallback: false) { font-size: $f-min; @media (min-width: $w-min) { @if ($fallback) { font-size: $fallback; } font-size: calcFluidFontSize($f-min, $f-max, $w-min, $w-max, px); } @media (min-width: $w-max) { font-size: $f-max; } } .fluid-font-size { @include fluidFontSize(16px, 24px, 480px, 1280px, 18px); }
Теперь при ширине экрана меньше 480px шрифт всегда будет 16px , после 480 он станет резиновым, а после 1280px всегда будет 24px .
Результат
Мы получили базовую функцию, которая выполняет весь основной функционал:
@function calcFluidFontSize($f-min, $f-max, $w-min, $w-max, $units: px) { $f-min: strip-unit($f-min); $f-max: strip-unit($f-max); $w-min: strip-unit($w-min); $w-max: strip-unit($w-max); $k: ($f-max - $f-min)/($w-max - $w-min); $b: $f-min - $k * $w-min; $b: $b + $units; @return calc(#{$k} * 100vw + #{$b}); }
Для ее расширения использовались миксины, с помощью которых можно сделать фоллбеки, ограничения, конвертацию единиц измерения и многое другое. Поиграться со всем этим можно на codepen . Если Вы не хотите использовать Sass вы найдете способ вычислений на чистом CSS.
Форматирование текста включает набор операций изменения шрифтов и их характеристик на странице документа. Шрифт представляет собой набор букв, цифр, символов, знаков пунктуации определенного вида. Набор шрифтов, которые можно применять при создании документа, зависит от типа принтера и шрифтов, установленных на компьютере.
Использование в одном документе разного шрифтового оформления - самый распространенный прием форматирования. Средства шрифтового оформления применяются для следующих целей:
- Выделения текста для акцентирования отдельных фраз, слов, цитат и т. д.
- Оформления заголовков и подписей
- Набора специального текста (формул, индексов, примечаний).
Внешний вид текста зависит не только от выбранного шрифта, но и от его размера. Обычно размер шрифта измеряется в пунктах (1 пункт (пт) = 0,376 мм). В документах, как правило, применяется размер основного шрифта 10-12 пт, для заголовков размер увеличивается, для примечаний и ссылок уменьшается.
Эти операции реализуются с помощью команды Шрифт из меню Формат и задания соответствующих установок.
Х арактеристики символов:
шрифт (Arial, Times New Roman, Peterburg).
Размер (8,10,14).
Положение на строке (м 2, x i) .
Начертание шрифта (Обычный, Полужирный,
Курсив, Полужирный курсив).Регистр (строчные, ПРОПИСНЫЕ).
Интервал (обычный, уплотненный, р а з р е же н н ы и)
Для изменения характеристик текста можно воспользоваться командой Шрифт из меню Формат (Format, Font) (рис. 35) или соответствующими кнопками панели
Форматирование. 
Рис. 35.
Изменение характеристик шрифта1. Выделите текстовый объект (символ, слово, предложение, строку и т. д.).
2. Выберите команду
Шрифт из меню Формат (Format, Font).3. Выберите закладку Шрифт (Font).
4. Задайте характеристики, как показано на экране.
Изменение интервалов шрифта и смещение текста осуществляется при выборе закладки Интервал (Character Spacing) (рис. 36). Разреженный интервал может использоваться для выделения некоторого слова в тексте, смещение текста применяется для создания подстрочника в заполняемой форме.
Рис. 36. Закладка Интервал окна Шрифт
Таблица 6. Значения полей окна Шрифт (закладка Интервал)
Отмена действий
Word позволяет отменить сделанные операции. Команда Отменить (Undo) в меню Правка (Edit) контекстно зависима; когда пользователь набирает или редактирует текст, будет предложена команда, соответствующая последней выполняемой операции.
На Стандартной панели для отмены последней команды следует нажать кнопку Отменить (Undo) или отменить несколько команд, выбрав их из списка.
Выбор команды Отменить (Undo) во второй раз будет изменять команду на Ве рнуть (Redo) и т. д.
Для отмены последнего действия нажмите кнопку "Отменить" на, "Стандартной" панели инструментов. Для восстановления отмененной операции нажмите кнопку "Вернуть" на "Стандартной" панели инструментов.
Действия, которые были применены к отдельным числовым форматам в тексте, могут быть повторены посредством использования команды Повторить (Repeat).
Начиная знакомство с таинством создания цифровых шрифтов, важно разобраться с матчастью. В буквальном смысле слова. Для плодотворной работы шрифтовой дизайнер должен понимать, как измеряются шрифты и в каких единицах.
Давайте разбираться.
А то знаний маловато!
Физика и лирика
Когда–то давным–давно буквы отливались на металических или деревянных брусках, и их размеры были довольно статичными. Высота литерной площадки называлась кеглем, а измеряли ее в пунктах (в СНГ 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, а также формулу зависимости между ними, можно с требуемой точностью управлять метриками при разработке цифрового шрифта.
Существует множество способов настройки размера шрифта 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. Будьте осторожны, если указываете в нем величину символов для списков, поскольку из-за большой вложенности знаки могут оказаться нечитаемыми.
