Redesign: typography
Right, I’m struggling a bit with this. My redesign is coming on: I’ve done the grid and the CSS seems to be working ok (in FireFox and Webkit at any rate). But I’m having a little trouble getting the text to align to the grid. I’ve tried working it out for myself because I was finding other people’s explanations confusing (the fault being my brain, not their explanations): I thought I’d cracked it but it seems I’m not quite there yet.
I’ve set body {font-size;) in absolute units and then used ems for all other measurements, which works well.
The difficulty is in getting text to align to a baseline. If I want to set an element to a different font size and then set its line-height, the line-height is calculated on the newly computed font size, and not on the size set in the body tag (I may be missing something important here though!).
For example, suppose we had these styles:
- body {
- font-size: 10pt;
- }
- li {
- line-height: 3em;
- }
- p {
- font-size: 2em;
- line-height: 3em;
- }
The browser would render the li as 30 points high (3 x 10pt). But it would render the p as 60 points high because it is using the newly calculated font-size of 20pt (ie 2 x 10pt), and therefore line-height = 60pt (ie 3 x 20pt).
This makes life interesting if we want to set text to a baseline. What I’ve done so far is to presume a point size per em (10pt, in the example above) and calculate the measurements from there.
For example, for p to be 30pt high:
- p {
- font-size: 2em;
- line-height: 1.5em;
- }
ie 30pt / (10pt x 2) = 1.5.
In other words, if:
- x = em measurement for desired
line-height - a = desired
line-height(30pt in this example) - b = default
font-size(10pt in this example) - c = current
font-sizein ems (2 in this example)
then:
x = a/(b*c).
But, like I said, maybe I’m missing something.
Export contact to vCard format
Email me
Audioboo
Delicious
Flickr
Google
Last.FM
LinkedIn
Nurphy
Tumblr
Twitter
