Trình tạo thang tỷ lệ chữ

Hướng dẫn tỷ lệ kiểu chữ

Thang đo kiểu chữ là một tập hợp các kích thước phông chữ tuân theo tỷ lệ toán học nhất quán. Thay vì chọn kích thước ngẫu nhiên, mỗi bước được nhân với cùng một tỷ lệ — tạo ra nhịp điệu trực quan và thứ bậc trên các tiêu đề, nội dung và chú thích.

Chọn kích thước cơ bản (16px là mặc định của trình duyệt và là điểm bắt đầu chắc chắn), sau đó chọn tỷ lệ. Các tỷ lệ nhỏ hơn như 1,125 tạo ra thang đo tinh tế, trang nhã cho các trang biên tập; tỷ lệ lớn hơn như 1,618 tạo ra độ tương phản ấn tượng cho các trang tiếp thị.

Pro Tips

• Tỷ lệ vàng (1.618) là đẹp đối với các tiêu đề hiển thị nhưng lại quá cao đối với các trang web có nội dung nặng. Để đọc dạng dài, hãy nằm trong khoảng từ 1,125 đến 1,333.
• Xuất tỷ lệ dưới dạng thuộc tính tùy chỉnh CSS và tham chiếu chúng ở mọi nơi: font-size: var(--font-lg). Thay đổi tỷ lệ sau này có nghĩa là chỉnh sửa một tệp.

Thang chữ là gì

Thang chữ (typographic scale) là tập hợp cố định các cỡ chữ theo cùng một tỷ lệ toán học, sao cho mỗi bậc nối với bậc kế bằng đúng tỷ lệ đó. Thay vì chọn cỡ theo cảm tính — 14, 17, 22, 31... — bạn chọn cỡ nền rồi nhân (hoặc chia) lặp lại theo tỷ lệ: 16 × 1,25 = 20, × 1,25 = 25, cứ thế. Kết quả là một hệ phân cấp có chủ đích: tiêu đề, nội dung, chú thích và nhãn đều trông như thành viên của cùng một hệ thống thiết kế, chứ không phải đống cỡ chữ rời rạc.

So sánh các tỷ lệ thang

Các tỷ lệ phổ biến hành xử khác nhau. 1,125 và 1,2 tạo bậc tinh tế, thanh lịch — lý tưởng cho giao diện dày đặc chữ. 1,25 và 1,333 là ngựa thồ của web: phân cấp rõ ràng mà không gắt, và 1,333 tình cờ là quãng bốn đúng trong nhạc cổ điển. 1,5 cho bước nhảy mạnh mẽ với trang nội dung. 1,618 — tỷ lệ vàng — nổi bật nhưng dữ dội: đẹp cho tiêu đề trình diễn và trang marketing, thường quá tay với bài đọc dài.

Chọn cỡ chữ nền

16px là mặc định trình duyệt và là điểm xuất phát đúng cho nội dung trên desktop: tương đương độ thoải mái của sách in, dễ đọc với đa số người dùng, và phù hợp hướng dẫn tiếp cận. Giao diện di động có thể bắt đầu nhỏ hơn chút (15px) hoặc giữ nguyên 16px. Khi nền đã chốt, mọi thứ khác đều suy ra từ đó — tiêu đề nhân lên, chú thích và nhãn chia xuống — chỉ cần đổi một giá trị nền là cả hệ phân cấp được chỉnh lại đồng bộ.

Độ cao dòng và nhịp dọc

Thang chữ không chỉ là cỡ chữ. Độ cao dòng nên tăng khi chữ nhỏ đi: nội dung 1,5–1,6, tiêu đề 1,2–1,4. Với nhịp dọc, nhân cỡ nền với tỷ lệ thang để dựng các bậc khoảng cách — nếu thang là 16/20/25/31, chính những số đó dùng làm gia số margin và padding. Khi cỡ chữ và khoảng cách chia sẻ cùng tỷ lệ, mọi yếu tố khớp vào một lưới vô hình và trang trông được 'dàn' chứ không phải 'xếp'.

Chữ responsive với clamp()

Chữ nên co giãn mượt giữa di động và desktop. CSS hiện đại giải quyết bằng một dòng: font-size: clamp(1rem, 0.7rem + 1.2vw, 1.75rem) — giá trị nhỏ nhất, khoảng giữa linh hoạt, giá trị lớn nhất. Lấy nhỏ nhất và lớn nhất từ thang của bạn (ví dụ 16px đến 28px), phần viewport lo phần còn lại — tiêu đề co duyên dáng trên điện thoại và phóng to trên màn hình mà không cần một media query nào.