Layout¶
The CSS layout is based on a 16px typeface on a 20px line, with all measurements specified in ems. Below is a table that can be used to convert between units, pixels and ems. (All measurements should be multiples of half-units).
Without Border Width (in em) | |||||
---|---|---|---|---|---|
Units | px | em | Thin (1px) | Medium (3px) | Thick (6px) |
0.5 | 10 | 0.625 | 0.562 | 0.438 | 0.250 |
1.0 | 20 | 1.250 | 1.188 | 1.062 | 0.875 |
1.5 | 30 | 1.875 | 1.812 | 1.688 | 1.500 |
2.0 | 40 | 2.500 | 2.438 | 2.312 | 2.125 |
2.5 | 50 | 3.125 | 3.062 | 2.938 | 2.750 |
3.0 | 60 | 3.750 | 3.688 | 3.562 | 3.375 |
3.5 | 70 | 4.375 | 4.312 | 4.188 | 4.000 |
4.0 | 80 | 5.000 | 4.938 | 4.812 | 4.625 |
4.5 | 90 | 5.625 | 5.562 | 5.438 | 5.250 |
5.0 | 100 | 6.250 | 6.188 | 6.062 | 5.875 |
5.5 | 110 | 6.875 | 6.812 | 6.688 | 6.500 |
6.0 | 120 | 7.500 | 7.438 | 7.312 | 7.125 |
6.5 | 130 | 8.125 | 8.062 | 7.938 | 7.750 |
7.0 | 140 | 8.750 | 8.688 | 8.562 | 8.375 |
7.5 | 150 | 9.375 | 9.312 | 9.188 | 9.000 |
8.0 | 160 | 10.000 | 9.938 | 9.812 | 9.625 |
8.5 | 170 | 10.625 | 10.562 | 10.438 | 10.250 |
9.0 | 180 | 11.250 | 11.188 | 11.062 | 10.875 |
9.5 | 190 | 11.875 | 11.812 | 11.688 | 11.500 |
10.0 | 200 | 12.500 | 12.438 | 12.312 | 12.125 |
For values above 10u use the following formula:
u × 20.0
em = ────────
16.0
The only complication are borders. They can throw out the rhythm, so must be taken off the margin or padding. The last three columns in the above table have the border widths taken out. For values above 6u take away one of the following three values:
Size | px | em |
---|---|---|
Thin | 1 | 0.063 |
Medium | 3 | 0.188 |
Thick | 6 | 0.375 |