Máy Tính CSS clamp() & Fluid Typography

Máy Tính CSS clamp() & Fluid Typography

Tạo biểu thức CSS clamp() sẵn dán cho fluid typography và kích thước responsive. Định nghĩa viewport min và max, sau đó bất kỳ số lượng giá trị nào (cỡ chữ, khoảng cách, line height) cùng cỡ min/max. Máy tính xuất clamp() nội suy tuyến tính giữa hai viewport và kẹp ở mỗi biên. Preview trực tiếp render văn bản mẫu tại viewport mô phỏng để bạn kiểm tra đường cong. Type scale có sẵn (Major Third, Perfect Fourth, Golden Ratio…) tạo cả hệ phân cấp h1–h6 chỉ một cú nhấp.

Hàm CSS clamp() là gì, vì sao dùng cho typography?

clamp(MIN, PREFERRED, MAX) trả về giá trị PREFERRED, trừ khi nó dưới MIN (lấy MIN) hoặc trên MAX (lấy MAX). Với typography, mẹo là làm PREFERRED thành biểu thức fluid dựa trên đơn vị vw — kích thước tăng tuyến tính theo viewport giữa hai biên.

Ví dụ: font-size: clamp(1rem, 0.857rem + 0.714vw, 1.5rem) cho 16px khi rộng 320px, 24px khi rộng 1440px, và giữ kẹp ngoài dải đó.

Ưu điểm so với media query:
- Một khai báo thay vì ba bốn.
- Cỡ thực sự co giãn — không nhảy ở breakpoint.
- Tôn trọng zoom của người dùng (khi dùng rem cho MIN/MAX, mặc định công cụ này dùng).
- Hỗ trợ trình duyệt từ 2020: Chrome 79, Safari 13.1, Firefox 75 — được hỗ trợ phổ quát trên trình duyệt hiện đại.

Toán đằng sau hoạt động thế nào?

Cho cỡ min tại viewport min (m1, v1) và cỡ max tại viewport max (m2, v2), ta cần hàm tuyến tính f(x) = a·x + b đi qua hai điểm.

- Hệ số góc: a = (m2 − m1) / (v2 − v1)
- Hệ số tự do: b = m1 − a · v1

Biểu thức PREFERRED trong clamp() phải là CSS hợp lệ nên ta dùng đơn vị vw. Vì 1vw = viewport_width / 100, công thức thành:

PREFERRED = b + (a · 100) vw

Khi dùng rem, cả b và MIN/MAX được chia cho cỡ chữ gốc (mặc định 16px). Hệ số góc giữ ở vw vì vw là đơn vị tương đối với viewport, không bị ảnh hưởng cỡ gốc.

Đây là chính công thức của Utopia và Modern Fluid Typography. Công cụ xuất giá trị làm tròn 3 chữ số thập phân để CSS dễ đọc.

Nên dùng rem hay px cho MIN và MAX?

Dùng rem trong production. Lý do:

- Tôn trọng zoom người dùng. Khi người dùng đặt cỡ chữ mặc định của trình duyệt là 20px (thay vì 16px) vì lý do tiếp cận, giá trị rem co giãn; px thì không. Khoá cỡ chữ ở 16px bất kể tuỳ chọn người dùng là vấn đề tiếp cận theo WCAG.
- Nhất quán type scale. Định nghĩa cỡ bằng rem giữ tỉ lệ trên toàn tài liệu nếu sau này bạn chỉnh cỡ gốc.
- Phần vw lo phần fluid bất kể lựa chọn đơn vị cho hằng — biên MIN/MAX là chỗ rem quan trọng.

Dùng px khi bạn đo đạc thứ cần pixel-perfect (cỡ icon cụ thể, layout lưới cố định). Với chữ, rem gần như luôn thắng.

Nên chọn dải viewport min/max thế nào?

Dải fluid đi từ thiết bị nhỏ nhất bạn hỗ trợ tới layout rộng điển hình nhất. Các cặp phổ biến:

- 320 → 1440: rất phổ biến; phủ iPhone SE hẹp tới laptop / thiết kế 1440p.
- 360 → 1280: 'điện thoại hiện đại' tới desktop chuẩn; ưu tiên khi không tối ưu cho màn hình tí hon.
- 375 → 1920: chiều rộng iPhone tham chiếu tới full-HD ngang.

Ý chính: chọn giá trị khớp nơi nội dung sống. Ngoài dải, clamp() ghim vào MIN hoặc MAX — nên nếu viewport max là 1440 và người dùng dùng màn cực rộng 3440px, chữ giữ ở MAX. Thường đó là điều bạn muốn — chữ không nên to vô hạn trên màn khổng lồ.

'Type scale' là gì, vì sao dùng?

Type scale là tập nhỏ các cỡ chữ suy ra từ một cỡ gốc và tỉ lệ. Chọn tỉ lệ (vd 1.250 — Major Third) và áp dụng lặp:

