Расстояние между буквами и регистр
Популярный вид маленьких меток: крошечные заглавные буквы с небольшим дополнительным расстоянием между ними. Мелкие заглавные буквы читаются легче, когда не теснятся:
Игривый Игривый Игривый
Класс uppercase вы знаете из предыдущего урока. Вот все классы для text-transform:
| Класс | CSS |
|---|---|
uppercase | text-transform: uppercase |
lowercase | text-transform: lowercase |
capitalize | text-transform: capitalize |
normal-case | text-transform: none |
Расстояние между буквами (letter-spacing) задают классы tracking-; трекинг (tracking) — так называют его в типографии:
| Класс | letter-spacing |
|---|---|
tracking-tighter | -0.05em |
tracking-tight | -0.025em |
tracking-normal | 0 |
tracking-wide | 0.025em |
tracking-wider | 0.05em |
tracking-widest | 0.1em |
Единица em похожа на rem, но отсчитывается от размера шрифта самого элемента: 1em — это собственный размер шрифта элемента. Поэтому расстояние растёт вместе с текстом: в тексте размером 12 пикселей tracking-wide добавляет после каждой буквы 0,3 пикселя, а в тексте размером 48 пикселей — 1,2 пикселя. Отрицательные значения сближают буквы; крупные заголовки часто лучше выглядят с tracking-tight.
Задание
- 1
Добавьте бейджу «Игривый» классы
text-xsиuppercase. - 2
Добавьте бейджу класс
tracking-wide.