• Possibly related posts

  No related posts.

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-size in ems (2 in this example)

then:

x = a/(b*c).

But, like I said, maybe I’m missing something.

• Possibly related posts

  No related posts.

This post just shows the grid, I’ll get onto typography later.

I set up this grid, which divides into 2, 3, 4 and 6 columns and horizontal modules (based on the classic design by Karl Gerstner (hence refreshing myself with Ellen Lupton yesterday, in case you were following me on Twitter!):

then transferred my sketches to it:

and transferred those to digital:

and without the grid:

and voila (it’s changed a bit since though): see the html draft front page here.

Each block of text aligns to the grid at some point (If the blocks were long enough you’d be able to see where the lines line up). But more on this later. For now, you can see the draft front page here.

From grid to finished design:

• Possibly related posts

  1. Website re-design: again

I seem to have cracked baseline alignment and everything seems to be re-sizing pretty well. I can’t imagine it’ll work in IE (without a separate stylesheet) but it works fine in both the latest Mac versions of FireFox and Webkit (Safari nightlies).

It’s a simple design, but it might get more sophisticated if I can be bothered. It’s all done in CSS so very easy to add prettiness. It’ll probably change somewhat before it goes live anyway (for instance the image is just there for experimentation purposes and may well disappear).

All I have to do now is shoe-horn it into WordPress!

If you’re really keen you can see the draft front page here (use Firefox or Safari to guarantee seeing it properly). And If you’re lucky I might even put up my initial sketches at some point: bet you can’t wait.

• Possibly related posts

  No related posts.