{{ searchResult.published_at | date:'d MMMM yyyy' }}

Loading ...
Loading ...

Enter a search term such as “mobile analytics” or browse our content using the filters above.

No_results

That’s not only a poor Scrabble score but we also couldn’t find any results matching “”.
Check your spelling or try broadening your search.

Logo_distressed

Sorry about this, there is a problem with our search at the moment.
Please try again later.

As a boy I used to love two types of shops: toy stores, especially those with vast stocks of Lego, and stationery retailers, in which I could lose myself for hours. The latter remains a weird affliction that I don’t yet know the name for.

While I’m not a designer by trade I’ve always loved a good font and appreciate great typography. In an online environment it is often the difference between a good site and a great site, since it is a major part of a website’s visual appeal.

Some say that web design is 95% typography. I’m not sure I’d go quite that far, but I do believe that it can help improve the user experience, that it can help persuade visitors to interact and take action, and that as such you should ask yourself whether your site needs a makeover in this department?

I’ve been working on a new website and have done a lot of research in this area. It is so hard to get wrong, and I’m not yet sure that I’ll get it right, but I’ve collated this list from a bunch of my recent bookmarks and thought it would be a good idea to aggregate and share them.

Inspiration

Typophile Type Battles – font designers are invited to submit their entries to type challenges, such as this one. Brill.

Welovetypography – yes, we certainly do. An aggregation of type. Visually stimulating. Replete with Twitter feed.

Flickr’s Type Group. Almost 10,000 members, and 50,000 images to browse.

3point7designs’ 10 Examples Of Beautiful CSS Typography And How They Did It

TypographyServed – an excellent Behance Network website that is very easy on the eye and aggregates lots of recent type action from ‘leading creative professionals’.

15 Excellent Examples Of Web Typography, by I Love Typography.

TypeNeu. ‘An Odyssey in Typography’.

Elegant Web Typography - a presentation by Jeff Croft, via SlideShare.


Insight

WebTypography.net – aka ‘the elements of typographic style applied to the web’. A technical guide to typography for websites. Dense in parts, but full of sense.

Web Design Is 95% Typography. “Treat text as a user interface.” Gotta love that.

Five Simple Steps To Better Typography. A useful post from Mark Boulton. 

The Principles of Beautiful Typography, by Jason Beard. Don't walk before you can run, right?

The Grid System. Learn about ‘the foundation of any solid design’. 

The 100% Easy-2-Read Standard. There are some sensible basics in here to take note of.


Trends

Typographica’s favourite typefaces of 2008. Great site, and a nice list.

I Love Typography’s favourite typefaces of 2008. What’s not to love about Marat?


Fonts

FontShop. An independent font retailer / designer. They also run a great blog for type connoisseurs called The FontFeed.

DaFont – an aggregator of thousands of fonts, with many available to install for free. A great resource.

Fontsquirrel – the strapline says it all: “100% FREE fonts for graphic designers. All with commercial-use licences.” Joy to the world.

Smashing Magazine’s fonts channel. Some fantastic resources, obviously, like this one and this one and this one.


Tools

Typetester – compare fonts and type choices online.  Change fonts, alignment, leading, tracking, spacing and colours.

Fontburner – sick of seeing Arial and other web safe fonts for on websites? This tool helps you transform headlines on your site, so long as there are no stylesheet conflicts. Pick a new font, download the code, and hey presto. 

CSS Typeset – transforms your text into CSS. Perfect for amateurs like me.

What The Font? A web tool (and iPhone app) that allows you to take a picture and upload it, in order to find out – you guessed – what font is being used.

Snook’s Colour Contrast Checker, to help you apply the right colour choices to your type.

Font Picker. Helps you quickly figure out which font on your machine is best suited for your designs.

[Image by psd via Flickr, various rights reserved]

Chris Lake

Published 12 May, 2009 by Chris Lake

Chris Lake is CEO at EmpiricalProof, and former Director of Content at Econsultancy. Follow him on Twitter, Google+ or connect via Linkedin.

582 more posts from this author

Comments (4)

Avatar-blank-50x50

malcolm coles

On the subject of typography ... Any chance of bumping up your tiny sub-11px font size? I'm not sure setting 'font-size:small' in your CSS is going to help with typographical readability!

I've just used firebug to remove the size:small setting. Nothing breaks, and everything is much more readable (except this form ...)

I know I can bump up the font in my browser etc, but why make me?

over 7 years ago

Chris Lake

Chris Lake, CEO at Empirical Proof

Thanks Malcolm, suggestion noted. There are a few front end things that we want to introduce that are on the to-do list, including some typography tweaks. My list is a long note-to-self as much as anything... ;  )

over 7 years ago

Avatar-blank-50x50

Stephanie Coulshed, Digital Project Manager at ScopeEnterprise

Has anyone else noticed that in IE 6 all the images from the TWITTERBUZZ column are displayed on the left of the page, superimposed over the content?

over 7 years ago

Avatar-blank-50x50

Robert

i wouldnt go as far as 95% but I could quite happyly settle for a 60% of the overall design mix as an average. Nice post, very enriching, in my bookmarks now, cheers

over 7 years ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Daily Pulse newsletter. Each weekday, you ll receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.