Font chữ là một yếu tố quan trọng trong thiết kế web. Nó không chỉ ảnh hưởng đến thẩm mỹ tổng thể của trang web mà còn tác động lớn đến trải nghiệm người dùng và khả năng đọc nội dung.
Tổng quan về font chữ
Font chữ (phông chữ) trong CSS có thể được chia làm hai nhóm chính:
- Font hệ thống (System Fonts): có sẵn trên thiết bị người dùng (như Arial, Tahoma, Segoe UI...).
- Font nhúng (Web Fonts): tải về từ Internet (như Google Fonts).
Ba loại kiểu chữ phổ biến:
serif: có chân (VD: Times New Roman)sans-serif: không chân (VD: Arial)monospace: đơn cách, dùng cho code (VD: Courier New)
<style>
p.serif {
font-family: 'Times New Roman', Times, serif;
}
p.sans {
font-family: Arial, Helvetica, sans-serif;
}
</style>
<p class="serif">Đây là ví dụ font serif (có chân).</p>
<p class="sans">Đây là ví dụ font sans-serif (không chân).</p>
Nên liệt kê danh sách font dự phòng (fallback). Nếu trình duyệt không tìm thấy font đầu tiên, nó sẽ dùng font tiếp theo trong danh sách.
Nhúng font từ Google Fonts
Google Fonts là thư viện font miễn phí được sử dụng phổ biến nhất hiện nay.
- Truy cập fonts.google.com
- Chọn font → copy đoạn mã
<link> - Thêm vào thẻ
<head>trong HTML.
<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=Montserrat:wght@400;600&display=swap"
rel="stylesheet"
/>
<style>
body {
font-family: 'Montserrat', sans-serif;
padding: 20px;
line-height: 1.6;
}
</style>
<h1>Font Montserrat từ Google Fonts</h1>
<p>Đây là ví dụ áp dụng font Montserrat cho toàn bộ trang.</p>
Sử dụng
preconnectgiúp tăng tốc tải font bằng cách kết nối sớm đến máy chủ của Google Fonts.
Font hệ thống (System Fonts)
Font hệ thống là lựa chọn lý tưởng cho hiệu suất tối ưu vì không cần tải thêm tài nguyên.
<style>
body {
font-family:
system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
}
</style>
<h1>Font hệ thống</h1>
<p>Đây là ví dụ áp dụng font hệ thống cho toàn bộ trang.</p>
Ưu điểm:
- Tải nhanh, không cần kết nối mạng.
- Giữ trải nghiệm gốc của từng hệ điều hành (Windows, macOS, Android…).
- Dễ kết hợp với thiết kế hiện đại, tối giản.
Các thuộc tính điều chỉnh văn bản
font-size & line-height
Điều chỉnh kích thước và khoảng cách giữa các dòng.
<style>
body {
font-family:
system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
}
p {
font-size: 20px;
line-height: 1.6; /* Tự động co giãn theo font-size */
}
</style>
<p>Khoảng cách giữa các dòng được tính bằng 20px × 1.6 = 32px.</p>
Với tiếng Việt có dấu, nên đặt
line-heighttừ1.5đến1.6để tránh dính ký tự.
font-weight
Điều chỉnh độ đậm của chữ (từ 100–900).
<style>
body {
font-family:
system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
}
h1 {
font-weight: 700; /* Bold */
}
p {
font-weight: 400; /* Normal */
}
</style>
<h1>Đây là tiêu đề của bài viết</h1>
<p>Lorem ipsum...</p>
letter-spacing & word-spacing
Tăng/giảm khoảng cách giữa ký tự hoặc từ.
<style>
h2 {
letter-spacing: 2px;
}
p {
word-spacing: 4px;
}
</style>
<h2>Khoảng cách giữa các chữ.</h2>
<p>Khoảng cách giữa các từ.</p>
text-overflow: ellipsis
Hiển thị dấu "..." khi nội dung quá dài (thường dùng cho tiêu đề, mô tả ngắn).
<style>
.truncate {
width: 300px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
<p class="truncate">
Đây là ví dụ minh họa cho thuộc tính text-overflow: ellipsis trong CSS.
</p>
Giới hạn số dòng hiển thị
Khi cần hiển thị số dòng cố định (VD: 2 dòng), có thể dùng -webkit-line-clamp.
<style>
.limit-line {
display: -webkit-box;
-webkit-line-clamp: 2; /* Giới hạn 2 dòng */
-webkit-box-orient: vertical;
overflow: hidden;
}
</style>
<p class="limit-line">
Đây là một đoạn văn bản dài dùng để minh họa cách giới hạn nội dung chỉ hiển
thị trong 2 dòng mà không bị tràn ra ngoài khung.
</p>
Sử dụng biểu tượng (Icons) với Font Awesome
Font Awesome là thư viện biểu tượng (icon) phổ biến nhất.
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
/>
<div><i class="fas fa-user"></i> Người dùng</div>
<div><i class="fas fa-heart" style="color: red"></i> Yêu thích</div>
Bạn có thể thay đổi kích thước icon bằng
font-sizehoặc màu bằngcolor.
Tối ưu sử dụng font
- Giới hạn số lượng font tải về, tránh làm trang web chậm.
- Hạn chế dùng quá nhiều kiểu (italic, bold, light...) nếu không cần thiết.
- Ưu tiên system fonts cho các website nội bộ hoặc tối ưu tốc độ.
- Dùng Google Fonts cho dự án thiết kế cần sự đa dạng và thẩm mỹ cao.
Kết luận
- font-family: xác định họ font và font dự phòng.
- Google Fonts: dễ dùng, đẹp mắt, hỗ trợ đa ngôn ngữ.
- System fonts: tải nhanh, hiệu suất cao.
- Thuộc tính văn bản: như line-height, font-weight, letter-spacing giúp cải thiện khả năng đọc.
- Text ellipsis & line clamp: kiểm soát hiển thị nội dung dài.
- Font Awesome: thêm icon nhanh gọn bằng CSS.
- Tối ưu: chỉ dùng 1–2 font chính, giới hạn trọng lượng tải.