The font editor for everyone. Fontello - easy iconic fonts composer. Avería – The Average Font. Symbolset. Font Awesome, the iconic font designed for use with Twitter Bootstrap. Typekit. Flat Icons & Icon Fonts. Icon fonts are awesome.
Other than the fact that they have to be single color, they are superior to using images as icons in every way. But which do you choose? There are loads of different sets out there. I'm going to attempt to round them all up here and keep this updated (this post has already been updated several times). Pictos Pictos is the icon font that really popularized this whole idea. Symbolset Symbolset is unique in that they turn words into icons for you. Modern Pictograms v1 is free on Font Squirrel. v2 is paid with the complete set at $25 or individual icons as low as $0.50.
Pictonic Pictonic also offers a hosted icon service and offers unique pricing ($0.59 per icon). StateFace StateFace has all 50 U.S states as an icon font. Geobats GeoBats is an icon font of the world's countries. IconSweets 2 Also has a free predecessor. Erler Dingbats A drastic improvement to the standard Dingbats. Tipogram CleanIcons Meteocons For the weather! Ecqlipse 2. FRUSTRO typeface on the Behance Network. Subtle Sans – A free font by Atle Mo.
StateFace. A font you can use in your web apps when you want tiny state shapes as a design element.
It's designed to be used at small sizes, and the shapes have been highly simplified to make for a really small font. All 50 states plus D.C., Puerto Rico and a wee continental U.S. map fit in about 22k, and they look great on Retina displays. At ProPublica we're using it in our super PAC tracker. Download: ZIP | tar.gz | Source Repo. Icon Fonts are Awesome. Because you can easily change the size Because you can easily change the color Because you can easily shadow their shape Because they can have transparent knockouts, which work in IE6 unlike alpha transparent pngs.
Because you can do all the other stuff image based icons can do, like change opacity or rotate or whatever. You'll be able to do things like add strokes to them with text-stroke or add gradients/textures with background-clip: text; once browser support is a bit deeper. The icon font used on this page is Fico by Lennart Schoors then ran through IcoMoon for custom mappings. Here's a large collection of more choices. For quick usage, the code is below. How To Use To Enhance a Word Stats <h3><span aria-hidden="true" data-icon="⇝"></span> Stats </h3>
5 of the Best CSS3 Font Tools. Fonts have made the most dramatic visual impact on the web since graphic support was added to browsers.
A few years ago, it would be impossible to find a website using anything other than Arial, Verdana, Tahoma, Times New Roman or Georgia (or, heaven forbid, Comic Sans). Cufón - fonts for the people. Font Awesome | Bootstrap. Beautiful web type — the best typefaces from the Google web fonts directory. Lucius Annaeus Seneca60 AD Among the numerous faults of those who pass their lives recklessly and without due reflexion, my good friend Liberalis, I should say that there is hardly any one so hurtful to society as this, that we neither know how to bestow or how to receive a benefit.
It follows from this that benefits are badly invested, and become bad debts: in these cases it is too late to complain of their not being returned, for they were thrown away when we bestowed them. Nor need we wonder that while the greatest vices are common, none is more common than ingratitude: for this I see is brought about by various causes. The first of these is, that we do not choose worthy persons upon whom to bestow our bounty, but although when we are about to lend money we first make a careful enquiry into the means and habits of life of our debtor, and avoid sowing seed in a worn-out or unfruitful soil, yet without any discrimination we scatter our benefits at random rather than bestow them. Typekit. Google Webfonts that Don’t Suck. Webfonts services like Typekit are great, but for a lot of cases they’re just not practical.
For example, if you’re developing a WordPress theme, you can’t ask potential buyers to buy a monthly subscription, and you can’t bundle a font with the theme either unless it’s free. For those cases, Google’s Webfonts service remains the only way to use non-standard fonts in your designs. By the way, this post was inspired by Matthew Butterick’s own critical look at Google Web Fonts. Matthew makes some good points, but overall I still think Google Webfonts is a great initiative.
That being said, I can’t deny it’s fallen victim to its own success: the directory is now overrun with fonts of dubious quality, which means it can be hard to pick the right one. Cramped typography and no breathing room makes for an ugly experience.