Math & Designn

Templates

Golden Ratio
Golden Pi(e)
Pi Ratio
Euler
Golden Euler

Typography

Sans Serif Fonts

Font Golden ratio Golden Pi Pi Euler Golden Euler
Arial

First line

Second line

Text

First line

Second line

Text

First line

Second line

Text

First line

Second line

Text

First line

Second line

Text

Verdana

First line

Second line

Text

First line

Second line

Text

First line

Second line

Text

First line

Second line

Text

First line

Second line

Text

Helvetica

First line

Second line

Text

First line

Second line

Text

First line

Second line

Text

First line

Second line

Text

First line

Second line

Text

Serif Fonts

Font Golden ratio Golden Pi Pi Euler Golden Euler
Georgia

First line

Second line

Text

First line

Second line

Text

First line

Second line

Text

First line

Second line

Text

First line

Second line

Text
Times New Roman

First line

Second line

Text

First line

Second line

Text

First line

Second line

Text

First line

Second line

Text

First line

Second line

Text
Serif

First line

Second line

Text

First line

Second line

Text

First line

Second line

Text

First line

Second line

Text

First line

Second line

Text

Paragraphs

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