10 Quy tắc thiết kế Typography giúp nâng cấp giao diện của bạn ngay lập tức

Font chữ của bạn có thể ổn, nhưng Typography thì chưa

Hầu hết các nhà thiết kế chỉ chọn một font chữ đẹp rồi gọi đó là typography. Việc đó giống như mua một con dao tốt rồi tự nhận mình là đầu bếp vậy.

Typography có thể tạo nên hoặc phá hỏng một UI

– Đây là một số liệu thống kê rất đáng nhớ: 95% thông tin trên web là ngôn ngữ viết.
– Điều đó có nghĩa là 95% giao diện người dùng (UI) của bạn chính là typography. Không phải bảng màu, không phải icon, cũng chẳng phải hình minh họa. Chính là Typography. Thế nhưng, hầu hết các designer lại dành phần lớn thời gian cho mọi thứ khác ngoại trừ typography. Họ chọn một font chữ, đặt kích thước 16px và thế là xong.
– Kết quả? Những giao diện mang lại cảm giác “sai sai” nhưng không ai có thể giải thích chính xác tại sao. Thiết kế nhìn bề ngoài thì ổn nhưng việc đọc nó lại giống như một công việc mệt mỏi. Typography được làm tốt sẽ trở nên vô hình. Typography làm sai sẽ hiển hiện ở khắp mọi nơi. Dưới đây là 10 quy tắc sẽ giúp bạn giải quyết vấn đề đó.

Cách xây dựng

Một hệ thống phân cấp chữ cơ bản trong UI sẽ có 4 cấp độ:
– Hiển thị hoặc Tiêu đề lớn (H1): Chữ lớn nhất, đậm nhất. Mỗi trang hoặc mỗi phần chỉ nên có một. Đây là thứ đầu tiên mắt người dùng chạm vào.
– Tiêu đề phụ (H2, H3): Hỗ trợ cho tiêu đề chính và giúp tổ chức các phân đoạn. Kích thước nhỏ hơn một chút nhưng vẫn nổi bật.
– Văn bản nội dung (Body text): Nội dung chính, cần có kích thước dễ đọc nhất. Không bao giờ nhỏ hơn 15px trên mobile và 16px trên desktop.
– Văn bản bổ trợ (Supporting text): Nhãn (label), chú thích, metadata. Có kích thước nhỏ nhất và được sử dụng một cách tiết kiệm.

Trước và Sau

– Trước (Không có phân cấp): Mọi thứ đều là 16px, cùng độ đậm (weight), cùng màu sắc. Một Form liên hệ mà label, input field và thông báo nhìn y hệt nhau. Mắt người dùng sẽ bị đảo liên tục và họ rất dễ mắc lỗi khi điền form.
– Sau (Có phân cấp): Label để 13px, độ đậm vừa phải (medium), màu dịu bớt. Văn bản nhập vào để 16px, độ đậm bình thường (regular), màu tối. Thông báo lỗi để 13px, màu đỏ kèm theo một icon. Mỗi đoạn chữ đều biết rõ vai trò của mình.

Ý nghĩa của quy tắc

– Chọn kích thước font chữ ngẫu nhiên là lỗi typography phổ biến nhất trong thiết kế UI. Các designer thường chọn size theo cảm tính: 14px ở chỗ này, 17px ở chỗ kia, 22px cho tiêu đề này và 19px cho tiêu đề khác.
– Kết quả tạo ra những “nhiễu loạn trực quan” khiến não bộ người dùng tự ghi nhận rằng “có gì đó không ổn ở đây”, ngay cả khi họ không thể chỉ mặt đặt tên cho lỗi đó.

Giải pháp: Sử dụng Modular Type Scale

Thang tỷ lệ chữ là một tập hợp các kích thước font tuân theo một tỷ lệ toán học nhất quán. Các tỷ lệ phổ biến bao gồm:
– Major Third (1.25): 12, 15, 19, 24, 30, 38px. Mang lại cảm giác tinh tế và nhẹ nhàng. Phù hợp cho các UI chứa nhiều nội dung văn bản.
– Perfect Fourth (1.333): 12, 16, 21, 28, 37, 49px. Tỷ lệ phổ biến nhất cho UI web và ứng dụng.
– Major Second (1.125): 14, 16, 18, 20, 22px. Khoảng cách rất chặt chẽ. Phù hợp cho các UI có mật độ thông tin dày đặc như bảng điều khiển (dashboard).
Bạn không cần phải tự tính toán những con số này bằng tay. Hãy sử dụng công cụ miễn phí Type Scale để tự động tạo ra thang tỷ lệ hoàn hảo.

