Tỷ lệ vàng trong layout | Hero, cột và spacing tính nhanh trước khi thiết kế

Stakeholder bảo “làm như Apple, dùng golden ratio hết”. Designer kéo hero 61.8%. Dev nhận spec 613.27px và gap không khớp token. Sprint sau: layout vỡ trên tiếng Việt dài và iPhone SE.

Bài này dành cho developer / freelancer / sinh viên cần tính nhanh hero, cột và spacing trước khi thiết kế — không phải bài lịch sử Parthenon. Mục tiêu: biết khi nào φ giúp, khi nào bỏ, và có số cụ thể để paste vào CSS hoặc design token.

Bài viết này giúp bạn

• Hiểu φ ≈ 1.618 và cách chia một giá trị thành hai phần
• Áp vào hero, hai cột, type scale, khung ảnh
• Phân biệt với silver ratio và Fibonacci spacing
• Workflow: nội dung trước → φ → snap grid → test chuỗi thật
• Dùng tool local, không cần đăng ký

---

Tỷ lệ vàng là gì?

Tỷ lệ vàng (golden ratio) là:

φ = (1 + √5) / 2 ≈ 1.6180339887

Nếu cạnh dài là a, cạnh ngắn là b:

a / b = (a + b) / a = φ

Khi bạn có một số N (chiều rộng container, chiều cao hero, cỡ chữ gốc…) và muốn chia theo φ:

Phần	Công thức	≈ hệ số	Ví dụ N = 1000
Lớn hơn	N × φ / (1 + φ)	0.618	618
Nhỏ hơn	N − phần lớn	0.382	382

Hai phần cộng lại đúng N — đây chính là “chia khung” mà tool thiết kế làm mỗi ngày.

Lưu ý: UI sản phẩm không phải mặt tiền đền Parthenon. Touch target 44px, bảng dữ liệu dày, chuỗi tiếng Việt / tiếng Đức dài sẽ phá lưới φ ngây thơ. φ là tỉ lệ tham chiếu, không thay kiểm tra đọc được.

---

Khi nào φ thực sự giúp

1. Chia hai cột (content + sidebar)

Trên desktop rộng, cột nội dung ~61.8% và sidebar ~38.2% thường cân hơn 50/50 hoặc 70/30 “cảm tính”.

.layout {
  display: grid;
  grid-template-columns: 1.618fr 1fr; /* ≈ 62 / 38 */
  gap: 1.5rem; /* snap: 24px nếu base 16 */
}

@media (max-width: 768px) {
  .layout {
    grid-template-columns: 1fr; /* mobile: xếp chồng — bỏ φ */
  }
}

Ví dụ số: container 1200px → lớn ≈ 742, nhỏ ≈ 458. Làm tròn 744 / 456 hoặc 760 / 440 nếu token là bội 8.

2. Hero / khung ảnh không vuông

Khi brand chưa quy định aspect, hình chữ nhật gần φ (ví dụ 1000 × 618) là default ổn cho banner marketing. Vẫn crop theo chủ thể ảnh trước — đừng cắt mặt người chỉ để khớp φ.

3. Type scale cho landing ít cấp

Nhân base bằng ~1.618:

Bậc	Công thức	Ví dụ (base 16)
Body	1×	16px
H3 / lead	×φ	≈ 26px
H2	×φ²	≈ 42px
H1	×φ³	≈ 68px (thường quá lớn → giảm)

Landing 3–4 cấp heading: hữu ích. Dashboard / settings form: nhảy 16→26→42 làm caption và label chen chúc — ưu tiên tỉ lệ 1.2–1.333 (major second / perfect fourth).

4. Logo / khối visual đơn giản

Tỉ lệ khối logo với clear space đôi khi tham chiếu φ. Nhưng brand guideline thắng toán. Không có guideline thì padding đều thường sạch hơn padding “thần thánh” φ.

---

Khi nào φ trở thành nhiễu

Sai phổ biến:

• Ép mọi khoảng trắng theo φ → implement lệch token, review PR đau.
• Nhầm silver ratio (≈1.414) với golden — layout “giấy A4” vs layout “cinematic” khác nhau.
• Comment code kiểu cult: /* sacred φ */ — viết /* ~62/38 content/sidebar */ rõ hơn.

---

Workflow thực tế: tính trước, kéo sau

Freelance VN hay nhận brief “landing đẹp, hiện đại” rồi mở Figma kéo tự do. Cách ít sửa hơn:

