Пошук уроків, статей та іншого контенту
Поєднайте кольори, шрифти, інтервали та вирівнювання, щоб оформити цілісний текстовий блок за макетом.
Потрібно оформити текстовий блок так, щоб усі його елементи утворювали цілісну композицію:
заголовок мав виразний розмір і насиченість;
основний текст легко читався;
абзаци мали правильні інтервали;
текст був вирівняний відповідно до макета;
кольори створювали зрозумілу ієрархію;
блок мав внутрішні відступи та акуратний вигляд на різних екранах.
Для цього поєднаємо властивості font-family, font-size, font-weight, line-height, letter-spacing, color, text-align, margin, padding і background-color.
Спочатку створимо семантичну HTML-структуру. Нехай блок містить надзаголовок, заголовок, опис і кнопку:
<article class="text-card">
<p class="text-card__eyebrow">Поради для розробників</p>
<h1 class="text-card__title">
Як створювати зручні інтерфейси
</h1>
<p class="text-card__description">
Хороший інтерфейс допомагає користувачеві швидко зрозуміти
призначення сторінки та виконати потрібну дію без зайвих зусиль.
</p>
<a class="text-card__link" href="#">
Дізнатися більше
</a>
</article>Для кожного елемента використано окремий клас. Це дає змогу незалежно налаштувати його зовнішній вигляд і не залежати від типу HTML-елемента.
Властивість color визначає колір тексту:
.text-card__title {
color: #172033;
}
.text-card__description {
color: #596579;
}Зазвичай у текстовому блоці використовують кілька відтінків:
найтемніший — для основного заголовка;
менш контрастний — для опису;
акцентний — для посилань або важливих деталей.
Не варто використовувати чистий чорний #000000 для всього тексту. Темно-сірий відтінок часто виглядає м’якше, але залишається достатньо контрастним.
Властивість font-family задає сімейство шрифту:
.text-card {
font-family: Arial, sans-serif;
}Якщо перший шрифт недоступний, браузер використає наступний. Останнє значення sans-serif є запасним варіантом.
Шрифт можна задати для всього блоку, а окремим елементам змінити лише потрібні характеристики:
.text-card__title {
font-size: 40px;
font-weight: 700;
}
.text-card__description {
font-size: 18px;
font-weight: 400;
}font-size відповідає за розмір тексту, а font-weight — за його насиченість:
.text-card__eyebrow {
font-size: 14px;
font-weight: 700;
}
.text-card__title {
font-size: 40px;
font-weight: 700;
}
.text-card__description {
font-size: 18px;
font-weight: 400;
}Насиченість задають числовими значеннями:
400 — звичайний текст;
500 — середня насиченість;
600 — напівжирний текст;
700 — жирний текст.
Підтримка конкретного значення залежить від шрифту. Якщо шрифт не має окремого накреслення, браузер може використати найближче доступне.
Властивість line-height визначає відстань між рядками тексту:
.text-card__description {
line-height: 1.6;
}Значення без одиниці, наприклад 1.6, є множником відносно поточного font-size. Для тексту розміром 18px висота рядка буде приблизно 28.8px.
Занадто малий line-height ускладнює читання, а занадто великий розриває текстовий блок. Для основного тексту часто використовують значення від 1.4 до 1.7.
letter-spacing змінює відстань між символами:
.text-card__eyebrow {
letter-spacing: 0.08em;
text-transform: uppercase;
}Невелике збільшення інтервалу добре підходить для коротких надзаголовків або написів кнопок. Для звичайного довгого тексту цю властивість краще використовувати обережно.
Внутрішній простір блоку задають через padding:
.text-card {
padding: 40px;
}padding створює відстань між межами елемента та його вмістом.
Зовнішні відступи задають через margin. Наприклад:
.text-card__title {
margin: 12px 0 20px;
}Це означає:
12px зверху;
0 праворуч і ліворуч;
20px знизу.
Для елементів усередині одного блоку зручно використовувати gap разом із Flexbox:
.text-card {
display: flex;
flex-direction: column;
gap: 20px;
}У такому разі відстань між усіма дочірніми елементами буде однаковою. Однак для заголовка або окремого елемента може знадобитися інший інтервал, який можна змінити через margin.
Властивість text-align визначає горизонтальне вирівнювання:
.text-card {
text-align: center;
}Доступні основні значення:
left — за лівим краєм;
right — за правим краєм;
center — по центру;
justify — за шириною.
Для коротких промоційних блоків часто використовують center. Для довгих описів зазвичай зручніше вирівнювання за лівим краєм:
.text-card__description {
text-align: left;
}Важливо, що text-align впливає на текстовий вміст, але не переміщує сам HTML-елемент у контейнері.
Нижче наведено повний приклад HTML-документа. Його можна зберегти у файл index.html і відкрити в браузері.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Оформлення текстового блоку</title>
<style>
/* Враховуємо padding і border у загальній ширині елементів */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Базове оформлення сторінки */
body {
min-height: 100vh;
margin: 0;
padding: 32px 16px;
display: grid;
place-items: center;
background-color: #eef2f7;
color: #172033;
font-family: Arial, sans-serif;
}
/* Основний текстовий блок */
.text-card {
width: min(100%, 680px);
padding: 48px;
border: 1px solid #dce3ed;
border-radius: 20px;
background-color: #ffffff;
box-shadow: 0 16px 40px rgba(23, 32, 51, 0.08);
text-align: left;
}
/* Короткий акцентний напис над заголовком */
.text-card__eyebrow {
margin: 0 0 14px;
color: #3974d8;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.08em;
line-height: 1.4;
text-transform: uppercase;
}
/* Головний заголовок */
.text-card__title {
max-width: 560px;
margin: 0;
color: #172033;
font-size: 40px;
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.02em;
}
/* Основний опис */
.text-card__description {
max-width: 560px;
margin: 24px 0 0;
color: #596579;
font-size: 18px;
font-weight: 400;
line-height: 1.6;
}
/* Посилання, оформлене як кнопка */
.text-card__link {
display: inline-block;
margin-top: 32px;
padding: 13px 22px;
border-radius: 8px;
background-color: #3974d8;
color: #ffffff;
font-size: 16px;
font-weight: 700;
line-height: 1.4;
text-decoration: none;
}
.text-card__link:hover {
background-color: #2d5fb5;
}
/* Зменшуємо відступи та розмір заголовка на вузьких екранах */
@media (max-width: 560px) {
.text-card {
padding: 32px 24px;
}
.text-card__title {
font-size: 32px;
}
.text-card__description {
font-size: 16px;
}
}
</style>
</head>
<body>
<article class="text-card">
<p class="text-card__eyebrow">Поради для розробників</p>
<h1 class="text-card__title">
Як створювати зручні інтерфейси
</h1>
<p class="text-card__description">
Хороший інтерфейс допомагає користувачеві швидко зрозуміти
призначення сторінки та виконати потрібну дію без зайвих зусиль.
</p>
<a class="text-card__link" href="#">
Дізнатися більше
</a>
</article>
</body>
</html>Елементи мають різні розміри, кольори й насиченість:
надзаголовок привертає увагу акцентним кольором;
заголовок є найбільшим і найтемнішим;
опис має менший розмір і світліший колір;
посилання виділене фоновим кольором як основна дія.
Так користувач одразу розуміє, що читати спочатку, а що є додатковою інформацією.
Для заголовка й опису задано:
max-width: 560px;Обмеження ширини запобігає утворенню надто довгих рядків. Якщо рядок займає всю ширину великого блока, його складніше читати, особливо в описовому тексті.
margin і paddingУ прикладі:
padding у .text-card створює внутрішній простір навколо всього вмісту;
margin у надзаголовка, опису й посилання задає відстані між елементами;
border і box-shadow візуально відокремлюють картку від фону сторінки.
Ці властивості відповідають за різні типи відстаней, тому їх не слід бездумно замінювати одна одною.
Навіть якщо блок виглядає добре на широкому екрані, великий font-size і padding можуть створити проблеми на смартфоні.
Для адаптації можна:
зменшити внутрішні відступи;
зменшити розмір заголовка;
зменшити розмір основного тексту;
залишити ширину блока 100%, але обмежити її через max-width.
.text-card {
width: min(100%, 680px);
}
@media (max-width: 560px) {
.text-card {
padding: 32px 24px;
}
.text-card__title {
font-size: 32px;
}
}Функція min() повертає менше з двох значень. У цьому випадку блок займає всю доступну ширину, але не стає ширшим за 680px.
<br>Не варто вручну переносити рядки заголовка за допомогою великої кількості <br>. На іншій ширині екрана такі переноси можуть виглядати неприродно.
Краще обмежити ширину тексту:
.text-card__title {
max-width: 560px;
}line-heightЯкщо не задати висоту рядка, браузер використає значення за замовчуванням. Для великих заголовків і довгих абзаців результат може бути незручним для читання.
.text-card__description {
line-height: 1.6;
}Коли заголовок, опис і другорядні написи мають однаковий колір, текстова ієрархія стає менш зрозумілою. Використовуйте різні відтінки, але перевіряйте, щоб другорядний текст залишався достатньо контрастним.
Не варто зменшувати основний текст лише для того, щоб умістити його в один рядок. Краще дозволити тексту перенестися на новий рядок і забезпечити комфортне читання.
Великі margin і padding можуть розірвати зв’язок між заголовком, описом і кнопкою. Відступи мають підкреслювати структуру, а не конкурувати з текстом.
text-aligntext-align: center вирівнює текстовий вміст, але не замінює властивості для позиціонування самого блока. Якщо потрібно розташувати блок по центру сторінки, це роблять засобами контейнера, як у прикладі з display: grid і place-items: center.
Створіть текстовий блок за такими вимогами:
світлий фон сторінки;
біла картка шириною не більше 720px;
надзаголовок із великими інтервалами між символами;
заголовок розміром не менше 36px;
опис із line-height не менше 1.5;
акцентне посилання або кнопка;
різні кольори для заголовка, опису та акцентного елемента;
адаптація для екранів шириною до 560px.
Після цього змініть:
вирівнювання всього тексту з лівого на центральне;
ширину заголовка;
відстань між описом і кнопкою;
фоновий та акцентний кольори;
розмір заголовка на малих екранах.
font-family визначає сімейство шрифту.
font-size задає розмір тексту.
font-weight змінює його насиченість.
line-height впливає на відстань між рядками.
letter-spacing змінює відстань між символами.
color формує кольорову ієрархію тексту.
text-align визначає вирівнювання текстового вмісту.
padding створює внутрішній простір блока.
margin задає відстань між сусідніми елементами.
max-width допомагає контролювати довжину рядків.
Адаптивні правила дають змогу зберегти зручність текстового блока на різних екранах.