Typophile

frontends/interfaces for using freetype in a web app

thefsb

i assume that freetype2 can do a decent job of rasterizing type. but using it through the GD extension in PHP i’m not satisfied. attached is an example with too much space around the numeral 1.

i’m guessing that ft2 could do better but the interface (i.e. imagefttext()) provides minimal control.

what other freetype front-ends should i consider? command-line tools, perl/ruby scripts, php extensions etc. are fine but i’m not going to program my own front-end in C.

alternatively, are there other rasterizes i should consider?

AttachmentSize
example.gif4.18 KB

Are you sure that space around the numeral 1 isn’t due to the font metrics themselves? Fonts with tabular figures always have more space around the 1 because the numerals are monospaced. To set text and headlines I would use a font with proportional figures.

stephen, thanks for the tip. i’m embarrassed to discover that i failed to consider this possibility when selecting type font.

this is ITC Highlander® by ITC Std Bold Italic. i just generated this sample from the linotype web site.

so the numerals are not exactly monospaced but the pitch of the 1s on the top row surprisingly low, lower even than that of the 2s. and the 1 at the end of the last four lines looks like the beginning of a new word.

i’m really not sure what to make of this. i’ll be very disappointed if i need to scrap this choice of font.

I think the vast space around the ’1’s indicates that Highlander’s figures are indeed tabular, as is the case with most fonts in the ITC range. Not sure what is happening in the ’2’ and ’5’ rows.

Here are two alternatives to consider that have proportional figs:

ITC Legacy Sans
Sauna

You’ll note that these are oldstyle or text figures, which means they descend and ascend like lowercase letters. Your options of fonts with proportional lining figures (numerals of the same height) will increase substantially if Freetype can take advantage of the figure options in OpenType fonts. Can it?

hi stephen,

thanks. and again, i think you’re right. concerning the odd misalignments in the sample i posted above, i’d guess the linotype.com sample renderer left aligned bounding boxes rather than the glyph origins.

one important application i have is radio station IDs as web page title in a banner box. surrounded by a 4-capital call sign and a 2-capital waveband, oldstyle figures for the frequency look rather odd — as though a beret or turtleneck-wearing designer might have been involved;-)

i read the freetype documentation now. it loads font files, handles their info and renders glyphs. laying out a string is done by the library’s client so my original question was confused. GD’s string renderer accepts utf8 and html entities so i could use osf if i really wanted to.

but i think basically GD/freetype are doing what they are supposed to do given the font’s design. my obvious choices seem to be: 1) choose another font; 2) find another text layout library that allows some kind of kern tagging of the string (i looked and didn’t find); or 3) keep the font, GD and freetype and use a hack in my php script to effectively trim the bearing and advance of 1 numerals and perhaps decimal points.

option 3) from my list above wasn’t so hard. i shaved 8% and 10% (of ptsize) off the bearing and advance (respectively) off numeral 1. and 3% and 0% from decimal point. looks ok now.

critique, anyone?

Personally, I think Highlander looks a little dated in this context, but you fixed the spacing.

looks dated to me too. my upcoming logo looks even more dated. if i could afford to hire one of these artists to design my site, i would:

“There’s nothing so fashionable as nostalgia.”

Captured from web.archive.org on 6 Dec 2008. view this capture