Модуль 8

Робота з текстом та шрифтами

Ось готовий урок, створений за твоїм майстер-промптом. Я обрав контекст Web Development (CSS), оскільки саме тут робота з текстом і шрифтами є найбільш показовою та фундаментальною.

🎓 Урок: Типографіка в CSS. Як змусити текст "говорити"

Привіт, друзі! Це CS50... тобто, це ваш гід у світ коду, і я радий вас бачити. 👋

Сьогодні ми поговоримо про те, що складає 95% усього інтернету. Не про картинки котиків, і навіть не про відео в TikTok. Ми поговоримо про Текст.

Але не просто про літери, а про те, як вони виглядають.

1. 🔥 Вступ: Чому Times New Roman — це не вирок?

Уявіть, що ви прийшли на співбесіду в IT-компанію. Ви кажете розумні речі, але... ви одягнені в піжаму, а ваш голос звучить як у сонного робота. Чи візьмуть вас на роботу? Навряд чи.

В інтернеті HTML — це лише слова (зміст). Без стилізації кожен сайт виглядає однаково: чорний текст на білому фоні, шрифт Times New Roman. Нудно, правда?

Шрифти та стиль тексту — це інтонація вашого сайту. * Ви хочете кричати "ЗНИЖКИ!"? 😱 * Чи шепотіти "ексклюзивний спа-салон"? 🤫 * Чи чітко рапортувати "банківський звіт"? 🏦

Питання до вас: Чи довірили б ви дані своєї кредитки сайту, де весь текст написаний шрифтом Comic Sans (тим самим, дитячим і кривим)?

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

2. 🧠 Теоретична база: Що там "під капотом"?

Коли браузер бачить текст, він малює його піксель за пікселем. Але звідки він знає, як малювати букву "А"?

Він бере інструкцію зі файлу шрифту. Тут є два шляхи (аналогія з кухнею):

  1. Системні шрифти (System Fonts): Це продукти, які вже є у вас в холодильнику (на комп’ютері користувача). Це швидко, надійно, але вибір обмежений (Arial, Times, Courier).
  2. Веб-шрифти (Web Fonts): Це доставка їжі (Google Fonts). Браузер має завантажити файл шрифту з інтернету, щоб показати текст. Це трохи довше, але виглядає круто і унікально.

🔑 Ключові поняття (Без зубріння, зрозумійте логіку)

  1. font-family (Сімейство шрифтів): Це прізвище шрифту. Наприклад, Roboto або Open Sans. Важливо: Ми завжди пишемо запасний варіант. font-family: "Open Sans", sans-serif; Логіка: "Браузер, спробуй знайти Open Sans. Якщо не знайдеш (не завантажився, видалений) — дай мені будь-який стандартний шрифт без засічок (sans-serif)". Це ваша подушка безпеки.

  2. Serif vs Sans-Serif (З засічками чи без):

    • Serif (із засічками): Як Times New Roman. Має маленькі "ніжки" на краях букв. Виглядає традиційно, серйозно, як газета.
    • Sans-Serif (без засічок): Як Arial або шрифт, яким ви зараз це читаєте. Сучасний, чистий, мінімалістичний.

  3. font-weight (Вага): Наскільки жирні літери. 400 — звичайний, 700 — жирний (Bold).

  4. line-height (Висота рядка): Це "повітря" між рядками. Якщо текст злипається — його важко читати. Досвідчені розробники знають: читабельність залежить від пробілів більше, ніж від самих букв.

3. 🧪 Приклади: Від "Нудного" до "Вау"

Приклад 1: Мінімальний (База)

Припустимо, у нас є заголовок <h1>Привіт, світ!</h1>. За замовчуванням він виглядає як старий документ. Давайте це змінимо.

h1 {
    font-family: Arial, sans-serif; /* Робимо сучасно */
    color: #333;                    /* Робимо темно-сірим, не чорним */
}

👉 Що змінилося? Зникли засічки. Текст став м'якшим для очей.

Приклад 2: Типовий реальний кейс (Стаття в блозі)

