Q:

Please remind me about images of text vs real text on websites. Search engines search alt. text so why not have a navigation with images and nice typography rather than a limited selection of web fonts?

A:

It’s true that search engines search alt. text – and you can do it that way. If you’re determined to use images, you should probably also use a hidden <span>Menu Text</span> inside the <a> element. These sort of work Ok, for the most part. The arguments for and against this are sort of like flash sites vs. real websites; one is the Right Thing To Do and one isn’t. You can make the wrong way work mostly Ok, if you work at it, but however hard you try, there are always downsides and you’re putting yourself at a slight disadvantage all the time.

Why is real text better?

There are a large number of little reasons why text is better than images; images are: harder to update when you change or add things to a site, harder to update when you change site designs or colours, much larger and slower to download, cause extra HTTP requests slowing down page loading even further, aren’t searchable (either by search engines, or users with ctrl+f), aren’t translatable, don’t zoom/re-flow as well on mobile devices, don’t render as well when zoomed or viewed as different resolutions, don’t print very well, aren’t as accessible, etc, etc…

Even better…

Also, I saved the best bit till last: You don’t need to choose any more! The ‘limited selection of web fonts’ issue has gone away – you can now use any font you like, provided that you’ve got a license to use it on a website. As far as I can see, this makes using images of text completely obsolete – I can now think of no circumstances where using images of text is even remotely justifiable. Previously, the only argument in favour of images was ‘it looks nicer’; this solitary argument in their favour is now gone.

Here are some resources that cover modern web fonts:

• http://nicewebtype.com/
• http://webfonts.info/wiki/index.php?title=What_are_webfonts%3F – this link also has a nice list of available web fonts, both commercial and open/free.

Here are some examples of sexy looking websites that make good use of modern web fonts. Notice that all the text is normal, selectable, searchable text, even the sexy looking stuff:

Some by me:

• http://joaobarao.com/
• http://cubanblues.co.uk/

lots by others:

• http://nicewebtype.com/fonts/bello-and-proxima-nova/
• http://webfonts.info/wiki/index.php?title=Links_to_demo_pages
• http://opentype.info/blog/category/webfonts/
• http://www.robinwood.de/blog/
• http://www.brizk.com/
• http://forabeautifulweb.com/blog
• http://ilovetypography.com/

How do I actually use webfonts then?

The webfonts stuff is all just CSS, and pretty simple to use. You just tell it where the font file is, and give it a name:

@font-face {
font-family: 'DroidSansRegular';
src: url('/fonts/droidsans-regular.otf');
font-weight: normal;
font-style: normal;
}

then you just use it as normal:

p {
font-family: DroidSansRegular, Arial, sans-serif;
font-size: 18pt;
}

there are various tools which will write the (slightly more complex) cross-browser version of that. I used FontSquirrel for http://joaobarao.com/ – you can see what it generates here: http://joaobarao.com/css/joao.css – all the @font-face stuff at the top is generated for you by FontSquirrel. I used two excellent free / open fonts: Fontin and Droid Sans on the http://joaobarao.com/ site.

I’ve also souped up the metadata that gets output in the page’s code, so that I’m now outputting a meta description tag – this outputs whatever I’ve typed into the page’s Description field in MODx.

I’ve also started using MODx built in meta keywords system, so some pages now have some keywords set.

A little while age I also added a Creative Commons license to the page footer but forget to mention it on the blog. This means that the site’s content is now actually marked as copright of Codeistry now – which it wasn’t before. As I’ve chosen a Creative Commons Attribution Non-Commercial Share Alike license, this also means that anyone can re-use, re-mix, translate or re-purpose any of the stuff on here for whatever they want, provided it’s non-commercial and they credit the original source.

Anyway, here’s the old footer:

and here’s the new one:

The changes are subtle but move the site from mostly failing to almost completely passing the contrast and luminosity tests from JucyStudio.

It might seem obvious but going through this process brought home to me how much the perceived contrast of text depends on the background colour behind it. Text that looks fine on the normal page background might have insufficient contrast when used in a footer, link or menu – where the background colours are different.

The changes included changing the body text to use the old heading colour, using a slightly darker colour for headings and links, and a slightly lighter shade for the page footers, to increase the contrast with the footer text.

I actually think that this has helped the design too – not only for accessibility but it also feels stronger, with more impact and weight. I may even revisit this in the future and punch it up a bit more.

Colour contrast testing tools

http://juicystudio.com/article/colour-contrast-analyser-firefox-extension.php