Typography for the Web

The first resource here is fun; it demonstrates, right in front of your eyes, how type can look on the screen - really useful if you are unsure about font types and the web. The remainder are more theoretical (particularly the latter ones). If you have any problems accessing these resources, please let me know. I do suggest that you read the following articles - they have a lot of invaluable information on the correct use of type.

Writing for the Web

3 point 7 Designs3point7 Designs
What the Font?What the Font?
A Guide to Web TypographyA Guide to Web TypographyTypographic Contrast and FlowTypographic Contrast
The Design CubicleThe Design Cubicle
Typographic StyleTypographic Style
How users read on the webReading on the Web
Setting type of the webSetting Type on the Web5 Principles5 Principles and Ideas
Fonts and the WebFonts and the Web
Web-Safe Fonts for your WebsiteWeb-safe Fonts for Your Site

Tutorial 9Tutorial 9


Downloadable stuff

1001 Free Fonts1001 Free Fonts
1001 Fonts1001 Fonts
40 Excellent Freefonts40+ Excellent FreefontsDaFontDaFont
Veer Veer



Typography books

These books are by no means a comprehensive list - but they are reeeally good so I suggest you try and get your mits on them soon!

Stop Stealing SheepStop Stealing Sheep

The Art of Looking SidewaysThe Art of Looking Sideways

Moving TypeMoving Type

Type in MotionType in Motion

Great Web TypographyGreat Web Typography

Bulletproof Web TypographyBulletproof Web Typography

Typography on the WebTypography on the Web

The Principles of Beautiful Web DesignBeautiful Web Design

Ornaments and DingbatsOrnaments and Dingbats




Graphic DesignTypography Accessibility & Usability XHTML & CSS Web 2 Web Integration

Welcome to the world of typography! It's a complete minefield deciding on which font type to use. You might be designing something in a word processor such as Word; a Flash animation; an image in PhotoShop or generally creating a multitude of electronic documents such as a poster, flyer, business card, brochure, magazine etc; or alternatively designing for the screen.

So which font type should I be using? Well that depends really on what you are designing and if you are using a PC or a MAC. As a general rule of thumb you should use the lowest common denominator for your main text on a webpage as you don't have any control on which fonts your audience will have on their machines.

If the text is to be embedded within an image you can pretty much use any font you like.

Anyway, on with the designs my friends...




Typography dahling

When we think of typefaces, font types, typography etc we may well all have different ideas. You should! it's all very subjective, just like design. Overall, one must realise that type for the web is incredibly different to type in print-based materials. We all probably have our favourite font types (personally I love Myriad Pro and Trebuchet MS when I read from the screen). Anyhow, I'd like you to consider the following image I made:

different types of type suitable for the web

Here I have used the following fonts in ascending order;

Century Gothic
Courier New
Eras Light ITC
Myriad Pro
Trebuchet MS

Which one do you prefer and why? All font types have personality so you must consider them wisely.

Just one tip from me - don't use Times New Roman; I'm sure it's a very friendly font and hasn't done anyone any lasting damage but it's so so so so boring and so last season! :o)




It's all about the animation

So why don't you check out my 'Typography for the Web - Basics' by clicking on the image below. This is a Flash animation which aims to encapsulate the kind of things you really should know before you begin either designing for the web, or writing for the web. Come back when you're done :o)

Typography Basics


PC versus Mac

In general the average Windows PC will have around about 40 fonts installed by default; on a Mac that's increased to around 100. So do Mac maniacs have more fun? Personally I'm not a Mac fan; sure they look sexy but their reliability ain't so hot. Plus you need a separate driving licence to use one!

Sometimes you will get a group of fonts; these are named font-families. Each font in that family can represent different variation of that font. Most font families will have the regular font type as well as the italic, bold and bold-italic variants.

The image below is simply takes the first letter of my name and you can easily see the variation that exists in only a few different font types. Whoever thinks that type is boring needs their eyes testing!

All the Gs



Downloadable fonts sweetie

