Fluid type scale: biến CSS dùng clamp()
Công cụ fluid type scale này biến năm con số thành một khối thuộc tính tùy chỉnh CSS, mỗi cỡ chữ một biến, mỗi biến viết dưới dạng clamp() với đơn vị rem và vw. Bạn nhập khoảng độ rộng màn hình, cỡ cơ sở ở hai đầu và tỷ lệ thang, rồi mọi bậc từ --text-xs đến --text-4xl sẽ lớn dần mượt mà theo màn hình mà không cần media query. Không có gì được tải lên: CSS được tạo ngay trong trình duyệt của bạn.
Cách tạo fluid type scale từng bước
Điền năm ô ở phía trên. Viewport tối thiểu (mặc định 320) và Viewport tối đa (1200) là độ rộng màn hình, tính bằng pixel, tại đó chữ nhỏ nhất và lớn nhất. Cỡ cơ sở tối thiểu (16) và Cỡ cơ sở tối đa (20) là cỡ chữ nội dung ở hai độ rộng đó. Tỷ lệ thang (1,25) quy định mỗi bậc lớn hơn bậc dưới nó bao nhiêu. Mỗi ô có một hộp số và một thanh trượt.
- Nhập khoảng độ rộng màn hình.
- Nhập cỡ cơ sở cho màn hình hẹp và màn hình rộng.
- Chọn tỷ lệ thang.
- Khung CSS bên dưới cập nhật khi bạn gõ nên không có nút gửi. Khi kết quả ổn, hãy bấm Sao chép CSS rồi dán khối :root vào stylesheet của bạn.
Ô nào không dùng được sẽ hiện thông báo: viewport tối đa phải lớn hơn viewport tối thiểu, cỡ cơ sở tối đa lớn hơn cỡ cơ sở tối thiểu, tỷ lệ từ 1 trở lên và mọi số lớn hơn 0. Hãy dùng một bậc ở bất cứ nơi nào bạn đặt kích thước, ví dụ h1 { font-size: var(--text-3xl); }
Xem trước ở mọi độ rộng màn hình
Trong phần Xem trước, hãy kéo Độ rộng xem trước giữa viewport tối thiểu và tối đa. Mỗi bậc hiện thành dòng mẫu “Chữ co giãn mượt mà” ở đúng cỡ mà nó có tại độ rộng đó, kèm tên biến và cỡ tính bằng pixel, bậc lớn nhất nằm trên cùng.
Nhờ vậy bạn đánh giá được độ chênh giữa chữ nội dung và tiêu đề trên một chiếc điện thoại nhỏ lẫn một màn hình desktop rộng, trước khi sao chép bất cứ thứ gì.
Cỡ chữ clamp() được tính như thế nào
Với mỗi bậc, công cụ tính cỡ chữ ở đầu hẹp (cỡ cơ sở tối thiểu nhân tỷ lệ lũy thừa theo số bậc) và ở đầu rộng (cỡ cơ sở tối đa nhân cùng lũy thừa đó). Sau đó nó vẽ một đường thẳng nối hai điểm: độ dốc là mức thay đổi cỡ chữ chia cho mức thay đổi độ rộng viewport, còn hệ số chặn là cỡ tối thiểu trừ đi viewport tối thiểu nhân độ dốc. Độ dốc thành phần vw, hệ số chặn thành phần rem, và hai cỡ ở hai đầu thành giá trị nhỏ nhất và lớn nhất của clamp(). Các giá trị được làm tròn đến 4 chữ số thập phân.
Với giá trị mặc định, các bậc tại 320, 760 và 1200 px là:
- --text-sm: 12,8 / 14,4 / 16 px
- --text-base: 16 / 18 / 20 px
- --text-lg: 20 / 22,5 / 25 px
- --text-xl: 25 / 28,13 / 31,25 px
Vì sao dùng rem và vw thay vì px
Một kích thước chỉ viết bằng vw sẽ bỏ qua cỡ chữ mà người truy cập đã chọn trong trình duyệt và không lớn lên khi phóng to. Vì ở đây mỗi con số được tách thành phần rem và phần vw, chữ vẫn theo cỡ chữ gốc của người dùng và vẫn phóng to được, nên người cần chữ lớn hơn vẫn đọc được. Công cụ không bao giờ xuất px.
Nếu trang của bạn đặt html { font-size: 62.5% } hoặc một gốc khác 16 px, hãy mở Nâng cao và đổi Cỡ chữ gốc để 1rem khớp.
Chọn viewport, cỡ cơ sở và tỷ lệ thang
Khoảng mặc định 320 đến 1200 phủ từ điện thoại nhỏ đến laptop. Hãy chọn viewport tối đa là độ rộng lớn nhất mà bạn muốn chữ còn lớn thêm, vì vượt qua đó cỡ chữ giữ nguyên ở mức tối đa. Với chữ nội dung, cặp 16 px và 20 px là lựa chọn phổ biến. Tỷ lệ quyết định tính cách của thang:
- 1,2 (quãng ba thứ): các bậc êm và sát nhau
- 1,25 (quãng ba trưởng): cân bằng, là giá trị mặc định
- 1,333 (quãng bốn đúng): tương phản rõ
- 1,5 (quãng năm đúng): tiêu đề nổi bật
- 1,618 (tỷ lệ vàng): bước nhảy rất lớn
Với tỷ lệ 1, mọi bậc có cùng cỡ. Tỷ lệ là một con số dùng chung cho hai đầu, nên thang tại 320 px và 1200 px có cùng tỷ lệ; chỉ cỡ cơ sở thay đổi.
Trong Nâng cao, Tiền tố biến (mặc định --text) đổi tên mọi thuộc tính. Tên các bậc chuyển giữa sm, lg, xl (--text-sm, --text-base, --text-lg, v.v.) và -1, 1, 2 (--text--1, --text-0, --text-1, v.v.). Bậc nhỏ hơn (từ 0 đến 4, mặc định 2) và Bậc lớn hơn (từ 0 đến 8, mặc định 5) quyết định có bao nhiêu cỡ nằm dưới và trên cỡ cơ sở.
Những gì công cụ này không làm
Nó chỉ tạo thang cỡ chữ. Không có xuất sang Tailwind hay định dạng khác, không có tùy chỉnh riêng cho từng bậc, không có tỷ lệ riêng cho đầu hẹp và đầu rộng, và không xuất px.
Câu hỏi thường gặp
Fluid type scale là gì?
Fluid type scale là một bộ cỡ chữ lớn dần mượt mà theo độ rộng màn hình thay vì nhảy tại các breakpoint. Mỗi bậc, như nhỏ, cơ sở, lớn và rất lớn, có một cỡ tối thiểu cho màn hình hẹp và một cỡ tối đa cho màn hình rộng, còn cỡ ở giữa nằm trên một đường thẳng. Công cụ ghi mỗi bậc thành một thuộc tính tùy chỉnh CSS để bạn dùng lại trên cả trang web.
Dùng CSS clamp() cho cỡ chữ như thế nào?
clamp(min, ưu tiên, max) nhận ba giá trị. Trình duyệt dùng giá trị ưu tiên nhưng không bao giờ xuống dưới mức tối thiểu hay vượt mức tối đa. Với chữ, giá trị ưu tiên là một lượng rem cộng một lượng vw, ví dụ clamp(1rem, 0.9091rem + 0.4545vw, 1.25rem). Hãy đặt nó vào một thuộc tính tùy chỉnh, rồi viết font-size: var(--text-base) ở bất cứ nơi nào bạn cần.
Làm sao để tạo font size responsive using clamp trong CSS?
Khai báo các cỡ chữ một lần dưới dạng biến clamp() và chữ sẽ đổi cỡ liên tục khi cửa sổ thay đổi, không cần media query. Đặt “Viewport tối thiểu” và “Viewport tối đa” ở độ rộng bạn muốn có cỡ nhỏ nhất và lớn nhất, nhập “Cỡ cơ sở tối thiểu” và “Cỡ cơ sở tối đa” rồi sao chép CSS. Dưới viewport tối thiểu chữ giữ cỡ nhỏ nhất, còn trên viewport tối đa chữ giữ cỡ lớn nhất.
Vì sao cỡ chữ clamp() của tôi không hoạt động?
Nguyên nhân thường gặp là thiếu đơn vị ở một giá trị, không có khoảng trắng quanh dấu cộng trong clamp(), giá trị tối thiểu lớn hơn tối đa, hoặc giá trị ưu tiên chỉ viết bằng vw nên bỏ qua cài đặt cỡ chữ của người dùng. Các dòng được tạo ra tránh cả bốn lỗi này: mọi giá trị đều có đơn vị, dấu cộng có khoảng trắng và giá trị tối thiểu luôn nhỏ hơn tối đa.
Công cụ này có giống Utopia fluid type scale calculator không?
Ý tưởng giống nhau: cỡ chữ được nội suy tuyến tính giữa viewport hẹp và viewport rộng, và mỗi bậc là bội số của cỡ cơ sở theo tỷ lệ. Khác biệt là ở đây chỉ có một tỷ lệ thang cho cả hai đầu, không có tùy chỉnh riêng từng bậc và chỉ xuất thuộc tính tùy chỉnh CSS thuần, không xuất sang Tailwind hay định dạng khác. Hãy chọn nó khi bạn muốn có khối :root thật nhanh.
Quãng ba trưởng hay quãng bốn đúng: nên chọn tỷ lệ thang nào?
Quãng ba trưởng (1,25) là mặc định tốt cho trang nhiều chữ, vì các bậc đủ sát nhau để tiêu đề không lấn át nội dung. Quãng bốn đúng (1,333) cho độ tương phản giữa các bậc lớn hơn và hợp với trang giới thiệu sản phẩm hay tiêu đề cỡ lớn. Quãng ba thứ (1,2) còn êm hơn nữa. Hãy gõ tỷ lệ vào “Tỷ lệ thang” và xem “Xem trước” trước khi sao chép.
Có dùng được clamp() trên mọi trình duyệt không?
clamp() chạy trên mọi phiên bản hiện tại của Chrome, Edge, Firefox và Safari, và đã như vậy từ năm 2020. Các trình duyệt rất cũ bỏ qua khai báo mà chúng không hiểu, nên nếu phải hỗ trợ một trình duyệt như vậy, hãy đặt một dòng font-size cố định trước dòng clamp() làm phương án dự phòng.
Những gì tôi nhập có bị gửi lên máy chủ không?
Không. Trình duyệt của bạn đổi các con số thành CSS ngay trên trang, không có gì được tải lên hay lưu lại. Không cần tài khoản và không cần đăng ký.