Trước và Sau

– Trước: Tiêu đề 26px, tiêu đề phụ 20px, body 15px, nhãn 13px. Cảm giác hơi tùy hứng và bước nhảy trực quan giữa các kích thước trông không đồng nhất.
– Sau: Sử dụng thang tỷ lệ Perfect Fourth: tiêu đề 28px, tiêu đề phụ 21px, body 16px, nhãn 12px. Các kích thước cho cảm giác có liên quan đến nhau. Toàn bộ màn hình trông có ý đồ và chuyên nghiệp hơn hẳn.

Ý nghĩa của quy tắc

Phối hợp font chữ (Font pairing) là một trong những chủ đề được thảo luận nhiều nhất và cũng là một trong những thứ bị làm phức tạp hóa nhất. Phiên bản đơn giản nhất là: chỉ sử dụng tối đa hai font chữ. Một cho tiêu đề, một cho nội dung. Thế là đủ.

Cách phối hợp tốt

Những cách phối hợp font tốt nhất thường tuân theo các công thức sau:
– Cùng một họ font (font family), khác độ đậm (weight): Sử dụng Inter Regular cho body và Inter Bold cho tiêu đề. Công thức này không bao giờ sai và cực kỳ thanh lịch, đang được hầu hết các sản phẩm lớn áp dụng.
– Tiêu đề Serif (chữ có chân) + Body Sans-serif (chữ không chân): Cách phối kinh điển. Font có chân tạo nên cá tính cho tiêu đề, trong khi font không chân giữ cho văn bản nội dung dễ đọc. Ví dụ: Playfair Display + Inter.
– Geometric sans (chữ không chân hình học) + Humanist sans (chữ không chân nhân văn): Tạo ra nhiều cá tính hơn một chút. Ví dụ: Space Grotesk + Source Sans Pro.

Những điều cần tránh

– Dùng quá 2 kiểu chữ (typeface) trong một UI (hầu như không bao giờ có lý do chính đáng).
– Phối hai font cùng là Serif với nhau (chúng sẽ tranh chấp và gây rối mắt).
– Trộn hai font dạng hiển thị/trang trí (display font) với nhau (gây hỗn loạn).
– Chọn font thuần túy vì vẻ ngoài của nó mà không kiểm tra độ dễ đọc ở kích thước nhỏ.

Các nguồn tài nguyên phối font miễn phí

Google Fonts: Thư viện font miễn phí, tối ưu cho web.
Fontpair: Gợi ý các cặp phối Google Fonts đã được tuyển chọn.
Typ.io: Các sự kết hợp font thực tế được sử dụng trên các website thật.

Trước và Sau

– Trước: Một dashboard SaaS sử dụng tới 3 font khác nhau: một cho logo, một cho tiêu đề, một cho body và một font monospace (đơn cách) cho các đoạn code. Màn hình mang lại cảm giác nó được thiết kế bởi một hội đồng không có chung một định hướng.
– Sau: Dùng Inter cho tất cả mọi thứ, sử dụng độ đậm và kích thước để tạo ra sự khác biệt. Sạch sẽ, gắn kết và chuyên nghiệp.

Ý nghĩa của quy tắc

– Chiều cao dòng (line-height trong CSS, hoặc leading trong in ấn) là khoảng cách theo chiều dọc giữa các dòng văn bản. Nó sẽ trở nên “vô hình” khi được làm đúng và gây “ngột ngạt” khi làm sai.
– Quá hẹp: văn bản tạo cảm giác tù túng và khó đọc. Quá rộng: các dòng chữ trông rời rạc và mất đi nhịp điệu đọc.

Những con số chuẩn

– Văn bản nội dung (Body text): Gấp 1.5 đến 1.7 lần kích thước font. Ví dụ font 16px thì line-height nên từ 24px đến 27px.
– Tiêu đề (Headings): Gấp 1.1 đến 1.3 lần kích thước font. Tiêu đề cần khoảng cách dòng hẹp hơn so với văn bản nội dung.
– Chú thích và nhãn (Captions & Labels): Gấp 1.3 đến 1.4 lần kích thước font.

Trước và Sau

– Trước: Một đoạn văn bản body 16px với line-height là 1.2 (19.2px). Các dòng chữ trông như bị nén lại. Đọc xong 3 dòng đã thấy mệt mỏi, người dùng sẽ có xu hướng đọc lướt và bỏ sót thông tin quan trọng.
– Sau: Vẫn là đoạn văn đó ở mức 16px nhưng line-height nâng lên 1.6 (25.6px). Văn bản có không gian để “thở”, mắt di chuyển tự nhiên từ dòng này sang dòng khác và việc đọc trở nên nhẹ nhàng.

