White space trong thiết kế: spacing scale 8pt và token chuẩn

White space — hay negative space — là khoảng trống giữa và xung quanh các element trong giao diện. Bài này hướng dẫn phân biệt macro vs micro white space, dựng spacing scale 8pt làm token chuẩn, áp dụng vào typography + grid + component và sai lầm khi spacing quá ít hoặc quá nhiều.

Vì sao white space không phải “khoảng lãng phí”

White space không phải khoảng lãng phí như nhiều bên thiết kế cũ vẫn tưởng. Nó là công cụ tổ chức thông tin hàng đầu trong UI hiện đại — bằng chứng tại Apple, Stripe, Linear, Notion (benchmark UI premium 2026) đều dùng white space ratio cao.

Theo nghiên cứu Nielsen Norman Group, layout có white space hợp lý tăng comprehension đọc 20% so với layout dày đặc, và tăng tỷ lệ user hoàn thành task trên web 30-40% trong A/B test usability. Đầu tư whitespace là đầu tư conversion + readability.

Tác động đến perception “premium” và “rẻ”

Trong perception user VN và quốc tế, layout thoáng liên kết với brand cao cấp (luxury, B2B SaaS, fintech). Layout dày đặc liên kết với “rẻ”, “low-trust” (forum, shop nhái, news tabloid).

Pattern này không tuyệt đối nhưng rõ ràng.

Stripe, Linear, Notion, Apple đều dùng white space ratio cao. Yahoo News, Vnexpress mobile lại dày đặc vì model ad-driven cần CTR ad cao.

Brand muốn position premium phải đầu tư white space, không thể skip vì “lãng phí không gian”.

White space là gì — macro và micro

White space đơn giản là khoảng trống không có element nào (text, image, button) chiếm dụng. Tên gọi “white” mang tính lịch sử từ thiết kế in — giấy thường trắng nên khoảng trống là trắng.

Trong digital design hiện nay, white space có thể là bất kỳ màu nào (xám nhạt, đen trong dark mode, gradient nền). Quan trọng là khái niệm — không gian “không nội dung” có chủ đích để tạo nhịp đọc và phân tách thông tin.

Macro white space — giữa block lớn

Macro white space là khoảng cách giữa các block lớn — giữa các H2, giữa hero và section, giữa column trong grid 12-cột, padding ngoài cùng của container. Macro định hình tổng thể trang, quyết định trang “thoáng” hay “chật”.

Đa số redesign nâng cấp đời sống của trang web là tăng macro white space. Header bớt nhồi nhét, hero rộng hơn, section divider rõ ràng.

Khách thường thấy site mới “đẳng cấp hơn” chủ yếu nhờ macro white space.

Micro white space — trong element

Micro white space là khoảng cách trong cùng 1 element hoặc giữa các element nhỏ liền kề. Đó là padding bên trong button, gap giữa icon và label, line-height của paragraph, letter-spacing của heading, margin giữa label và input field.

Micro ảnh hưởng readability trực tiếp — text có line-height 1,5 dễ đọc gấp đôi text có line-height 1,1, dù chênh lệch chỉ vài pixel mỗi dòng. Macro thường bị bỏ qua, micro thường được FE chỉnh chuẩn vì ảnh hưởng “polished” rõ.

4 vai trò chính của white space trong UI

White space không chỉ thẩm mỹ — tác động trực tiếp đến tốc độ não bộ xử lý thông tin và độ chính xác của decision khi user dùng UI. 4 vai trò dưới đây là những gì user cảm nhận được dù không gọi tên ra cụ thể.

Vai trò 1 và 2 — nhịp đọc và hierarchy

• Tạo nhịp đọc, giảm fatigue: mỗi khoảng trắng giữa paragraph, giữa H3 và content kế tiếp là một micro-pause cho mắt. Não cần các khoảng dừng này để tổng hợp thông tin trước khi xử lý nội dung tiếp theo.
• Quyết định hierarchy: 2 element có white space lớn giữa chúng thì mắt hiểu chúng thuộc 2 nhóm khác (Gestalt proximity). 2 element gần nhau thì mắt nhóm chúng lại — không cần border, background, separator line.

Đó là lý do designs hiện đại ngày càng “minimalist” — bỏ bớt visual element vì white space đã làm việc của nó. Chi tiết về Gestalt xem bài về nguyên tắc Gestalt trong thiết kế.

Vai trò 3 và 4 — focus CTA và signal premium

