Bài 14: Font, Text và Color

Typography — cách sắp xếp chữ, màu sắc, khoảng cách — là yếu tố rất quan trọng để trang web trông chuyên nghiệp. Một trang web có giao diện đẹp nhưng typography tệ sẽ rất khó đọc. Ngược lại, typography tốt sẽ làm trang web trở nên dễ đọc và chuyên nghiệp.

Bài này sẽ dạy bạn cách điều khiển font, chữ, và màu sắc để trang web của bạn trông chuyên nghiệp và dễ đọc.

Font – Kiểu chữ

Font là kiểu chữ bạn sử dụng. Có hai loại chính:

• 🔤 Web-safe fonts: Fonts có sẵn trên hầu hết máy tính (Arial, Times New Roman, Georgia…)
• ✨ Web fonts: Fonts được tải từ internet (Google Fonts, Adobe Fonts…)

font-family – Chọn kiểu chữ

/* Web-safe fonts (không cần tải) */
body {
  font-family: Arial, sans-serif;
}

h1 {
  font-family: Georgia, serif;
}

.monospace {
  font-family: 'Courier New', monospace;
}

/* Fallback: danh sách fonts từ ưa thích đến phổ biến */
.fancy {
  font-family: 'Trebuchet MS', 'Lucida Sans', sans-serif;
  /* Nếu không có Trebuchet MS, dùng Lucida Sans, rồi sans-serif chung chung */
}

Các web-safe fonts phổ biến

Google Fonts – Sử dụng fonts đẹp

Google Fonts cung cấp hàng trăm fonts miễn phí, chuyên nghiệp. Cách dùng rất đơn giản.

<!-- Bước 1: Thêm link vào head -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">

/* Bước 2: Dùng font trong CSS */
body {
  font-family: 'Roboto', sans-serif;
}

h1 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
}

💡 Mẹo Google Fonts:

• Truy cập fonts.google.com
• Chọn fonts bạn thích (gợi ý: Roboto, Lato, Open Sans, Playfair Display…)
• Click “Select this style” → Copy link + CSS
• Paste vào HTML head và CSS file

Font-size – Kích thước chữ

font-size xác định kích thước chữ. Có nhiều đơn vị khác nhau.

/* Cách 1: Cố định (px) */
h1 {
  font-size: 32px;
}

p {
  font-size: 16px;
}

/* Cách 2: Responsive (rem) - KHUYẾN KHÍCH */
html {
  font-size: 16px;  /* Base font size */
}

h1 {
  font-size: 2rem;  /* 2 × 16px = 32px */
}

p {
  font-size: 1rem;  /* 1 × 16px = 16px */
}

small {
  font-size: 0.875rem;  /* 0.875 × 16px = 14px */
}

Font-weight – Độ đậm chữ

font-weight xác định độ đậm của chữ.

h1 {
  font-weight: bold;  /* Hoặc 700 */
}

body {
  font-weight: normal;  /* Hoặc 400 */
}

.light {
  font-weight: 300;  /* Mỏng (nếu font hỗ trợ) */
}

.extra-bold {
  font-weight: 900;  /* Rất đậm */
}

Font-style – Kiểu chữ (đứng/nghiêng)

em {
  font-style: italic;  /* Chữ nghiêng */
}

.normal {
  font-style: normal;  /* Chữ đứng bình thường */
}

.oblique {
  font-style: oblique;  /* Chữ nghiêng nhẹ */
}

Line-height – Khoảng cách dòng

line-height xác định khoảng cách giữa các dòng chữ. Rất quan trọng để dễ đọc.

/* Line-height bằng số (không có đơn vị) */
p {
  line-height: 1.6;  /* 1.6 lần font-size (khuyến khích) */
}

/* Line-height bằng px */
p {
  line-height: 24px;  /* 24 pixels */
}

/* Line-height bằng em */
p {
  line-height: 1.6em;  /* 1.6 lần font-size */
}

💡 Mẹo line-height:

• Cơ thể (body): line-height: 1.5-1.6 (dễ đọc)
• Tiêu đề: line-height: 1.2-1.3 (sát chữ)
• Dùng số thay vì px để responsive

Text-align – Canh chữ

/* Canh trái (mặc định) */
p {
  text-align: left;
}

/* Canh giữa */
h1 {
  text-align: center;
}

/* Canh phải */
.right-text {
  text-align: right;
}

/* Canh đều (justify) */
.article {
  text-align: justify;
}

Letter-spacing – Khoảng cách ký tự

/* Bình thường */
p {
  letter-spacing: 0;  /* Hoặc không khai báo */
}

/* Rộng hơn (tiêu đề, design) */
h1 {
  letter-spacing: 2px;
}

