Look at the difference between these two 50px headers that use the Georgia font:

Windows/Ubuntu font comparison - Georgia

The top one is from IE8 on Windows Vista, whereas the bottom one is from Firefox 3.0.15 on Ubuntu 9.04. On Windows, the text is clearly less pleasant on the eye? It is has jagged edges, has a pixel or two cut off the end of the ‘s’ and is 17 pixels less wide.

This is the styling code:

#logo h1 {
font-family:Georgia, Arial, sans-serif;
font-size:50px;
font-weight:normal;
letter-spacing:-0.05em;
line-height:normal;
}

Read on…

In a previous tutorial we went through some tedious steps to generate 3 images that could be used to create a page shadow. The great thing about the GIMP is that anything you can do with a mouse and keyboard, you can also do via script.

We will generate the following images automatically:

Demo of what we will generate

Why script it?

  • It allows us to tweak settings and quickly re-generate the image to see the results. For example, we can ask ourselves, “I wonder what it’d look like if the shadow was a bit bluer?”
  • We can automatically generate multiple images (including, for example, a image suitable for a CSS sprite).
  • We can can adapt and re-use the scripts for different websites. For example, one website might use square angular edges, but another might use rounded corners – so you can adapt to use rounded corners in the background image by changing 1 line of the generation script.
  • Mice are evil – why involve a mouse when all we need is a keyboard?

Read on…

In this tutorial we are going to create a very basic “blank canvas” webpage which has a central white cut-out with a drop shadow effect. Our “page” will be 960px wide, floated in the center of the browser window:

Tutorial end product

aBlankCanvas
Click to enlarge

Real-world example

a non-blank Canvas
Click to enlarge

Read on…

I’ve just finished a revamp of the PeoplePerHour.com hompage:

Previous Design

Screenshot of previous design

New Design

Screenshot of new design

The new design was needed to give space to spotlight “featured” projects (which are a new addition to the site). I think the homepage should stand out a bit more now because it’s more striking?