Typography/Layout help please

matsaukeo's picture

Hi All,

I'm going to VERY brave here and open up a small part of a website that I'm currently designing. I'd love to know people's thoughts on the typography - this isn't my strongest area and is something I'm really keen to improve on. I've included a few notes on my thought process when laying this out. Please tell me if you think I might be doing something wrong! Also let me know if any of this doesn’t make sense.

A few notes - This is for a website and uses fonts on the google web fonts service displaying on a vista machine - therefore some things might not look as crisp as they would in a perfect world.

(You may need to scroll to the right to see these full and I've also uploaded them as files and there are a few more notes below them)



I wanted the heading to have twice as much space where possible above as they do below so that are in close proximity to their paragraphs.

I've set the base font to a simple arial at 13/18. I've tried to stick to the classical typographical scale but 12 was too small and 14 too large in my opinion.

The "leading text" (first bit in italic) is open sans condensed italic at 24/36. I've added a 4px margin at the top which puts it on the baseline. I've made this up to 18px by adding a 14px margin at the bottom.

The headings are all open sans condensed.

Secondary headline is 36/36 with 9px margin top and 9px margin below

Third headline is 24/36. 36 seems a bit too much but the likely hood of these going over 2 lines is very low. I also thought about shifting this a few pixels so that it falls on the either the baseline or the "half baseline" but decided against it.

The quote on the right does a similar thing to "leading text" in that it shifts as its so close the baseline.

riccard0's picture

Personally, I find a bit distracting that there is a wider space between two paragraphs than between heading and paragraph.

matsaukeo's picture

Thanks for the reply riccard0. I really wanted the headings to be in close proximity to the text that was associated to it so that a quick scan made it obvious. Perhaps its obvious anyway?

Does that make sense?

Does anyone else feel the same? would be great to get other opinions on this.


Syndicate content Syndicate content