Tema Tipografi
Termasuk bagian Frontend Praktis dalam perjalanan HTML di Coddy. Pelajaran 15 dari 35.
Tipografi adalah bagian penting dari tema dan desain. Alih-alih menulis gaya font di mana-mana, kita bisa mendefinisikannya sebagai variabel CSS dan menggunakannya kembali di seluruh situs. Dengan begitu, gaya tetap konsisten dan lebih mudah diubah nanti.
Kamu dapat mendefinisikan variabel untuk:
- Jenis font (misalnya,
--font-family-base,--font-family-heading)
- Ukuran font (misalnya,
--font-size-base,--font-size-h1) - Tinggi baris
- Jarak antarhuruf
Pertama, mari kita definisikan variabel tipografi di elemen :root:
:root {
--font-primary: 'Open Sans', sans-serif;
--font-secondary: 'Roboto', sans-serif;
--font-size-base: 16px;
--line-height: 1.5;
--heading-color: #333;
--text-color: #555;
}Sekarang, terapkan variabel ini ke elemen teksmu:
body {
font-family: var(--font-primary);
font-size: var(--font-size-base);
line-height: var(--line-height);
color: var(--text-color);
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-secondary);
color: var(--heading-color);
}Pengaturan ini membuat sistem tipografi terpadu yang dapat kamu ubah dengan mudah dengan mengubah nilai variabel di satu tempat.
Tantangan
MudahBuat tema tipografi untuk situs blog dengan variabel terpisah untuk judul dan teks paragraf. Tugasmu:
- Tentukan variabel CSS untuk:
- Ukuran font untuk judul (
--h1-sizedan--h2-size) - Warna teks untuk paragraf (
--text-color): pilih warna selain hitam pekat agar lebih mudah dibaca - Warna teks untuk judul (
--heading-color): pilih warna yang tampak menonjol dibandingkan teks isi
- Ukuran font untuk judul (
- Terapkan variabel ini untuk menata:
- Teks isi
- Judul h1 dan h2
CSS-mu harus menciptakan hierarki visual yang jelas antara judul dan teks paragraf.
Coba sendiri
<!DOCTYPE html>
<html>
<head>
<title>Typography Theming</title>
<style>
:root {
/* Typography variables */
--primary-font: "Georgia", serif; /* for paragraphs */
--secondary-font: "Arial", sans-serif; /* for headings */
}
body {
font-family: var(--primary-font);
color: #000000;
line-height: 1.6;
margin: 0;
padding: 20px;
background-color: #f9f9f9;
}
h1, h2 {
font-family: var(--secondary-font);
color: #000000;
margin-bottom: 0.5em;
}
h1 {
font-size: 16px;
}
h2 {
font-size: 16px;
}
p {
margin-bottom: 1.2em;
}
.blog-post {
max-width: 700px;
margin: 0 auto;
background: #fff;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<div class="blog-post">
<h1>The Beauty of Typography in Web Design</h1>
<p>Typography plays a crucial role in how users read and experience content online. A good choice of fonts and sizes can make a website more readable and enjoyable.</p>
<h2>Why Typography Matters</h2>
<p>Clear and consistent typography improves accessibility, creates a visual hierarchy, and gives your website a professional feel. Without it, even the best design can look unpolished.</p>
<h2>Mobile-First Typography</h2>
<p>Starting with smaller, readable text for mobile and scaling up for desktops ensures your content looks great on any device. This approach is part of mobile-first design and theming.</p>
</div>
</body>
</html>
Uji dirimuPelajaran ini berisi kuis singkat. Mulai pelajarannya untuk menjawab kuis dan melacak progresmu.
Semua pelajaran di Frontend Praktis
Latihan sendiri: Playground Web