Wolf’s Little Store

So I was making a design, and I needed a simple star shape.

First thing I did was to look through Photoshops’ custom shapes. Photoshop actually has a star in their shapes list but it’s the wrong kind of star. It looks like a star you would find on a product meant for kids, like a friendlier kind of star.

Then I remembered Gruber uses stars for his permalinks, and with a little help from Firebug I checked the font stack on them. For those who don’t know, a font stack is a comma separated list of fonts in CSS. (More at 24ways).

"Hiragino Kaku Gothic Pro","Osaka","Zapf Dingbats"

If you just copy the star over to Photoshop in a standard font like Arial or Verdana you will see the unknown character thingie (looks like a small box). So the solution to getting a star quick in the Photoshop is using any of these three fonts and copy the star entity (★ which renders as ★) from a rendered html page. These fonts come with Mac OS X.

More Dingbat HTML entities can be found here. Most of them are marginally useful at best, but some have their time and place to be used. I can see the check mark ( ✓ ) being useful in a CMS. The devil is in the details, and this detail doesn’t involve an extra http request, as opposed to using an image that looks exactly like an entity.

Also remember if you are delivering the design to someone else, convert your star characters to shapes. Your Windows-using designer colleague will be grateful his copy of Photoshop doesn’t complain about a certain “Hiragino Kaku Gothic Pro” font that is missing.

Update

As Danshort.com points out, these HTML entities don’t render very well on most browsers, in fact, testing IE6 and IE8 and even Firefox Windows, very few actually rendered. So their practical use will be very limited. Too bad!

• Category: webdesign
• Back to the overview