What is a Golden Ratio Calculator?
The golden ratio is a mathematical proportion equal to 1.6180339887, often written as φ (phi). Also known as the divine proportion or golden section, it describes a relationship between two quantities where the ratio of the larger to the smaller equals the ratio of their sum to the larger. When two quantities share this ratio, the relationship is considered visually harmonious. Architects, painters and designers have used it for centuries to create balanced compositions. The proportions of the golden rectangle and the spacing of typographic scales both reflect this principle.
A Golden Ratio Calculator takes a base value and returns two proportional outputs. Multiply the base by 1.618 to get the larger value (A). Divide the base by 1.618 to get the smaller value (C). The original base sits between them as (B). The calculator also generates a Fibonacci style sequence from your chosen base up to your chosen length. No data is sent to any server.
What is the Fibonacci sequence?
The Fibonacci sequence is a series of numbers where each value is the sum of the two before it. Starting from 1 the series grows by adding the previous two values. The sequence is listed in full in the Fibonacci table below. As the sequence grows, the ratio between each consecutive pair of numbers approaches 1.618. That convergence is the golden ratio. This relationship makes Fibonacci numbers a practical shortcut for applying golden ratio proportions in design systems. Many typographic scales and modular scale systems are built on Fibonacci values. Design tokens for web components often use Fibonacci-derived values because the spacing grows at a visually consistent rate.
How to use the calculator
Enter your base value and sequence length. Results appear instantly.
- Enter a base value in pixels.
Set your reference size such as 16 or 100 to build proportional outputs from that starting point. - Choose a sequence length.
Set how many sequence items you need from 2 to 20. - Read the golden ratio outputs.
The calculator returns A (base × 1.618), B (the base itself) and C (base × 0.618). - Copy or download the results.
Click Copy Sequence for quick reuse or Download .txt to save the full report for documentation.
Golden ratio reference table
The table below shows golden ratio outputs for common design base sizes. Enter any base value in the calculator above for values not listed here.
| Base value (B) | A = B × 1.618 | C = B × 0.618 | Common design context |
|---|---|---|---|
| 8 px | 12.94 px | 4.94 px | Micro spacing and icon border |
| 10 px | 16.18 px | 6.18 px | Small spacing token |
| 12 px | 19.42 px | 7.42 px | Caption or label text |
| 16 px | 25.89 px | 9.89 px | Body text base size |
| 20 px | 32.36 px | 12.36 px | Large body or sub-heading |
| 24 px | 38.83 px | 14.83 px | H4 heading size |
| 32 px | 51.78 px | 19.78 px | H3 section heading |
| 40 px | 64.72 px | 24.72 px | H2 section heading |
| 48 px | 77.67 px | 29.67 px | H1 page heading |
| 64 px | 103.55 px | 39.55 px | Display heading or hero text |
| 100 px | 161.80 px | 61.80 px | Component width or card height |
| 120 px | 194.16 px | 74.16 px | Sidebar width or thumbnail |
| 160 px | 258.89 px | 98.89 px | Section padding or column gap |
Fibonacci sequence values and design use
The first 14 Fibonacci values and their typical application in UI and layout design.
| Position | Fibonacci value | Common design use |
|---|---|---|
| 1 | 1 | Border width and hairline strokes |
| 2 | 1 | Fine line and icon grid baseline |
| 3 | 2 | Tight spacing token |
| 4 | 3 | Small padding and gap |
| 5 | 5 | Compact spacing token |
| 6 | 8 | H5 or small label text |
| 7 | 13 | H4 or secondary heading |
| 8 | 21 | H3 or card heading |
| 9 | 34 | H2 or section heading |
| 10 | 55 | H1 or hero heading |
| 11 | 89 | Section padding or component height |
| 12 | 144 | Container gutter or sidebar width |
| 13 | 233 | Section height or modal width |
| 14 | 377 | Column width or card layout |
Where to use golden ratio and Fibonacci values
These proportion-based values are useful across UI design and development workflows.
UI size hierarchy
UI designers and web designers use proportional scaling to create visual weight relationships between text and component sizes. Plan your typographic scale and component dimensions using consistent proportional steps. A 16 px body text base produces a 25.89 px H3 and a 9.89 px caption. Both values are mathematically derived from the same base. Use the aspect ratio calculator alongside this tool when you also need to confirm the width and height proportions of your components.
Spacing and layout systems
Use ratio values to define design tokens for margins, padding and section rhythm in your grid system. Fibonacci values such as 8, 13 and 21 create a spacing scale that grows at a natural rate without arbitrary jumps. Graphic designers and frontend developers use these values directly as CSS custom properties for consistent spacing across components and design systems.
Wireframe and design exploration
Test balanced proportional relationships in early design concepts before committing to a design system. Golden ratio proportions reduce visual conflict between elements without manual trial and error.
Elementor and WordPress design blocks
Apply calculated values in heading font sizes, container widths and spacing controls for cleaner visual composition across your Elementor layouts.
Creative direction and brand visuals
Use proportional numbers to maintain visual harmony across assets such as logos, thumbnails and banners. Consistent proportional relationships read as intentional rather than arbitrary to viewers.
Golden ratio vs rule of thirds
Both the golden ratio and the rule of thirds are compositional tools for creating visual balance. The rule of thirds divides a frame into a 3 × 3 grid and places key elements at the intersections. The golden ratio uses the φ = 1.618 proportion to determine where to place dividing lines, which produces a slightly different set of intersection points that many designers find more precise.
The rule of thirds is faster to apply by eye in photography and video composition. The golden ratio is more useful in typographic scales, UI spacing systems and component sizing where exact proportional values matter. This proportion calculator gives you those exact values. Enter a base size and read the proportional outputs directly.
Calculator vs manual golden ratio math
Calculating golden ratio values manually requires multiplying and dividing by 1.618 for every size. Generating a Fibonacci sequence manually means computing each value in turn. Both are slow across a full design system with many size steps.
This golden ratio generator and Fibonacci calculator returns the full ratio outputs and a sequence of your chosen length from a single input. Copy or download the result for design tokens, documentation or handoff.
Use golden ratio values with Spexo Addons for Elementor
Proportional values from the calculator feed directly into typography and spacing decisions when you build with Elementor and Spexo Addons. Browse the Elementor templates for WordPress to find a layout built with structured visual proportions you can adapt with your own golden ratio values.
Typography and heading scale
Use golden ratio outputs when setting heading font sizes in Elementor. A base size of 16 px produces a natural H3 at 25.89 px and a display size at 41.89 px. Both steps follow the same proportional rule.
Spacing and container widths
Apply Fibonacci sequence values as spacing tokens in your Elementor container padding and gap settings. Values like 21, 34 and 55 create a spacing rhythm that scales predictably across breakpoints.
Component proportion planning
Use ratio outputs to set the height and width relationship of cards, modals and feature blocks before building them in Elementor. Proportionally planned components require fewer revisions at the layout stage.
FAQs about Fibonacci & Golden Ratio Calculator
.txt report that includes base value, ratio outputs, and full sequence.
