Trở về/Type Scale Generator
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
Cách sử dụng Tạo thang đo chữ

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.

Vì sao cần Type Scale nhất quán?

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.

Cách tạo Type Scale

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.

Các tỷ lệ Type Scale phổ biế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.

Lợi ích dùng Type Scale Generator

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.