Websafe Typefaces For Designers
Boldly Going Where No Typeface Has Gone Before : Websafe Typefaces For Designers
Remember the bygone days when web designers were limited to a handful of typefaces that were “web-safe” and could be used for the majority of text on a page? Ah, the days of choosing between Veranda and Times New Roman!
Fortunately for us, these days are now in the past. Designers now have the liberty to choose from a much larger pool of fonts (both of the free fonts and commercial fonts type varieties) in many different styles. The best part? The letters of these newly web-capable fonts will render just as well as the traditional favorites, no images or Javascript needed!
Of course you can still make use of code and script-based alternatives if you prefer (and this is sometimes a good back-up plan until other technologies are better supported) and want to keep your options open.
Beauty is no longer only in the eye of the beholder
In the past if a user did not have a font installed on their machine, they could not see it and their browser would automatically fall back on your next available choice until the list was exhausted. To safeguard against this, only the “classics” were used, i.e. fonts that can pre-installed when someone purchased a new computer.
With a revolutionary new coding technique known as @font-face, anyone with a little bit of time on their hands, CSS knowledge, and access to their web hosting account can work magic with their web typography! Essentially what the @font-face attribute does is tell a web browser to call on and use the font you specify on your website; you will need to also add in a little bit of code to tell your browser where you want this font to spear, but that is very simple!
@font-face How-To’s and Tutorials:
- The Essential Guide to @font-face
by Joshua Johnson (URL: http://sixrevisions.com/css/font-face-guide/) - font-face and Webfonts: How To Use Them
by Michel (URL: http://eng.designerbreak.com/2009/tutorial/font-face-and-webfonts-how-to-use-them/)
Of course it goes without saying that you need to know the terms of the End User License Agreement (EULA) that applies to the font that you want to use on your website. Not all fonts are licensed for use with @font-face, so be sure to check carefully! Many free fonts will allow for this kind of use, and if you’re not too clear on whether or not the designer would allow you to use their free fonts with the @font-face code on your website, you can always try to contact them and ask. Many designers who create free fonts would love the exposure or would enjoy seeing their work in use, so who knows, you might just get the answer you want if you ask nicely!
Wait, I’m not a code guru… how can I use all of these new web fonts?
If you’re no web code rockstar, never fear! Thanks to services like the Font Squirrel @font-face kit generator (URL: http://www.fontsquirrel.com/fontface/generator) you can take the fonts you have permission to use (see the licenses of your individual typefaces and individual fonts for details) and generate the code to embed in your website. You’ll still need to know your way around your website’s basic code, but this can make taking advantage of this wonderful advance in web design and typography that much easier!
So what are you waiting for? There is an entirely new world out there just waiting for you to add your voice and express your style! If you’re not sure which way is up when it comes to this new era of web typography, take a look at the references listed above; they’re a bit long but they are excellent resources if you want to become more familiar with this new technology.
[ more font related articles ]
