Урок 4. Шрифти та типографіка: Задання шрифтів, розмірів, ваги, висоти рядка

План уроку: Шрифти та типографіка (25-30 хвилин)

1. Вступ (5 хвилин)

• Що таке типографіка в веб-дизайні?

  • Типографіка — це мистецтво оформлення тексту, що включає вибір шрифтів, їх розмір, вагу та інші параметри.
  • Правильна типографіка покращує читабельність та вигляд вашого сайту.

• Чому шрифти важливі?

  • Шрифти задають загальний стиль сайту, а також впливають на досвід користувачів. Вибір правильного шрифту може підкреслити основні ідеї вашого контенту та створити потрібний настрій.

2. Задання шрифтів (10 хвилин)

• Синтаксис властивості font-family:

  • Властивість font-family використовується для визначення шрифтів, які будуть застосовані до тексту. Якщо перший шрифт недоступний, браузер використає наступний у списку.

• Приклад:

  body {
    font-family: 'Arial', sans-serif;
  }
  

• Пояснення: Якщо шрифт Arial недоступний, браузер використає будь-який шрифт із категорії sans-serif.

• Як працюють "веб-безпечні" шрифти?

  • Деякі шрифти доступні на всіх комп'ютерах, такі як Arial, Times New Roman, або Courier New. Їх використовують як резервні шрифти.

• Підключення сторонніх шрифтів:

  • Ви можете підключати сторонні шрифти, такі як шрифти Google Fonts.

• Приклад підключення шрифту з Google Fonts:

  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
  

  
  Застосування:

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

3. Налаштування розміру шрифту (5 хвилин)

• Властивість font-size:

  • font-size визначає розмір шрифту. Він може задаватися в пікселях (px), відсотках (%), або відносних одиницях (em, rem).

• Приклад:

  h1 {
    font-size: 36px;
  }
  
  p {
    font-size: 1.2em; /* 1.2 рази більше від стандартного розміру */
  }
  

• Пояснення: px — це точний розмір, тоді як em та rem є відносними одиницями. em залежить від розміру батьківського елемента, а rem — від кореневого (в основному це тег html).

4. Вага шрифту (font-weight) (5 хвилин)

• Властивість font-weight:

  • font-weight визначає товщину тексту. Можна використовувати числові значення від 100 до 900 або ключові слова normal, bold.

• Приклад:

  p {
    font-weight: normal;
  }
  
  h1 {
    font-weight: bold;
  }
  
  h2 {
    font-weight: 700; /* еквівалент bold */
  }
  

• Пояснення: px — це точний розмір, тоді як em та rem є відносними одиницями. em залежить від розміру батьківського елемента, а rem — від кореневого (в основному це тег html).

5. Висота рядка (line-height) (5 хвилин)

• Властивість line-height:

  • line-height визначає відстань між рядками тексту. Вона може задаватися в пікселях, відсотках або відносних одиницях.

• Приклад:

  p {
    line-height: 1.5; /* 1.5 рази більше за стандартну висоту */
  }
  

• Пояснення: Збільшення висоти рядка покращує читабельність тексту.
  
  

6. Практична частина (10 хвилин)

• Завдання 1:

  • Створіть веб-сторінку з заголовком і кількома абзацами.
  • Використайте властивості font-family, font-size, font-weight і line-height, щоб налаштувати вигляд тексту.

• Завдання 2:

  • Підключіть шрифт із Google Fonts і застосуйте його до всіх заголовків і абзаців.

• Приклад CSS:

  body {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 1.6;
  }
  
  h1 {
    font-size: 36px;
    font-weight: bold;
  }
  
  p {
    font-size: 18px;
    font-weight: normal;
    line-height: 1.8;
  }