Golden Ratio Calculator Widget

A golden ratio tool for designers, artists and woodworkers. Give a length and the widget divides it into its golden parts, or finds the whole from one part, lists a ladder of golden sizes and suggests heading sizes from a body font - clearly labelled as a convention.

Design Calculator Runs in your browser Free · no ads

Customize your widget

Theme
Auto follows the visitor's light/dark setting.
Style
Attribution on your page
Optional and entirely your choice. The exact line is shown in the code below; it links to the tool with rel="nofollow".
More options
Starting values
Leave blank to use the widget's defaults. Visitors can still change every value.

Live preview

Exactly what your visitors will see

Embed code

<iframe src="https://a2z.tools/embed/w/golden-ratio-calculator" title="Golden Ratio Calculator by A2Z Tools" width="100%" height="920" style="border:0;width:100%" loading="lazy" allow="clipboard-write"></iframe>

A plain iframe. Works everywhere, including site builders that strip scripts. Adjust height if your content needs more room.

Works with

How it works

The golden ratio phi is (1 + sqrt 5) / 2 = 1.6180339887. Two parts a and b are in golden proportion when the whole relates to the longer part as the longer part does to the shorter: (a + b) / a = a / b = phi. So a length is split by dividing it by phi for the longer part and taking the remainder for the shorter: 960 becomes 593.31 and 366.69, about 61.8% and 38.2%. If you know the longer part, the shorter is a / phi and the whole a x phi; if you know the shorter, the longer is b x phi and the whole b x phi^2. The table multiplies the length by phi up to three steps each way, a ladder for spacing or nested rectangles. With a body text size the widget also suggests heading sizes (body x phi, x phi^2) and a line height of about 1.618. That is a popular design convention, not a rule of readability; many sites use gentler ratios such as 1.25.

Calculation method

  • phi = (1 + sqrt 5) / 2 = 1.6180339887...
  • Whole L: longer a = L / phi; shorter b = L - a = L / phi^2
  • Longer a known: b = a / phi; L = a x phi. Shorter b known: a = b x phi; L = b x phi^2
  • Golden ladder: L x phi^k for k = -3 ... +3

Worked examples

Page layout

Inputs: Whole 960 (px)

Result: Longer 593.31, shorter 366.69

960 / 1.6180339887 = 593.31; 960 - 593.31 = 366.69.

From the longer side

Inputs: Longer part 100

Result: Shorter 61.80, whole 161.80

100 / phi and 100 x phi.

Limitations

  • Works with one length at a time; it does not draw golden rectangles or spirals.
  • Type suggestions are a design convention, not accessibility guidance; check sizes against your content and readers.
  • Results are unit-free: enter and read them in whichever unit you use.

Where publishers use it

  • Web design tutorials dividing a 960px layout into content and sidebar
  • Logo and brand-identity portfolios showing construction grids
  • Woodworking and furniture blogs proportioning drawers, shelves and frames
  • Photography and painting lessons on placing horizons and subjects
  • Maths classrooms connecting phi with the Fibonacci sequence

Questions

What is the golden ratio as a number?

phi = 1.6180339887 to ten decimals, an irrational number equal to (1 + sqrt 5) / 2. Its reciprocal is 0.6180339887 - exactly phi minus 1.

How do I split 100 cm in the golden ratio?

Divide by 1.618: the longer part is 61.80 cm and the shorter 38.20 cm. Check: 61.80 / 38.20 = 1.618 and 100 / 61.80 = 1.618.

Is the golden ratio really in famous art and the Parthenon?

Claims vary widely and many are disputed or made after the fact. Use phi as one pleasing proportion among several, not as a law of beauty.

How does it relate to Fibonacci numbers?

The ratio of consecutive Fibonacci numbers approaches phi: 13/8 = 1.625, 21/13 = 1.615, 89/55 = 1.6182. Designers often use Fibonacci sizes (8, 13, 21, 34) as a practical golden ladder.

Should I use the golden ratio for font sizes?

It produces a dramatic scale: 16px body text gives 25.9px and 41.9px headings. That suits posters and landing pages; long articles usually look calmer with a smaller ratio such as 1.2 or 1.25, which the type scale calculator offers.

Sources

  1. A001622: Decimal expansion of golden ratio phi = (1 + sqrt(5))/2 - The On-Line Encyclopedia of Integer Sequences (OEIS) . Digits 1.6180339887498948482... used for the 10-decimal value. Checked 2026-10-01.

Cite or recommend this tool

If you reference this tool in an article, course or documentation, these formats are ready to copy. They are optional - nothing is added to your site unless you paste it.

A2Z Tools Golden Ratio Calculator
https://a2z.tools/embed/golden-ratio-calculator

Related widgets

More Design widgets →

  • Type Scale Calculator

    Design Generator New

    A modular type scale in px and rem from a base size and ratio, with a live preview and CSS variables.

    Get code

  • Aspect Ratio Calculator

    Design Calculator

    Simplify width x height to a ratio and resize to a new width or height without distortion.

    Get code

  • PX to REM Converter

    Design Converter

    Convert pixels to rem (and back) for any root font size, with a table of common sizes.

    Get code

  • Screen Size Calculator

    Design Calculator New

    Width, height and area of a screen from its diagonal and aspect ratio, and two screens compared.

    Get code

  • WCAG 2.x contrast ratio of two colours, AA/AAA results and the nearest passing shade.

    Get code

  • Colour Converter

    Design Converter

    Convert any colour between HEX, RGB, HSL, HSV and CMYK, with a swatch and copy buttons.

    Get code

Preview

CustomizeGet code