This tool is part of these guided projects. Each project provides step-by-step instructions with checklists and all the tools you need in one place.
Tools you might need next
Calculate typographic modular scale ratios and font sizes. Build harmonious type hierarchies with musical ratios for headings, body text, and captions.
Calculate fluid clamp() font sizes that scale with viewport width. Generate CSS clamp formulas for accessible, responsive typography across breakpoints.
Generate icon grid and alignment guides for pixel-perfect icon design. Preview square, circle, and keyline grids for consistent app and UI icon systems.
The golden ratio φ = (1 + √5) / 2 ≈ 1.618034 is a mathematical constant found in geometry, art, and nature. Two quantities are in the golden ratio when their ratio equals the ratio of their sum to the larger.
φ = (1 + √5) / 2 ≈ 1.618; Given A, B = A × φ; or A = B / φA golden rectangle has sides in the golden ratio. Removing a square from one end produces a smaller golden rectangle, creating an infinite recursive pattern. Used in composition and layout design.
Updated: July 2026
Calculate the golden ratio height for a 1200px wide hero section.
→ Height: 1200 / 1.618 ≈ 742px; golden rectangle
Find golden ratio line-height for 16px body text.
→ Line height: 16 × 1.618 ≈ 25.9px (≈ 1.6em)
The golden ratio is one of many useful proportions. It is not inherently superior. Use it when it produces good visual results, not as a dogmatic rule. 1.5, √2, and other ratios are equally valid.
The rule of thirds divides at 1:2 (33%/67%). The golden ratio divides at approximately 38%/62%. They produce different composition points.
Calculate golden ratio proportions and phi-based dimensions. Apply 1.618 spacing, layout segments, and typography sizes for balanced visual composition. It applies the the golden ratio (φ) (φ = (1 + √5) / 2 ≈ 1.618; Given A, B = A × φ; or A = B / φ). For example: layout proportions from width — Calculate the golden ratio height for a 1200px wide hero section.