Типографијата е еден од клучните елементи на веб-дизајнот, бидејќи влијае на читливоста, визуелната хиерархија и корисничкото искуство. Во оваа лекција, учениците ќе научат како да избираат и обликуваат текст за веб-страници.
Основни Поими во Типографијата
Типографијата се однесува на дизајнот, распоредот и визуелниот изглед на текстот. Еве неколку важни термини:
🔹 Фонт (Font): Конкретен стил на пишување на буквите (на пример: Arial, Times New Roman).
🔹 Типографско семејство (Font Family): Група на фонтови со сличен изглед (на пример: Sans-serif, Serif, Monospace).
🔹 Големина на фонт (Font Size): Колку е голем текстот, мерено во пиксели (px), еми (em), реми (rem) или проценти (%).
🔹 Висина на линија (Line Height): Раздалеченост помеѓу редови во текстот.
🔹 Проред меѓу букви (Letter Spacing): Колку е оддалечена секоја буква од другите.
🔹 Проред меѓу зборови (Word Spacing): Раздалеченост помеѓу зборови.
Избор и Применување на Фонтови за Веб
✅ Избор на фонт:
- За наслови: Често се користат bold sans-serif фонтови (пример: Montserrat, Roboto).
- За текст: Подобро е да се користи лесно читлив serif или sans-serif фонт (пример: Open Sans, Lora).
Најдобри Практики за Типографија во Веб-Дизајн
✅ Користете максимум 2-3 фонтови во дизајнот.
✅ Осигурајте се дека текстот е читлив и прилагоден за сите уреди.
✅ Избегнувајте премногу мали фонтови (под 14px).
✅ Користете доволно line-height (најмалку 1.4 - 1.6 за текст).
✅ Проверете контраст помеѓу бојата на текстот и позадината.
✅ Испитајте како текстот изгледа на различни екрани и резолуции.Вежба 1: Промена на Фонт и Големина на Текст
Чекори:
1️⃣ Отвори Notepad (или било кој текстуален уред, на пр. VS Code).
2️⃣ Направи нов документ и зачувај го какоindex.html.
3️⃣ Внеси го следниов код:<!DOCTYPE html><html lang="mk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Типографија во Веб-Дизајн</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Добредојдовте!</h1>
<p>Ова е пример за менување на фонт и големина на текст.</p>
</body>
</html>
- Направи уште еден документ и зачувај го како style.css
5️⃣ Во style.css напиши го следниов код: - body {font-family: Arial, sans-serif;}h1 {font-size: 30px;font-weight: bold;color: blue;}p {font-size: 18px;color: gray;}
- Зачувај ги двата документи и отвори
index.htmlво прелистувач.
✅ Резултат: Насловот ќе биде син, а текстот ќе биде сив со различни големини.
No comments:
Post a Comment