Ý nghĩa của quy tắc

– Khoảng cách chữ (letter-spacing trong CSS, tracking trong in ấn) là khoảng cách giữa các ký tự với nhau.
– Hầu hết các designer một là bỏ qua nó hoàn toàn, hai là áp dụng một chỉ số đồng đều cho mọi chỗ. Cả hai cách đều sai.

Quy tắc theo kích thước chữ

– Tiêu đề lớn (từ 32px trở lên): Nên chỉnh khoảng cách chữ hơi âm một chút (khoảng -0.5px đến -2px). Chữ kích thước lớn tự nhiên sẽ tạo cảm giác các ký tự hơi thưa nhau, vì vậy việc kéo chúng lại gần nhau hơn một chút trông sẽ tinh tế và gọn gàng hơn.
– Văn bản nội dung (14px đến 20px): Để mặc định hoặc hơi dương một chút (0 đến 0.2px). Đừng chạm vào phần này trừ khi có lý do thật sự đặc biệt.
– Chữ in hoa nhỏ, nhãn, văn bản VIẾT HOA TOÀN BỘ: Luôn cần khoảng cách chữ dương (0.05em đến 0.15em). Chữ viết hoa toàn bộ bắt buộc phải rộng rãi hơn thì mới đảm bảo tính dễ đọc.

Trước và Sau

– Trước: Một tiêu đề Hero lớn 64px với letter-spacing mặc định bằng 0. Các ký tự trông hơi rệu rã và đại trà, tiêu đề thiếu đi sức nặng và sự ấn tượng.
– Sau: Vẫn là tiêu đề 64px đó nhưng đặt letter-spacing thành -1.5px. Khối chữ mang lại cảm giác chặt chẽ, cao cấp và có ý đồ hơn. Một thay đổi nhỏ nhưng tạo ra hiệu quả thị giác rõ rệt.

Ý nghĩa của quy tắc

– Hầu hết các designer chỉ đơn giản là thu nhỏ kích thước font chữ trên mobile rồi gọi đó là làm responsive typography. Đó không phải responsive, đó chỉ là làm mọi thứ bé lại.
– Responsive typography thực sự là việc điều chỉnh không chỉ kích thước, mà còn cả độ đậm (weight), chiều cao dòng (line height) và đôi khi là cả bản thân font chữ đó sao cho phù hợp với ngữ cảnh đọc trên từng thiết bị.

Cách làm đúng chuẩn

– Tiêu đề desktop ở mức 48px: Đậm, line-height hẹp (1.1), letter-spacing hơi âm.
– Tiêu đề mobile: Không chỉ đơn thuần hạ xuống 32px. Nó phải là 32px, đồng thời nới line-height lên một chút thành 1.2 (kích thước nhỏ hơn cần nhiều không gian thở hơn), giữ nguyên độ đậm.
– Văn bản nội dung: Tối thiểu phải là 16px trên mobile. Đừng bao giờ dùng 14px cho các nội dung đọc dạng dài (long-form) trên màn hình nhỏ. Việc vừa cuộn trang bằng ngón cái vừa căng mắt đọc chữ nhỏ thực sự là một trải nghiệm gây ức chế.

Cách tiếp cận bằng Chữ linh hoạt (Fluid Typography)

Thay vì định nghĩa các mốc giao diện (breakpoints) cố định, fluid typography sẽ co giãn một cách mượt mà giữa kích thước tối thiểu và tối đa bằng cách sử dụng hàm clamp() trong CSS.

Ý nghĩa của quy tắc

Những người mới bắt đầu thường tạo ra sự phân cấp gần như hoàn toàn dựa vào kích thước: Chữ to là quan trọng, chữ nhỏ là ít quan trọng hơn. Nhưng các designer chuyên nghiệp hiểu rằng màu sắc và độ đậm chữ (weight) làm tốt việc này hơn là kích thước.

Cách người chuyên nghiệp sử dụng độ đậm chữ (Weight)

– Regular (400): Cho văn bản nội dung (body text).
– Medium (500): Cho các nhãn cần nhấn mạnh nhẹ hoặc các tiêu đề phụ.
– Semibold (600): Cho các yếu tố UI cần làm nổi bật rõ ràng mà không bị quá nặng nề.
– Bold (700): Cho tiêu đề chính và các đoạn văn bản UI mang tính sống còn.

