Pictos Icon Font Server

[pbhjpbhj]

Using a font to provide icons on your website. It appears that the Pictos way is a font-replacement method using js? My first thought is that this should be relatively easy to replicate using http://thenounproject.com (or similar) as the source of the icons.

I like the idea: kind of an extension of sprites to using the font file as the sprite holder; not sure if that's any more efficient though due to the cross-browser issues of webfonts.

[enra]

It's a custom font set, using css @font-face like Typekit, and Google Fonts are for example.

So so just like characters in a font, the icons can use the same text effects like any other text, like size, coloring, gradients, text-shadows and etc, which can save you a lot of time and maybe bandwidth too.

We used Pictos fontset on our RailsRumble app (http://splendidbacon.com) a while back and it was much better and faster experience for me, than building the different icon colors & sizes in Photoshop like usually.

[drewwilson]

Nope :) There is no JS involved. Its a straight CSS file. Browser detection is done on the server by checking the headers. it's lightning fast :)

[cemregr]

Drew is one of the most prolific designer/developers around. I wonder if he ever sleeps. You should check out his other projects too: http://drewwilson.com/

[ned]

Interesting service, and very well executed.

The one problem that I have with pictograms-as-fonts is anti-aliasing. The designers that I work with spend hours to make their icons absolutely perfect at every pixel size that they'll be displayed at. This is particularly visible when the icon has horizontal or vertical lines. Most of the time you'll want them have a hard edge, and with anti-aliasing you can never be sure you'll get that result.

This will change in a few years when all our screens have high pixel densities, but for the time being I'm sticking with PNG sprites, with hand-tweeked pixels.

[drewwilson]

You can use this CSS rule to make them look like Photoshop:

-webkit-font-smoothing: antialiased;

only works in webkit, which is most all mobile and chrome/safari.

[resnamen]

What are the advantages in using a remote service for this vs. hosting them yourself? I'm somewhat averse to taking out additional dependencies on other services if no compelling reason exists.

[drewwilson]

Everything is cached and served very quickly. The main advantage is you can change the icons on the fly at no additional cost. If you update your interface, add new icons or remove some, you can make those changes in that app and you don't even need to grab a new code snippet.

If you want to serve them yourself, that option is there as well. Thanks!!

[jakozaur]

The client list seems to be impressive, but I haven't seen those icons on any mentioned customer... is it true at all?

[drewwilson]

Yes it's very true. All the customers in that list are people who have purchased my icon sets. Some of them use then in internal tools, some use them for their public website or mobile apps. Thanks!

[hhastings]

Pictos & Pictos Font have been around for a while, and my bet is that the vast majority of UX/UI Designers know of Drew Wilson's work. This is an extremely clever solution for an age old problem: As designers, we can now enable our clients to swap out icons to match their updated text/copy content.

[teeny]

It's a cool idea; but why they are using a png sprite for the icons on their own site?

[drewwilson]

Ya good question :) I built the marketing site before the service was finished. I wanted to launch quickly, so decided to use images instead of the font so I could focus on getting the app finished. Also, I sell the icons as PNGs and vectors, so it's showing customers that as well. Thanks!!

[blakeperdue]

Yeah, very strange that they wouldn't want to show off their product by actually using on their site.

[armandososa]

This is a great idea. I already bought Pictos icons and fonts twice (for personal use, and for my day work) and I always thought that it would be nice to be able to have a tool that allow me to use a subset only.

[notatoad]

Am I wrong, or is this a terrible rip off? Anybody who has the need for this should be able to host a single $19 file on their site for minimal cost.

[cleverjake]

if you only want two files of the entire set, its better for your bandwidth and the clients speed to have a custom font that only includes those two icons. It is fairly trivial with fontforge, but a lot of people don't have the time and/or ability to do it.