16th Apr 2007, by Andrew Barr

Salgado Investigations Website Goes Live

Hi all,

I have temporarily disabled Andy's keyboard so that I can show you our latest website as it's one I'm really pleased with.

Here's the url: Commercial and Private Investigations Services UK (every little SEO helps eh? :))

I think this one really stands out from all the other private investigators companies, and we've added a bit of yeti uniqueness with the illustration on the masthead, bold design and attention to detail (more on that shortly!).

After working with Jorge (top bod) at Salgado Investigations on his branding I got to know his likes and dislikes so that I felt really confident when it came to doing the website that I could make something that would stand out against the crowd and hopefully win him some new clients.

I also wanted to make it stand out typographically, not so that the average visitor would notice, but subtly through the use of correct punctuation, whitespacing and grids so that it would be easy on the eye to browse.

Now, I don't mind saying, I'm pretty rubbish at maths. Plenty of people that know me will vouch for that, it just doesn't work for me. However I wanted to make sure that whether you were looking at the main content or the side content, they all went along the same line, no matter what font size. Geeky bit coming up.

So I set my base font at 12px and my largest font at 18px, leaving the hight of each line at 18px. First of all I converted all the font sizes I'd need into ems so that the text could be resized by various browsers. Here's that part:

10px - 0.8333
12px - 1
14px - 1.16667
16px - 1.333
18px - 1.5

So, in order to set the line height to the rhythm of 18px you have to divide the font size by 18, which works out as the following:

10px - 1.8
12px - 1.5
14px - 1.2857143
16px - 1.125
18px - 1

Looks straightforward, yes? (trust me that took a while, and a lot of huffing, puffing and biscuit eating could be heard from my side of the room).

The only thing left would be to set the top and bottom margin so that it all fits in. I want the margins to be twice the line height, but I want the top margin to be 1.5 times the line height and the bottom margin to be 0.5 times the line height.

So to work out the spacing needed for the top I do 1.5 times 18 divided by the font size, and for the bottom I do 0.5 X 18 % font size.

This works out like this:

10px - 2.7
12px - 2.25
14px - 1.929
16px - 1.6875
18px - 1.5

10px - 0.9
12px - 0.75
14px - 0.643
16px - 0.5625
18px - 0.5

Feel free to steal all this and use it in your own stylesheets, I know I'll be referencing it for all my future websites.

Whilst we didn't write the copy for the site, I went through the text and added the correct punctuation (let me know if I've missed anything or got something wrong), these things included the proper use of an em dash rather than the often misused hyphen and inserting the correct curly quotes rather than the ones produced by default in most editors.

I also placed bullet points in the gutter, where I never realised they should be and indented every paragraph after the first.

This was changed in the end as many people commented that whilst it may be correct punctuation, it just didn't work on the website. I guess there's some things you have to let go when working to the web and we're all still finding our way with best practices.

Anyway, that's the website, I've got three more coming up shortly which I hope to show you soon. Comments welcome, especially if there are things I have missed, let me know!

Roger that. Over and out.

Get the Know How

Get the latest thought leading industry comment and information from our “no sales” newsletter.

Want to work with us?