Google's New Look

You might not have noticed but Google has changed just a little - it's got a new favicon.

The favicon, for those who don't know, is a little square graphic measuring 16 pixels along each side that appears in the location bar of your browser when you visit the site like so:



What's the point?

Well, it's far from essential to your website, but if you're lucky enough to have someone bookmark your website, the favicon will appear in the Bookmarks or Favourites menu like so:



and it also appears on the tabs. Here's how it looks in Google Chrome:

Google's favicon has changed twice in the last year or so (chronologically from left to right):

Favicons are quite simple to create using Photoshop, although it's trickier than you might think creating a work of art that's no more than 16 pixels across. personally I think Google's new favicon calls to mind the London 2012 logo crossed with the South African flag, but maybe that's the look they were going for.

You can make one yourself using Photoshop by downloading this free plug-in from Telegraphics


Alternatively, there are at least a couple of websites with free tools you can use to make your own favicons, one from Dynamic Drive and another from RealWorld Graphics.

For regular Google news, you can check the official Google blog. Recently they've announced the new version of Google Earth, which now allows you to explore the sea bed as well as the stars, and there's a new widget from Google News that allows you to very simply put customised news headlines on your website for free.

Which font? A question of practicality, convention and style

The font family I have chosen for this blog is Arial/Helvetica, with the titles in Georgia/Serif. If you don't know what that means, read on because I'll be explaining it in this article. And as the title suggests, I'll be looking at three things to consider when choosing fonts for a web design project.

My choice for this page is in keeping with common blogging design, so I haven't gone out on a limb. But seeing as I often find myself explaining to clients the relationship between fonts and web pages, this seems as good a time as any to put it all in writing.

The more observant among you will have noticed that the design of this blog has changed since this article was written. I decided to go out on a limb after all. If you can't tell what fonts this page is using now, I recommend you download the useful browser tool WhatFont. Or you can just ask me

In web design I do not have the luxury of choosing any font I fancy for my pages because your browser needs to be able to locate the appropriate font file on your hard drive. If you're currently reading this text in Arial, that's because you are using a computer that has Arial installed on it. If you're reading this in Helvetica (and congratulations if you can tell the difference - you are quite the typography expert) then it's because you have not got Arial installed.

Practicality

So, returning to my opening remark, the font family for this text you're reading is specified at the top of the page (hidden in the code, of course) as a list of two fonts. In this case: "Arial, Helvetica". Quite simply, this tells your browser to display the text in Arial if the font is available. If it isn't, the browser should use Helvetica instead. It's second place because (a) the majority of people have got Arial installed and (b) because Helvetica is so similar to Arial that it won't adversely affect the page layout if Arial is absent.

While I might have hundreds of fonts installed on my computer, it's possible you might not. Even if you have, you probably won't have the same fonts as me. So that means I am quite limited in my choices.

See the Appendix at the bottom to find out just what those choices are.

Convention

In its short history, the web has already seen a lot of trends come and go. Along comes the Blink tag and suddenly everyone's using it. Equally suddenly, it becomes a bit of an embarrassment. To a designer, it's a no-no.

When I started making web pages, there wasn't a font tag. Hard to believe now, isn't it? You decided what font you wanted to use in your browser settings. So for most Windows users, the world wide web was all in Times New Roman, because that was the default.

The font tag came along in 1995 along with the first wave of people practising "web design" as a career. And those designers led a mass migration away from Times New Roman. Probably because we were sick of the sight of it. Pretty soon, everything was in Arial. Within a year, Microsoft had extended the breadth of choice by introducing its Core Fonts package. These fonts were made freely available and were specifically designed to look good when rendered in a web browser. They included Trebuchet MS and Verdana as a change from Arial, plus Georgia to give us an alternative to Times New Roman.

Oddly, though, professional designers have never embraced Comic Sans in quite the way amateurs have. Mums creating invitations to their infants' birthday parties seem to love it. If you let your teenage nephew make your company's website, there's no bigger give-away than the presence of Comic Sans on the page. (See Fighting the good fight against a very bad font)

Style

