Typography Scale - Tạo Typography Scale Online

Tính năng nổi bật

• Nhập cỡ chữ gốc trong khoảng từ 8 tới 32 pixel
• Chọn một trong tám tỷ lệ nhân từ 1,067 tới 1,618 kèm tên gọi theo quãng nhạc
• Sinh mười một cấp cỡ chữ, năm cấp nhỏ hơn và năm cấp lớn hơn cỡ gốc
• Làm tròn từng cấp tới hai chữ số thập phân để tránh số lẻ dài
• Xem trước từng cấp bằng chữ mẫu thật, kèm tên bước và số pixel
• Xuất khối biến CSS đặt trong :root theo dạng --font-tên-bước
• Xuất khối fontSize dùng thẳng trong tệp cấu hình Tailwind
• Nút sao chép riêng cho từng khối mã, mọi tính toán chạy trên trình duyệt

Vì sao cần một thang cỡ chữ thay vì chọn số tùy hứng

Trong một dự án không có thang cỡ chữ, mỗi lần cần một cỡ mới người ta lại gõ một con số nghe hợp lý. Sau vài tháng, tệp CSS có 14, 15, 16, 17, 18, 19, 20 pixel cùng tồn tại, trong đó nhiều cặp lệch nhau một pixel — khác biệt nhỏ tới mức mắt không phân biệt được nên chúng không tạo ra thứ bậc thông tin nào, chỉ tạo ra rác. Thang cỡ chữ giải quyết chuyện đó bằng cách quy định trước một tập hợp đóng: chỉ những cỡ trong thang mới được dùng, và giữa hai cấp liền kề luôn có khoảng cách đủ lớn để người đọc nhận ra đây là hai mức khác nhau. Lợi ích thứ hai là khả năng đổi đồng loạt: khi thang được lưu thành biến CSS, chỉnh cỡ gốc hoặc đổi tỷ lệ là toàn bộ giao diện giãn theo nhất quán, thay vì phải sửa hàng trăm chỗ rải rác.

Lợi ích khi sử dụng

• •Chấm dứt tình trạng hàng chục cỡ chữ lệch nhau một pixel nằm rải rác trong dự án
• •Đổi cỡ gốc hoặc tỷ lệ là toàn bộ giao diện giãn theo nhất quán
• •Có sẵn tên bước nên lập trình viên và người thiết kế gọi cùng một ngôn ngữ
• •Nhìn được khoảng cách thật giữa các cấp thay vì đoán từ con số
• •Xuất trực tiếp ra biến CSS hoặc cấu hình Tailwind, không phải gõ lại từng dòng

Cách tạo thang cỡ chữ

1. 1Nhập cỡ chữ gốc, thường là 16 pixel vì đó cũng là cỡ chữ mặc định của trình duyệt cho nội dung đọc.
2. 2Chọn tỷ lệ nhân trong danh sách, bắt đầu bằng 1,250 nếu bạn chưa có lý do rõ ràng để chọn khác.
3. 3Nhìn khung xem trước để đánh giá khoảng cách giữa các cấp có đủ rõ ràng cho nội dung của bạn hay không.
4. 4Đổi tỷ lệ và cỡ gốc vài lần rồi so sánh, vì cùng một tỷ lệ cho cảm giác rất khác khi cỡ gốc thay đổi.
5. 5Bấm sao chép khối biến CSS hoặc khối Tailwind, dán vào dự án và từ đó chỉ dùng các cỡ trong thang.

Công thức thang chữ và ví dụ tính bằng số thật

Thang cỡ chữ theo tỷ lệ là một cấp số nhân: cỡ của bước thứ n bằng cỡ gốc nhân với tỷ lệ mũ n. Với cỡ gốc 16 pixel và tỷ lệ 1,250, bước 1 cho 20 pixel, bước 2 cho 25, bước 3 cho 31,25, bước 4 cho 39,06 và bước 5 cho 48,83. Đi xuống thì bước âm chia thay vì nhân: bước âm 1 cho 12,8 pixel, bước âm 2 cho 10,24, bước âm 3 cho 8,19. Điểm quan trọng là khoảng cách tuyệt đối giữa hai bậc không đều nhau — từ bước 4 lên bước 5 chênh gần 10 pixel trong khi từ bước âm 3 lên bước âm 2 chỉ chênh hai pixel — nhưng tỷ lệ giữa hai bậc liền kề thì luôn bằng nhau, và mắt người cảm nhận cỡ chữ theo tỷ lệ chứ không theo hiệu số. Đó chính là lý do một thang nhân đều cho cảm giác cân đối hơn thang cộng đều kiểu 14, 16, 18, 20, 22.

Tám tỷ lệ trong công cụ và nên chọn cái nào

