Web safe fonts, a survival guide January 31st, 2008

When it comes to designing your site, we know designers take care of every detail. Arguably the most underrated tool in a designers arsenal is their ability to handle fonts and take care of their typography, we’re sure you are no different.


There are some very important things to note when deciding on your fonts. Web browsers (internet explorer, firefox, safari, etc) have set amount of fonts they come packaged with on your machine, and only change if you alter your browser settings or install new fonts, which the majority of web users do not do. Keep in mind this is a very general statement, of course if your site is primarily aimed at Typographers, then they would have vastly more options open to them in terms of font selection than your average user, but lets face it how often do you get that ‘dream’ job.

So, what fonts can i use?
The most commonly possessed fonts on browsers the world over are:

Arial
Times New Roman
Courier
Georgia
Geneva
Verdana

You can be almost certain that your users will be able to see your designs how you intended if you stick to these fonts. But, what happens if you don’t want to use Arial, instead go for Helvetica? Well there are some fonts that are on most newer browsers as standard, fonts such as:

Helvetica
Courier New
Palatino
Tahoma
Trebuchet MS
New York
MS Sans Serif
Impact

There are many publications available on the web that suggest which fonts are best used, but the above are simply the divlets idea of the most popularly supported fonts.

Although web friendly fonts are essential to a great website, thats not to say you cant have fun with unique type. If you simply remember to outline or raster any font not in the list above, the divlets will convert the type into an image. The down side with this is that search engines, and people who turn off images in their browsers will not see your creation as text. It is your role as a designer to decide on the balance between form and functionality.

Go ahead and post a comment!

Questions

Emailinfo@yodiv.com

or Skype us now!

Categories

Blog Meta

Icons

  • Fam fam set

    A web classic and used everywhere on everything! Clear icons, 16x16px only.
  • Icon Base

    Reguarly updated with fresh content from the sharpest icon designers. Free downloads, but check the licenses!
  • Icon Finder

    Need an icon asap??? Icon Finder is your first stop. All free downloads, correct wording is essential however!
  • Free icons web

    Over 15,000 icons all available for free. As always check any licenses that maybe attached when you download.

Icons

  • Freelance switch

    The first stop when on the hunt for freelance web jobs. Member service, forum and insightful articles as well.
  • Freelancers.net

    An invaluable resource for finding freelance jobs in the UK.
  • Programmer / Designer

    A base where programmers look for designers to help them with their projects, and vice versa.
  • 37 signals gig board

    Freelance jobs for both designers and developers. Created by the guys who brought you Basecamp, among other things.

Online Mags

  • Colour lovers

    Finding a palette hard to come by? Colour Lovers offers millions of ideas on a community based website.
  • Feed my app

    Useful resource for finding web applications that may make your life that little bit easier.
  • 9 rules

    A forum based community for web designers and developers, to engage, discuss and promote good web design.
  • Think vitamin

    Vitamin is a resource for web designers, developers and entrepreneurs. Daily insightful articles on everything web!

Galleries

  • CSS artillery

    CSS Artillery, showcase of web standards state-of-the-art & inspirational websites from all around the globe.
  • CSS Glance

    Big bold thumbnails. Great for quickly flicking through the extensive gallery.
  • Unique css

    Judges select 8 finalist designs per month, you get to vote for your favourite and the winner receives a cash prize!
  • CSS burst

    CSS Burst is a dedicated designer resource displaying innovative designs that are 100% CSS compliant.