Back in the olden days, web designers were forced to use system (“web safe”) fonts in their designs. (Not unlike the woes of watching black & white television or walking 10 miles uphill to school each day). These were dark times for typography—an art form in its own right—with very few options for controlling online text design. Luckily for those of us who love letters, things have vastly improved in the realm of digital typography. Phew!
2009-2010 were revolutionary years in web type design. Adobe Typekit and Google Fonts made it possible to include these better looking fonts into online documents. These are the primary font management systems we use at SlickFish. Both services help us make the typography on our websites beautiful, controlled, and comfortably readable, all without weighing down the website load-time! Here is a brief write-up of each type system:
Typekit allows designers and developers a subscription-based library of hosted, high-quality fonts to use on their websites. Typekit is mostly a paid service. However, you can give it a whirl and use 2 different fonts on a single, personal website for free!
So… Google Fonts and Adobe Typekit have come a long way toward expanding the options we have for web based typography. Here’s the snag: we may find a great, original font online BUT it may not exist on our computer for offline composition and layout purposes (not without purchasing the font).
HERE’S THE GOOD NEWS! We’ve searched the web for some great fonts that you can download for FREE, create your designs and then use them online in your development! They are varied in style and can become body copy, headers, quotation or fun callouts. You decide, they’re all good.
Here’s the list of our favorite 15 FREE web fonts that can also be downloaded for all of your website design and composition needs! Best of both worlds, really.
How to: Click the name of the font to grab the physical font from Font Squirrel (you may also be able to download from Google). Then visit Google or Adobe Typekit to use online.
1) Alegreya Sans (Font Squirrel, Google)
2) Signika (Font Squirrel, Google)
3) Josefin Sans (Font Squirrel, Adobe, Google)
4) League Gothic (Font Squirrel, Adobe)
5) Quicksand (Font Squirrel, Google)
6) PT Sans (Font Squirrel, Adobe, Google)
7) Ubuntu (Font Squirrel, Adobe, Google)
8) Lobster (Font Squirrel, Adobe, Google)
9) Karla (Font Squirrel, Google)
10) Monserrat (Font Squirrel, Google)
11) Droid (Font Squirrel, Adobe, Google)
12) Roboto (Font Squirrel, Google)
13) Raleway (Font Squirrel, Adobe, Google)
14) Open Sans Condensed (FS, Adobe, Google)
15) Playfair Display (Font Squirrel, Google)
The Bubbler is a place we put all of the project bragging, inspirational, technical and sometimes witty moments which bubble to the surface while working in the design world and playing around our fine coastal city, Portland, Maine.