width and size of icons in a web-font context (Iconic and Entypo as test cases)

[krisbulman]

I noticed some inconsistencies between iconic and another font-icon called entypo.. seems like some standards need to be developed around font-icons, as every set seems to have it's own quirks.

Here is a screenshot of 2 fonts, with the exact same css set up, font size for both icons and text is 1.3em, and a margin-right of 10px. I have added the other font for comparison of pros / cons only, and to illustrate the differences.

https://skitch.com/krisbulman/8kgg9/iconic-vs-entypo

Pros/Cons I noticed from a general dev/designer perspective of using each font in a standard html template, added via css:

Iconic

Pros

• Line-height doesn't get in the way (much)
• The bottom of each icon generally aligns with text

Cons

• Widths are inconsistent, making it difficult to design list items with icons
• The standard size is very large, and requires decreasing the font size for display next to text of the same size

  Entypo

Pros:

• Width of the icons seems standard between all icons, causing no problems with lists

Cons:

• The standard size is just a tad too small, and requires increasing the font size for display next to text of the same size
• Line height seems to be really getting in the way, it is way too large.. and forces the requirement of a line-height decrease
• The set is just a bit too high, and does not align with text beside it

[danielbruce]

First, I hope you like the pictograms despite its shortcomings.

Second, I'm a graphic designer, not a developer and the pictograms are carefully design to work not only as a web font but also in many other situations.

The Entypo pictograms is optimized for a size of 20x20 px at 72dpi. As a graphic designer i felt that 16 px is to small and 32 px to big and by making them 20x20 they would also render well at 15x15. So it is at that size as the pictograms should look as sharp as possible.

At a size of 20x20 all pictograms are also designed to have a even hight and width so they always align nicely in the middle of—let's say—a square 30x30 px button.

The aesthetics of the pictograms has also been high importance to me apart from the obvious of them being functional. So my approach has—in many cases—been more optical than mechanical in getting the perfect result.

The font's UPM size is 1000—as it should be for an OpenType font. So to achieve the same result when using Entypo as a font as you get when using vectors—or a result as close as possible—I had the option of making the glyphs either 1000 or 500 high and so they should render perfect at 20pt or 40pt. I went for the second option. None of the options would render the glyphs at a perfect size next to a text in the same size.

The pictograms are also design to vertically alight to middle in relation to each other.

I'll see what changes I will make to the font in the next release. Better hinting and 20-30 new glyphs will be a part of it for sure.

Maybe I can send you some stripped down versions playing with the dimensions for you to try out. Would you be up for that?

Also. I'm on parental leave with my two daughters so I don't find to much time to work on this right now.

Cheers

[danielbruce]

Here you can see what I was talking about. Size 20 and 15, as a part of a button and alignment.

http://cl.ly/3l0e3y220y2X0b1E1r0H

[krisbulman]

I'm willing to take a look at whatever you have to get things moving. I am off to Denver next week for Drupalcon, but after that I can get down to business.

Personally, I think your approach of an even height and width has attributed to the reason they work well in lists, however they do hover above the baseline. It just goes to prove I need more test cases than just lists.. I will test with buttons and size variance as well.

Excited to hear the thoughts of @somerandomdude around the variances and approaches that can be taken from here..

I certainly have a lot to learn about fonts, mostly what I know about them has been from a front-end developer perspective, as my initial post likely depicts. I'm a great believer in font icons (pictograms), and I think they will ease the pain front end devs have to endure with upcoming hi-res monitors on the web (most notably the iPad HD).

The Compass extension I am building is being created to help front-end developers who use sass/compass deal with implementing pictograms, by writing less css but still giving control over them (the control part I have yet to get to) and by deploying icon sets.. The struggle I have is the great variances between icon-sets .. and as you can see from the screenshot there is definitely a wide variance.

I am willing to just adjust the code in the extension to deal with each set, but I would feel much better contributing back to the existing projects and to the overall standardization process if there is one, at the very least I may have to smooth out the fonts just for the extension itself if I had the source files (which i do for iconic).

I'm willing to help Entypo get set up with git and move the project more into the realm of Iconic if that's desirable.. as I'm sure @somerandomdude would be willing to at least provide input as well. Tis the nature of open source, right?

[puzrin]

There are several ways to allign icons around text for nice look. This problem become essential, if you need to conbine several symbols from different fonts, like in fontomas. As result - we did convertor, to rescale Entypo.

Personally, i don't use original fonts "as is". But i'd be glad to get advices about alligments, that should be supported by fontomas.

About original formats - i'd prefer "fullsize" (alligned to acsent/descent) + SVG. That's the most convenient for futher processing.

[danielbruce]

Good to have you here Vitaly.

So how should we move forward with all these issues.

[puzrin]

I think, by the end of this month i'll be able to provide scripts to quickly experiment with glyphs scale/alligment. Then it will be possible to find several optimal settings, without manual work.

[danielbruce]

Sounds great.

[somerandomdude]

Hey guys, I just wanted to thank you for all the effort you're putting into this and let you know how much I appreciate it. I'm having one hell of a time wrangling FontForge to get it what I need to do, so any help in that area would be great.

I am more than happy to contribute however I can. This is exactly what I was hoping to see by open-sourcing Iconic, so I'm pretty stoked about this. Thanks!

[somerandomdude]

Made a significant push on the font sizes which should alleviate this issue.