• Tăng focus CTA: button “Get started” nằm giữa khoảng trống lớn được mắt phát hiện nhanh hơn nhiều so với cùng button đặt cạnh 5 element khác. Tăng padding xung quanh CTA primary từ 8px lên 24-32px tăng click-through 8-15% trong nhiều A/B test.
• Signal “premium”: Apple landing page là ví dụ — sản phẩm chính chiếm 30% trang, white space chiếm 60%, dẫn dắt mắt vào hero shot. Brand muốn position cao cấp phải đầu tư white space.

Spacing scale 8pt grid — token chuẩn 2026

Spacing trong UI hiện đại không nên là số tuỳ ý mà phải nằm trong một scale có hệ thống. Scale phổ biến nhất là 8pt grid — mọi spacing là bội của 8 (4 cho micro).

Lý do dùng 8 thay vì 10 hay 5: 8 chia hết cho 2 và 4 (dễ chia đôi/tư cho responsive breakpoint), và đa số màn hình HiDPI render crispy ở bội 8 vì pixel scaling. Khi designer hand-off Figma cho dev, dev không phải đoán “8px hay 10px” — luôn là 8.

Scale chuẩn industry — 8 step từ 4px tới 96px

Scale chuẩn industry hiện nay gồm 8 step: 4px (xs), 8px (sm), 16px (md), 24px (lg), 32px (xl), 48px (2xl), 64px (3xl), 96px (4xl). Một số design system thêm 12px ở giữa xs và md, nhưng đa số tránh để không phá nhịp 8pt.

Token này thường implement dưới dạng CSS variable để dùng nhất quán toàn site. Tailwind dùng scale 4px nhỏ hơn (p-1=4, p-2=8, p-3=12, p-4=16…), tương thích với 8pt nhưng cho phép half-step khi cần.

Áp dụng 8 step vào ngữ cảnh thực tế

• 4px (xs): gap giữa icon và text trong button, giữa label và input nhỏ, giữa các badge tag list dày đặc.
• 8px (sm): gap giữa các button trong button group, giữa các avatar trong avatar stack, padding y của button medium.
• 16px (md): padding chuẩn cho card body, gap giữa các form field, padding x của button large.
• 24px (lg): gap giữa các section nhỏ trong card lớn, giữa H3 và paragraph mở đầu.
• 32-48px (xl-2xl): khoảng cách giữa các H2 lớn — đủ để mắt hiểu đây là phân khúc mới.
• 64-96px (3xl-4xl): padding y của hero section homepage, full-bleed section divider. Padding y dưới 64px khiến hero “nhẹ” thiếu trọng lượng.

8pt grid không có nghĩa “mọi spacing phải bội của 8 mới đúng”. Một số trường hợp đặc biệt cho phép vượt scale — vd letter-spacing -1px hoặc 2px cho font có baseline x-height đặc biệt.

Quy tắc thực dụng: 95% spacing nằm trong scale, 5% exception có lý do rõ.

White space trong typography — line-height và spacing

Typography là nơi micro white space tạo khác biệt lớn nhất giữa “đọc dễ” và “đọc mệt”. Có 4 thuộc tính white space chính của typography mà mọi designer phải nắm — chi tiết hơn xem bài typography cho web.

Line-height và letter-spacing

Line-height (leading) là khoảng cách giữa các dòng. Đối với body text 16px, line-height 1,5 (24px) là chuẩn — đủ thoáng cho mắt theo dòng, không đủ thưa khiến đoạn rời rạc.

Heading lớn (H1, H2 từ 28px trở lên) dùng line-height 1,1-1,3 vì heading thường 1-2 dòng và muốn cảm giác “đặc”. Line-height nhỏ hơn 1,4 cho body text khiến user mỏi mắt sau 2-3 paragraph; lớn hơn 1,7 lại làm dòng rời, mắt lạc khi xuống dòng.

Paragraph spacing và white space heading

• Paragraph spacing: margin giữa các paragraph trong long-form content, 16-24px (1-1,5em). Tránh dùng br đôi để tách paragraph — đó là dấu hiệu CSS chưa structure đúng.
• Letter-spacing: body 0 (default — font đã design tracking sẵn), heading large giảm -0,5px tới -1,5px cho chữ “đặc” lại. Uppercase label nhỏ tăng letter-spacing 0,5-1px để chữ không dính nhau.
• White space xung quanh H2: margin-top lớn (32-48px) để tách section trước, margin-bottom nhỏ hơn (16-24px) để gắn với content phía dưới. Đây gọi là “rule of proximity” — heading thuộc về nội dung dưới nó.

White space trong grid layout — margin, gutter, padding

Layout grid là nơi macro white space được implement cụ thể nhất. Có 3 thuộc tính chính cần kiểm soát: margin (từ container tới mép viewport), gutter (giữa column trong grid), padding (trong container tới content).

Chi tiết grid system foundation xem grid system cơ bản.

Margin viewport và gutter responsive

