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.
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...
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:
Here I have used the following fonts in ascending order;
Arial
Century Gothic
Courier New
Eras Light ITC
Georgia
Myriad Pro
Trebuchet MS
Tahoma
TW Cen MT
Verdana
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)
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)
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!
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!
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.
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.
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:
Colour can add a whole lot of meaning to your graphic. Consider the different connotations which colours mean - here is just a quick list:
pink: soothes, acquiesces; promotes affability and affection
yellow: expands, cheers; increases energy
white: purifies, energizes, unifies; in combination, enlivens all other colours
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.
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...
