🏠 Главная
/ 📐 CSS Layout
/ Полное руководство по CSS Typography

🔤 Полное руководство по CSS Typography

⏱️ 12 мин чтения 📊 Начинающий 👁️ 16 просмотров 📑 8 разделов

CSS Typography — это искусство оформления текста на веб-страницах. В этом руководстве вы изучите все аспекты работы с текстом в CSS.

Typography включает:

Выбор и подключение шрифтов
Размеры и масштабы
Межстрочные интервалы
Выравнивание и отступы
Декоративные эффекты

Что такое CSS Typography?

CSS Typography — это набор свойств для управления отображением текста на веб-страницах.

Основные аспекты

Шрифты — семейство, размер, вес, стиль
Текст — выравнивание, декорация, трансформация
Интервалы — межстрочные, межбуквенные, межсловные

font-family: Подключение шрифтов

font-family задаёт семейство шрифтов для элемента.

Типы шрифтов

Serif — с засечками (Times New Roman, Georgia)
Sans-serif — без засечек (Arial, Helvetica)
Monospace — моноширинные (Courier New, Consolas)
Cursive — рукописные
Fantasy — декоративные

👁️ Разные шрифты

Serif: Georgia

Sans-serif: Arial

Monospace: Courier New

                    Разные шрифты
                    CSS
                

.serif { font-family: Georgia, serif; }
.sans-serif { font-family: Arial, sans-serif; }
.monospace { font-family: 'Courier New', monospace; }

font-size: Размер шрифта

font-size задаёт размер шрифта.

Единицы измерения

px — пиксели (абсолютная)
em — относительно родителя
rem — относительно root (html)
% — процент от родителя
vw/vh — относительно viewport

👁️ Размеры шрифтов

24px — пиксели

1.5rem — относительно root

1.2em — относительно родителя

120% — процент

                    Размеры шрифтов
                    CSS
                

.px { font-size: 24px; }
.rem { font-size: 1.5rem; }
.em { font-size: 1.2em; }
.percent { font-size: 120%; }

font-weight: Вес шрифта

font-weight задаёт толщину (вес) шрифта.

Значения

normal или 400 — обычный
bold или 700 — жирный
100-900 — числовые значения
lighter / bolder — относительные

👁️ Вес шрифта

font-weight: 300 (Light)

font-weight: 400 (Normal)

font-weight: 700 (Bold)

font-weight: 900 (Black)

                    Вес шрифта
                    CSS
                

.light { font-weight: 300; }
.normal { font-weight: 400; }
.bold { font-weight: 700; }
.black { font-weight: 900; }

line-height: Межстрочный интервал

line-height задаёт высоту строки (межстрочный интервал).

Значения

normal — примерно 1.2
1.5 — безразмерное число (рекомендуется)
24px — абсолютное значение
150% — процент от font-size

👁️ Межстрочные интервалы

line-height: 1
Строка 1
Строка 2
Строка 3

line-height: 1.5
Строка 1
Строка 2
Строка 3

line-height: 2
Строка 1
Строка 2
Строка 3

                    Межстрочные интервалы
                    CSS
                

.tight { line-height: 1; }
.normal { line-height: 1.5; }
.loose { line-height: 2; }

text-align: Выравнивание текста

text-align задаёт горизонтальное выравнивание текста.

Значения

left — по левому краю
right — по правому краю
center — по центру
justify — по ширине (растягивает)

👁️ Выравнивание текста

text-align: left
Текст по левому краю

text-align: center
Текст по центру

text-align: right
Текст по правому краю

text-align: justify
Текст растягивается по ширине контейнера, создавая ровные края с обеих сторон

                    Выравнивание текста
                    CSS
                

.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }
.justify { text-align: justify; }

text-decoration и text-transform

text-decoration добавляет декоративные линии.

underline — подчёркивание
overline — надчёркивание
line-through — зачёркивание
none — без декорации

text-transform изменяет регистр текста.

uppercase — ВЕРХНИЙ РЕГИСТР
lowercase — нижний регистр
capitalize — Каждое Слово С Заглавной

👁️ Декорация текста

text-decoration: underline

text-decoration: overline

text-decoration: line-through

                    Декорация текста
                    CSS
                

.underline { text-decoration: underline; }
.overline { text-decoration: overline; }
.line-through { text-decoration: line-through; }

👁️ Трансформация регистра

text-transform: uppercase

text-transform: lowercase

text-transform: capitalize

                    Трансформация регистра
                    CSS
                

.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }

letter-spacing и word-spacing

letter-spacing задаёт расстояние между буквами.

word-spacing задаёт расстояние между словами.

Оба свойства принимают значения в px, em, rem и других единицах.

👁️ Межбуквенные интервалы

letter-spacing: normal

letter-spacing: 2px

letter-spacing: 5px

                    Межбуквенные интервалы
                    CSS
                

.normal { letter-spacing: normal; }
.wide { letter-spacing: 2px; }
.very-wide { letter-spacing: 5px; }