Thuộc tính font-size thiết lập cỡ chữ cho văn bản. Áp dụng cho class, ID, hoặc element chứa text. Chấp nhận: px, em, rem, vw, vh, keyword.
Các đơn vị đo cỡ chữ
1. Pixels (px) — Tuyệt đối
- Độ chính xác cao, hiển thị nhất quán cross-browser.
- Nhược điểm: Khả năng truy cập (accessibility) kém — user không zoom font được trên một số trình duyệt.
h1 { font-size: 28px; }
p { font-size: 12px; }
2. em — Tương đối theo Parent
1em= font-size của phần tử cha.- Kế thừa: nếu parent thay đổi, con thay đổi theo.
- Mặc định browser:
16px→1em = 16px,1.5em = 24px.
p { font-size: 1em; } /* 16px */
h1 { font-size: 1.5em; } /* 24px */
3. rem (Root em) — Tương đối theo Root (<html>)
- CSS3. Dựa trên font-size của
<html>(thường 16px). - Không bị ảnh hưởng bởi parent element — dễ dự đoán, quản lý toàn cục.
p { font-size: 1rem; } /* 16px */
h1 { font-size: 1.5rem; } /* 24px */
4. Keywords (Từ khóa)
Absolute keywords (cố định):
xx-small(9px),x-small(10px),small(13px),medium(16px),large(18px),x-large(24px),xx-large(32px).
Relative keywords (tương đối): smaller, larger — thay đổi theo context.
h2 { font-size: x-large; } /* 24px */
h3 { font-size: large; } /* 18px */
5. Viewport Units (vw, vh) — Responsive tự động
1vw= 1% viewport width.1vh= 1% viewport height.- Font tự thay đổi khi resize cửa sổ trình duyệt → trải nghiệm thích ứng tốt.
p { font-size: 1vw; }
h1 { font-size: 4vw; }
Kết luận
font-size chấp nhận nhiều đơn vị: px (chính xác, kém accessibility), em (tương đối parent), rem (tương đối root — khuyên dùng cho design system), keyword (đơn giản), vw/vh (responsive tự động). Kết hợp linh hoạt cho typography hiện đại.