Golden Ratio Layout Calculator
Calculate golden ratio layout dimensions for design, photography, and web development with interactive inputs.
Golden Ratio Layout Calculator
Calculator
Adjust values & calculateEnter your values below. Every result is computed in your browser โ no data is sent to any server.
Formula: phi = (1 + sqrt(5)) / 2 = 1.6180339887...
Worked example โ Content: 890px | Sidebar: 550px | Suggested height: 890px
Formula
phi = (1 + sqrt(5)) / 2 = 1.6180339887...
The golden ratio phi divides a length so that the ratio of the whole to the larger part equals the ratio of the larger part to the smaller part. For layout purposes: larger = total / phi, smaller = total - larger.
Worked Examples
Example 1: Web Page Two-Column Layout
Problem:Design a two-column layout for a 1440px wide page using the golden ratio. What should be the content and sidebar widths?
Solution:Total width: 1440px Golden ratio: 1.6180339887 Larger section (content): 1440 / 1.618 = 890.0px Smaller section (sidebar): 1440 - 890.0 = 550.0px Ratio check: 890.0 / 550.0 = 1.618 (golden ratio confirmed) Golden rectangle height: 1440 / 1.618 = 890.0px
Result:Content: 890px | Sidebar: 550px | Suggested height: 890px
Example 2: Poster Design Proportions
Problem:Create a poster with 24-inch width using golden ratio proportions. Find the ideal height and internal layout divisions.
Solution:Width: 24 inches Golden rectangle height: 24 / 1.618 = 14.83 inches Larger horizontal section: 24 x 0.618 = 14.83 inches Smaller horizontal section: 24 - 14.83 = 9.17 inches Larger vertical section: 14.83 x 0.618 = 9.17 inches Smaller vertical section: 14.83 - 9.17 = 5.66 inches
Result:Poster: 24 x 14.83 in | Main area: 14.83 x 9.17 in | Accent: 9.17 x 5.66 in
Frequently Asked Questions
What is the golden ratio and why is it used in design?
The golden ratio, approximately 1.6180339887, is an irrational mathematical constant denoted by the Greek letter phi. It appears when a line is divided into two parts such that the ratio of the whole line to the longer part equals the ratio of the longer part to the shorter part. Designers use the golden ratio because it creates naturally balanced and aesthetically pleasing proportions that appear throughout nature, from nautilus shells to sunflower seed patterns to the proportions of the human face. In graphic design, web design, and photography, applying the golden ratio to layout dimensions, typography scales, and spacing creates visual harmony that viewers perceive as beautiful and well-organized, even if they cannot articulate why.
How do I apply the golden ratio to a web page layout?
To apply the golden ratio to a web layout, divide your total content width by 1.618 to get the width of your main content area, and the remainder becomes your sidebar width. For a 1200px layout, the main content would be approximately 741px and the sidebar would be 459px. You can also apply the golden ratio vertically to determine header and hero section heights. For typography, multiply your base font size by 1.618 for each heading level to create a harmonious type scale. Use golden ratio-derived spacing values for margins and padding throughout your design. Many popular websites including Apple and Twitter have incorporated golden ratio proportions in their layouts to achieve visual balance and readability.
What is the relationship between the golden ratio and the Fibonacci sequence?
The Fibonacci sequence (1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144...) is intimately connected to the golden ratio. As you progress through the sequence, the ratio of consecutive Fibonacci numbers converges toward phi (1.618...). For example, 8/5 = 1.6, 13/8 = 1.625, 21/13 = 1.615, 55/34 = 1.6176, and so on. This relationship makes Fibonacci numbers useful for creating golden ratio approximations in pixel-based layouts where exact golden ratio dimensions might result in fractional pixels. Designers often use Fibonacci numbers directly for grid systems, spacing scales, and responsive breakpoints because they naturally approximate golden ratio proportions while remaining whole numbers that work cleanly in digital media.
How is the golden ratio used in photography composition?
In photography, the golden ratio provides more sophisticated composition guidelines than the simpler rule of thirds. The golden spiral (or Fibonacci spiral) overlaid on an image suggests placing the focal point where the spiral converges, creating a natural flow that guides the viewer eye through the image. The phi grid divides the frame using golden ratio proportions rather than equal thirds, placing the dividing lines at approximately 38.2% and 61.8% of the frame dimensions. Many professional photographers use golden ratio overlays in their viewfinders or during post-processing cropping. The golden ratio is also used to determine ideal crop dimensions for prints and digital displays, with common golden ratio rectangles including aspect ratios close to 16:10 and 5:3.
Can the golden ratio be applied to spacing and typography systems?
The golden ratio creates excellent modular type and spacing scales for consistent, harmonious design systems. Starting from a base font size of 16px, multiplying by phi gives heading sizes of approximately 25.9px, 41.9px, 67.8px, and so on, while dividing gives smaller sizes like 9.9px and 6.1px for captions and labels. For spacing, start with a base unit like 8px and multiply or divide by phi to generate a complete spacing scale: 4.9px, 8px, 12.9px, 20.9px, 33.9px, and 54.8px. This approach produces spacing values that feel naturally proportioned and maintain visual rhythm throughout a design. Many CSS frameworks and design tokens are built on similar modular scales, though they may use different ratios like the major third (1.25) or perfect fourth (1.333).
How do I split a fixed width into golden ratio segments?
Divide the total by phi to get the larger segment, then subtract to get the smaller. Because 1 divided by phi is about 0.6180, the larger part is roughly 61.8 percent of the total and the smaller is roughly 38.2 percent. For a 960px container the split is about 593px and 367px. The defining property is self-similar: total divided by larger equals larger divided by smaller, so you can subdivide the larger segment again by phi to generate nested proportions for a header, hero and content band.
What is the difference between a golden rectangle and the rule of thirds?
The rule of thirds divides a frame into equal thirds and places interest at 33.3 and 66.7 percent, while a phi grid places its lines at 38.2 and 61.8 percent, noticeably closer to the centre. A golden rectangle is a different idea again: it is a rectangle whose sides are in a 1 to 1.618 ratio, so removing a square from it leaves a smaller rectangle of the same proportion. Thirds is a quick compositional habit; the golden ratio is a proportional system you can apply to page dimensions, grids and spacing together.
Why do designers use whole-number approximations instead of exact phi?
Phi is irrational, so exact golden dimensions almost always land on fractional pixels, which browsers round inconsistently and which complicate gutters and column arithmetic. Fibonacci pairs such as 34:55, 55:89 and 89:144 are whole numbers whose ratios converge on phi, so they give a visually identical result while staying divisible. A common practical substitute is an 8:13 module for cards, whose ratio of 1.625 sits within about half a percent of phi and is visually indistinguishable at layout scale. Rougher stand-ins such as a flat 1 to 1.6 drift further, by roughly a percent, which is still invisible in most page work but worth knowing before you call it a golden proportion.
How does the golden ratio relate to the golden angle used in radial layouts?
Dividing a full circle by phi gives about 222.5 degrees, and its complement, roughly 137.5 degrees, is the golden angle. Because phi is the irrational number hardest to approximate with simple fractions, repeatedly rotating by the golden angle never lands twice in the same place, which is why sunflower florets and pine cone scales pack so evenly. Designers borrow the same trick for radial dashboards, spiral galleries and generative pattern work when they want evenly distributed elements with no visible banding.
When is the golden ratio the wrong tool for a layout?
It is a poor fit whenever an external constraint already fixes the proportion. ISO A-series paper uses a 1 to root-two ratio so that halving preserves shape; photographic frames are 3:2 or 4:3; video is 16:9; and app icons and social posts are square. Forcing a 1.618 split into a 12-column CSS grid also yields awkward fractional columns where a 7:5 or 8:4 split is cleaner. Use phi where you control the dimensions, and treat it as one proportional option rather than a rule.
References
Background & Theory
History
Reviewed for accuracy by Daniel Agrici, Founder & Lead Developer ยท Editorial policy
Related Calculators
๐งฎGolden Ratio Overlay Calculator
Generate golden ratio and rule of thirds overlays for any image dimensions.
๐งฎAspect Ratio Converter
Convert video aspect ratios and calculate letterboxing or pillarboxing dimensions.
๐งฎSunset Golden Hour Calculator
Calculate golden hour and blue hour times for any location and date for photography.
๐งฎColor Contrast Checker
Check color contrast ratio against WCAG AA and AAA accessibility standards.
๐งฎDepth of Field Calculator
Calculate depth of field with interactive inputs and clear steps.
๐งฎHyperfocal Distance Calculator
Calculate hyperfocal distance with interactive inputs and clear steps.
๐งฎField of View Calculator (camera)
Calculate field of view (camera) with interactive inputs and clear steps.
๐งฎShutter Speed to Freeze Motion Calculator
Calculate shutter speed to stop motion with interactive inputs and clear steps.