Bạch ngân tỷ (√2) là gì? Khi nào dùng thay tỷ lệ vàng trong print và UI

Trên Figma, hai số 1.414 và 1.618 trông gần nhau — kéo mắt một chút là nhầm. Nhưng một cái là giấy A4; cái kia là tỷ lệ vàng mà hầu hết tutorial UI phương Tây mặc định. Freelancer Việt làm landing + PDF báo cáo, hay team outsource cho khách Nhật, hay gặp đúng câu: “làm cho nó đẹp như tờ rơi” — rồi bị kéo sang golden và mất cả vòng feedback.

Bài này giải thích bạch ngân tỷ (√2) theo nghĩa dùng trong print / ISO / 白銀比 Nhật, khi nào khác golden, công thức chia, ví dụ CSS, và checklist print→web. Không thần thoại kiến trúc — chỉ quyết định tỷ lệ có thể ship được.

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

• Phân biệt √2 (A4) với φ ≈ 1.618 bằng tiêu chí dùng thật
• Hiểu vì sao A-series gấp đôi vẫn cùng tỷ lệ
• Có công thức + số mẫu để chia chiều rộng / chiều cao
• Áp dụng vào card UI, PDF preview, khung lồng
• Biết khi nào không ép 1:√2
• Dùng công cụ Silver Ratio thay vì nhớ 1.41421356

---

Bạch ngân tỷ là gì? (√2, không phải 2.414)

Trong thiết kế Nhật và chuỗi giấy ISO, 白銀比 (bạch ngân tỷ / tỷ lệ bạc) thường chỉ hình chữ nhật 1 : √2 ≈ 1 : 1.414.

Lưu ý thuật ngữ tiếng Anh: một số tài liệu toán gọi silver ratio là 1 + √2 ≈ 2.414. Tool và bài này dùng nghĩa giấy/ISO / 白銀比 ≈ 1.414 — cùng hệ với A4. Nếu brief nói “silver ratio” bằng tiếng Anh, hãy hỏi lại họ muốn √2 rectangle hay 1+√2.

Vì sao A4 là √2?

Giấy A4 = 297 × 210 mm. 297 ÷ 210 ≈ 1.414. Cắt đôi theo cạnh ngắn → hai tờ A5 vẫn ≈ 1:√2. Cắt tiếp → A6… Chuỗi A0 → A1 → … → A4 dựa trên đúng tính chất này.

Tỷ lệ vàng không giữ tỷ lệ khi gấp đôi theo cách đó. Mental model:

• Nghĩ xoắn ốc / logo / hierarchy → golden
• Nghĩ flyer gấp đôi vẫn giống flyer → silver / √2

Công thức chia một đoạn N

Tool Kawa chia N thành hai phần cộng lại đúng N:

Phần	Công thức	≈ hệ số
Lớn hơn	N × √2 / (1 + √2)	≈ 0.586
Nhỏ hơn	N / (1 + √2)	≈ 0.414

Ví dụ từ tool (làm tròn 2 chữ số):

N = 1000
Lớn hơn ≈ 585.79
Nhỏ hơn ≈ 414.21

Nếu bạn chỉ cần cạnh còn lại của khung 1:√2:

• Biết ngắn a → dài ≈ a × 1.414
• Biết dài b → ngắn ≈ b / 1.414

A4: ngắn 210 → dài ≈ 297 — khớp giấy thật.

---

Bạch ngân tỷ vs tỷ lệ vàng — chọn khi nào?

Chọn √2 khi

• Xuất PDF A4 hoặc UI “in trước — xem trên web sau”
• Card sản phẩm / case study muốn giống insert catalogue, không phải crop Instagram vuông
• Khung lồng: ngoài √2, trong ≈ nửa cạnh vẫn cùng họ tỷ lệ (echo giấy gấp)
• Brief khách Nhật nói 白銀比, giống giấy, A判

Chọn golden (≈1.618) khi

• Hierarchy tiêu đề / khối hero cần “nhảy mắt”
• Logo, poster nghệ thuật, spiral composition
• Stakeholder nói rõ 黄金比 / golden ratio plugin

Đừng chọn theo thói quen Figma

Plugin golden tự xoắn mọi margin sẽ đánh nhau với 12-column grid. √2 thường “im hơn”: đặt vào media box và print preview, không bắt buộc mọi heading width.

---

Áp dụng print và UI (case thực tế)

Case 1 — Freelancer: landing + PDF báo cáo cùng một brand

Khách SME Việt cần landing và file PDF gửi đối tác. Hero web 16:9 ổn; nhưng khối “brochure” và trang PDF nếu dùng golden sẽ lệch cảm giác giấy A4 khi in thử.

