Tỷ Lệ Vàng - Tính Golden Ratio Cho Layout, Khung Hình, Cỡ Chữ

Tính năng nổi bật

• Nhập tổng độ dài, đoạn dài hoặc đoạn ngắn, tính ngay hai đại lượng còn lại với φ = 1,6180339887...
• Đọc số theo cách viết Việt Nam: 1.200 là một nghìn hai trăm, 741,6 là số thập phân, hiển thị lại số đã hiểu để tránh nhầm
• Chia layout hai cột theo tỷ lệ vàng, có trừ khoảng cách giữa hai cột, xuất đoạn CSS Grid tương ứng
• Vẽ hình chữ nhật vàng chia thành 1 đến 12 hình vuông và đường xoắn ốc ghép từ các cung phần tư, vẽ đúng hình học
• Thang cỡ chữ nhân chia theo φ từ một cỡ gốc, hiển thị px, rem và chữ mẫu
• Đặt lưới φ (0,382 và 0,618), lưới một phần ba và đường xoắn ốc lên ảnh tải từ máy, lật ngang, lật dọc, xoay dọc để thử 8 hướng
• Ảnh được mở ngay trên trình duyệt, không tải lên máy chủ

Khi nào tỷ lệ vàng thật sự hữu ích

Tỷ lệ vàng không phải công thức bí mật tạo ra cái đẹp, nhưng là một điểm xuất phát hợp lý khi bạn cần chia một khoảng không thành hai phần không bằng nhau mà vẫn cân đối: cột nội dung và cột bên, ảnh và phần chữ trên banner, chiều rộng và chiều cao của một tấm thẻ. Hai phần chênh nhau đủ rõ để có chính phụ, nhưng không chênh đến mức phần nhỏ trông lạc lõng. Công cụ giúp bạn có ngay con số chính xác thay vì bấm máy tính, đồng thời cho thấy trực quan tỷ lệ đó trên thanh chia, trên hình chữ nhật vàng và trên chính bức ảnh bạn đang chỉnh. Hãy xem kết quả như một gợi ý để thử, rồi quyết định bằng mắt và theo nội dung thực tế.

Lợi ích khi sử dụng

• •Có số đo chính xác trong một bước, không phải nhớ công thức
• •Hiểu rõ tỷ lệ vàng qua hình vẽ đúng, không phải hình minh họa ước lượng
• •So sánh trực tiếp lưới φ với quy tắc một phần ba trên cùng một bức ảnh
• •Đoạn CSS chia hai cột dùng được ngay cho website
• •Nội dung trung thực về giới hạn của tỷ lệ vàng, tránh áp dụng máy móc

Cách tính tỷ lệ vàng

1. 1Chọn đại lượng bạn đã biết: tổng độ dài, đoạn dài A hoặc đoạn ngắn B, rồi nhập giá trị, ví dụ 1200.
2. 2Đọc ba ô kết quả A, B và A + B; kiểm tra dòng Đang hiểu là để chắc công cụ đọc đúng số bạn nhập.
3. 3Ở phần chia layout, nhập khoảng cách giữa hai cột nếu có, rồi sao chép đoạn CSS Grid.
4. 4Kéo thanh số hình vuông để xem hình chữ nhật vàng và đường xoắn ốc được dựng như thế nào.
5. 5Nhập cỡ chữ gốc để có thang cỡ chữ theo φ, tham khảo cột rem nếu dùng cho CSS.
6. 6Chọn một ảnh, bật lưới φ, lưới một phần ba hoặc đường xoắn ốc, lật hoặc xoay cho đúng hướng chủ thể để kiểm tra bố cục.

Công thức tỷ lệ vàng và ví dụ tính