Tám tỷ lệ được đặt tên theo các quãng trong âm nhạc, từ chật tới rộng: 1,067 Minor Second, 1,125 Major Second, 1,200 Minor Third, 1,250 Major Third, 1,333 Perfect Fourth, 1,414 Augmented Fourth, 1,500 Perfect Fifth và 1,618 Golden Ratio. Quy tắc thực dụng là nội dung càng nhiều chữ và càng nhiều cấp tiêu đề thì tỷ lệ càng phải nhỏ. Trang tin tức hay tài liệu kỹ thuật có tới sáu cấp tiêu đề thường hợp với 1,125 hoặc 1,200, vì tỷ lệ lớn sẽ đẩy tiêu đề cấp một lên kích cỡ vô lý. Ngược lại, trang giới thiệu sản phẩm chỉ có một tiêu đề lớn và một đoạn mô tả thì 1,414 hay 1,618 tạo được độ tương phản mạnh rất hợp. Với 1,618 và cỡ gốc 16 pixel, bước 3 đã lên 67,8 pixel và bước 5 lên tới 177 pixel — chỉ dùng được cho màn hình lớn. Một cách làm phổ biến là dùng tỷ lệ nhỏ cho màn hình điện thoại và tỷ lệ lớn hơn cho màn hình rộng.

Cách đọc bảng kết quả và quy ước đặt tên bước

Công cụ trải mười một bước, từ âm năm tới dương năm, và đặt tên lần lượt là xs, sm, base-sm, base, md, lg, xl, 2xl, 3xl, 4xl, 5xl. Có một điểm cần để ý: cỡ chữ gốc bạn nhập rơi vào bước 0, tức là bước mang tên lg chứ không phải bước tên base. Bước tên base nằm ở vị trí âm hai, tương ứng cỡ gốc chia cho tỷ lệ bình phương. Nếu bạn nhập 16 pixel với tỷ lệ 1,250 thì lg bằng 16 còn base chỉ bằng 10,24 pixel — quá nhỏ cho nội dung đọc. Vì vậy khi đưa thang vào dự án, hãy đối chiếu theo con số pixel chứ đừng tin vào tên bước, và nếu muốn giữ quy ước quen thuộc thì đổi tên biến sau khi dán vào tệp CSS. Ngoài ra khung xem trước giới hạn chữ mẫu ở 48 pixel để không phá vỡ bố cục, nên các bước lớn hơn 48 pixel đều hiện cùng một cỡ dù con số bên cạnh vẫn đúng.

Từ pixel sang rem và cách làm thang co giãn theo màn hình

Công cụ xuất kết quả theo pixel, nhưng khi đưa vào sản phẩm nên đổi sang rem bằng cách chia cho 16, vì rem tôn trọng thiết lập cỡ chữ mà người dùng đặt trong trình duyệt còn pixel thì không. Người thị lực kém tăng cỡ chữ mặc định lên 20 pixel sẽ không thấy thay đổi gì nếu bạn khóa cứng bằng pixel. Bước tiếp theo là làm thang co giãn theo bề rộng màn hình bằng hàm clamp, gồm ba tham số: cỡ nhỏ nhất, cỡ co giãn theo đơn vị vw và cỡ lớn nhất. Cách làm gọn là chạy công cụ hai lần, một lần với cỡ gốc và tỷ lệ nhỏ cho điện thoại, một lần với cỡ gốc và tỷ lệ lớn cho màn hình rộng, rồi ghép hai đầu vào clamp cho từng bậc. Lưu ý luôn đặt giới hạn trên, vì cỡ chữ dùng đơn vị vw không có trần sẽ phình ra vô lý trên màn hình rất rộng và có thể chặn khả năng phóng to của người dùng.

Những gì thang cỡ chữ không giải quyết

Thang cỡ chữ chỉ định nghĩa một trục duy nhất là kích cỡ. Ba yếu tố còn lại của một hệ thống chữ nghĩa vẫn phải quyết định riêng. Thứ nhất là chiều cao dòng: nó không cố định theo bậc mà thay đổi ngược chiều với cỡ chữ, chữ càng lớn thì hệ số chiều cao dòng càng nhỏ, nên đừng gán một hệ số duy nhất cho cả thang. Thứ hai là độ dày nét và độ giãn chữ, vì một tiêu đề 40 pixel ở nét đậm cần giãn chữ âm nhẹ mới không trông rời rạc. Thứ ba là độ dài dòng, thường nên giữ trong khoảng 45 tới 75 ký tự cho nội dung đọc dài — cỡ chữ tăng mà bề rộng cột không đổi thì độ dài dòng tự giảm, và ngược lại. Cuối cùng, đừng dùng các bậc nhỏ nhất của thang cho nội dung thật: dưới 12 pixel gần như không đọc được trên điện thoại, các bậc đó chỉ nên dành cho nhãn phụ hoặc ghi chú rất ngắn.

Câu hỏi thường gặp (FAQ)

Từ khóa liên quan

• typography scale online
• tạo thang cỡ chữ
• modular scale typography
• tỷ lệ vàng trong typography
• font size scale css
• biến css cho cỡ chữ
• tailwind fontsize config
• chọn cỡ chữ cho website
• hệ thống typography web
• perfect fourth typography
• major third scale
• px sang rem
• clamp css cỡ chữ
• fluid typography
• cỡ chữ chuẩn cho web
• thứ bậc tiêu đề h1 h2 h3
• design system typography
• cỡ chữ tối thiểu trên mobile
• typography scale generator miễn phí
• quy chuẩn cỡ chữ giao diện