/* Gần hơn (ít dùng) */
.compact {
  letter-spacing: -1px;
}

Text-transform – Biến đổi chữ

/* Chữ hoa tất cả */
h1 {
  text-transform: uppercase;
  /* "hello" → "HELLO" */
}

/* Chữ thường tất cả */
.lowercase {
  text-transform: lowercase;
  /* "HELLO" → "hello" */
}

/* Chữ cái đầu hoa */
.capitalize {
  text-transform: capitalize;
  /* "hello world" → "Hello World" */
}

Text-decoration – Trang trí chữ

/* Gạch dưới */
a {
  text-decoration: underline;
}

/* Gạch ngang (strikethrough) */
.deleted {
  text-decoration: line-through;
}

/* Gạch trên */
.overline {
  text-decoration: overline;
}

/* Không trang trí */
a {
  text-decoration: none;
}

Color – Màu chữ

color xác định màu của chữ.

/* Tên màu */
p {
  color: red;
  color: blue;
  color: green;
}

/* Hex (16 ký tự thập lục phân) */
h1 {
  color: #2c3e50;  /* Xanh tối */
  color: #FF0000;  /* Đỏ */
}

/* RGB (Red, Green, Blue) */
p {
  color: rgb(44, 62, 80);  /* Xanh tối */
  color: rgb(255, 0, 0);   /* Đỏ */
}

/* RGBA (RGB + Alpha = độ trong suốt) */
p {
  color: rgba(44, 62, 80, 0.8);  /* Xanh tối 80% không trong suốt */
  color: rgba(255, 0, 0, 0.5);   /* Đỏ 50% trong suốt */
}

/* HSL (Hue, Saturation, Lightness) */
p {
  color: hsl(210, 28%, 24%);  /* Xanh tối */
}

Background-color – Màu nền

body {
  background-color: #f5f5f5;  /* Nền xám nhạt */
}

.highlight {
  background-color: yellow;
}

.transparent {
  background-color: rgba(255, 255, 255, 0.9);  /* Trắng bán trong suốt */
}

Ví dụ hoàn chỉnh – Typography blog

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Typography Demo</title>
  
  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Lato:wght@400;700&display=swap" rel="stylesheet">
  
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <header class="header">
    <h1>📝 Typography là Art</h1>
    <p class="tagline">Tạo trang web dễ đọc và chuyên nghiệp</p>
  </header>

  <main class="container">
    <article class="article">
      <h2>Chương 1: Font là gì?</h2>
      <p class="intro">
        Font là <strong>kiểu chữ</strong> bạn sử dụng trên trang web. 
        Lựa chọn font đúng sẽ làm trang web trông <em>chuyên nghiệp</em> 
        hơn rất nhiều.
      </p>

      <p>
        Có hai loại font chính: <strong>Web-safe fonts</strong> (có sẵn trên máy) 
        và <strong>Web fonts</strong> (tải từ internet). Google Fonts 
        cung cấp hàng trăm fonts miễn phí rất đẹp.
      </p>

      <h3>Font-size</h3>
      <p>
        Kích thước chữ rất quan trọng. Quá nhỏ, chữ khó đọc. 
        Quá lớn, trang web trông không chuyên nghiệp. 
        Thường: tiêu đề 32px, body 16px.
      </p>

      <h3>Line-height</h3>
      <p>
        Khoảng cách dòng là <strong>yếu tố rất quan trọng</strong> 
        để bài viết dễ đọc. Line-height 1.5-1.6 là lý tưởng cho body text.
        Nếu quá sát (1.0), chữ khó đọc. Quá rộng (2.0), bài viết trông lỏng.
      </p>

      <h3>Color</h3>
      <p>
        Chọn <span class="highlight">màu chữ</span> có độ tương phản cao 
        với nền. Đen trên trắng là lựa chọn tốt nhất cho dễ đọc.
      </p>

      <h3>Text-align</h3>
      <p class="justified">
        Canh trái là <strong>mặc định</strong> và dễ đọc nhất. 
        Canh giữa dùng cho tiêu đề. Canh phải ít dùng. 
        Canh đều (justify) dùng cho bài viết dài nhưng có thể làm khoảng 
        cách giữa chữ không đều.
      </p>
    </article>

    <!-- Sidebar tips -->
    <aside class="tips">
      <h3>💡 Tips</h3>
      <ul>
        <li>Dùng <strong>max-width: 65ch</strong> cho text (dễ đọc)</li>
        <li>Line-height: <strong>1.5-1.6</strong> cho body</li>
        <li>Khí dung <strong>Google Fonts</strong></li>
        <li>Letter-spacing tăng cho tiêu đề</li>
      </ul>
    </aside>
  </main>

  <footer class="footer">
    <p>© 2024 Typography Blog. Tất cả quyền được bảo lưu.</p>
  </footer>

