Tạo thang cỡ chữ (type scale) theo tỉ lệ vàng cho web và Figma
Mục lục
Type scale (thang cỡ chữ) là gì và cách tạo bằng công cụ Thang cỡ chữ & tỉ lệ vàng của ColorME: chọn cỡ gốc, 8 tỉ lệ từ 1.067 đến tỉ lệ vàng 1.618, xem thử font tiếng Việt, sao chép mã CSS rem hoặc Tailwind. Kèm bảng số liệu của cả 8 tỉ lệ, ví dụ trang và banner trước sau, cách đưa vào Figma và các giới hạn.
Trả lời nhanh: type scale (thang cỡ chữ) là một bộ cỡ chữ được tính từ một cỡ gốc nhân dần với cùng một tỉ lệ, ví dụ 16 px × 1,25 cho ra 16, 20, 25, 31,25, 39,06 px. Để tạo nhanh, mở công cụ Thang cỡ chữ & tỉ lệ vàng của ColorME, nhập Cỡ chữ gốc, chọn Tỉ lệ nhảy bậc (có 8 tỉ lệ, từ 1.067 tới tỉ lệ vàng 1.618), xem thử bằng câu tiếng Việt của bạn rồi bấm Sao chép để lấy mã CSS hoặc Tailwind. Theo trang công cụ, việc này miễn phí và không cần đăng nhập.
Xem nhanh: đổi tỉ lệ, cả thang chữ đổi theo. Ảnh chụp màn hình: ColorME.
Type scale là gì và vì sao nên dùng?
Khi dựng một trang web hay một file Figma, bạn cần ít nhất năm, sáu cỡ chữ: tiêu đề lớn, tiêu đề mục, tiêu đề nhỏ, đoạn dẫn, nội dung, chú thích. Nếu chọn từng cỡ theo cảm tính (30, 26, 22, 18, 17…), các cỡ thường quá gần nhau, người đọc khó nhận ra đâu là tiêu đề, và mỗi màn hình lại lệch đi một chút.
Type scale giải quyết việc đó bằng một phép nhân. Bạn chỉ quyết định hai thứ: cỡ gốc (cỡ chữ nội dung) và tỉ lệ. Mỗi bậc lớn hơn bằng bậc trước nhân với tỉ lệ; mỗi bậc nhỏ hơn bằng bậc trước chia cho tỉ lệ. Vì mọi bậc cách nhau cùng một tỉ lệ, sự phân cấp thông tin trở nên đều và dễ đoán.
Trang mẫu do ColorME dựng; cỡ chữ ở cột 2 và 3 lấy từ công cụ với gốc 16 px.
Tên các tỉ lệ (Major third, Perfect fourth…) mượn từ quãng trong âm nhạc. Bạn không cần biết nhạc lý: chỉ cần nhớ số càng lớn thì các bậc càng chênh nhau mạnh.
Trước khi làm: công cụ có gì, giới hạn ở đâu?
- Chi phí, tài khoản: theo trang công cụ, miễn phí, không cần đăng nhập. Mọi lần thử trong bài được làm khi chưa đăng nhập.
- Tỉ lệ: 8 tỉ lệ có sẵn (bảng bên dưới). Không nhập được tỉ lệ tự chọn như 1.3.
- Cỡ chữ gốc: từ 8 đến 40 px. Khi thử gõ 4, công cụ tính theo 8 px; gõ 50, công cụ tính theo 40 px, dù ô nhập vẫn hiện số bạn gõ.
- Số bậc: từ 2 đến 8 bậc lớn hơn cỡ gốc (lg, xl, 2xl… tới 7xl) và luôn có đúng 2 bậc nhỏ hơn (sm, xs).
- Xem thử: 4 font có dấu tiếng Việt (Be Vietnam Pro, Playfair Display, Inter, Lora) và một câu mẫu tự gõ, dài tối đa 80 ký tự.
- Xuất: mã CSS (biến
--text-…theo rem) hoặc cấu hìnhfontSizecho Tailwind, lấy bằng nút Sao chép. Không có nút tải file. - Không có: cỡ chữ co giãn theo màn hình (
clamp()), thang riêng cho điện thoại, hay xuất thẳng sang Figma.
Video quay màn hình (26 giây, không tiếng): thử Perfect fourth, Tỉ lệ vàng rồi về Major third; đổi cỡ gốc thành 18; giảm còn 4 bậc; đổi font Playfair; gõ câu mẫu; chuyển Tailwind, CSS, bấm Sao chép; nhập chiều rộng 1440 ở phần chia bố cục. Ảnh chụp màn hình: ColorME.
Cách tạo thang cỡ chữ: 5 bước
Bước 1. Mở công cụ, nhập cỡ chữ gốc
Vào colorme.vn/tools/type-scale. Công cụ mở sẵn với gốc 16 px, tỉ lệ Major third 1.25 và 6 bậc lớn hơn. Cột bên phải, Thang chữ, liệt kê từng bậc từ lớn tới nhỏ: tên bậc, cỡ theo px và rem, và câu mẫu hiện đúng cỡ đó. Dòng base được tô nền để bạn thấy đâu là chữ nội dung.
Mặc định: gốc 16 px × 1.25. Ảnh chụp màn hình: ColorME.
Gõ cỡ chữ nội dung của bạn vào ô Cỡ chữ gốc (px). Trang công cụ gợi ý 16 px là mức phổ biến, dễ đọc cho chữ nội dung trên web. Với trang nhiều chữ như blog, 18 px cũng thường gặp.
Bước 2. Chọn tỉ lệ nhảy bậc
Bấm một trong tám nút dưới dòng Tỉ lệ nhảy bậc. Bảng dưới là số liệu chúng tôi đọc từ công cụ với gốc 16 px:
| Tỉ lệ | lg | 2xl | 5xl | sm |
|---|---|---|---|---|
| 1.067 Minor second | 17,07 | 19,44 | 23,61 | 15 |
| 1.125 Major second | 18 | 22,78 | 32,44 | 14,22 |
| 1.2 Minor third | 19,2 | 27,65 | 47,78 | 13,33 |
| 1.25 Major third | 20 | 31,25 | 61,04 | 12,8 |
| 1.333 Perfect fourth | 21,33 | 37,9 | 89,76 | 12 |
| 1.414 Augmented fourth | 22,62 | 45,23 | 127,88 | 11,32 |
| 1.5 Perfect fifth | 24 | 54 | 182,25 | 10,67 |
| 1.618 Tỉ lệ vàng | 25,89 | 67,77 | 287,07 | 9,89 |
Đơn vị: px. Gốc (base) luôn là 16 px; lg là bậc 1, 2xl là bậc 3, 5xl là bậc 6 phía trên gốc.
Cách chọn, theo trang công cụ và theo những gì bảng cho thấy:
- 1.067 đến 1.2: các bậc sát nhau. Hợp với giao diện dày thông tin như bảng điều khiển, ứng dụng, hoặc màn hình điện thoại, nơi tiêu đề không thể quá to.
- 1.25 (Major third): trang công cụ gọi đây là lựa chọn an toàn cho website nhiều chữ.
- 1.333 đến 1.618: độ chênh mạnh, theo trang công cụ là hợp với poster và landing page. Hãy nhìn cột 5xl: với tỉ lệ vàng, bậc thứ sáu đã là 287 px. Ở các tỉ lệ này bạn chỉ nên dùng ba, bốn bậc.
Cũng nên nhìn cột sm: tỉ lệ càng lớn thì chữ nhỏ càng nhỏ. Với tỉ lệ vàng, sm chỉ còn 9,89 px và xs là 6,11 px, quá nhỏ để đọc. Trang công cụ khuyên chữ nhỏ hơn 14 px chỉ nên dùng cho chú thích ngắn.
Tỉ lệ vàng với 6 bậc: các bậc trên cùng lớn tới mức câu mẫu không còn đủ chỗ. Ảnh chụp màn hình: ColorME.
Một điều cần biết khi đọc phần xem thử: với các cỡ trên 72 px, công cụ vẽ câu mẫu nhỏ hơn con số ghi bên cạnh để các bậc vẫn nằm gọn trong khung. Con số px và rem mới là giá trị đúng; đừng ước lượng bằng mắt ở các bậc rất lớn.
Bước 3. Chọn số bậc
Kéo thanh Số bậc lớn hơn để lấy từ 2 đến 8 bậc trên cỡ gốc. Một trang web thông thường cần H1, H2, H3 và một cỡ cho đoạn dẫn, tức khoảng 4 bậc. Lấy ít bậc hơn giúp cả nhóm không dùng nhầm.
Đổi cỡ gốc và số bậc. Ảnh chụp màn hình: ColorME.
Gốc 18 px × 1.333, 5 bậc. Ảnh chụp màn hình: ColorME.
Bước 4. Xem thử bằng font và câu tiếng Việt của bạn
Cùng một cỡ nhưng mỗi font trông to nhỏ khác nhau, và dấu tiếng Việt chiếm thêm chiều cao. Ở hàng Font, thử lần lượt Be Vietnam Pro, Playfair, Inter, Lora; ở ô Câu mẫu, gõ một tiêu đề thật của bạn thay cho câu có sẵn. Phần xem thử dùng chữ đậm cho các bậc lớn và chữ thường cho base trở xuống.
Đổi font và câu mẫu. Ảnh chụp màn hình: ColorME.
Cùng thang chữ với font Playfair Display. Ảnh chụp màn hình: ColorME.
Font của bạn không nằm trong bốn font này? Hãy lấy các con số từ công cụ rồi xem thử font riêng bằng công cụ thử font chữ; cần chọn cặp font tiêu đề và nội dung thì có công cụ ghép cặp font.
Bước 5. Sao chép mã CSS hoặc Tailwind
Cuộn xuống ô Mã. Ở hàng Xuất trên cùng, chọn CSS hoặc Tailwind, rồi bấm Sao chép; một thông báo "Đã sao chép mã" hiện lên. Với thiết lập mặc định, mã CSS là:
:root {
--text-xs: 0.64rem; /* 10.24px */
--text-sm: 0.8rem; /* 12.8px */
--text-base: 1rem; /* 16px */
--text-lg: 1.25rem; /* 20px */
--text-xl: 1.56rem; /* 25px */
--text-2xl: 1.95rem; /* 31.25px */
--text-3xl: 2.44rem; /* 39.06px */
--text-4xl: 3.05rem; /* 48.83px */
--text-5xl: 3.82rem; /* 61.04px */
}
h1 { font-size: var(--text-5xl); line-height: 1.15; }
body { font-size: var(--text-base); line-height: 1.5; }Bản Tailwind là một khối fontSize để dán vào tailwind.config.js, mỗi bậc kèm sẵn line-height: 1.15 cho cỡ từ 32 px trở lên, 1.3 cho cỡ từ 20 px và 1.5 cho các cỡ nhỏ hơn.
Đổi định dạng, sao chép mã, rồi thử phần chia bố cục. Ảnh chụp màn hình: ColorME.
Ba lưu ý khi dùng mã:
- Mã CSS gán H1 vào bậc lớn nhất. Với 6 bậc, đó là 5xl (61,04 px), thường quá to cho tiêu đề bài viết. Hãy tự gán H1, H2, H3 vào bậc bạn muốn, ví dụ H1 = 3xl như trang mẫu ở đầu bài.
- rem được tính theo 16 px và làm tròn hai chữ số. Nếu bạn nhập gốc 18, dòng base là 1.13rem, tức 18,08 px trên trình duyệt để cỡ mặc định. Sai số này không nhìn thấy được, nhưng nên biết nếu bạn so số từng pixel.
- Vì sao rem: theo trang công cụ, rem co giãn theo cài đặt cỡ chữ của người dùng trong trình duyệt, giúp trang dễ đọc hơn với người thị lực kém.
Dùng tỉ lệ vàng cho cỡ chữ và bố cục
Tỉ lệ vàng 1.618 là tỉ lệ được hỏi nhiều nhất, và cũng dễ dùng sai nhất. Như bảng ở bước 2 cho thấy, nhân liên tiếp với 1.618 làm cỡ chữ tăng rất nhanh. Cách dùng hợp lý là lấy ít bậc: 16 px cho nội dung, 25,89 px (lg) cho đoạn dẫn và 67,77 px (2xl) cho tiêu đề chính của một banner, bỏ qua các bậc lớn hơn.
Công cụ còn một phần riêng tên Chia bố cục theo tỉ lệ vàng: nhập chiều rộng, nó chia thành hai phần theo tỉ lệ 1 : 1,618. Các số chúng tôi đọc được:
| Chiều rộng | Nội dung chính | Cột phụ |
|---|---|---|
| 960 px | 593,33 px | 366,67 px |
| 1140 px | 704,57 px | 435,43 px |
| 1200 px | 741,66 px | 458,34 px |
| 1440 px | 889,99 px | 550,01 px |
Áp cả hai vào một banner 1200 px: phần chữ rộng 741,66 px, phần ảnh 458,34 px, cỡ chữ lấy ba bậc của thang 1.618.
Banner mẫu do ColorME dựng, cỡ chữ và độ rộng lấy từ công cụ. Ảnh: Jonathan Cosens Photography / Unsplash.
Tỉ lệ vàng là một điểm khởi đầu tốt, không phải luật. Nếu tiêu đề của bạn dài và bị xuống ba dòng ở 67,77 px, hãy lùi về một tỉ lệ nhỏ hơn. Muốn hiểu thêm về tỉ lệ này, đọc bài tỉ lệ vàng trong thiết kế là gì; cần đặt lưới, xoắn ốc vàng lên một tấm ảnh thì dùng công cụ tỉ lệ vàng.
Đưa thang cỡ chữ vào Figma
Công cụ không xuất sang Figma. Trang công cụ hướng dẫn cách làm tay: tạo Text styles trong Figma cho từng bậc (Body, H6… H1) với cỡ chữ lấy từ công cụ, rồi dùng thống nhất trong mọi màn hình. Chúng tôi không quay lại thao tác trong Figma cho bài này, nên dưới đây chỉ là những điểm cần lưu ý khi chép số:
- Làm tròn. Figma nhận số lẻ, nhưng 31,25 hay 39,06 khó nhớ và khó trao đổi. Nhiều nhóm làm tròn về số nguyên (31, 39) hoặc bội số của 4 (32, 40). Thang chữ là để nhất quán, lệch một pixel không sao.
- Đặt tên theo vai trò. Đặt tên style theo việc nó làm (Heading/H1, Body/Base, Caption) và ghi bậc trong mô tả (3xl), thay vì chỉ ghi con số.
- Kèm line-height. Dùng luôn ba mức công cụ gợi ý trong bản Tailwind: 1.15 cho tiêu đề lớn, 1.3 cho tiêu đề nhỏ, 1.5 cho nội dung, tức 115%, 130%, 150% trong Figma.
- Dùng cùng số với lập trình viên. Gửi kèm đoạn CSS đã sao chép để file thiết kế và trang web dùng chung một bộ số.
Dùng trên điện thoại
Chúng tôi thử ở chiều rộng điện thoại (390 px, giả lập trên Chrome máy tính, không phải một chiếc điện thoại thật). Các ô thiết lập xếp thành một cột, thang chữ nằm bên dưới nên phải cuộn xuống mới thấy kết quả; trang không trượt ngang. Các con số giống hệt bản máy tính.
Giao diện ở chiều rộng 390 px. Ảnh chụp màn hình: ColorME.
Khi nào cần cách khác?
- Cần cỡ chữ co giãn mượt giữa điện thoại và máy tính: công cụ chỉ cho một bộ số cố định. Một cách đơn giản là tạo hai thang, ví dụ 1.2 cho điện thoại và 1.25 hoặc 1.333 cho máy tính, rồi đổi bằng media query.
- Cần tỉ lệ riêng: tự tính bằng công thức cỡ = gốc × tỉ lệsố bậc.
- Thiết kế in: theo trang công cụ, nguyên tắc tỉ lệ vẫn đúng; bạn đổi cỡ gốc sang đơn vị pt phù hợp khổ giấy. Công cụ chỉ ghi px và rem.
- Chưa rõ các khái niệm nền: đọc typography là gì và mục typography trong thư viện thuật ngữ.
Câu hỏi thường gặp
Nên chọn tỉ lệ nào cho website?
Trang công cụ gợi ý Major third (1.25) là lựa chọn an toàn cho website nhiều chữ. Giao diện dày thông tin hoặc màn hình nhỏ hợp với 1.125 đến 1.2; landing page, poster hợp với 1.333 trở lên.
Cỡ chữ gốc nên là bao nhiêu?
Theo trang công cụ, 16 px là mức phổ biến và dễ đọc cho chữ nội dung trên web; chữ nhỏ hơn 14 px chỉ nên dùng cho chú thích ngắn.
Có bắt buộc dùng đủ mọi bậc không?
Không. Thang chữ là danh sách các cỡ được phép dùng. Phần lớn trang chỉ cần bốn đến sáu cỡ; bỏ qua một bậc để tạo chênh lệch mạnh hơn cũng không sao, miễn là mọi cỡ đều lấy từ thang.
Vì sao số ra lẻ như 39,06 px?
Vì đó là kết quả của phép nhân (16 × 1,25 × 1,25 × 1,25 × 1,25) được làm tròn hai chữ số. Trên web, bạn dùng nguyên giá trị rem. Trong Figma, làm tròn về số nguyên cho dễ dùng.
Tỉ lệ vàng có phải lúc nào cũng đẹp nhất không?
Không. Với cỡ chữ, 1.618 tạo độ chênh rất mạnh: ở gốc 16 px, bậc thứ ba đã là 67,77 px và hai bậc nhỏ chỉ còn 9,89 và 6,11 px. Nó hợp với banner, poster có ít chữ, không hợp với trang nhiều cấp tiêu đề.
Thang cỡ chữ có dùng cho bản in được không?
Có. Theo trang công cụ, nguyên tắc tỉ lệ vẫn đúng với ấn phẩm in; bạn chỉ cần đổi cỡ gốc sang đơn vị pt phù hợp khổ giấy.
