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.

This list is intended to make you think about your own website and give you practical, actionable steps that you can take right now to improve things. None of these things are difficult and most of them can easily be done in an hour or two. Print this off, mark the ones that you think you need to work on, and tick off one a week.

See the 9 Steps to Improve your small business website article for the steps!

I ordered them from Goodprint, the same place I got them from last time. The only changes I made was to get the newly available rounded corner option and to order 2 boxes of 50. I did this without changing the card design at all – which was probably a mistake. I think the text comes too close to the edge near the rounded corners and looks unbalanced. These aren’t bad but on the whole I think I prefer the old rectangular ones.

It’s strange but it feels like it’s finally an official business, now that I’ve got some little cardboard rectangles to prove it!

I ordered the business cards from GoodPrint, an online printing company here in the UK. Their prices are reasonable, they allow you to upload your own artwork as PDF and the ordering process is very good. You upload the PDF and they show you a preview of the finished item, along with all the margins, borders and cut lines – so you can make sure that you’re going to get exactly what you want, without any edges getting chopped off or anything.

I decided that the cards were worth doing properly, as these are going to be in the hands of prospective customers; I wanted them to look elegant and feel high quality.

Most online printers have a range of pre-designed cards that you can choose from, and customize with your name and logo. These are by far the cheapest option – and some of them aren’t bad – but they aren’t what I want. I’m supposed to be a designer, as well as a developer, so I really need to design these myself.

I played around for a while with different designs (which I didn’t keep, unfortunately, so I can’t show them here) using Xara, my drawing program of choice on Windows.

This is the design I ended up with, this is the front:
and this is the back:

I ordered 50 cards, on GoodPrint’s standard card, with a nice silky matte finish, for £32 plus delivery. Fairly pricey but not outrageous. They also arrived the day after I ordered them, which was nice. All in all, I’m very pleased with them. Now all I have to do is find people to give them to!

I wanted a contrasting font to go with Tahoma for use with body text – what you’re reading now. I wanted a font which would continue the theme of contrast between the technical and the artistic set-up by the logotype, but couldn’t use Candara, as almost no-one has it installed, so they wouldn’t see it when viewing the website. Candara also inevitably looses some of its subtle curves and arty feel when you get down as small as 11 or 12 point.

I also wanted to give an organic feel overall – I wanted the ‘artistic side’ to win out in the overall feel of the design.

I ended up using the font that you’re reading now, Georgia. This is another very nice font, very readable at body text sizes, with a large x-height and open letter forms. It’s also a serif font – which are generally felt to be more readable for longer passages of text. It contrasts nicely with the Tahoma headings and gives the page a very organic feel overall.

My general design preference is for simplicity and elegance, if possible. I also wanted a design which would work well on the web, as this is primarily a web based company. I decided that I wanted a simple logotype for the logo and a set of colours and fonts that would work well with it, for both print and web. I’ll talk about the colour choices in a separate post and just concentrate on the font choices here.

The portmanteau name ‘Codeistry’ lends itself to a two font logotype, with each part of the name picked out in an appropriate looking font. Something computery and technical looking for the ‘code’ bit and something softer and more arty for the (art)istry bit. I played around with this idea for a while, with different fonts, combinations, weights and kerning.

I eventually ended up with this one:

This uses Tahoma for ‘code’ and Candara for ‘istry’. The Candara bit is condensed, with the tracking set to -20 ems/1000, and then I’ve manually played around with the kerning on the whole thing from there. I had to fiddle with the font sizes and spacing by eye to get it to look like a coherent whole – the Tahoma section ended up being 84.95% of the font size of the Candara section.

I chose the fonts because they worked well together, having a similar humanist san-serif look and fairly similar weighting. The Tahoma gives a subtle technical look to the ‘code’ bit while the Candara looks more arty, with its gentle curves and slightly hand brushed feel. I felt that some of the other alternatives, like the top one in the first image, were a bit too dissimilar and made the name start to look like an obvious pun. Tahoma also has the advantage of being available on almost everyones computer, if I wanted to use it for web work.

That just left me to decide on fonts to use for other copy – the headings and text for the codeistry website and any print material. The choice of these fonts was influenced by my choice of colours as this all feeds into the overall feel – so I’ll cover that in a follow-up post, after I’ve talked about the colours.