Xem trước
3xlAa67.34px / 4.2087rem
2xlAa50.52px / 3.1573rem
xlAa37.9px / 2.3686rem
lgAa28.43px / 1.7769rem
mdAa21.33px / 1.333rem
baseAa16px / 1rem
smAa12px / 0.7502rem
xsAa9px / 0.5628rem
Type Scale Generator giúp bạn tạo hệ thống kích thước chữ hài hòa dựa trên các tỷ lệ âm nhạc như Perfect Fourth, Major Third hay Golden Ratio. Export CSS variables hoặc Tailwind config.
Typography có hệ thống
Kích thước chữ theo tỷ lệ toán học tạo ra sự hài hòa thị giác tự nhiên.
Phân cấp thông tin rõ
Scale tốt giúp người đọc nhận biết ngay heading, subheading, body text.
Consistent design system
Một scale nhất quán giúp toàn bộ team designer và developer dùng chung.
Export nhiều format
CSS variables, rem values, hoặc Tailwind fontSize config.
01
Chọn base size
Nhập kích thước base (thường là 16px — 1rem).
02
Chọn tỷ lệ
Chọn modular scale ratio: từ Minor Second đến Golden Ratio.
03
Xem preview
Tất cả cấp độ scale được hiển thị trực tiếp với văn bản mẫu.
04
Export
Copy CSS variables hoặc Tailwind config để dùng trong dự án.
Minor Second (1.067)
Rất tinh tế, ít tương phản. Phù hợp giao diện compact.
Major Third (1.250)
Cân bằng tốt giữa tương phản và tinh tế. Phổ biến trong web app.
Perfect Fourth (1.333)
Scale cổ điển của web. Đủ rõ ràng, phù hợp phần lớn dự án.
Golden Ratio (1.618)
Tương phản mạnh nhất, tạo hierarchy ấn tượng. Tốt cho editorial/landing.
Designer
Xây dựng text styles trong Figma dựa trên scale toán học thay vì chọn ngẫu nhiên.
Developer
Nhận CSS/Tailwind config chính xác, sẵn sàng để implement.
Design System
Tạo nền tảng typography vững chắc cho toàn bộ design system.