Chữ co giãn theo màn hình là gì?
Còn gọi: fluid typography, fluid type, chữ co giãn, clamp(), css clamp
Fluid typography là kỹ thuật cho cỡ chữ thay đổi mượt theo bề rộng màn hình trong một khoảng tối thiểu và tối đa, thay vì nhảy bậc tại từng breakpoint, thường dùng hàm CSS clamp().
Hiểu kỹ hơn
Ví dụ font-size: clamp(2rem, 1.25rem + 3vw, 3.5rem) nghĩa là tiêu đề không nhỏ hơn 32 px, không lớn hơn 56 px, và ở giữa thì to dần theo bề ngang màn hình. Cách này đặc biệt hợp cho tiêu đề lớn ở hero, nơi cỡ chữ desktop quá to cho điện thoại còn cỡ mobile quá nhỏ cho màn hình rộng. Thân bài thường thay đổi ít, khoảng 16 đến 18 px. Designer chỉ cần cung cấp cỡ chữ ở màn hình nhỏ nhất và lớn nhất cho mỗi cấp trong type scale; có các công cụ online tính sẵn công thức clamp. Lưu ý: phần giá trị nên có thành phần rem chứ không chỉ vw, để chữ vẫn phóng to được khi người dùng zoom trình duyệt, theo yêu cầu tiếp cận.
