Journal

Web Typography with CSS

Posted in Posts on

Typography

Translating a great design from print, or an artwork file to an accessible HTML/CSS website can be a little tricky, especially when it comes to Typography.

As a client or graphic designer when working with a developer its important you know the limitations of what can be achieved, but its also handy to be armed with a few tips to get the best visual for your site.

Using CSS there are a variety of properties you can use to control your website typography. Read below to give yourself some background knowledge and get the best for your website;

  1. Using the font-weight: property you can set the strength either numerically (100, 200, etc…) or by description (bold, normal lighter)
  2. For something similar to adjusting kerning, there is letter-spacing property, this can be set in px (or ems for scalability within the ‘beloved’ internet explorer).
  3. To adjust line spacing there is the line-height property.
  4. To adjust word spacing there is the word-spacing property.
  5. When specifying a font your web developer will set a list, by which the end users browser will render the first one it comes across…

Probably easier explained with an example;

So the code goes a little like this    font: 100% Georgia, Helvetica, Arial, Gill Sans, Sans Serif;

In the above example we have used Georgia as the primary font, if the browser can’t see this then it will try to substitute to read Helvetica… if not then Arial and so on.

There is a term bandied about – ‘web safe fonts‘ – fonts that are deemed to be safe because they are generally assumed to ship as standard with mac and PC. Feel free to google and get some lists – you may see discrepancies but there is a general consensus on those that are deemed ‘safe’.

So what about other fonts? Well by all means you can list them.

For example if we wanted to use Helvetica Neue as our primary font we can pop it in the list by all means, but when Joe Bloggs on his PC goes to see the site he won’t have Helvetica Neue so it will jump down to the next in the list. AND bare in mind the effect swapping fonts can have on layout.

ITS DIFFICULT TO CREATE PRINT STANDARD TYPOGRAPHY WITH CSS BUT WITH A LITTLE EFFORT YOU CAN MAKE THE PAGES QUITE RESPECTABLE.

Google have a great online tool for playing with type, allowing you to edit the above mentioned properties! http://bit.ly/8XrFeN.