Fluid typography công thức thế nào?

Fluid typography là cho cỡ chữ co giãn liên tục theo bề rộng, thay vì nhảy bậc tại từng breakpoint.

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

Ba phần: cỡ nhỏ nhất, biểu thức co giãn, cỡ lớn nhất.

Cách tính phần giữa cho hai mốc viewport (vd 320px → 1280px, chữ 1.75rem → 3rem):

độ dốc  = (maxSize - minSize) / (maxVW - minVW)
        = (48 - 28) / (1280 - 320) = 0.02083
vw      = độ dốc * 100                  = 2.083vw
hằng số = minSize - độ dốc * minVW      = 28 - 6.67 = 21.33px = 1.333rem

→ font-size: clamp(1.75rem, 1.333rem + 2.083vw, 3rem);

Công cụ tính sẵn: utopia.fyi — nhập cỡ chữ và khoảng viewport, nó sinh luôn chuỗi clamp() cho cả thang.

Lưu ý 1 — accessibility. Phần giữa phải có thành phần rem. Viết clamp(1.75rem, 3vw, 3rem) thuần vw khiến chữ không phóng to theo thiết lập cỡ chữ của người dùng khi đang nằm trong khoảng — vi phạm WCAG 1.4.4.

Lưu ý 2: áp clamp() cho mọi cỡ chữ làm thang chữ mất tỉ lệ ở màn hình trung gian. Thường chỉ cần fluid cho heading và khoảng cách lớn; chữ thân bài để cố định 1rem là đủ.