There are literally 1000s of font types out there so you ain't restricted by which ones come shipped with your computer. Hurrah! So if you really want to go to town with your designs you can. I've lost count of how many I've downloaded over the years - too many to count. I bet you are wondering just how the hell do I install them. Well if you extract the file to the following:

C:\Program Files\Common Files\Adobe\Fonts

And the next time you open up PhotoShop there they will be - ready for your creative attention! This way they are only available from within PhotoShop and not for general Windows use.

You should see a list of resources on the right-hand side of the screen which points you to some really useful resources where you can download your font of choice. Enjoy!



Playful fonts

Playful or Handwritten Font


When you are designing media for the web chances are that you will use a pretty standard font type for the main body of text; that way your audience can read easily from the screen. When you are designing graphics, you might wanna be a bit more adventurous. Below are just a short selection of very playful, flamboyant font types - obviously not easy if you were reading large volumes of text but maybe in an image they would be appropriate.












The novelty factor fonts

Playful fonts

These are fun, fun, fun! So many to choose from that it's difficult to know where to start. You're probably familiar with a few of them - here's a list I've chosen at random just to show you the sheer diversity in them:

Again, like the playful or handwritten fonts - you should use them with care. Ultimately they are difficult to read from the screen and you don't want to alienate your audience - hell no - so be careful with them ya hear?

You should also consider the semiotics, or meaning, that each of them convey; this is a vital aspect of typography in design. Semiotics is a whole field in its own right - too much to cover here I'm afraid.









Dingbats, say what?


No, I haven't lost the plot - Dingbats are actually a font type for the web. They are also called 'Symbol' fonts. I suggest that you do consider these if you are looking for illustrations or artwork to incorporate into your website designs.

They have been really popular since the digital font revolution. Yes, it can be argued that they don't have much place in a print form, but on the web they can be very useful as supporting graphics or icons. Here are just a few that I've put together:












Consider you colour

Colour can add a whole lot of meaning to your graphic. Consider the different connotations which colours mean - here is just a quick list:

Legibility of text

pink: soothes, acquiesces; promotes affability and affection

yellow: expands, cheers; increases energy

white: purifies, energizes, unifies; in combination, enlivens all other colours

black: disciplines, authorizes, strengthens; encourages independence

orange: cheers, commands; stimulates appetites, conversation

red: empowers, stimulates, dramatizes, competes; symbolizes passion, love

green: balances, normalizes, refreshes; encourages emotional growth

purple: comforts, spiritualizes; creates mystery and draws out intuition

blue: relaxes, refreshes, cools; produces tranquil feelings and peaceful moods

So it is really important that you get the colour right and say it in the way you intend





Scanning the Text

Scanning Text


Nielsen, J. (1997) Reading on the web. Available at: http://www.useit.com/alertbox/9710a.html. (Accessed: 23 July 2009).

When you are applying any text to a webpage you need to consider this quote. It is good practice to allow for plenty of 'white' space - don't overcrowd the text - let it breathe like a good wine!

Use bullet points to try and space out your text as well. And it's also good to give plenty of paragraph breaks so that your user can glance over the words without going cross-eyed!

Remember that reading from the screen is very different to reading from a book or magazine. Eyes become more tired due to screen-glare so try and adopt best practice when you are applying any text to your website designs.





Emoticons with a smiley

We live in a culture which uses mobile phones, and if you are anything like me - quite a lot! With this there is a huge demand for including 'emotions' within your text. Now it could be argued that a section on emotion graphics should go in the graphic design section - well it could! But I rather think that this is a type of type so-to-say, so that's why I've included it here. So what are we trying to say when we use them? It could mean a multitude of things i.e. we are happy, we are sad, we are yawning, we are winking, we are feeling cheeky, cheeky, cheeky etc.

Anyway below I've put together some of these little critters that we see bounced about all types of electronic medium - they may be embedded within an image, they may be attached to an email, they might even be on online social networking sites and MSN but to name but a few. So here you go...

SmileSmile again

SmileySmiley faces