Gọi A là đoạn dài, B là đoạn ngắn. Tỷ lệ vàng yêu cầu (A + B) / A = A / B = φ, giải ra φ = (1 + √5) / 2 ≈ 1,6180339887. Từ đó: biết tổng T thì A = T / φ và B = T / φ²; biết A thì B = A / φ và tổng = A × φ; biết B thì A = B × φ và tổng = B × φ². Ví dụ khung 1200 px chia theo tỷ lệ vàng được A ≈ 741,64 px và B ≈ 458,36 px, tức khoảng 61,8% và 38,2%. Nếu hai cột cách nhau 24 px, công cụ lấy 1176 px còn lại để chia, được khoảng 726,81 px và 449,19 px. Một tính chất đẹp của φ là φ² = φ + 1, nên 1 / φ = φ trừ 1 ≈ 0,618 và 1 / φ² ≈ 0,382, đây chính là vị trí các đường của lưới φ.

Tỷ lệ vàng và dãy Fibonacci

Dãy Fibonacci 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144 có mỗi số bằng tổng hai số liền trước. Tỷ số giữa hai số liền nhau dao động quanh và tiến dần về φ: 3/2 = 1,5; 5/3 ≈ 1,667; 8/5 = 1,6; 13/8 = 1,625; 21/13 ≈ 1,615; 34/21 ≈ 1,619; 55/34 ≈ 1,618; 144/89 ≈ 1,618. Vì vậy khi cần số nguyên gần đúng tỷ lệ vàng, có thể dùng cặp Fibonacci như 8 và 13, 21 và 34, 55 và 89. Điều này hữu ích với khoảng cách, cỡ chữ hay kích thước lưới cần số tròn. Tuy vậy, việc một hiện tượng có số Fibonacci không có nghĩa là nó chứa tỷ lệ vàng, vì mọi dãy cộng dồn kiểu này đều có tỷ số tiến về φ.

Hình chữ nhật vàng và đường xoắn ốc được vẽ thế nào

Hình chữ nhật vàng có cạnh dài chia cạnh ngắn bằng φ. Cắt đi một hình vuông có cạnh bằng cạnh ngắn, phần còn lại lại là một hình chữ nhật vàng nhỏ hơn φ lần, chỉ xoay đi một góc vuông. Lặp lại việc cắt theo thứ tự trái, trên, phải, dưới, ta được dãy hình vuông nhỏ dần, mỗi hình nhỏ hơn hình trước đúng φ lần. Vẽ trong mỗi hình vuông một cung phần tư đường tròn có bán kính bằng cạnh hình vuông, các cung nối liền nhau thành đường xoắn ốc. Bộ kiểm thử của công cụ xác nhận các cung nối liền đầu cuối, luôn xoay cùng một chiều và các hình vuông không chồng lên nhau. Cần biết đây là cách vẽ gần đúng: xoắn ốc vàng thật là một xoắn ốc logarit có độ cong thay đổi liên tục, còn cách ghép cung tròn có độ cong đổi đột ngột tại mỗi chỗ nối, dù mắt thường khó nhận ra.

Lưới φ và quy tắc một phần ba khi chụp và cắt ảnh

Quy tắc một phần ba chia khung hình bằng hai đường dọc và hai đường ngang tại 1/3 và 2/3, gợi ý đặt chủ thể hoặc đường chân trời gần các đường này thay vì chính giữa. Lưới φ làm điều tương tự nhưng đặt đường ở khoảng 0,382 và 0,618, nên các điểm giao gần tâm ảnh hơn một chút. Chênh lệch giữa hai lưới chỉ khoảng 5% bề rộng khung, vì vậy trên thực tế chúng cho gợi ý khá giống nhau. Đường xoắn ốc gợi ý dẫn mắt người xem từ vùng rộng vào một điểm nhấn. Công cụ cho bật cùng lúc cả hai lưới để bạn tự so sánh. Với ảnh không có tỷ lệ vàng, chế độ kéo giãn làm xoắn ốc thành cung elip phủ kín khung, còn chế độ giữ tỷ lệ vẽ xoắn ốc đúng hình nhưng không phủ hết ảnh. Đây là công cụ tham khảo, bố cục tốt vẫn phụ thuộc vào nội dung và ý đồ của người chụp.