body = 16px
h6 = body × 1 = 16px
h5 = body × 1.25 = 20px
h4 = body × 1.25² = 25px
h3 = body × 1.25³ = 31.25px
h2 = body × 1.25⁴ = 39px
h1 = body × 1.25⁵ = 48.83px

Dùng scale thay vì cỡ tuỳ tiện cho typography của bạn nhịp điệu và nhất quán thị giác. Nút 'Tải Type Scale' nạp các hàng với hệ thống sáu cấp dùng tỉ lệ bạn chọn ở cả viewport min và max. Từ đó bạn chỉnh từng hàng. Tỉ lệ phổ biến:

- Minor Third (1.200) — tinh tế, dày.
- Major Third (1.250) — cân bằng, mặc định cho đa số UI.
- Perfect Fourth (1.333) — biên tập kinh điển.
- Augmented Fourth (1.414) — tiêu đề mạnh.
- Perfect Fifth (1.500) — phân cấp rõ.
- Golden Ratio (1.618) — kịch tính, bìa biên tập.

Live preview chính xác đến đâu?

Preview render văn bản mỗi hàng ở cỡ mà clamp() sẽ tạo ra tại viewport mô phỏng (thanh trượt). Giá trị đó được tính trong JavaScript bằng chính nội suy tuyến tính trình duyệt thực hiện nội bộ:

value = intercept + slope × viewport_px
kẹp giữa minPx và maxPx

Kéo thanh trượt trên 280 và dưới viewport max để thấy chữ to lên; kéo qua biên sẽ kẹp lại. Preview chính xác từng pixel cho viewport mô phỏng, nhưng không đổi theo cửa sổ thật — đó là việc của trình duyệt. Thay đổi cửa sổ thật hoặc mở chế độ thiết bị của DevTools để xác nhận trên viewport thực sau khi CSS đã ở stylesheet.

Khác biệt giữa fluid typography và cách dùng media query?

Cách media query (cũ):

h1 { font-size: 32px; }
@media (min-width: 768px) { h1 { font-size: 40px; } }
@media (min-width: 1280px) { h1 { font-size: 56px; } }

Cỡ nhảy theo ba bước rời rạc tại breakpoint. Giữa breakpoint thì tĩnh.

Cách fluid (clamp):

h1 { font-size: clamp(2rem, 1.4rem + 1.875vw, 3.5rem); }

Cỡ co giãn liên tục từ 32px tới 56px khi viewport tăng từ ~320px tới ~1440px, rồi kẹp ở hai đầu. Một khai báo thay ba media query.

Fluid được ưa chuộng hôm nay vì: (1) không có breakpoint trung gian khó coi, (2) ít CSS hơn, (3) cảm giác tự nhiên hơn. Giữ media query khi bạn cần một bố cục hoàn toàn khác — fluid typography xử lý cỡ, không phải cấu trúc.

Có thể dùng clamp() tạo ra ở đâu?

Bất kỳ chỗ nào CSS cho phép giá trị length:

- font-size — trường hợp dùng kinh điển.
- padding, margin, gap — cho khoảng cách fluid co giãn theo viewport.
- width, max-width — cho hero section to ra theo màn.
- line-height — dù thường nên để dạng không đơn vị và để co theo font-size.
- border-radius, gap trong grid, mọi thứ khác chấp nhận length.

Khối CSS Đầy Đủ dùng CSS custom properties (--fs-h1, --fs-body…) để bạn tham chiếu khắp stylesheet: font-size: var(--fs-h1). Giữ một nguồn sự thật duy nhất cho fluid scale của bạn.

Không cần bước build hay preprocessor; trình duyệt hiện đại xử lý clamp() native.

Tính Năng Nổi Bật

• Tính clamp(MIN, PREFERRED, MAX) cho bất kỳ cặp viewport và giá trị min/max
• Hỗ trợ nhiều hàng — định nghĩa h1 tới small một chỗ
• Live preview render văn bản từng hàng tại viewport mô phỏng kéo được
• Type-scale có sẵn: Minor Third, Major Third, Perfect Fourth, Augmented Fourth, Perfect Fifth, Golden Ratio
• Output rem (mặc định) hoặc px cho MIN và MAX
• Cỡ chữ gốc tuỳ chỉnh (mặc định 16px) để chuyển rem chính xác
• Xuất khối CSS đầy đủ với custom properties (--fs-h1, --fs-body…)
• clamp() từng hàng với sao chép một cú nhấp
• Tính giá trị chính xác từng pixel tại bất kỳ viewport mô phỏng
• Mặc định hợp lý: viewport 320 → 1440, phân cấp h1–small
• Thêm và xoá hàng nhanh chóng
• JavaScript thuần, không thư viện ngoài
• Hoạt động offline sau lần tải đầu
• Giao diện thân thiện di động, hỗ trợ dark mode
• 100% phía client — không gửi gì tới máy chủ