I’ve got a working version of a little project I’ve been working on. Thanks to many of you, your contributions have really spring-boarded me into designing this.
I feel stuck at the moment. There are a few things going on that I don’t like.
1) the left grid for the numbers is not lining up to the bottom of each header. Mainly due to the fact that each font header is not really the same size. Even though they are all specified as an h1 size.
The reason each typeface isn’t lining up correctly is because they all share different characteristics. I noticed you set line-height:120px; on the class .numbers — You would have to set different line-heights or margins on each number, but giving the numbers properties of their own. So just chain the classes along like <span class="n1">01.</span>, <span class="n2">02.</span> and so on but apply different margins, line-height, whatever you need to align each number correctly.
This is just the way custom fonts work. Not all, if any, are made to the same baseline.
@chrisburton – Sorry, was meant to use span. It’s 1AM and I’m working between projects. I have no idea what I’m writing as a type. Considering he’s already using span, I don’t get myself how div landed in my brain… Total misfortune.
When I visited the page, I initially didn’t realise that clicking on the different fonts would expand that area and give more information. Perhaps you should have some sort of visual cue that clicking on the area will bring up more info? Maybe a subtle hover colour or even just ‘click for further information’.
I really like the styling when you do click on them, though :)