Trình tạo thang kiểu chữ
Tạo thang kiểu chữ mô-đun cho thiết kế của bạn. Chọn kích thước cơ sở và tỷ lệ để tạo kích thước tiêu đề có tỷ lệ hoàn hảo.
Thang kiểu chữ mô-đun là gì?
Thang kiểu chữ mô-đun là một tập hợp kích thước font tuân theo một tỷ lệ toán học nhất quán - ví dụ Major Third (1,25x) hoặc Perfect Fourth (1,333x). Thay vì chọn kích thước tùy tiện, mỗi tiêu đề từ h1 đến h6 lớn hơn theo tỷ lệ so với tiêu đề bên dưới. Kết quả là typography cảm thấy hài hòa và cân bằng về mặt thị giác.
Cách chọn tỷ lệ phù hợp
Tỷ lệ nhỏ hơn như Minor Second (1,067) hoặc Major Second (1,125) tạo ra các thang tinh tế, nhỏ gọn - tốt cho giao diện dày đặc. Tỷ lệ lớn hơn như Perfect Fourth (1,333) hoặc Golden Ratio (1,618) tạo ra sự tương phản ấn tượng - lý tưởng cho các trang editorial. Major Third (1,25) là lựa chọn mặc định an toàn hoạt động tốt ở hầu hết kích thước màn hình.
Sử dụng CSS được tạo ra
Bảng Generated CSS xuất ra các thuộc tính CSS tùy chỉnh trong :root (ví dụ --text-h1) và các bộ chọn trực tiếp cho từng cấp tiêu đề. Sao chép và dán vào stylesheet của bạn. Sử dụng nút chuyển đổi rem để có kích thước linh hoạt, dễ tiếp cận mà mở rộng theo tùy chọn font của trình duyệt, hoặc px nếu thiết kế của bạn yêu cầu kích thước cố định.
Thang kiểu chữ và khả năng tiếp cận
Sử dụng đơn vị rem thay vì px làm cho typography của bạn mở rộng theo tùy chọn kích thước font hệ thống của người dùng, đây là một cân nhắc quan trọng về khả năng tiếp cận. WCAG khuyến nghị rằng văn bản có thể được thay đổi kích thước lên đến 200% mà không mất nội dung hoặc chức năng. Thang kiểu chữ có cấu trúc tốt kết hợp với đơn vị rem đáp ứng yêu cầu này một cách tự động.