Tạo fluid typography với clamp() và type scale theo tỷ lệ modular — preview tại các breakpoint, copy CSS variables hoặc Tailwind config
Tham số
CSS clamp()
font-size: clamp(1rem, 1.50235vw + 0.64789rem, 2rem);Slope
1.50235vw
Intercept
0.64789rem
Min
1rem
Max
2rem
Preview tại các breakpoint
| Viewport | Font size (px) | Font size (rem) |
|---|---|---|
| 375px | 16px | 1rem |
| 768px | 21.9px | 1.3687rem |
| 1024px | 25.75px | 1.6094rem |
| 1280px | 29.6px | 1.85rem |
| 1440px | 32px | 2rem |
Live preview (resize window)
The quick brown fox jumps over the lazy dog
Applied: clamp(1rem, 1.50235vw + 0.64789rem, 2rem)
Điểm nổi bật
Các điểm đáng chú ý nhất của công cụ này để bạn nắm nhanh trước khi dùng.
Sinh tự động hàm CSS clamp() với giá trị min, preferred và max để font co giãn mượt mà theo viewport.
Tạo hệ thống cỡ chữ hài hoà với 6 preset tỉ lệ phổ biến: Minor Third, Major Third, Perfect Fourth và nhiều hơn.
Giá trị clamp() cho phép font thay đổi liên tục từ màn hình nhỏ đến lớn mà không cần breakpoint cứng.
Sao chép ngay đoạn CSS hoàn chỉnh để dán vào stylesheet hoặc design token của dự án.
Cách sử dụng
Làm theo từng bước để dùng công cụ nhanh và đúng intent ngay từ lần đầu.
Nhập kích thước font tối thiểu, tối đa và chiều rộng viewport tương ứng. Công cụ tính toán và xuất ra hàm clamp() chính xác.
Kiểm tra preview để thấy font thay đổi như thế nào khi kéo thả thanh viewport.
Chọn font-size gốc và tỉ lệ mong muốn. Bảng thang đo tự động tạo ra các cấp h1–h6 và body text cân đối.
Copy CSS variables hoặc từng giá trị riêng lẻ để tích hợp ngay vào dự án.
Câu hỏi thường gặp
Những câu hỏi gặp nhiều nhất khi dùng công cụ, được trình bày ngắn gọn và dễ quét.