Golden Ratio
The mathematical ratio (~1.618:1) found in nature and used in design to create aesthetically pleasing proportions.
技術的詳細
The golden ratio (phi, approximately 1.6180339887) appears in design as the ratio of consecutive Fibonacci numbers (1, 1, 2, 3, 5, 8, 13...). In layout, it suggests dividing space at approximately 62:38. In typography, multiplying a base font size by 1.618 produces harmonious scale progressions (e.g. 16px → 26px → 42px). While its prevalence in nature is often overstated, it provides a reliable starting point for proportional relationships in grid systems and whitespace allocation.
例
```css
/* Golden ratio typography scale */
:root {
--phi: 1.618;
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-lg: calc(1rem * var(--phi)); /* 25.9px */
--text-xl: calc(1rem * var(--phi) * var(--phi)); /* 41.9px */
}
/* Golden ratio layout: 62% / 38% split */
.layout { grid-template-columns: 1.618fr 1fr; }
```
関連ツール
C
Color Palette Generator
T
Type Scale Generator
S
Spacing Scale Generator
R
Responsive Breakpoints
A
Aspect Ratio Calculator
C
Color Shade Generator
F
Font Pairing Suggestions
C
Contrast Checker
D
Design Tokens Generator
S
Social Media Size Guide
G
Golden Ratio Calculator
A
App Icon Size Guide
S
Shadow System Generator
M
Multi-Stop Gradient Generator
C
CSS Pattern Generator