Dùng `clamp()` cho cỡ chữ responsive thay vì hàng loạt media query. Công thức thế nào và có bẫy gì về accessibility?

clamp(min, preferred, max) cho giá trị co giãn liên tục theo viewport, thay vì nhảy bậc tại breakpoint:

h1 { font-size: clamp(1.75rem, 1.2rem + 2.5vw, 3rem); }

Giá trị giữa phải có thành phần vw thì mới co giãn. Cách suy ra hệ số: chọn hai mốc (vd 360px → 28px, 1280px → 48px), tính độ dốc (48-28)/(1280-360) = 0.0217 → 2.17vw, phần bù cố định là giá trị tại 0px quy ra rem.

Bẫy accessibility quan trọng: nếu phần preferred chỉ có vw thuần (clamp(1rem, 4vw, 3rem)), người dùng phóng to chữ trong trình duyệt sẽ không thấy thay đổi vì vw không phụ thuộc font-size gốc — vi phạm WCAG 1.4.4 (resize text tới 200%). Luôn cộng thêm một phần rem như công thức trên để chữ vẫn nở theo cài đặt của người dùng.

Lưu ý khác:

• Đừng để min quá nhỏ; dưới 16px trên mobile là ngưỡng khó đọc và làm iOS Safari tự zoom khi focus input.
• clamp() cũng hợp cho padding, gap, max-width — không riêng font-size.
• Với typography nhiều cấp, kẹp mỗi cấp riêng dễ làm vỡ tỉ lệ; nhiều team kẹp một biến gốc rồi nhân theo thang.