You may have heard of Gill Sans. Designed by the sign-writer Eric Gill in the 1920s it is as much a British icon as fish & chips. You only have to look at the BBC, or any high street to see it. This article, however, is not about about a typeface (in case you were wondering) but about the redesigned interconnect/it site you see now.
The Brief
It started in July this year when I first joined the company. Dave showed me the new business cards designed by cm2creative and explained his choice of typeface. He had picked Gill Sans because it does a number of things. It looks good, is readable, very English and has a long standing association with well known and trusted brands. At a subconscious level it offers a sense of familiarity, especially true after it was adopted by the BBC in 1997. Almost every man, woman and child with access to a TV since then will have seen the typeface at some point whether they know it or not. In the context of the interconnect/it branding the purpose was to use that familiarity to instil a sense of professionalism, trust and quality in the viewer. And that was the brief. That and the colour red.
Research
The Typeface
I knew very little of the history of Gill Sans at the start of the project but that changed quickly. I won’t go into detail here (because there is a lot!) but if you are interested my jumping off point was the Wikipedia article. Things got more interesting when I found an article by Ben Archer of typotheque.com re-evaluating the success of Gill Sans. The article describes Eric Gill’s intentions with the typeface design to improve upon his mentor Edward Johnston’s typeface for the London Underground. Mr Archer argues that Eric Gill failed to better his predecessor and he has a point which is best illustrated by the lowercase ‘a’.
The design is very top heavy and unbalanced. The contrast of the letter (ie. the orientation of thick strokes and thin strokes) is partially reversed as a result. When compared to the vast majority of western typefaces we aren’t used to it and it can have the effect of highlighting the letter itself and removing us from what the text is actually saying. It’s a lot like the way the refridgerator scene in Indiana Jones and the Crystal Skull removed any suspension of disbelief in the audience. For an extreme example of reversed contrast in type design take a look these letters. This revelation was the reason why I used the lightest weight of Gill Sans for headings. At this weight the strokes are uniform so the ugliness caused by the faulty contrast is removed. At smaller sizes on screen the problems with contrast are less apparent so the regular weight of Gill Sans is used for body copy where available.
It just so happened that recently fonts.com released their webfonts service and it couldn’t have come at a better time. It was apparent that I would need to use Gill Sans Light frequently but I realised too late that licensing would be a problem. None of the other webfont providers offered any members of the Gill Sans family so the ability to use it free of charge via fonts.com really was a stroke of luck. There’s a theory in the O’Rourke family that we’re blessed with the “jammy gene” because these coincidences are scarily frequent!
The Typography
The second key factor in my research was my ongoing study of typography. It’s a subject that my study of design has brought me to and left me balls knee-deep in. It is the art of presentation and creating clarity which encompasses what we refer to in the industry today as information architecture. Oliver Reichenstein from iA wrote what became a surprisingly controversial piece stating that web design is 95% typography – perhaps a slight exaggeration – but there is truth in the statement. Anyone who designs anything involving text should learn about typography, particularly that it is much more than just choosing a typeface.
Dave has a book in the office called Typographic Systems by Kimberley Elam. Most of us are familiar with grids by now but there are a number of other approaches. Axial, radial, dilatational, random, modular, transitional and bilateral are all layout solutions we rarely see on the web, due to the difficulty involved in producing them. New layout features available in CSS3 may change that in the coming years and I for one welcome our new non-grid layout overlords. After experimenting with a few concepts incorporating the new logo and using the axial and modular systems the results were pretty woeful but it was a useful exercise in idea generation. One of my first (and very short-lived) ideas was to use the forward slash in the logo to create an axis on which to hang the rest of the design but due to the nature of the content and the goals of the website a grid layout was the best and simplest approach in the end.
With all the above milling about in my mind while I was working on another project over the summer the actual job of designing and coding started towards the end of September.
Working in the browser
It’s going to get slightly technical from here on out. The mockups I had produced pretty much went out of the window although a few elements remained, albeit not completely intact.
Style
I began coding the CSS by using a reset and then defining the grid. After toying with The Gridinator I picked a 920 pixel wide grid with gutters of 40 pixels. The width had to be less than the usual 960 pixels to give me some extra space to position certain items outside of the central column without hiding them from users on a 1024 x 768 resolution. I had columns of 80, 200, 440, 680 and 920 pixels to play with. The column widths then guided the choices of font size. I was aiming for a maximum of 10-12 words per line and I settled on 14 pixel text for body content as a reasonable balance whether in columns of 200 or 440 pixels in width. To create further visual harmony the font-sizes were also selected from a typographic scale. Just like a musical scale a typographic scale is a balanced series of font sizes that create visual harmony and heirarchy.
The base line-height of 18 pixels I chose looked right to me with the 14 pixel text. I was tweaking the leading to get a reasonable contrast within the blocks of text. Not too dark and not too light. I may still tweak it some more because I was following the advice in Robert Bringhurst’s The Elements of Typographic Style. It’s an excellent resource but the rules of print don’t always translate to the web on a 1:1 scale. The problem I was left with were the multiples of 18. The steps I used are 9, 18, 27, 36 and so on to make the vertical rhythms sync up nicely. A base line-height of 20 pixels would offer a greater set of steps (5, 10, 15, 20, 30 etc…) so it’s easier to calculate margins and work with, but like a stubborn fool, I plodded on. Even multiples of 6 would have been easier to work with but my decision in the end was down to what felt right, or intuition if you will… At any rate hindsight is a wonderful thing.
One problem with trying to maintain vertical rhythm is when you don’t know what image sizes you may be dealing with. There is a simple bit of javascript that can help:
var lh = $("body").css("line-height");
$("img").each(function(){
$(this).wrap('<div style="overflow:hidden;height:'+ (Math.round( $(this).height() / lh) * lh) +';" />');
});I have one other little trick that some of you may like (some of you may just throw up in your mouth a little bit). I tweeted about my exasperation at not having a list-style-color CSS rule because I wanted red bullet points without affecting the text colour of the list items themselves. There were the sensible suggestions of course – use list-style-image or a background image. Generally I would have used either approach but there are caveats to both of those approaches.
- list-style-image: I never use this feature of CSS. It seems that no two browser manufacturers can decide exactly what to do with it. You end up with unacceptably different vertical positioning of the bullets in IE compared to Firefox and others.
- background-image: Best suited to designs that don’t use the margins to hang bullets or quotation marks in. I could have used some left-hand negative margin and padding but what about ordered lists?
The ordered list problem isn’t solved by either of the above solutions. I wrote some more javascript to enable the effect:
$(".entry-content ol, .entry-content ul").each(function(){
$("li",this).each(function(){
$(this.childNodes).wrapAll('<div class="li-content" style="color:'+ $(this).css("color") +';" />');
}).css("color",$(this).css("color"));
});With the above all you need to do to colourise the bullet points is to apply the bullet point colour on the list itself and the desired text colour on the list items like so:
ul,ol { color: red; }
li { color: black; }I’m now of the opinion that CSS is a pretty crap tool for typesetting, that is if you want to do anything complex that needs to look the same across different browsers and operating systems. It’s not the fault of CSS though, but rather the different approaches to type rendering on different platforms. Typekit recently released an interesting post on the subject of OS diffrerences in relation to type.
Prototyping with widgets
WordPress has a well thought out core that allows its functionality to be extended using the theme itself or various plugins. To get the most out of the home page I used three widget areas and our suite of internally developed content widgets. So far it has the following:
- Page widget: grabs the content of a particular page – pretty simple really. This is essentially like using a text widget however you have all the editing options available to you on the page editor – in particular the WYSIWYG editor. The large banner text is an example of this widget.
- Taxonomy lister: generates a list of posts (or custom post type entries) from a single taxonomy such as tags, categories or a custom taxonomy. The widget uses templates that can be stored in the theme directory to control output. I created the Case Studies and Portfolio sections on the home page using this widget.
- Latest posts: this one is a brother to the taxonomy lister. It lists all the posts just like the blog page would however you can choose how many items to show, how to display the featured image from the post, whether to use the excerpt or full text and you can exclude categories from appearing. The latest news section uses this widget.
The only other non-core element of content required was the author list. WordPress itself offers very little in terms of generating a list of authors. There is a single documented template tag called wp_list_authors() and the available plugins didn’t give me what I wanted either. I set about creating a shortcode that I could use in a widget or page but first I needed a list of user ids. I added a new function to the functions.php file in the theme:
function get_authors(){
global $wpdb;
return $wpdb->get_results("SELECT ID, user_login FROM $wpdb->users, $wpdb->usermeta WHERE $wpdb->users.ID = $wpdb->usermeta.user_id AND meta_key = '".$wpdb->prefix."capabilities' ORDER BY user_login");
}My shortcode function looked a little like this:
function author_list_shortcode( $atts, $content=null ){
$output = '';
$authors = get_authors();
foreach ( $authors as $author ) {
if ( $author->user_login == 'admin' ) continue;
$output .= '
<h3><a href="'. get_bloginfo('siteurl') .'/author/'. esc_attr( get_usermeta( $author->ID, 'user_nicename' ) ) .'">'. get_usermeta( $author->ID, 'display_name' ) .'</a></h3>
'. get_avatar( $author->ID, 80 ) .'
<p class="bio">'. get_usermeta( $author->ID, 'description' ) .'</p>
<a class="url" href="'. esc_attr( get_usermeta( $author->ID, 'user_url' ) ) .'">'. get_usermeta( $author->ID, 'user_url' ) .'</a>';
}
return $output;
}
add_shortcode('author-list', 'author_list_shortcode');While the above is a very simplified version of what I ended up with it should give you an idea of how to create the shortcode. Unfortunately I wanted to use it in a text widget too but WordPress currently doesn’t parse shortcodes in them without a little coaxing…
// parse shortcodes in text widgets
add_filter('widget_text', 'do_shortcode');There was one final hurdle to jump over with the author list shortcode. I wanted some extra data associated with our user accounts such as job title and twitter username. Justin Tadlock has a simple tutorial on his blog about how to add extra fields to the user profile page. Using them was just a case of calling the get_usermeta() function with the correct user id and meta key.
Using widgets to populate the home page and the footer worked very well as a rapid browser-based prototyping tool. As long as the CSS allows for some flexibility of the widgets themselves you can quickly move the various elements around to find an optimal arrangement of content. It will be a cinch to add extra blocks in future too for special features.
Reducing
In anything at all, perfection is finally attained not when there is no longer anything to add, but when there is no longer anything to take away.
Saint Exupery
A lot of my time was spent removing visual clutter that I had merrily sprinkled around, a dividing line between the post content and the author photo, an image border on non-captioned images, the customary sidebar on post pages… It was time well spent. If there was an element in the design that I couldn’t explain the purpose of to myself satisfactorily it got cut. I can certainly recommend this approach, assuming you’re going for a minimalist or very typographically led style such as this. If I hadn’t done this there would be bright red boxes inspired by a restaurant menu in a sidebar containing links, the site would have had much less white-space and room to breath and would have ended up being less readable.
At this point the only colours on the site were white (#fff), black (#000) and red (#f00). I could only withstand the burning on my retinas for so long and calmed the colours down by reducing the brightness or reducing the saturation.
To soften the site further and add a little depth I found a natural looking texture for the background. You can blame Simon Collison for that because I’m an unashamed fan of his design style and after seeing his talk at Speak the Web in Liverpool’s Leaf Tea Bar I guess a few things sank in. The gist of the talk was how to reach that point in design where the magic starts to happen, but in a word, the message I took from it was “reduce”. You can find the beautiful slides from the talk on slideshare.
Detail
During the design process there were a few moments when a great idea struck me. It’s the little details that you don’t necessarily think about until they’re pointed out to you.
In the footer I had a copyright notice and the current year. Because of the BBC association I thought that using roman numerals would be more interesting and definitely add a little extra class to the design.
The font delivered by fonts.com was looking badly hinted and blocky at certain sizes in webkit based browsers. What was interesting when I was adding some CSS3 love to the design I found that adding text-shadow, even if it was invisible, caused the text to be properly anti-aliased. I’m not entirely sure why but I was able to make a few gains in the overall beauty of the site using text-shadow on the delivered font.
To add some extra layers of slickness to the site I added some transitions for those browsers that support them. You’ll see what I mean if you use Chrome or Safari and hover over the main menu items. It’s amazing how simple it was to do and I’m looking forward to playing with CSS transforms and transitions on future projects.
Have you ever noticed how many WordPress sites stick with the default left and right angled quotes for the arrows? I decided I was sick of them and found a list of different unicode arrows I could use instead. This worked fine at first although it did cause a problem in Chrome when I added the text-rendering: optimizeLegibility; rule to my style sheet. The effect was that all my font-styling was lost (font-variant, font-family and text-transform rules) and the unicode character appeared as a box. The bug report is here. Removing the text-rendering rule fixed the problem in Chrome but IE6 was still displaying a box for the character so I resorted to using a span with the class “unicode” and added the following to my style sheet’s utility belt:
.unicode { font-family: "Lucida Sans Unicode", "Arial Unicode MS", Arial, sans-serif; }Another feature you will have seen (unless having javascript turned off is how you roll) is the loading overlay. I had to do it because of the way webfonts are loaded and rendered on screen. There’s a horrible moment when the text vanishes and then reappears in the desired typeface. Paul Irish has a great article on steps you can take to avoid this “Flash Of Unstyled Text” (or FOUT for short). The only sure fire way to avoid this bit of ugliness to hide the text or page until the new font has loaded.
In Summary…
I learned a lot. Mostly what not to do next time. Some of the main points of interest to me were:
- using WordPress widgets for rapidly prototyping the information architecture.
- CSS is not a great tool for typesetting. Avoid getting too carried away and focus on readability.
- reduce, reduce, reduce.
Hopefully that wasn’t too much of a ramble! While I’m happy with the end result there may never be a design I do that I’m really, really satisfied with but that can only be a good thing. The moment we become satisfied with our level of knowledge and skill is when we start to stagnate and lose any enjoyment we get from the process. I may still tweak some things in future like the line-height and how some images are displayed but for now, I need a beer.
I’ll leave you one of my favourite examples of Gill Sans spotted in the wild down Bolton Street opposite the Adelphi Pub in Liverpool. Yes it is the plug-ugly ultra-bold Gill Sans but it made me giggle that they would have a separate entrance to the strip club for those dirty filthy students.
