Tạo hệ thống chữ đồng bộ cho toàn bộ UI, xem preview trực quan và sinh CSS clamp() chuẩn production chỉ với vài cú nhấp.
Điền giá trị và nhấn "Tạo scale" để xem preview typography.
1. Nhập cỡ chữ gốc (ví dụ 16px) và chọn tỷ lệ mong muốn (Major Third, Perfect Fourth, Golden Ratio...).
2. Thiết lập viewport tối thiểu/tối đa cùng hệ số mở rộng desktop để tạo công thức clamp() phù hợp.
3. Nhập thông tin font cho body và heading: tên font, độ đậm, line-height, letter-spacing, màu sắc.
4. Nhấn "Tạo scale" hoặc dùng phím tắt Ctrl+Enter để tính toán.
5. Xem preview từng heading, đoạn văn và sao chép CSS bằng nút "Sao chép CSS".
6. Sử dụng nút "Ví dụ" để tải preset có sẵn hoặc Ctrl+K để xóa nhanh.
• Hệ số desktop: Tỷ lệ phóng to tối đa cho toàn bộ scale. Ví dụ 1.3 nghĩa là chữ lớn hơn 30% ở viewport tối đa.
• Đơn vị: rem giữ được sự nhất quán theo root font-size, px phù hợp khi bạn muốn giá trị tuyệt đối.
• Clamp(): Được hỗ trợ bởi tất cả trình duyệt hiện đại. Với dự án cũ, giữ thêm fallback px/rem.
• Viewport: Thiết kế mobile-first thường dùng 360px-1440px. Dashboard rộng có thể tăng max lên 1680-1920px.
• Preview: Chụp màn hình preview cho guideline typography gửi team dev hoặc khách hàng.
Công cụ giúp bạn xây dựng hệ thống typography chuẩn mực dựa trên các tỷ lệ âm nhạc kinh điển, nhờ đó giữ sự nhất quán giữa heading, paragraph và chú thích.
Preview theo thời gian thực hiển thị cả heading H1-H6, đoạn văn, chú thích để bạn đánh giá độ tương phản và tính đọc được ngay lập tức.
CSS được sinh kèm clamp() để chữ tự động co giãn mượt mà giữa viewport tối thiểu/tối đa mà không cần media query.
Bạn có thể tuỳ chỉnh font, weight, line-height, màu sắc để khớp với brand guideline hoặc hệ thống design token hiện có.
Phần thống kê giúp bạn kiểm tra nhanh phạm vi kích thước, khoảng viewport và màu sắc đã chọn trước khi đưa vào production.
• Landing page: Golden Ratio (1.618), base 17px, viewport 360-1440px → H1: 72-117px, paragraph: 17-27px
• Dashboard: Ratio 1.25, desktop scale 1.15 → heading lớn nhưng dễ đọc trên màn hình lớn
• Ứng dụng đọc báo: Ratio 1.2 với rem và letter-spacing 0.01em tăng khả năng đọc mobile
• Bộ nhận diện: Heading serif + body sans-serif, so sánh trực quan ngay trong preview