Уявіть, що ви верстаєте статтю. Запитання: Що буде, якщо ми зробимо текст дуже дрібним, а міжрядковий інтервал малим? Правильно, користувач закриє сайт через 3 секунди.

Ось як роблять профі:

p {
    font-family: "Georgia", serif; /* Для довгих текстів засічки часто кращі */
    font-size: 18px;               /* Достатньо великий для читання */
    line-height: 1.6;              /* Золотий стандарт: висота рядка = 1.6 від розміру шрифту */
    color: #444;                   /* Контраст, але не ріже очі */
    max-width: 700px;              /* Щоб рядок не був нескінченно довгим */
}

👉 Результат: Текст виглядає як у дорогій книзі. Його хочеться читати.

Приклад 3: Просунутий (Google Fonts)

Хочемо чогось ефектного? Підключимо шрифт Montserrat від Google.

У HTML (<head>):

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

У CSS:

.hero-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;       /* Жирний */
    font-size: 3rem;        /* Дуже великий */
    text-transform: uppercase; /* Всі букви великі */
    letter-spacing: 2px;    /* Додали простору між буквами */
    text-align: center;     /* По центру */
}

👉 Логіка: text-transform: uppercase і letter-spacing часто використовують для заголовків, щоб додати їм "ваги" та епічності.

4. 🛠 Практична частина

Час бруднити руки кодом! Відкрийте редактор (або CodePen) і спробуйте:

  1. 🔹 Повторення: Створіть <h1> і <p>. Задайте заголовку шрифт без засічок (Arial), а параграфу — із засічками (Georgia).
  2. 🔹 Експеримент: Змініть line-height у параграфа на 0.8, а потім на 2.0. Як змінюється відчуття від читання?
  3. 🔹 Debugging (Знайди помилку): css h2 { font-family: "Open Sans"; /* Чого тут не вистачає в кінці? */ font-weight: bold; /* Це працює, але як записати це числом? */ }

  4. 🔹 Міні-кейс: Вам треба зверстати оголошення "УВАГА! НЕБЕЗПЕКА!".

    • Який колір оберете?
    • Який розмір шрифту?
    • Чи будете використовувати uppercase?
    • Напишіть CSS для класу .danger-alert.

  5. 🔹 "А що, якщо...": А що, якщо користувач зайде з телефону? Чи буде шрифт 50px виглядати добре? (Спробуйте змінити розмір вікна браузера).

5. 💡 Мислення як у розробника

Як відрізнити новачка від профі, дивлячись лише на CSS?

❌ Новачок: * Використовує 5 різних шрифтів на одній сторінці (візуальний хаос). * Використовує "чистий чорний" (#000000) на "чистому білому" (це занадто контрастно і втомлює очі). * Забуває про line-height.

✅ Досвідчений розробник: * Правило ієрархії: Найважливіше — найбільше і найжирніше. Користувач спочатку сканує сторінку очима, а не читає. * Обмеження: Максимум 2 (рідше 3) сімейства шрифтів на сайт. Один для заголовків, один для тексту. * Одиниці виміру: Використовує rem замість px (щоб поважати налаштування масштабу користувача в браузері). Але про це детальніше згодом.

Порада: Кращий дизайн — той, який непомітний. Якщо користувач читає і не спотикається — ви зробили гарну роботу.

6. 🧩 Підсумок

Отже, що ми сьогодні поклали у свій "рюкзак знань"?

  1. Шрифт — це голос вашого сайту.
  2. font-family потребує запасного варіанту (sans-serif).
  3. line-height робить текст читабельним.
  4. Менше шрифтів = кращий дизайн.

Що ви тепер вмієте? Ви можете взяти будь-який "сухий" HTML-документ і перетворити його на професійну статтю, лендінг або попередження, просто змінивши налаштування тексту.

🔜 Тизер наступного уроку: Окей, текст у нас красивий. Але він все ще просто висить зліва зверху вниз. Як поставити текст по центру? Або зробити дві колонки, як у журналі? На наступному уроці ми розберемо Блокову модель (Box Model) — основу основ, на якій тримається ВЕСЬ макет сайту.

А на сьогодні — це все. Успіхів у коді! 🚀

← До списку уроків Наступний урок →