Tạo Thang Chữ — Kích Thước Font Hài Hòa

Kích thước font được chọn ngẫu nhiên trông hỗn loạn. Thang chữ modular sử dụng tỷ lệ toán học để có kích thước hài hòa, nhất quán trong toàn bộ thiết kế.

Thang Chữ Modular Là Gì?

Bắt đầu với kích thước cơ bản (ví dụ 16px) và nhân với tỷ lệ cố định cho mỗi bước. Major Third (1,25) cho: 10, 12,5, 16, 20, 25, 31,3px. Perfect Fourth (1,333) tạo độ tương phản kịch tính hơn. Minor Second (1,067) tinh tế hơn.

Dùng CSS Custom Properties

--font-size-sm: 0.75rem; --font-size-base: 1rem; --font-size-lg: 1.25rem; --font-size-xl: 1.5rem; --font-size-2xl: 2rem. Bằng cách dùng biến CSS, toàn bộ kiểu chữ tự động điều chỉnh khi thay đổi kích thước cơ bản.

Điều Chỉnh Thang Cho Web

Trên di động dùng tỷ lệ nhỏ hơn (1,2) cho phân cấp compact. Trên máy tính dùng lớn hơn (1,333–1,5) để tạo độ tương phản kịch tính hơn. Kiểu chữ fluid với clamp() nội suy mượt mà giữa các thang.