</body>
</html>

/* FILE: styles.css */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Base font size */
html {
  font-size: 16px;
}

body {
  font-family: 'Lato', sans-serif;
  line-height: 1.6;
  color: #2c3e50;
  background-color: #f9f9f9;
}

/* Header */
.header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 60px 20px;
  text-align: center;
}

.header h1 {
  font-family: 'Playfair Display', serif;
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 10px;
  letter-spacing: 1px;  /* Khoảng cách ký tự tăng */
}

.tagline {
  font-size: 1.25rem;
  opacity: 0.95;
  font-weight: 300;
}

/* Container */
.container {
  max-width: 900px;
  margin: 40px auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1fr 250px;
  gap: 40px;
}

/* Article */
.article {
  background: white;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.article h2 {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  color: #2c3e50;
  margin: 40px 0 20px 0;
  line-height: 1.3;
}

.article h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  color: #34495e;
  margin: 30px 0 15px 0;
}

.article p {
  margin-bottom: 20px;
  text-align: left;
  line-height: 1.8;  /* Line-height cao hơn cho dễ đọc */
}

.intro {
  font-size: 1.1rem;
  color: #555;
  margin-bottom: 30px;
}

.article strong {
  color: #e74c3c;
  font-weight: 700;
}

.article em {
  color: #3498db;
  font-style: italic;
}

.highlight {
  background-color: #ffeaa7;
  padding: 2px 6px;
  border-radius: 3px;
  color: #2d3436;
}

.justified {
  text-align: justify;
}

/* Sidebar tips */
.tips {
  background: white;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  height: fit-content;
}

.tips h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  color: #2c3e50;
  margin-bottom: 15px;
  border-bottom: 2px solid #667eea;
  padding-bottom: 10px;
}

.tips ul {
  list-style: none;
}

.tips li {
  margin-bottom: 12px;
  color: #555;
  line-height: 1.6;
  font-size: 0.95rem;
}

/* Footer */
.footer {
  background-color: #2c3e50;
  color: white;
  text-align: center;
  padding: 30px;
  margin-top: 60px;
  font-size: 0.95rem;
}

/* Responsive */
@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }

  .header h1 {
    font-size: 2rem;
  }

  .article {
    padding: 20px;
  }

  .article h2 {
    font-size: 1.5rem;
  }

  .article h3 {
    font-size: 1.2rem;
  }
}

Color palettes (Bảng màu) khuyến khích

Tóm tắt

• ✅ Font-family: Chọn kiểu chữ (web-safe hoặc Google Fonts)
• ✅ Google Fonts: Hàng trăm fonts miễn phí, chuyên nghiệp
• ✅ Font-size: Kích thước chữ (px, em, rem, %)
• ✅ Font-weight: Độ đậm (normal 400, bold 700, 100-900)
• ✅ Font-style: Đứng/nghiêng (normal, italic, oblique)
• ✅ Line-height: Khoảng cách dòng (1.5-1.6 cho body)
• ✅ Letter-spacing: Khoảng cách ký tự
• ✅ Text-align: Canh trái, giữa, phải, đều
• ✅ Text-transform: Chữ hoa, chữ thường, capitalize
• ✅ Color: Màu chữ (hex, rgb, rgba, hsl)
• ✅ Background-color: Màu nền
• ✅ Rem: Dùng thay vì px để responsive

🎯 Bài tập thực hành

Bài tập 1: Tạo trang blog đơn giản với typography tốt:

• 2 Google Fonts: một cho heading (serif), một cho body (sans-serif)
• Tiêu đề h1: 32px, bold, letter-spacing 1px
• Body text: 16px, line-height 1.6, color #2c3e50
• Paragraph spacing: 20px margin-bottom
• Đoạn intro: 18px, italic, color xám nhẹ
• Responsive: h1 30px trên mobile

Bài tập 2: Tạo color scheme + typography guide:

• 4-5 màu chính (primary, secondary, success, warning, danger)
• Typography hierarchy: h1, h2, h3, p, small
• Hiển thị từng loại text với màu và kích thước
• Button styles (primary, secondary, danger)
• Alert/message styles (success, warning, error)

Bài tập 3: Tạo bài viết dài (article) với typography chuyên nghiệp:

• Google Fonts: Playfair Display (heading) + Lato (body)
• Max-width: 800px (dễ đọc)
• Line-height: 1.8 (body), 1.3 (heading)
• Heading: letter-spacing tăng, font-weight bold
• Paragraph: text-align justify hoặc left
• Highlight text: background color khác, padding
• Sidebar tips với styling khác

Chúc bạn thành công! 🚀