Cách làm:

1. Token: --ratio-silver: 1.41421356237
2. Section brochure / card tài liệu: aspect-ratio: 1 / var(--ratio-silver)
3. @media print hoặc trang “Save as PDF”: ưu tiên khung gần A-series để preview ≈ giấy

.doc-card {
  aspect-ratio: 1 / 1.41421356237;
  width: min(100%, 22rem);
}

@media print {
  .doc-page {
    width: 210mm;
    height: 297mm; /* A4 — đúng √2 */
  }
}

Case 2 — Outsource UI cho khách Nhật

Mock Figma ghi “A4-ish artboard”. Engineer mặc định kéo card sang 1.618 vì “mọi tutorial dạy golden” → review: “sao trông như poster phim?”

Hỏi sớm một câu: 黄金比 hay 白銀比? Một câu này cắt cả vòng revision. Map artboard → aspect-ratio √2; giữ 12-column grid — chỉ ô media mang tỷ lệ, không phá cột.

Case 3 — Nested frame (empty state / chứng chỉ)

• Khung ngoài: rộng 400 → cao ≈ 400 × 1.414 ≈ 565.6
• Hoặc chia bề ngang 400 bằng tool: lớn ≈ 234.3, nhỏ ≈ 165.7 để đặt hai panel cạnh nhau theo bạc

Dùng máy tính Silver Ratio: nhập 400 hoặc 1000, copy cặp lớn/nhỏ — tránh cộng nhầm làm lệch 1–2px trên retina.

---

Cách dùng công cụ trên Kawa

1. Mở Silver Ratio
2. Nhập số (rộng, cao, font-size, hoặc bất kỳ đơn vị nhất quán)
3. Đọc Lớn hơn (√2/(1+√2)) và Nhỏ hơn
4. Gắn vào CSS / Figma / thông số in

Công cụ chạy trên trình duyệt — phù hợp khi đang trên máy khách / VPN hạn chế, không cần upload file thiết kế.

Ví dụ nhanh:

Input N	Lớn hơn ≈	Nhỏ hơn ≈	Gợi ý dùng
1000	585.79	414.21	Chia sidebar + main theo bạc
210	123.03	86.97	Scale từ cạnh ngắn kiểu A4 (mm)
16 (rem)	9.37	6.63	Cặp kích thước type gần nhau

---

Checklist quyết định (trước khi lock tỷ lệ)

• Brief là print/PDF/A4 hay hero marketing?
• Khách nói golden / 黄金比 hay silver / 白銀比 / “như giấy”?
• Card có ảnh không — đã chọn object-fit: cover hay contain?
• Mobile: full-width + giữ ratio, không đổi sang 4:3 giữa chừng trừ khi art direction yêu cầu
• Grid 12 cột vẫn là nguồn sự thật; ratio chỉ ràng hộp media
• Đã ghi token --ratio-silver trong PR để người sau không “sửa thành 1.618”

Lỗi thường gặp

Lỗi	Hệ quả	Cách tránh
Nhầm 1.414 ↔ 1.618	Card “hơi lạ” khó giải thích	Ghi rõ tên tỷ lệ trong spec
Ép mọi UI thành √2	Bảng / dashboard méo	Chỉ áp media & print
Stretch ảnh vào khung	Mặt sản phẩm méo	Crop có chủ đích hoặc contain
Gọi “silver” theo nghĩa 2.414	Sai số toàn bộ	Xác nhận √2 / A4

---

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

Bạch ngân tỷ khác tỷ lệ vàng thế nào?
√2 ≈ 1.414 (A4, gấp đôi giữ tỷ lệ) vs φ ≈ 1.618 (hierarchy/logo). Chọn theo mục đích, không theo plugin mặc định.

A4 có phải bạch ngân tỷ không?
Có — 297×210 mm ≈ 1:√2. Đó là lý do chuỗi giấy A hoạt động.

Có bắt buộc mọi card dùng 1:√2?
Không. Dùng khi cần cảm giác tài liệu/print hoặc brief √2. Còn lại để nội dung và breakpoint quyết định.

Tính tay hay dùng tool?
Số √2 dễ nhớ gần đúng, nhưng chia panel (0.586 / 0.414) dễ lệch — tool nhanh và đủ cho UI.

---

Liên kết liên quan

• Công cụ Silver Ratio (√2)
• Resize ảnh giữ tỷ lệ — khi khung √2 đã chốt, vẫn cần crop/letterbox đúng slot
• Danh sách công cụ