Notes on column ratios

Fai — Thu, 03 Jul 2008 14:11:23 +0000

I needed an idea of the pixels used for different column ratios, so I’ve taken the liberty of working out the possible layouts needed. I’ve limited these to 4 columns, and I’ve also listed some extra rounding to the nearest ten/five for neatness.

The pixel ratios are based on a width of 900 pixels.

Full ratio list

# Columns	Block ratio	Pixel ratio	Rounded	Rounding
2 col	1:1	450:450
3 col	2:1	600:300
3 col	1:1:1	300:300:300
4 col	3:1	675:225
4 col	2:1:1	450:225:225
5 col	4:1	720:180
	3:2	540:360
	3:1:1	540:180:180
	2:2:1	360:180:180
6 col	5:1	750:150
	4:1:1	600:150:150
	3:2:1	450:300:150
	2:2:1:1	300:300:150:150
7 col	6:1	771:129	770:130	/ tens ±1
	5:2	643:257	640:260	/ tens ±3
	5:1:1	642:129:129	640:130:130	/ tens ±1-2
	4:3	514:386	510:390	/ tens ±4-6
	4:2:1	514:257:129	510:260:130	/ tens ±1-4
	4:1:1:1	513:129:129:129	510:130:130:130	/ tens ±1-3
	3:3:1	386:386:128	385:385:130	/ fives ±1-2
	3:2:2	386:257:257	390:255:255	/ fives ±2-4
	3:2:1:1	386:257:129:129	385:255:130:130	/ fives ±1-2
8 col	7:1	788:112	790:110	/ tens ±2
	6:1:1	676:112:112	680:110:110	/ tens ±2-4
	5:3	562:338	560:340	/ tens ±2
	5:2:1	563:225:112	560:230:110	/ tens, or 565:225:110 / fives
	4:3:1	450:338:112	450:340:110	/ tens ±2
	4:2:1:1	450:226:112:112	450:230:110:110	/ tens ±2-4
	3:3:2	338:338:224	340:340:220	/ tens ±2-4
	3:2:2:1	338:225:225:112	340:225:225:110	/ fives ±2
9 col	8:1	800:100
	7:2	700:200
	7:1:1	700:100:100
	6:2:1	600:200:100
	5:4	500:400
	5:3:1	500:300:100
	5:2:2	500:200:200
	5:2:1:1	500:200:100:100
	4:4:1	400:400:100
	4:3:2	400:300:200
	4:3:1:1	400:300:100:100
	4:2:2:1	400:200:200:100
	3:3:2:1	300:300:200:100
	3:2:2:2	300:200:200:200

List of possible two-column layout ratios

Ordered by #column structure

# Columns	Block Ratio	Pixel Ratio	Roundings
3	2:1	600:300
4	3:1	675:225
5	4:1	720:180
5	3:2	540:360
6	5:1	750:150
7	6:1	771:129	(770:130 / tens ±1)
7	5:2	643:257	(640:260 / tens ±3)
7	4:3	514:386	(510:390 / tens ±4-6)
8	7:1	788:112	(790:110 / tens ±2)
8	5:3	562:338	(560:340 / tens ±2)
9	8:1	800:100
9	7:2	700:200
9	5:4	500:400

Two columns, in order of left column size, with :1 ratios calculated

The normalised value at :1 will give a better idea of how each row lies relative to each other – and as you can see, it is perfectly in order, as expected when ordering by the first column width.

# columns	Block ratio	Pixel ratio	Rounding
9	8:1	800:100
8	7:1	788:112	(790:110 / tens ±2)
7	6:1	771:129	(770:130 / tens ±1)
6	5:1	750:150
5	4:1	720:180
9	7:2 (3.5:1)	700:200
4	3:1	675:225
7	5:2 (2.5:1)	643:257	(640:260 / tens ±3)
3	2:1	600:300
8	5:3 (1.67:1)	562:338	(560:340 / tens ±2)
5	3:2 (1.5:1)	540:360
7	4:3 (1.33:1)	514:386	(510:390 / tens ±4-6)
9	5:4 (1.25:1)	500:400

It’s worth noting that the golden ratio is approximately 1.618:1. This gives it a pixel ratio (using a width of 900) of 556:344. Rounded to the nearest tens, this is 560:340. The 8-column 5:3 ratio is the closest to the golden ratio on the above list.

crazed » columns

Notes on column ratios

Full ratio list

List of possible two-column layout ratios

Two columns, in order of left column size, with :1 ratios calculated