Hãy bỏ qua các mức Ultra Light (200) hoặc Extra Bold (800+) trong UI. Chúng hiếm khi đảm bảo được độ dễ đọc ở kích thước nhỏ và thường tạo cảm giác thiết kế bị quá đà (overdesign).

Cách người chuyên nghiệp dùng màu sắc cho chữ

Trong một giao diện UI điển hình, bạn thực tế chỉ cần 3 màu chữ:
– Văn bản chính (Primary text): Màu gần như đen (ví dụ #1E293B) cho toàn bộ nội dung chính.
– Văn bản phụ (Secondary text): Màu xám dịu (ví dụ #64748B) cho chữ bổ trợ, chú thích, siêu dữ liệu.
– Văn bản vô hiệu hóa hoặc giữ chỗ (Disabled / Placeholder text): Màu xám nhạt (ví dụ #94A3B8) cho các trạng thái không hoạt động và nội dung gợi ý trong ô nhập.

Trước và Sau

– Trước: Một thẻ dashboard hiển thị thông số mà phần tiêu đề, giá trị con số và phần nhãn đều có chung một màu tối và cùng một độ đậm. Thẻ đó trông giống như một bức tường chữ đơn điệu. Người dùng phải đọc hết toàn bộ mới tìm ra con số họ cần.
– Sau: Tiêu đề dùng màu xám phụ, kích thước 13px độ đậm medium. Giá trị con số dùng màu tối chính, kích thước 32px bold. Nhãn dùng màu xám phụ, 12px regular. Con số cần xem lập tức đập vào mắt, mọi thứ khác lui về sau làm bệ đỡ.

Ý nghĩa của quy tắc

– Độ dài dòng (Line length) là số lượng ký tự (bao gồm cả khoảng trắng) trên một dòng văn bản đơn lẻ.
– Quá ngắn: Mắt người đọc phải liên tục nhảy ngược lại đầu dòng. Cảm giác giống như đang đọc một bức điện tín.
– Quá dài: Người đọc dễ bị lạc mất dòng khi di chuyển mắt từ cuối dòng này sang đầu dòng tiếp theo.

Độ dài dòng lý tưởng

– Đối với đọc văn bản nội dung: 60 đến 75 ký tự trên một dòng. Đây không phải là một lời khuyên cảm tính, nó được chứng minh bởi hàng thập kỷ nghiên cứu về typography và hành vi đọc.
– Đối với bản sao UI ngắn (nhãn, nút bấm CTA, mô tả ngắn): Có thể ngắn hơn, khoảng 40 đến 50 ký tự là ổn.

Áp dụng vào thực tế

Một đoạn văn được giới hạn thuộc tính max-width khoảng 65ch đến 70ch trong CSS sẽ luôn giữ được khoảng đọc lý tưởng trên hầu hết các kích thước màn hình:

Trước và Sau

– Trước: Một bài viết blog mà phần chữ kéo dài tràn toàn bộ chiều rộng của màn hình desktop 1440px. Mỗi dòng dài hơn 160 ký tự. Người đọc phải đảo mắt liên tục theo chiều ngang giống như đang đọc một bảng tính Excel. Việc này cực kỳ gây mỏi mắt.
– Sau: Vẫn là bài viết đó nhưng giới hạn container chứa văn bản ở mức tối đa 680px. Đạt khoảng 70 ký tự trên một dòng. Trải nghiệm đọc trở nên tự nhiên và không tốn sức.

Chỉ riêng quy tắc này thôi đã giúp nội dung dạng dài của bạn dễ đọc hơn đáng kể. Rất nhiều designer hiện nay vẫn đang làm sai điều này.

Ý nghĩa của quy tắc

Hầu hết các designer nghĩ về độ tương phản theo kiểu: Chữ này đã đủ tối so với màu nền chưa? Điều đó quan trọng (phải đạt tối thiểu tỷ lệ 4.5:1 đối với văn bản thông thường theo tiêu chuẩn WCAG). Tuy nhiên, độ tương phản trong typography còn rộng hơn thế rất nhiều, bao gồm:
– Tương phản về độ đậm (Weight): Có đủ sự khác biệt trực quan giữa độ đậm của tiêu đề và độ đậm của body không?
– Tương phản về kích thước (Size): Sự chênh lệch kích thước giữa các cấp bậc phân cấp có đủ lớn để người ta thấy đó là sự cố ý không?
– Tương phản về kiểu dáng (Style): Chữ in nghiêng hoặc chữ bán đậm (semibold) của bạn có thể được nhận biết ngay lập tức là khác biệt so với văn bản xung quanh không?

Lỗi thất bại phổ biến

Một tiêu đề để 20px Bold và tiêu đề phụ để 18px Semibold. Về mặt thông số kỹ thuật thì chúng khác nhau, nhưng về mặt trực quan thì chúng gần như không thể phân biệt được. Chúng không tạo ra sự tương phản thực tế và hệ thống phân cấp hoàn toàn thất bại.

Giải pháp

Hãy làm cho sự tương phản trở nên rõ ràng và có phần phóng đại. Bạn luôn cần nhiều sự tương phản hơn bạn nghĩ.
– Ví dụ về tương phản kích thước: Tiêu đề 32px và body 16px tạo ra tỷ lệ 2:1. Như vậy là đủ rõ ràng. Còn tiêu đề 20px và body 16px thì mắt thường sẽ khó nhận ra sự khác biệt.
– Ví dụ về tương phản độ đậm: Tiêu đề đặt mức độ đậm 700 (Bold) và body ở mức 400 (Regular) trông sẽ rất rõ ràng và dễ đọc. Chứ nếu tiêu đề 600 (Semibold) và body 400 thì sự khác biệt sẽ rất mờ nhạt và thường không hiệu quả.

Bạn có thể sử dụng công cụ WebAIM Contrast Checker để kiểm tra tỷ lệ tương phản màu sắc của chữ miễn phí.

Ý nghĩa của quy tắc

Typography không tồn tại một cách cô lập. Không gian xung quanh chữ cũng quan trọng y như chính bản thân chữ đó vậy.
– Chữ bị nhồi nhét = Khó đọc, tạo cảm giác rẻ tiền.
– Chữ có khoảng cách hợp lý = Dễ quét thông tin, tạo cảm giác cao cấp.

Các quy tắc thực tế

– Khoảng cách đoạn văn (Paragraph spacing): Khoảng trống bên dưới một đoạn văn nên xấp xỉ bằng kích thước font chữ của đoạn đó. Ví dụ body 16px thì nên dùng khoảng cách dưới đoạn (margin-bottom) là 16px.
– Khoảng cách tiêu đề (Heading spacing): Luôn để khoảng trống phía trên tiêu đề nhiều hơn khoảng trống phía dưới nó. Tiêu đề thuộc về nội dung đi liền sau nó, chứ không thuộc về nội dung ở phía trên.
– Chữ gần các đường viền/cạnh: Đừng bao giờ để chữ nằm sát sạt vào cạnh của hộp chứa (container). Hãy để padding tối thiểu là 16px trên di động và 24px trên desktop.
– Giữa các cấp độ chữ: Khoảng cách giữa tiêu đề và văn bản nội dung đi kèm của nó phải chặt chẽ hơn khoảng cách giữa hai phần nội dung (section) riêng biệt với nhau.

Trước và Sau

– Trước: Một thẻ bảng giá mà tên gói, giá tiền và danh sách tính năng bị xếp chặt ních với khoảng cách chỉ 4px giữa mọi thứ. Thẻ nhìn rất ngột ngạt và tạo cảm giác không đáng tin cậy.
– Sau: Tên gói có 8px phía dưới, giá tiền có 16px phía dưới, một đường ngăn cách mảnh, sau đó là danh sách tính năng với khoảng cách 12px giữa các mục. Thẻ có không gian để thở, mức giá nổi bật lên và gói dịch vụ trông có vẻ đáng tiền hơn hẳn.

Khi giao diện UI của bạn trông “cứ sai sai” mà bạn không biết tại sao, hãy kiểm tra lại các khoảng trắng xung quanh chữ trước khi quyết định thay đổi font chữ nhé.

Các nguồn tài nguyên Typography rất đáng lưu lại

– Google Fonts: Thư viện font chữ miễn phí tốt nhất cho các dự án UI.
– Type Scale: Tạo thang tỷ lệ chữ dạng mô-đun ngay lập tức.
– Fontpair: Gợi ý các cặp font chữ được tuyển chọn sẵn.
– Utopia: Bộ công cụ tạo typography và spacing linh hoạt (fluid).
– WebAIM Contrast Checker: Công cụ kiểm tra độ tương phản màu sắc theo chuẩn WCAG.
– Practical Typography của Matthew Butterick: Cuốn sách trực tuyến hay nhất về typography.
– The Elements of Typographic Style (Bản trực tuyến): Tài liệu tham khảo kinh điển về typography.