Typography trong CSS
Typography (kiểu chữ) là yếu tố quan trọng nhất ảnh hưởng đến tính dễ đọc và thẩm mỹ của trang web. CSS cung cấp đầy đủ thuộc tính để kiểm soát font chữ, kích thước và bố cục văn bản.
Font family
/* Web-safe fonts — có sẵn trên hầu hết thiết bị */
body { font-family: Arial, Helvetica, sans-serif; }
code { font-family: "Courier New", Courier, monospace; }
/* Sử dụng Google Fonts: thêm @import vào đầu file CSS */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
.heading { font-family: 'Roboto', sans-serif; }
Luôn đặt font dự phòng (fallback) ở cuối danh sách:
sans-serif,serif,monospace.
Kích thước font
| Đơn vị | Đặc điểm |
|---|---|
px |
Cố định, độc lập thiết bị — dễ dự đoán, kém linh hoạt |
em |
Tương đối theo font-size của phần tử cha — lồng nhau có thể gây rắc rối |
rem |
Tương đối theo font-size của <html> (root) — phổ biến nhất |
% |
Tương đối theo kích thước font cha |
html { font-size: 16px; } /* 1rem = 16px */
h1 { font-size: 2.5rem; } /* 40px */
p { font-size: 1rem; } /* 16px */
.small { font-size: 0.875rem; } /* 14px */
Các thuộc tính font & text
/* Font */
font-weight: normal | bold | 100..900;
font-style: normal | italic | oblique;
line-height: 1.5; /* Không đơn vị — tốt nhất */
/* Spacing */
letter-spacing: 0.05em; /* Khoảng cách giữa các ký tự */
word-spacing: 0.1em; /* Khoảng cách giữa các từ */
/* Canh chỉnh */
text-align: left | center | right | justify;
/* Trang trí */
text-decoration: none | underline | line-through | overline;
text-decoration: underline dotted red; /* Kết hợp */
text-transform: uppercase | lowercase | capitalize | none;
/* Hiệu ứng bóng */
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
/* text-shadow: offset-x offset-y blur-radius color */
/* Màu sắc */
color: #333;
Demo: Font size và line-height
<div class="demo-wrap">
<h2>Font Size Scale</h2>
<p class="size-xs">xs — 0.75rem (12px)</p>
<p class="size-sm">sm — 0.875rem (14px)</p>
<p class="size-base">base — 1rem (16px)</p>
<p class="size-lg">lg — 1.125rem (18px)</p>
<p class="size-xl">xl — 1.25rem (20px)</p>
<p class="size-2xl">2xl — 1.5rem (24px)</p>
<p class="size-3xl">3xl — 1.875rem (30px)</p>
<h2>Line Height So Sánh</h2>
<div class="lh-boxes">
<div class="lh-box lh-tight">
<span>line-height: 1.2</span><br>
Dòng văn bản này dùng giãn dòng chật (tight), ít khoảng thở, khó đọc khi đoạn dài.
</div>
<div class="lh-box lh-normal">
<span>line-height: 1.5</span><br>
Dòng văn bản này dùng giãn dòng bình thường (normal), phù hợp cho đoạn văn chính.
</div>
<div class="lh-box lh-loose">
<span>line-height: 2.0</span><br>
Dòng văn bản này dùng giãn dòng rộng (loose), dễ đọc nhưng chiếm nhiều không gian.
</div>
</div>
</div>
.demo-wrap { font-family: sans-serif; padding: 1rem; }
/* Font size scale */
.size-xs { font-size: 0.75rem; margin: 2px 0; }
.size-sm { font-size: 0.875rem; margin: 2px 0; }
.size-base { font-size: 1rem; margin: 2px 0; }
.size-lg { font-size: 1.125rem; margin: 2px 0; }
.size-xl { font-size: 1.25rem; margin: 2px 0; }
.size-2xl { font-size: 1.5rem; margin: 2px 0; }
.size-3xl { font-size: 1.875rem; margin: 2px 0; }
/* Line height comparison */
.lh-boxes { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.lh-box {
flex: 1; min-width: 160px;
background: #f0f4ff;
border: 1px solid #b0c4ff;
padding: 12px;
border-radius: 4px;
font-size: 0.9rem;
}
.lh-box span { font-weight: bold; color: #4054b2; display: block; margin-bottom: 4px; }
.lh-tight { line-height: 1.2; }
.lh-normal { line-height: 1.5; background: #e8ffe8; border-color: #80c080; }
.lh-loose { line-height: 2.0; }
Demo: Text decoration, transform, shadow và Google Font
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
</style>
<div class="demo-wrap">
<h2>text-align</h2>
<p class="align-left">Canh trái (text-align: left) — mặc định</p>
<p class="align-center">Canh giữa (text-align: center)</p>
<p class="align-right">Canh phải (text-align: right)</p>
<p class="align-justify">Canh đều hai bên (text-align: justify) — Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
<h2>text-transform</h2>
<p class="uppercase">text-transform: uppercase</p>
<p class="lowercase">TEXT-TRANSFORM: LOWERCASE</p>
<p class="capitalize">text-transform: capitalize — mỗi từ viết hoa chữ đầu</p>
<h2>text-decoration</h2>
<p><span class="deco-underline">underline</span>
<span class="deco-line">line-through</span>
<span class="deco-wavy">underline wavy red</span>
<span class="deco-none">no underline</span></p>
<h2>text-shadow + Google Font Roboto</h2>
<p class="shadow-subtle">Shadow nhẹ — dễ đọc</p>
<p class="shadow-glow">Glow effect</p>
<p class="roboto-font">Font Roboto từ Google Fonts</p>
</div>
.demo-wrap { font-family: sans-serif; padding: 1rem; }
.demo-wrap h2 { font-size: 1rem; color: #555; margin: 1rem 0 .4rem; border-bottom: 1px solid #ddd; }
.demo-wrap p { margin: .25rem 0; }
.align-left { text-align: left; }
.align-center { text-align: center; }
.align-right { text-align: right; }
.align-justify { text-align: justify; }
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.deco-underline { text-decoration: underline; }
.deco-line { text-decoration: line-through; }
.deco-wavy { text-decoration: underline wavy red; }
.deco-none { text-decoration: none; color: blue; }
.shadow-subtle { text-shadow: 1px 1px 2px rgba(0,0,0,0.4); font-size: 1.2rem; }
.shadow-glow { text-shadow: 0 0 8px #4472c4, 0 0 16px #4472c4; font-size: 1.4rem; color: #6bb8ff; background: #111; padding: 4px 8px; display: inline-block; }
.roboto-font { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 1.2rem; }
Bình luận