But is Comic Sans really that bad? Who am I to say. All I know is, I'd be a brave man to present it to a client as part of a creative pitch. Convention, or for want of a better word, fashion, dictates the paramenters of the designer's choices much more than any personal choice.

This is especially true with a commercial website, which almost always necessitates a conservative approach. A customer expects your website to adhere to certain conventions of layout, navigation and design, so deviating from those conventions means you risk losing their business. Brave indeed.

But what of style? Individuality? Without pioneers in web design, those conventions would remain static forever. Moreover, by apeing bigger, more established websites, web designers do nothing more than condemn their websites to being forever second-best, unprepossessing and forgettable. So maybe it's time to be brave and lead the resurgence of Times New Roman on my next project. But not Camic Sans. I'm not as brave as all that.

Font Tips

• Less is more. As a rule of thumb, two different fonts on a page is usually ample
  
• Think about colour. It can be a striking alternative to using bold face or italics
  
• Size is important. Text can be clearly emphasised or de-emphasised by its size and by the amount of space around it, without changing the font or colour
  
• Watch the width. A paragraph becomes very difficult to read when there are more than twelve or thirteen words on each line
  

Appendix

There's a list of common fonts here:
http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

And these pages list the fonts that come with Office and/or various versions of Windows:
http://support.microsoft.com/kb/837463
http://support.microsoft.com/kb/924623

And these pages list the fonts installed by Mac OS X:
http://support.apple.com/kb/HT2444?viewlocale=en_US
http://en.wikipedia.org/wiki/List_of_fonts_in_Mac_OS_X

How the World Will See Your Website in 2009

Microsoft Windows Internet Explorer 8 "Release Candidate 1" is now available to download. The term Release Candidate means it's near to completion, might still have a few bugs, and moreover it's not too late for Microsoft to make changes once millions of us have tried it out.

Why should you care?

Principally because this is how your customers will be seeing your website for the foreseeable future. When the IE8 beta came along last year, it looked like bad news for web publishers. Many web pages - even on high-profile sites such as the BBC News - looked a mess.

The Beta software had an option to switch from IE8 mode to "Emulate IE7 mode" if the page was completely illegible. Unfortunately, this required you to shut down your browser and open it up again. And most of us probably don't have the patience to do that. So, when looking at the BBC News website, for instance, the links one would usually expect to see along the foot of the page were found half-way up, obliterating the middle part of the article.

Fortunately, there is good news. On the Release Candidate, "Emulate IE7" has been replaced by a new smart function that allows you to switch between standard view and "Compatibility View" with a single click. So, in the event that your website does look a bit wrong, there's still a chance that customers will be able to see it the way they used to.

What IE8 Can Do

The Microsoft website has a plenty of information about what IE8 does and doesn't do to enhance your browsing pleasure, so no need to go into it all now. Personally, the things I was most pleasantly surprised by were small details, like the improved "Find in page" function (Ctrl+F) and the addition of line numbers along the margin when you select View Source. The silicon.com website has a quick overview in pictures that tells you much of what you need to know about the big functional enhancements.

Slicing Up Your Site with Web Slices

From a designer and developer's point of view, one potentially interesting addition to IE8 is the introduction of web slices. These are intended to allow visitors to your site to "grab" a little piece of it and stick it onto their IE8 toolbar where it can be checked for occasional updates, a little bit like a glorified RSS feed. Of course, it can't be done with any old snippet of HTML - the content needs to be enclosed within a hidden tag like this:

<div id="footy_scores" class="hslice"></div>

where the id is a unique identifier (in other words, if you've got 20 slices on the page, each one needs a unique ID). The slice also has to be tagged with an entry_title, which is not hidden, something like

<h2 class="entry-title">Live Premiership Scores</h2>

Whether you'll want to include web slices on your website will very much depend on how often the site gets updated. If you've got content updating every five minutes or special offers with limited availability, then there's an obvious advantage. Microsoft have provided a style guide download which explains exactly how it's all done.

I can't imagine my clients all clamouring for Web Slices just yet. But it will be interesting to see if they become popular amongst developers or just fall by the wayside. They might even go the way of Microsoft's Active Channels, which pre-dated RSS at a time when the general population really weren't ready for them.