Thang cỡ chữ theo tỷ lệ vàng

Thang cỡ chữ theo φ nhân cỡ gốc với φ cho mỗi bậc lên và chia cho φ cho mỗi bậc xuống. Với cỡ gốc 16 px, các bậc lên là khoảng 25,89 px, 41,89 px, 67,78 px và 109,67 px, bậc xuống là khoảng 9,89 px và 6,11 px. Mỗi bậc tăng hơn 60% nên thang này tạo tương phản rất mạnh giữa tiêu đề và nội dung, hợp với trang đích, poster, slide có ít cấp tiêu đề. Với trang nhiều cấp như bài viết dài, tài liệu, giao diện ứng dụng, thang dịu hơn như 1,2 hay 1,25 thường dễ dùng hơn, và cỡ dưới 12 px nên tránh cho chữ cần đọc. Cột rem tính theo cỡ chữ gốc 16 px của trình duyệt.

Sự thật và ngộ nhận về tỷ lệ vàng

Có rất nhiều khẳng định phổ biến về tỷ lệ vàng nhưng thiếu bằng chứng. Việc đền Parthenon, tranh Mona Lisa hay các kim tự tháp được thiết kế theo tỷ lệ vàng chủ yếu dựa trên cách chọn điểm đo sao cho khớp, trong khi không có tài liệu cho thấy người tạo ra chúng dùng tỷ lệ này. Vỏ ốc anh vũ có dạng xoắn ốc logarit, nhưng các phép đo thực tế cho thấy tốc độ mở rộng của nó không phải tỷ lệ vàng. Đặc biệt, các thuyết cho rằng khuôn mặt đẹp là khuôn mặt theo tỷ lệ vàng, hay những mặt nạ đo độ đẹp theo φ, không có cơ sở khoa học đáng tin cậy; cảm nhận về vẻ đẹp khuôn mặt khác nhau theo văn hóa, thời đại và từng người. Công cụ này vì vậy không có tính năng đo khuôn mặt. Các thí nghiệm hỏi người xem thích hình chữ nhật nào cũng cho kết quả không nhất quán. Tỷ lệ vàng có những tính chất toán học thú vị và là một lựa chọn hợp lý trong thiết kế, nhưng nên xem nó như một công cụ, không phải quy luật của cái đẹp.

Giới hạn cần biết

Kết quả hiển thị được làm tròn 2 chữ số thập phân; khi dựng giao diện thật, các giá trị lẻ như 741,64 px sẽ được trình duyệt làm tròn khi vẽ. Công cụ đọc số theo thói quen Việt Nam, nên 1.618 được hiểu là một nghìn sáu trăm mười tám; muốn nhập số thập phân hãy dùng dấu phẩy như 1,618. Lưới và xoắn ốc trên ảnh chỉ để xem, công cụ chưa xuất ảnh có kèm lưới. Ảnh định dạng HEIC trên một số trình duyệt không mở được, hãy chuyển sang JPG hoặc PNG. Thang cỡ chữ chỉ dùng tỷ lệ φ; với các tỷ lệ khác và xuất biến CSS, hãy dùng công cụ Typography Scale.

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

Từ khóa liên quan

• tỷ lệ vàng
• tỉ lệ vàng
• golden ratio
• tính tỷ lệ vàng
• công thức tỷ lệ vàng
• tỷ lệ vàng 1.618
• hình chữ nhật vàng
• xoắn ốc vàng
• golden spiral
• tỷ lệ vàng trong thiết kế
• tỷ lệ vàng trong nhiếp ảnh
• lưới phi grid
• quy tắc một phần ba
• golden ratio calculator
• chia layout tỷ lệ vàng
• thang cỡ chữ tỷ lệ vàng
• dãy fibonacci tỷ lệ vàng
• tỷ lệ vàng trong kiến trúc
• số phi 1.618