• Margin viewport: 16-20px x mobile (dưới 480px). 24-32px x tablet (768-1024px).
• 48-80px x desktop (trên 1200px) hoặc dùng max-width container 1200/1280px center.
• Gutter (giữa column grid 12-cột): 16-24px mobile, 24-32px desktop. Gutter nhỏ làm card list dính nhau (đặc biệt khi mỗi card có border).
• Gutter lớn làm card đứng quá riêng, phá cảm giác “chùm”.
• Margin quá nhỏ desktop: content tràn đến rìa, mắt phải quét qua nhiều — đặc biệt khó đọc paragraph rộng 1500px. Margin quá lớn lại tốn không gian.

Padding container theo loại

• Card body padding: 16-24px mobile, 24-32px desktop. Padding nhỏ làm content “dính” border card, padding lớn làm card cồng kềnh chiếm screen.
• Modal padding: 24-32px cả 4 hướng. Modal là focal point, cần padding rộng để content nổi bật khỏi backdrop.
• Hero section padding y: 64-128px. Padding dưới 64px khiến hero “nhẹ” thiếu trọng lượng.
• Stripe, Linear, Vercel thường dùng 96-128px.
• Footer padding y: 48-80px tạo separator rõ giữa content và footer.
• Header padding y sticky: 12-20px. Quá lớn ăn screen real estate trên mobile (vốn đã ít).

Lưu ý CLS: nếu container không có aspect-ratio fixed, padding thay đổi sau khi load JS có thể gây layout shift. Đảm bảo padding tổng được tính từ CSS ngay từ đầu, không từ JS.

Khi nào white space quá ít — 4 dấu hiệu và cách fix

White space không đủ là vấn đề phổ biến hơn so với quá nhiều. Đặc biệt với khách VN, yêu cầu “tận dụng tối đa không gian”, “fit nhiều info trên fold” dẫn đến UI bị nhồi nhét rất khó dùng.

Dấu hiệu 1 và 2 — header dày và card sát

• Dấu hiệu 1 — Header dày đặc với 8-12 link top nav: user không nhớ được hơn 5-7 item đồng thời (Miller’s Law). Fix gom theo 4-5 nhóm với mega menu hoặc giảm xuống 5 item primary + 1 “More” dropdown.
• Không dùng dropdown 3 cấp — user mobile khó touch chính xác.
• Dấu hiệu 2 — Card list không có gap đủ: 6 product card xếp grid với gap 8px tạo cảm giác “wall of products” áp lực. Fix gap tối thiểu 16-24px desktop, 12-16px mobile.
• Mỗi card có padding nội dung 16-24px riêng.

Dấu hiệu 3 và 4 — form sát và paragraph dài

• Dấu hiệu 3 — Form field sát nhau: 8 field trong form contact sát nhau khiến user không phân biệt rõ field nào đang focus, nhất là trên mobile. Fix gap giữa các field group 16-24px, gap label-input 4-8px, padding y input 12-16px (touch target 44-48px tổng).
• Dấu hiệu 4 — Paragraph dài 1500-2000px line: paragraph rộng quá khó đọc — mắt phải scan dài, thường mất dòng khi xuống dòng. Fix max-width content 65-75 ký tự (600-720px ở 16px font).
• Set qua container hoặc CSS max-width: 65ch cho article body.

Phương pháp audit nhanh

Khi audit UI hiện có, phương pháp đơn giản nhất là chụp screenshot và cảm nhận. Trang có “thoáng” không, mắt có nghỉ được không, có chỗ nào “ngộp” không.

Nếu cảm giác ngộp, gấp đôi spacing tại điểm đó và xem có khác không. Đa số trường hợp khác rất rõ — và đó là test quick nhất, không cần đo pixel chính xác.

Khi nào white space quá nhiều — gây disconnect

White space quá nhiều ít gặp hơn nhưng vẫn tồn tại, đặc biệt ở các site rebrand theo “minimalism” cực đoan. Dấu hiệu thường thấy: user phải scroll 3-4 màn để xem hết hero + 1 USP, content mỏng nhưng padding y khổng lồ làm trang dài lê thê.

Vấn đề khi white space quá nhiều

Khi 2 element có khoảng cách 200px giữa chúng, não đọc là “không liên quan” — ngay cả khi logic chúng phải nối tiếp. Đó là lý do đôi khi designer phải kéo CTA gần USP hơn để user hiểu rõ “mua cái này vì lý do trên”.

Header và footer cách CTA primary 200vh khiến user lạc — không biết bài viết đã kết thúc chưa, không biết next action là gì. Pattern Apple cũng có balance, không phải lúc nào cũng max white space.

Cách balance — quy tắc “double for context, half for relation”

