EasyCode365EasyCode365

Основи вебтипографіки

Типографіка - це те, як текст виглядає і відчувається на сторінці.

Хороша типографіка робить контент легшим для читання. Вона також допомагає заголовкам, абзацам, кнопкам і підписам виглядати впорядковано.

У CSS типографіку контролюють властивості font-family, font-size, line-height, text-align і прості правила форматування.

Що означає вебтипографіка

Вебтипографіка означає вибір і стилізацію тексту для сайту.

Це не лише про те, щоб зробити текст більшим або меншим. Вона також включає:

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

Мета проста: зробити текст зрозумілим і зручним для читання.

Font family

Властивість font-family каже браузеру, який шрифт використовувати.

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

Лише читання

Останнім значенням має бути загальна сім'я шрифтів, наприклад sans-serif, serif або monospace.

Якщо назва шрифту має пробіли, візьми її в лапки:

Лише читання

Використовуй одну або дві сім'ї шрифтів на сторінці. Забагато шрифтів може зробити дизайн хаотичним.

Font size

Властивість font-size контролює, наскільки великим виглядає текст.

Дві зручні для початківців одиниці - це px і rem.

  • px задає фіксований розмір.
  • rem масштабується від кореневого розміру шрифту сторінки.
Лише читання

У багатьох браузерах 1rem зазвичай дорівнює 16px, тому 2rem зазвичай дорівнює 32px.

Надавай перевагу rem для розмірів тексту. Якщо відвідувач збільшує стандартний розмір шрифту в браузері для кращого читання, текст у rem масштабується разом із цим налаштуванням, а текст у px залишається фіксованим.

Використовуй читабельні розміри тексту. Дуже малий основний текст важко читати, особливо на телефонах.

Line height

Властивість line-height контролює вертикальний простір між рядками тексту.

Думай про неї як про повітря всередині абзацу.

Лише читання

Значення без одиниці, наприклад 1.6, використовується часто. Воно означає, що висота рядка у 1.6 раза більша за поточний розмір шрифту.

Низьке значення line-height може зробити абзаци тісними. Значення приблизно 1.5 або 1.6 часто легше читати для основного тексту.

Text alignment

Властивість text-align контролює горизонтальне вирівнювання тексту.

Лише читання

Поширені значення:

  • left: вирівнює текст ліворуч
  • center: вирівнює текст по центру
  • right: вирівнює текст праворуч
  • justify: розтягує рядки так, щоб обидва краї були вирівняні

Вирівнювання по центру добре працює для коротких заголовків.

Для довгих абзаців вирівнювання ліворуч зазвичай легше читати. Центровані абзаци ускладнюють пошук початку наступного рядка.

Просте форматування тексту

CSS також має властивості для простого форматування тексту.

Лише читання

Корисні властивості форматування:

  • font-weight: контролює товщину, наприклад normal або bold
  • font-style: контролює нахил, наприклад normal або italic
  • text-transform: змінює регістр, наприклад uppercase, lowercase або capitalize
  • text-decoration: додає або прибирає лінії, наприклад underline або none

Будь обережним із підкресленням. У вебі підкреслений текст зазвичай означає посилання.

Інтерактивний приклад: типографіка картки статті

Цей приклад поєднує сім'ю шрифтів, розмір шрифту, висоту рядка, вирівнювання і форматування тексту.

Спробуй змінити CSS-значення і запусти приклад ще раз.

Можна редагувати
<article class="article-card">
  <p class="category">Основи CSS</p>
  <h2>Вивчаємо вебтипографіку</h2>
  <p class="summary">
    Зрозумілий текст допомагає людям читати твою сторінку без зусиль. Хороший розмір шрифту і
    line-height можуть зробити просту статтю охайнішою.
  </p>
  <a href="#">Читати далі</a>
</article>

<style>
  .article-card {
    max-width: 420px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-family: Arial, Helvetica, sans-serif;
  }

  .category {
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    color: #666;
  }

  .article-card h2 {
    font-size: 1.8rem;
    line-height: 1.2;
  }

  .summary {
    font-size: 1rem;
    line-height: 1.6;
    text-align: left;
  }
</style>

Картка використовує один список шрифтів, більший заголовок, читабельні відступи в абзаці й текст категорії у верхньому регістрі.

Поширені помилки початківців

  • Використання забагатьох шрифтів: однієї або двох сімей шрифтів зазвичай достатньо.
  • Відсутність резервних шрифтів: заверши список шрифтів загальною сім'єю, наприклад sans-serif.
  • Занадто малий текст: основний текст має бути зручним для читання.
  • Затісний line-height: абзацам потрібен достатній вертикальний простір.
  • Центрування довгих абзаців: вирівнювання по центру краще підходить для короткого тексту.
  • Підкреслення звичайного тексту: підкреслення може зробити текст схожим на клікабельний.

Міні завдання

Подивись на цей CSS:

Лише читання

Яку властивість потрібно додати, якщо ти хочеш більше вертикального простору між рядками тексту?

Перевір відповіді на тест, коли будеш готовий.

Короткий тест із відповідями

  1. Яка CSS-властивість обирає шрифт?
  2. Якщо кореневий розмір шрифту дорівнює 16px, який розмір має 2rem?
  3. Чому "Times New Roman" потрібно брати в лапки?

Відповіді:

  1. font-family.
  2. 32px.
  3. Тому що назва шрифту містить пробіли.

Відповідь на міні завдання: додай line-height.

Невеликий виклик

Стилізуй текст профілю нижче.

Твої цілі:

  • Задай список шрифтів sans-serif для .profile.
  • Зроби ім'я у верхньому регістрі.
  • Зроби ім'я нормальної товщини.
  • Дай абзацу комфортну висоту рядка.
Можна редагувати
<div class="profile">
  <h3 class="name">Jane Doe</h3>
  <p class="bio">Я вивчаю, як типографіка робить текст легшим для читання у вебі.</p>
</div>

<style>
  .profile {
  }

  .name {
  }

  .bio {
  }
</style>

Один можливий розв'язок:

Лише читання

Summary

  • font-family обирає шрифт і має містити резервні шрифти.
  • font-size контролює, наскільки великим виглядає текст.
  • line-height контролює вертикальний простір між рядками.
  • text-align контролює горизонтальне вирівнювання тексту.
  • font-weight змінює товщину.
  • font-style може зробити текст курсивним.
  • text-transform змінює регістр тексту.
  • text-decoration додає або прибирає лінії, наприклад підкреслення.