1. Ưu tiên nội dung — vùng nào là task chính (CTA, form, bài viết)?
2. Thử tỉ lệ — φ hoặc 2:1, chọn cái vừa chữ thật.
3. Snap — làm tròn về 4/8px (hoặc 4px nếu design system dùng 4).
4. Test breakpoint — 320 / tablet / laptop; mobile gần như luôn stack.
5. Document — “split ~62/38 sau snap 8px”, không “vì Apple dùng φ”.

Tính nhanh với Kawa

Mở Golden Ratio Calculator:

1. Nhập giá trị (rộng container, cao hero, font base…).
2. Đọc ngay phần lớn và phần nhỏ (≈ 0.618 / 0.382).
3. Làm tròn rồi đưa vào Figma / CSS token.

Tool chạy trên trình duyệt, không cần đăng ký — phù hợp tính vài số trước họp khách hoặc trước khi review layout của teammate.

Ví dụ nhập:

Input N	Lớn (~0.618)	Nhỏ (~0.382)	Gợi ý dùng
1440 (desktop full)	890	550	Hero split ảnh / copy
1000 (content max)	618	382	Main + aside
16 (font base)	9.89	6.11	Ít dùng trực tiếp — nhân φ cho scale thay vì chia base
64 (icon box)	39.5 → 40	24.5 → 24	Snap token trước khi ship

Với font: thường nhân base × 1.618 để ra bậc lớn hơn, không chia 16 thành 9.89 + 6.11.

---

Case study 1: Landing course — hero 50/50 bị “nặng đáy”

Bối cảnh: Sinh viên / freelancer làm landing khóa học. Hero ảnh trái – chữ phải 50/50. Trên desktop ổn; khi thêm giá VND + 2 dòng mô tả tiếng Việt, khối chữ trông chật và lệch quang học.

Xử lý:

1. Đổi grid thành 1.618fr 1fr (chữ rộng hơn ảnh) hoặc ngược lại nếu ảnh là điểm bán.
2. Snap gap 24px, padding section 48/64 theo token.
3. Mobile: stack ảnh trên, chữ dưới — không giữ 62/38 ngang.

Kết quả: không “magic”, nhưng stakeholder ngừng đòi “cân pixel theo φ mọi nơi” vì đã có một tỉ lệ có chủ đích.

---

Case study 2: Dashboard — φ type scale làm form rối

Bối cảnh: Team outsource áp scale 16 / 26 / 42 cho cả marketing site và admin. Trong bảng filter, label 26px + input làm chiều cao hàng nổ; H1 68px chiếm nửa viewport.

Xử lý:

• Marketing: giữ φ hoặc gần φ.
• Product UI: scale 12 / 14 / 16 / 20 / 24 / 32 (tỉ lệ ~1.2–1.25).
• Document trong design system: hai scale riêng — tránh một φ cho mọi surface.

---

Golden vs silver vs “Fibonacci spacing”

Tỉ lệ	Giá trị	Cảm giác / ngữ cảnh	Ghi chú implement
Golden φ	≈ 1.618	Cinematic, Western layout, hero	Chia 62/38; snap grid
Silver √2	≈ 1.414	Gần giấy A, layout “tài liệu”	Đừng trộn với φ
Fibonacci gaps	8, 13, 21…	Minh họa “tự nhiên”	13 không chia hết 8 → khó token

Nếu khách nói “làm golden” nhưng brief là brochure kiểu giấy — hỏi lại họ muốn φ hay chỉ “đẹp như flyer”. Làm rõ sớm hơn cả một vòng redesign.

---

Checklist trước khi merge layout

• Đã chọn tỉ lệ vì nội dung, không vì meme φ
• Số đã snap 4/8px (không còn 613.27)
• Mobile stack / reflow đã xem với chuỗi tiếng Việt thật
• Type scale marketing ≠ type scale app (nếu cần)
• Comment / PR nói “~62/38”, không thần thoại hóa
• Spacing token team còn đọc được sau khi “thêm một chút φ”

---

Câu hỏi thường gặp

Apple có bắt buộc UI theo tỷ lệ vàng không?
Không. Apple dùng nhiều tỉ lệ và chỉnh quang học. Copy φ không làm app “giống Apple”.

Clear space logo có phải φ không?
Guideline thương hiệu thắng. Không có guideline thì padding đều thường sạch hơn.

Dùng φ có phải cargo cult không?
Chỉ khi φ đè usability. Là một tỉ lệ khởi đầu cạnh grid và nội dung thì ổn — như muối trong món ăn, không phải cả lọ.

---

Liên kết liên quan

• Máy tính tỷ lệ vàng — nhập N, lấy cặp lớn/nhỏ ngay trên trình duyệt
• Aspect ratio — khung 16:9, 4:3 khi đã chọn tỉ lệ hiển thị
• Fluid typography — scale chữ theo viewport sau khi có bậc type
• Danh sách công cụ