Nov 27 2009

Why does some website text look bad on Windows?

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…

speech bubble icon No Comments » | category icon Category: Web Design | tags icon Tags: , , , | link icon Permalink
Posted by Tom Fotherby

Nov 13 2009

Web Design Tutorial – Centered area with drop shadow

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…

speech bubble icon No Comments » | category icon Category: Tutorial | tags icon Tags: , , , | link icon Permalink
Posted by Tom Fotherby

Oct 12 2009

Using the Purisa Light font on a Website

If you want to use the “Purisa Light” font on your Linux hosted website, you can follow the following steps:

  1. Copy the font file from your desktop machine to your webserver. On Ubuntu the “Purisa Light” font file is located at /usr/share/fonts/truetype/thai/Purisa.ttf. e.g:
    scp /usr/share/fonts/truetype/thai/Purisa.ttf <username>@<webhost>:/<pathToWebsite>/fonts/Purisa.ttf
  2. Add the font face to your stylesheet: 
    @font-face {
    font-family: 'Purisa';
    src: url('fonts/Purisa.eot'); /* For IE */
    src: local('Purisa'),
         url('fonts/Purisa.ttf') format('truetype');
}
  3. Now you should be able to use it in your site pages. e.g. 
    <div style="font-family:Purisa,arial">
This should be in the "Purisa Light" font...
</div>
  4. BUT, we’re not done yet because unfortunately, IE does not support TrueType (ttf) fonts – only Embedded Open Type (eot) fonts.
  5. Download ttf2eot from http://code.google.com/p/ttf2eot/ – it is a open-source font format converter.
  6. Extract it to your home directory. Then build it: 
    cd ~/ttf2eot-0.0.2-2
sudo apt-get install build-essential
make
  7. Convert the font:
    ./ttf2eot < /usr/share/fonts/truetype/thai/Purisa.ttf > Purisa.eot
  8. Copy it to your website, e.g
    scp /usr/share/fonts/truetype/thai/Purisa.eot <username>@<webhost>:/<pathToWebsite>/fonts/Purisa.eot
  9. Now it should work on IE. If you don’t have time to convert this font, you can grab mine – use “view source” to find the URL from the stylesheet.

@font-face is a HTML5 feature supported by Safari 3.1+, Firefox 3.5+, Opera 10+ and IE 4+. At the time of writing Google Chrome currently doesn’t support @font-face (but the beta version does so it won’t be long).

This post was inspired from an excellent article called @font-face in Depth.

speech bubble icon No Comments » | category icon Category: Web Design | tags icon Tags: , , | link icon Permalink
Posted by Tom Fotherby