• Double for context: tăng gấp đôi spacing để tách 2 nhóm khác nhau (vd section feature → section testimonial).
• Half for relation: giảm một nửa spacing để gắn 2 element cùng nhóm (vd heading H2 → paragraph mở đầu của H2 đó).
• Review thực tế: điều chỉnh dựa trên cảm nhận khi review trang trên mobile + desktop với thời gian đọc thực, không chỉ là số token cố định.

Best practice cho landing page và article

Landing page và article có pattern white space khác nhau vì mục tiêu khác nhau. Landing tối ưu conversion (1 CTA chính), article tối ưu engagement (đọc lâu, scroll sâu).

Pattern landing page

• Hero padding y: 96-128px desktop, 64-80px mobile.
• Section divider: 80-120px giữa các section feature.
• CTA primary padding: 32-48px xung quanh button, ít nhất bằng height button × 2 để focal point rõ.
• Section feature 3-cột: gap 32-48px giữa các column.
• Footer padding y: 80-120px tách footer khỏi content cuối.
• Tổng section: nên dưới 6-8. Landing dài quá khiến user fatigue trước khi tới CTA cuối.

Pattern article body

• Max-width content: 680-760px (65-75 ch) cho measure optimal readability.
• Paragraph margin-bottom: 16-24px tạo separator rõ giữa paragraph.
• H2 margin: margin-top 48-64px, margin-bottom 16-24px theo rule of proximity.
• H3 margin: margin-top 32-40px, margin-bottom 12-16px.
• Image trong article: margin y 32-48px tách image khỏi paragraph.
• Block quote: padding x 24-32px + border-left 4px accent color.
• CTA box hoặc author box cuối: padding 32-40px nổi bật khỏi body text.

Cả 2 pattern đều respond responsive — giảm spacing trên mobile để tránh trang quá dài. Mobile padding x section nên giữ 16-20px tối thiểu để không tràn edge phone.

Công cụ đo và check spacing

Khi audit hoặc validate spacing, dùng các tool sau để kiểm tra chính xác mà không phải đếm pixel manual. Mỗi tool có use case riêng tuỳ giai đoạn audit.

Tool cho dev và FE

• Chrome DevTools Inspect: click element bất kỳ, xem padding/margin trong panel computed. Quick nhất để verify khi dev FE đã chỉnh.
• Pesticide CSS extension: add outline 1px cho mọi element, instant visualization của box model toàn page. Dễ thấy element nào padding lệch.
• VisBug Chrome extension: overlay grid + ruler trên page live, kéo measure giữa 2 element bất kỳ. Verify spacing thực tế khớp design.

Tool cho designer và audit

• Figma Inspect tab: với designer hand-off, click element trong Figma thì tab Inspect hiện đầy đủ padding/margin/gap. Dev copy vào CSS chính xác.
• Lighthouse + axe DevTools: không trực tiếp đo spacing nhưng flag các issue như touch target nhỏ dưới 24×24px (WCAG 2.2).

Process audit chuẩn: chọn 5 page chính (home, category, product/article, contact, account), capture full screenshot mỗi page mobile + desktop. Đánh dấu các điểm spacing nghi ngờ.

So với spec design system. Fix theo priority — spacing lệch ở header/CTA primary fix trước, body content fix sau.

Câu hỏi thường gặp về white space

Tài nguyên và bước tiếp theo

White space là 1 trong các yếu tố perceived quality lớn nhất. Sau khi nắm spacing scale 8pt, cần phối hợp với typography + color + grid để hoàn thiện design system.

Các bài liên quan trong cụm UI/UX cơ bản:

• UI/UX là gì — định nghĩa, 5 layer UX và 6 thành phần UI cốt lõi — spacing là 1 trong 6 thành phần UI, đặt trong context tổng thể.
• 7 nguyên tắc thiết kế UI — checklist mỗi screen cần verify — proximity và hierarchy liên quan trực tiếp white space.
• Grid system cơ bản — 12 cột, CSS Grid vs Flexbox và breakpoint mobile-first — gutter và margin là white space trong grid.
• Typography cho web 2026 — modular scale, variable font và woff2 self-host — line-height và paragraph spacing là white space trong typography.
• Dịch vụ thiết kế UI/UX chuẩn doanh nghiệp tại Web22 — gói trọn gói gồm spacing token chuẩn 8pt và design system bàn giao Figma editable.

Cần đội Web22 audit hoặc rebuild design system với spacing chuẩn 8pt + token JSON + Figma variable? Dịch vụ thiết kế UI/UX chuẩn doanh nghiệp tại Web22 — quy trình token-driven cho mọi thành phần UI, bàn giao Figma editable kèm dev guideline.