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

Font

Golden ratio

Golden 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

Font

Golden ratio

Golden 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.

Golden Ratio

Golden 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.

	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