Golden Ratio Calculator (1.618) and Fibonacci Type Scale

Golden ratio φ: 61.8 / 38.2% sections and a typographic scale

The golden ratio is φ = (1 + √5) ÷ 2 ≈ 1.618. To split a length, the major section is total ÷ φ (61.8%) and the minor one the remainder (38.2%): 1,000 px give 618.03 px and 381.97 px. The tool also derives a font-size scale from a 16 px base.

Formulas

• From the total T: major section A = T ÷ φ, minor section B = T − A.
• From the major section A: T = A × φ and B = T − A.
• From the minor section B: A = B × φ and T = A + B.
• φ = 1.618033988749895; A ÷ T ≈ 61.8% and B ÷ T ≈ 38.2%, whatever unit you pick (px, rem, mm or %), which is only a label.

Typographic scale

Each level multiplies the base size by a power of φ, rounded to the pixel: φ^2.5 for the display heading, φ² for H1, φ^1.5 for H2, φ for H3, φ^0.5 for the lead, 1 for body text and 1 ÷ φ for captions. The rem equivalent is the size divided by the base.

Worked example

A 1,000 px width: main content of 618.03 px and a sidebar of 381.97 px. With a 16 px base, the scale gives 53, 42, 33, 26, 20, 16 and 10 px. Fibonacci numbers (…, 34, 55, 89, 144…) converge on φ: 144 ÷ 89 = 1.6180.

Limits

• The golden ratio is one aesthetic proportion among others, not a standard: a 1.618 scale grows fast, and a 42 px H1 can be too large on mobile.
• Sizes rounded to the pixel drift slightly from the exact ratio.
• The 10 px caption is below the 12 px often recommended for legibility; raise the base if needed.

Frequently Asked Questions

How do I split a width using the golden ratio?

Divide the width by 1.618 to get the larger part, then subtract it from the total for the smaller one. For 1,200 px: 741.6 px and 458.4 px, i.e. 61.8% and 38.2%.

What is the exact value of the golden ratio?

φ = (1 + √5) ÷ 2 = 1.6180339887… It is the only positive number whose reciprocal equals itself minus 1: 1 ÷ φ = 0.618.

How is the Fibonacci sequence related to the golden ratio?

The ratio between two consecutive terms of the sequence (1, 1, 2, 3, 5, 8, 13…) tends towards φ. By 89 and 144 it is 1.6180, correct to the fourth decimal place.

What heading size does a φ-based scale give?

With 16 px body text, an H3 is 16 × 1.618 ≈ 26 px and an H1 16 × 1.618² ≈ 42 px. With 18 px body text, the H1 reaches 47 px.

Is this tool really free?

Yes, all tools on Kristools are 100% free and accessible without registration.

Is my data protected?

Yes. All processing is performed directly and securely inside your browser. No personal data is sent to our servers.