Trình tạo Thang Kiểu chữ
Công cụ tạo type scale này tính thang cỡ chữ modular từ cỡ chữ gốc và một tỷ lệ, từ Minor Second (1.067) đến Golden Ratio (1.618), và xuất chín cỡ chữ dưới dạng CSS custom properties.
Về công cụ này
Công cụ tạo type scale này tính thang cỡ chữ modular từ cỡ chữ gốc và một tỷ lệ, từ Minor Second (1.067) đến Golden Ratio (1.618), và xuất chín cỡ chữ dưới dạng CSS custom properties.
Cách sử dụng
- Nhập cỡ chữ gốc theo pixel (16 px là mặc định của trình duyệt).
- Chọn tỷ lệ thang, chẳng hạn Major Third (1.25).
- Chọn đơn vị đầu ra: rem, px hoặc em.
- Nhấn Copy CSS Variables để dùng các cỡ chữ từ --xs đến --4xl.
Điều nên biết
- Mỗi bước trong thang modular bằng cỡ chữ trước đó nhân với cùng một tỷ lệ.
- Công cụ tạo ra chín bước: hai bước nhỏ hơn cỡ gốc, cỡ gốc và sáu bước lớn hơn.
- Tỷ lệ nhỏ (1.067–1.2) phù hợp với giao diện dày đặc; tỷ lệ lớn (1.333–1.618) phù hợp với trang biên tập có tiêu đề lớn.
- Giá trị rem được tính dựa trên cỡ chữ gốc 16 px.
- Dùng rem giúp chữ co giãn theo thiết lập cỡ chữ trong trình duyệt của người dùng.
Chạy hoàn toàn trong trình duyệt của bạn — không có dữ liệu nào bạn nhập được tải lên hay lưu lại.
Câu hỏi thường gặp
Type scale modular là gì?
Đó là tập hợp các cỡ chữ trong đó mỗi cỡ bằng cỡ trước nhân với một tỷ lệ cố định, giúp tiêu đề và nội dung có sự liên kết về mặt thị giác.
Nên dùng tỷ lệ type scale nào?
Major Third (1.25) và Perfect Fourth (1.333) là những lựa chọn đa năng phổ biến. Dùng tỷ lệ nhỏ hơn cho ứng dụng và dashboard, tỷ lệ lớn hơn cho landing page và blog.
Cỡ chữ nên dùng rem hay px?
rem thường được khuyên dùng vì nó tôn trọng cỡ chữ ưa thích của người dùng trong trình duyệt, giúp cải thiện khả năng tiếp cận.
Nên dùng cỡ chữ gốc bao nhiêu?
16 px là mặc định chuẩn của trình duyệt và là cỡ gốc tốt cho nội dung; nhiều trang web dùng 16–18 px để đọc thoải mái.