June 7, 2010 by Jeff
There are a bevy of tools in the typography-savvy web designer’s toolbox these days. No longer are we tied down by the age-old web safe font list; now, we actually have choices when it comes to setting & styling live type on the web. Of course, there are still issues with those using old browsers, but their punishment is dose after dose of Times, Arial and so forth.
Allow me to run down the current choices for designers & developers when it comes to live fonts on the web. Some of these are free; some are paid; some are easier to implement than others. It’s up to you to make the choice as to which tool is best for you and your project, but I’ll share my opinions throughout. If I missed any that you use on the regular, let me know in the comments! *note: each title and image links to the service’s website.
free
This CSS3 selector is probably the most widely-used tool for font-embedding today. It’s super easy to implement, and you can use any open-source font whose license allows for font-embedding.
Essentially, you upload the font to your server and link to it within your CSS file. For what it’s worth, I almost exclusively use FontSquirrel’s @font-face tools, which include kits and generators. If you’re overwhelmed by the amount of choice when it comes to @font-face fonts, check out the 10 Best @font-face Fonts.
free
This service from Google is even easier than @font-face to implement, although their list of available fonts isn’t so big (yet). It’s a similar idea to @font-face, but you don’t have to host the font on your server. You just throw in one line of code in your HTML and define the font in your CSS. That’s it.
Hit the jump for more ways to better your web typography! (more…)
Category: Articles, Fonts Tags: @font-face, cufon, embedding fonts, font-embedding services, fontdeck, sIFR, typekit, web fonts | Comments (8)
February 5, 2010 by Jeff
As soon as I learned about the @font-face CSS declaration, my life as a designer changed permanently. A whole world of possibilities are opened up by this feature – no more relying on Arial, Verdana, Georgia and all the other “web safe” fonts. Not that there is anything inherently wrong with those fonts, but after seeing them day after day on the web, I know I long for a bit of variety.
However, just because a font is @font-face compatible doesn’t mean it’s necessarily good for the purpose you want to use it. The obvious examples are there – don’t use display fonts as your body text, for example – but some fonts just aren’t great for the web (or great at all… or good… or passable).
So I’ve come to save the day with my opinions. Here’s the 10 Best @font-face Fonts, broken into Display (aka Heading 1, Heading 2 etc) and Body listings.
DISPLAY
Use these guys for your H1, H2 etc tags – but if you set your body text in them, I’ll come right through the internet and beat you up.
The Museo family has exploded in popularity, and with good reason – it’s a well-designed typeface all around, unique & usable with character. Museo & Museo Slab are great options for headings on your site using the @font-face declaration.
Hit the jump for the rest of the 10 Best @font-face Fonts! (more…)
Category: Articles, Fonts, Freebies Tags: @font-face fonts, best @font-face fonts | Comments (5)
December 14, 2009 by Jeff
Every once in a while, a design calls for a somewhat sketchy, hand-drawn font. Perhaps it’s a gig poster; perhaps it’s for an !!ENERGY DRINK!! company; perhaps it’s something completely different. As a designer, chances are you usually have a ton of work on your plate and can’t always hand-style lettering unique to each project. That’s where hand-drawn fonts come in.
Some are sketchy; some are based off of well-known fonts; all are great. Check out this list of 10 Awesome Free Hand-Drawn Fonts! If you like it, don’t forget to check out our list of the 10 Free & Amazing Display Fonts too.
It looks like Rockwell, but sketchy! Great for display.
This typeface has a nice mix of classy & old-timey elements. Legible & visually interesting.
Slightly grungy, but not so angry and unreadable like a lot of grunge fonts.
Hit the jump for more free hand-drawn fonts!
(more…)
Category: Articles, Design, Fonts, Freebies Tags: Fonts, free, hand-drawn, handwritten, sketch, sketchy | Comments (14)
November 16, 2009 by Jeff
Graphic design has an amazing community. Comprised of both the vets from the pre-computer era to the newbies who were raised on the internet and computer-editing applications, there is a huge gamut of people sharing their work and expertise online. I know when I was starting out in design, I found tons of inspiration and information from sites like JustCreativeDesign, DesignNewz, and more. If there’s one issue, however, it’s that there’s almost too much great information out there. I know – good problem to have, right?
But for those designers just starting out, or for those designers who are considering getting into design, the amount of information can be a little overwhelming. Couple this with Paper Leaf’s desire to give back to the design community, and this is what you get: the All-in-One Graphic Design Starter’s Kit. The idea behind this kit is for it to be a one-stop shop for those getting into design – and for it to be completely free. It includes free software (for both Mac & Windows – photo/raster editing, vector editing, and HTML/CSS WYSIWYG editing), eBooks, textures, vectors, brushes, and awesome fonts. If you were to have no idea where to start, you could come here, download everything, read the eBooks and corresponding software guides, and have a great starting point.
This “kit” was originally intended to be a zipped file containing all of the links below; however, it clocked in at about half a gigabyte, which I thought most people wouldn’t want to sit and download (plus it would put a strain on our hosting). Thus, I’ve broken down the kit into the elements that made it up, and linked to them all below – and making this All-in-One Graphic Design Starter’s Kit a series of links and downloadable sections, which allows people to pick and choose what elements they want.
All of these items are free, open-source and legal for both me to share & you to download – however, please don’t claim any of them as your own. All of the items in this design kit required a lot of time & effort from their respective creators, so give ‘em some love! Hit the jump for all the amazing links and downloadables that make up the Free All-in-One Graphic Design Starter Kit!
(more…)
Category: Articles, Design, Fonts, Freebies Tags: brush, Design, Fonts, free, graphic, kit, software, vector | Comments (19)
October 19, 2009 by Jeff
There are a lot of free fonts out there on the internet these days – but tracking down the well-designed ones can be quite the task. Since I’m such a nice guy, I thought I would round up the top ten free display fonts for you! Top ten in my opinion, of course.
All these fonts are free to download and use. They’re not all specifically display fonts, but display use is where they shine. Enjoy, share, and subscribe to the RSS feed!
Here we go!
League Gothic is sort of a re-issue of a font that recently became public domain. It’s gorgeous & versatile – go pick it up!
Playful but still well-designed, the Folk font lends itself great to show posters and organic-style design.
Hit the jump for more free display fonts!
(more…)
Category: Articles, Design, Fonts, Freebies Tags: display, font, free, typography | Comments (8)
