Для стилізації шрифтів та тексту використовують набір CSS властивостей (правил):

                        
.section-title {
    font-family: "Tangerine";
    font-size: 70px;
    font-weight: 700;
    font-style: normal;
    line-height: 1.5;
    text-align: center;
    color: #ffa9bf;
    text-shadow: 2px 2px 4px rgba(12, 12, 12, 0.5);
    border: 4px solid #ffa9bf;
    border-radius: 10px;
    box-shadow: 2px 2px 4px rgba(12, 12, 12, 0.7);
    background-color: #6495ed;
}
                        
                    

Шрифт — це набір друкарських літер, цифр і спеціальних знаків певного стилю для набору тексту.

Шрифти ділять на кілька основних груп (сімейств):

➭ шрифти із зарубками (serif)

➭ шрифти без зарубок (sans-serif)

➭ моноширинні (monospace)

➭ декоративні та рукописні (сursive)

За замовчуванням, якщо жоден інший шрифт не заданий, браузер використовує Times New Roman з сімейства із зарубками (serif).

Властивість font-family задає шрифт тексту елемента:

                        
body {
    font-family: Century;
}
                        
                    

font-family:

Через кому можна перерахувати довільну кількість шрифтів, які браузер, в порядку зліва направо, спробує знайти в системі користувача і застосувати перший знайдений.

                        
body {
    font-family: 'Roboto', 'Verdana', 'Tahoma', sans-serif;
}
                        
                    

Контролює товщину накреслення (жирність, вагу) літер шрифту.

Значення властивості можна задавати набором зарезервованих слів або цифрами від 100 до 900 з кроком 100, які задають ступінь товщини гліфа від тонкого 100 до товстого 900.

                        
.section-title {
    font-weight: 100;
}
                        
                    

Задає розмір шрифту елемента в абсолютних або відносних одиницях виміру.

Поки що подивимось приклад з абсолютними одиницями - px (пікселями):

                        
.section-title {
    font-size: 20px;
}
                        
                    

Встановлює міжрядковий інтервал (інтерлін'яж, висоту рядка) тексту.

За замовчуванням відстань між рядками залежить від виду шрифту і його розмірів, і визначається браузером автоматично.

line-height:

➭ значення (60px)

➭ відсотки (150%)

➭ множник (1.5)

➭ normal (це множник = 1.2)

➭ inherit

Використання множника гарантує рівномірне масштабування міжрядкового інтервалу при зміні розміру тексту.

                        
.section-title {
    font-size: 40px;
    line-height: 60px;
}
                        
                    

line-height:

Визначає інтервал між символами. За замовчуванням значення відстані між символами (normal) встановлюється, виходячи з типу і виду шрифту, його розмірів і налаштувань операційної системи.

Іноді дизайнери встановлюють нестандартне значення міжсимвольної відстані, і саме для цього існує властивість letter-spacing.

letter-spacing:

➭ значення (10px)

➭ normal

➭ inherit

                        
.section-title {
    font-size: 40px;
    letter-spacing: 10px;
}
                        
                    

Контролює тінь тексту, а також встановлює її параметри: зміщення, радіус розмиття та колір.

➭ зміщення по x - зміщення тіні за горизонталлю щодо тексту. Позитивне значення задає зміщення тіні вправо, негативне - вліво.

➭ зміщення по y - зміщення тіні за вертикаллю щодо тексту. Позитивне значення задає зміщення тіні вниз, негативне - вгору.

➭ радіус розмиття - чим більше значення, тим сильніше тінь розмивається і стає світлішою. За замовчуванням, якщо не заданий, буде дорівнювати 0.

➭ колір - задається в будь-якому форматі. За замовчуванням колір тіні збігається з кольором тексту.

                        
.section-title {
    text-shadow: 2px 2px 4px #000000;
}