Font | Golden ratio | Golden Pi | Pi | Euler | Golden Euler |
---|---|---|---|---|---|
Arial | First lineSecond lineText |
First lineSecond lineText |
First lineSecond lineText |
First lineSecond lineText |
First lineSecond lineText |
Verdana | First lineSecond lineText |
First lineSecond lineText |
First lineSecond lineText |
First lineSecond lineText |
First lineSecond lineText |
Helvetica | First lineSecond lineText |
First lineSecond lineText |
First lineSecond lineText |
First lineSecond lineText |
First lineSecond lineText |
Font | Golden ratio | Golden Pi | Pi | Euler | Golden Euler |
---|---|---|---|---|---|
Georgia | First lineSecond lineText |
First lineSecond lineText |
First lineSecond lineText |
First lineSecond lineText |
First lineSecond lineText |
Times New Roman | First lineSecond lineText |
First lineSecond lineText |
First lineSecond lineText |
First lineSecond lineText |
First lineSecond lineText |
Serif | First lineSecond lineText |
First lineSecond lineText |
First lineSecond lineText |
First lineSecond lineText |
First lineSecond lineText |
Golden Ratio | Golden Pi | Pi | Euler | Golden Euler | |
---|---|---|---|---|---|
Text |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus eu magna id arcu luctus facilisis. Vestibulum tristique turpis ut nibh. Donec malesuada arcu sit amet diam. Etiam a sapien et risus hendrerit tristique. Donec nunc. Donec a lectus id nisl blandit vehicula. In hac habitasse platea dictumst. Sed a orci. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus eu magna id arcu luctus facilisis. Vestibulum tristique turpis ut nibh. Donec malesuada arcu sit amet diam. Etiam a sapien et risus hendrerit tristique. Donec nunc. Donec a lectus id nisl blandit vehicula. In hac habitasse platea dictumst. Sed a orci. |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus eu magna id arcu luctus facilisis. Vestibulum tristique turpis ut nibh. Donec malesuada arcu sit amet diam. Etiam a sapien et risus hendrerit tristique. Donec nunc. Donec a lectus id nisl blandit vehicula. In hac habitasse platea dictumst. Sed a orci. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus eu magna id arcu luctus facilisis. Vestibulum tristique turpis ut nibh. Donec malesuada arcu sit amet diam. Etiam a sapien et risus hendrerit tristique. Donec nunc. Donec a lectus id nisl blandit vehicula. In hac habitasse platea dictumst. Sed a orci. |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus eu magna id arcu luctus facilisis. Vestibulum tristique turpis ut nibh. Donec malesuada arcu sit amet diam. Etiam a sapien et risus hendrerit tristique. Donec nunc. Donec a lectus id nisl blandit vehicula. In hac habitasse platea dictumst. Sed a orci. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus eu magna id arcu luctus facilisis. Vestibulum tristique turpis ut nibh. Donec malesuada arcu sit amet diam. Etiam a sapien et risus hendrerit tristique. Donec nunc. Donec a lectus id nisl blandit vehicula. In hac habitasse platea dictumst. Sed a orci. |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus eu magna id arcu luctus facilisis. Vestibulum tristique turpis ut nibh. Donec malesuada arcu sit amet diam. Etiam a sapien et risus hendrerit tristique. Donec nunc. Donec a lectus id nisl blandit vehicula. In hac habitasse platea dictumst. Sed a orci. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus eu magna id arcu luctus facilisis. Vestibulum tristique turpis ut nibh. Donec malesuada arcu sit amet diam. Etiam a sapien et risus hendrerit tristique. Donec nunc. Donec a lectus id nisl blandit vehicula. In hac habitasse platea dictumst. Sed a orci. |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus eu magna id arcu luctus facilisis. Vestibulum tristique turpis ut nibh. Donec malesuada arcu sit amet diam. Etiam a sapien et risus hendrerit tristique. Donec nunc. Donec a lectus id nisl blandit vehicula. In hac habitasse platea dictumst. Sed a orci. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus eu magna id arcu luctus facilisis. Vestibulum tristique turpis ut nibh. Donec malesuada arcu sit amet diam. Etiam a sapien et risus hendrerit tristique. Donec nunc. Donec a lectus id nisl blandit vehicula. In hac habitasse platea dictumst. Sed a orci. |
All the "golden ratio" calculations are taken from this article: Golden ratio in CSS http://cssglobe.com/post/3117/golden-ratio-in-modern-css I decided to take it to the next level and integrate PI into the equation page width: 960px main: 960px / golden ratio (1.62) = 593px sidebar: 960 - 593 = 367px *** What about PI, too? PI Golden Ratio ------- X ------------------ 960 495.03 So we would have: main: 495px sidebar: 465px OR sidebar: 960 / PI = 305.577490697 ~ 305px main: 960 - 305 = 655px *** And Euler? E = 2.718281828 E Golden Ratio ------ X ---------------- 960 572.18 So we would have: main: 572px sidebar: 388px OR sidebar: 960 / E = 353.164263584 ~ 353px main: 960 - 353px = 607px