Until a few months ago I thought that designing fonts and being so careful about choosing fonts for a website was the realm of slightly weird people who spent too long by their screens. Now I’m an avid “font fan” and spend time choosing every font to get maximum effect. Why? you ask. The answer is simple, I love the way I can customize my text!
What’s the fuss all about? Fonts can also be used to create a powerful impact on your viewers, check out these great showcases:
The colourful Showcase of Beautiful Typography Smashing Apps
Typography Inspiration Showcase Designm.ag
Enlightening Typography Artworks, portraits & Typefaces Box Model Junkie
Be Inspired by Text Art and Typography Nenuno Creative
It’s important at this stage to remember that many people don’t care too much about which font is used as long as it works and the content is good.
I really suggest you start choosing fonts carefully and collecting some useful ones. But where on earth do you start? How do you allow people to view the fonts you want them to? Be not afraid for this article will give you a (very) quick beginners guide to typography in web design.
1. Getting your font across… not everyone in the world has the same computer with the same fonts. The first thing to know is how to use a font on a website that the viewer may not have already installed. It’s pretty simple and well supported. Use the @font-face CSS rule. See the full article for some helpful advice on getting it working!
NOTE: make sure the font you want to embed can legally be embedded; it’s always good to check the license first! A good idea is to go for OFL Licensed fonts, the Open Font License allows for embedding on sites.
I highly recommend The League of Moveable Type for an amazing array of free OFL licensed fonts!
2. Following on, fonts come mainly in two formats, OpenType and TrueType fonts. When writing @font-face declarations (as their called) make sure you pick the right one or it won’t work! I’ve made this mistake loads of times, especially when copying and pasting. That brings up a very good point – when using embedded fonts make sure you test your site on a computer that doesn’t have those fonts installed before going live! I’ve had occasions where I’ve loved the look of my site and not done anything and then found out it looks completely different! (More so when some fonts’ 14px is not the same size as Arial’s 14px!)
3. It’s all too easy to get carried away and spend hours looking for fonts and choosing and whilst this works for specialist projects and posters/headings for content text it’s far better to focus on content itself!
Sometimes the right font can make all the difference but as long as the font works I will carry on reading and won’t moan.
4. Fonts are peripheral to your content. There’s no point having a superbly crafted amazing font for your content if you need to squint and tilt your head to read it. I urge you to think about choosing fonts that work and that fit with your content and style. For example, you probably wouldn’t write your CV in “Alien Encounters” (MS Word font) because it can be hard to read and looks like your printers gone wrong. You can see the difference below between Baby Kruffy and standard Sans font. Which you would rather read on a CV?
5. As I said, think about what you want to portray with your font and base your search for a font around that. If you haven’t yet got a website “style” by all means base it around your font but try to ensure you don’t get odd clashes of grunge here and really clean there as it can confuse people about the impression you’re trying to give. Two popular styles are Grunge and Clean:
6. Finally, enjoy finding and using new fonts but remember spend time on what you’re using the font for as well!
I’ve found that fonts can make a big difference and add uniqueness to a site and it’s always good fun when you find a perfect font for your project. I also feel that finding fonts and trying out new styles of design with them is a great experience and adds a whole other level to design whether it be websites, posters or anything else!
Have fun and let us know what exciting free fonts you’ve found and use in your projects!