Archive: July 7th, 2007

I’ve been making some tweaks to the CSS for the default skin here at adactio. If you only ever read via RSS then you won’t have noticed but I’ve been adjusting the vertical rhythm.

I also wanted to get some horizontal alignment: I wanted to make sure that the bottom of the first heading in the main column lined up with the baseline of the first heading in the sidebar.

My basic unit is 20 pixels: a font size of 12 pixels with a line height of 1.6667. Whatever sizes I made the headings, I wanted to be sure that they were multiples of this basic unit.

body {
 font: 12px/1.6666 Helvetica,Arial,Verdana,sans-serif;
}
body * {
 font-size: 1em;
}
* html body {
 font-size: 76%;
}

Because Internet Explorer refuses to resize text specified in pixels, I’m using the * html hack to give it a percentage value. Using any kind of hack—or filter—makes me feel slightly icky. Once I’ve established the base font size using pixels, percentages, or any other unit, I can use ems to scale up and down from here on out.

The level two heading in the main content takes up 40 pixels in total (twice the basic unit). The font size is 24 pixels, the top padding is 8 pixels and the bottom padding is also 8 pixels.

h2 {
 line-height: 1;
 font-size: 2em;
 padding-top: 0.3333em;
 padding-bottom: 0.3333em;
}

So while the overall size is 40 pixels, the descent is at 32 pixels: 40 minus 8 (the bottom padding).

I wish I could accurately calculate the baseline but as far as I can tell, font-size is calculated from the ascender height to the descender height. In the absence of any reliable way to pinpoint the baseline, I’m going to have to work with where the descent begins instead.

Level three headings also take up 40 pixels in total but the space is apportioned differently. The font size is 18 pixels, the bottom padding is still 8 pixels but the top padding is 14 pixels.

h3 {
 font-size: 1.5em;
 padding-top: 0.7778em;
 padding-bottom: 0.4444em;
}

The descent is still at 32 pixels: 18 plus 14.

The same pattern follows through for level four headings. The font size is 16 pixels, the top padding is 16 pixels and the bottom padding is 8 pixels. So the overall size is still 40 pixels (twice the base unit) and the descent remains at 32 pixels (16 plus 16).

h4 {
 font-size: 1.3333em;
 padding-top: 1em;
 padding-bottom: 0.5em;
}

So far, so good. With a little bit of addition, it isn’t too hard to ensure that everything slots nicely into the rhythm established by the base unit.

It gets a little trickier with the content in the sidebar. There, the basic unit has been scaled down to 15 pixels: a font size of 10 pixels with a line height of 1.5.

.box {
 font-size: 0.8333em;
 line-height: 1.5;
}

I wanted to make the bottom of the level three heading in the sidebar line up with the baseline of the level two heading in the main content, but I still wanted everything in the sidebar to follow its own vertical rhythm.

The font size of a level three heading in the sidebar is now scaled down to 15 pixels (18 pixels multiplied by 0.8333). I’ve changed the top padding to be 17 pixels and the bottom padding to 8 pixels.

.box h3 { padding-top: 1.1333em; padding-bottom: 0.5333em; }

This gives me the descent at 32 pixels that I wanted. Unfortunately, the overall size of 40 pixels isn’t a multiple of the base unit of the sidebar (15 pixels).

Further down the page, there are so many factors influencing the positioning of all the elements that it’s almost impossible to guarantee any kind of horizontal alignment between both columns. Still, I was happy to get things lining up at least at the beginning of the page.

You can peruse the style sheet if you like. You’ll see that I’ve also made some changes to the fonts I’m using. Gone are the headlines set in Verdana with body copy in Trebuchet MS. Instead, I’m using the oh-so-hip Lucida Grande for the body with some negative-spaced Helvetica for the headlines… the same kind of headline style I’ve been using in my presentation slides.

I really ought to tweak the vertical rhythms on all the other skins too but I’m not sure I can face all the maths just yet.

In the meantime I’ll be doing my homework by re-reading Richard’s classic 24 Ways article and Mark’s trials with incremental leading.

When I arrived at the Clearleft office yesterday morning, I found Andy and Richard in mid argument.

“Indigo? No! It’s India”, said Andy.

“It says Indigo here,” Rich responded.

“Well I’m using the CAA alphabet.”

“Are you talking about phonetic alphabets” I interjected, “‘cause there’s more than one, y’know.”

I was then challenged to see how far I could get. “Alpha, Bravo, Charlie, Delta…” I did alright for a while but my brain started giving up later in the alphabet.

But it got me thinking. I should at least know how to spell certain things phonetically. For those phone calls when it really matters, it would be nice to be able to rattle off my postcode as Bravo November Three, One Delta Hotel. And really, everyone should know how to phonetically spell out their own name, right?

The office conversation turned to other matters—like which parts of Brighton were the most dangerous, with Sophie informing us that Waterloo Street (the street right down from mine) leads in the category of murder.

Cut to this morning. After a nice long lie-in, I sauntered into the living room, still pyjamad and robed, to the sound of some shouting from outside.

“Sounds like there’s another random crazy person shouting out there” said Jessica.

I looked outside and saw that the shouting was coming from a scarily stocky looking guy in the garden of the house directly across from us. Just a week ago, that house was the centre of a huge police raid involving detectives and officers in what looked like riot gear. I’m assuming that whatever they arrested him for didn’t stick.

Then things got scary. The guy came out onto the street. He had something in his hand. That something turned out to be a knife. He started shouting at strangers walking along the street and waving the knife about.

I ran to the phone and dialled 999. I could see some other people on the street doing the same thing with their mobiles. At least I was safe on the balcony—the people at ground level needed to take care of their own safety.

I started giving a blow-by-blow account over the phone of what I could see. I made sure to mention that this guy was almost certainly previously known to detectives as part of an ongoing investigation.

He started chasing people… down Waterloo Street. It was beginning to look like the street would be holding onto to its reputation for a while.

A police car arrived, screeching around the corner. The knife-wielder stopped chasing the civilians and started running towards the police car. They met in the middle of the street. He pounced on top of the car and started hammering on the roof.

I was doing my best to relay all of this down the line but this was all happening about 400 feet away from me at this point.

Another police car arrived. The officers got out. I couldn’t see clearly what was going on but I’m guessing they were trying to get him to put down the knife.

He started running back up the street. The four police officers followed. He turned. I saw him lash out with the knife. One of the police officers jumped back. I couldn’t tell if the knife had connected.

I saw truncheons in the hands of the police officers. It was clear at this point that he wasn’t about to give up the knife willingly. With a few co-ordinated blows, he was down. I’m generally not a big fan of resolving situations with violence but in this case, I felt relieved.

At the other end of the phone line, the man taking my call was thanking me for my help.

“Can I just get your name?” he asked.

“Sure. It’s Jeremy Keith”, I said.

“Jeremy… ?”

“Keith”, I said, and I started to frantically try to remember how that would be spelt in the phonetic alphabet. My mind was a blank. Must have been all the adrenaline.

“K.E.I.T.H.” I said, lamely.

Of course as soon as I put the phone down, I remembered. “Kilo!… Kilo Echo Indigo Tango Hotel. Damn it!”

As I write this, Waterloo Street has been cordoned off. The “suspect” is in custody. I’m still in my pyjamas. The first thing I did when I put the phone down was to Twitter. Then I Flickred. Now I’m blogging.

Yeah, I reckon I’ve got my priorities about right.