Converting print fonts to web fonts

Jared Benson's picture

Excerpt from GigaOm:

"On Friday, I heard Jonathan Hoefler, one of the founders of the massively respected type foundry Hoefler & Frere-Jones, explain exactly what it takes to turn a typeface designed for print into a real web font. And it was amazing.

He was appearing at Ampersand — a conference in Brighton, England, dedicated to the art of web fonts — where he stood on stage and announced that the studio has now converted 100 percent of its typefaces for use on the web.

The news was greeted with a sage nod by attendees, but in truth it should have been met with crazed whoops, wild cheers and yelps of astonishment — because it’s really a task of herculean proportions."

Full article here.

Comments

hrant's picture

Cool. (I guess type designers are naturally cool-tempered. Which does not mean they're normal. :-) I can't wait for the conference to release the full proceedings.

Also, some photos here:
http://www.flickr.com/photos/ohbendy/5845143906

hhp

Bendy's picture

It was a different story from where I was sitting: the audience gave a huge round of applause and whoops! Jonathan had already demonstrated the amount of work refining outlines and putting in some crazy 9 million (?) hints. It really made it clear to me that type designers are working incredibly hard in a dramatically expanding industry with groundbreaking technologies to create new possibilities for a new era of web typography. To echo the words of so many others at the conference, it's an incredibly exciting time to be a designer.

hrant's picture

It's also a time with less time to think about the most important thing: notan. :-(

hhp

Bendy's picture

I don't agree, screen rendering needs to pay close attention to the contrast and grey values. Or did you mean something else? 'Notan' is a troublesome term.

hrant's picture

Yes, but "you can't get there from here"; screen fonts are ideally made directly from pixels. Tellingly Hoefler apparently stated that Gotham needed particular design changes to still look like Gotham on screen. Since WYSIWYG is an illusion, trying make a screenfont mimic a print font compromises notan.

hhp

Bendy's picture

Ah, that's not quite what I understood. In context, Hoefler (and David Berlow) was talking about a typeface really being an abstract idea that is realised in different technologies by different 'design systems'...in that model the screen version is not trying to mimic the print version, but remain true to the underlying concept, just using a different design system.

At the same time, I totally understand the need to be driven by pixels (or sub-pixels). The question Hoefler asked was whether the screen font was still Gotham, and I guess the answer is as long as it looks more like Gotham than print-Gotham does on screen, it's a successful design system.

hrant's picture

I certainly agree that the best way to think about a typeface is as an idea. But my main point above was exactly that so much time needs to be spent on the largely-mechanical adaptation to new rendering methods that there is less time to think about new ideas. I see now that I didn't express myself clearly (maybe because I'm working with my belief that we're still far from good notan).

> as long as it looks more like Gotham than print-Gotham
> does on screen, it's a successful design system.

Since I do believe that design is about balancing compromises, I have to agree with that direction of thought, but I do think that bar is a little too low (and I suspect that Hoefler is himself pickier than that).

hhp

Rob O. Font's picture

Ehem... there is no Slanta Clause, i.e. a pixel size-independent italic angle that is any better than any other... does not exist, other than 0 and 45, not great italic angles ;)

hrant's picture

But we're talking about a pixel-size-dependent angle, meaning a slant of atan(1/n) where n is an integer greater than 1. In Patria for example n is 16, so the angle is ~3.58 (which is very slight, but I'm like that :-). Especially in b&w rendering (which still exists, so we can't ignore it) this method gives better results than choosing some integer degree. Also, when I'm working on a slanted design I can move a vertex one em laterally and n ems vertically and I won't be changing the angle. And most of all, there is no reason to stick with integer degrees in a digital world (except for extreme revivalism).

hhp

eliason's picture

In context, Hoefler (and David Berlow) was talking about a typeface really being an abstract idea that is realised in different technologies by different 'design systems'...in that model the screen version is not trying to mimic the print version, but remain true to the underlying concept, just using a different design system.

Sounds Platonic!

Rob O. Font's picture

>But we're talking about a pixel-size-dependent angle,

Hrant, I don't know what you are talking about. I do however know what I am talking about.

hrant's picture

I thought what you wrote was about the angle of inclination of italics - something I addressed in the comments of the Flickr slide that I linked to: http://www.flickr.com/photos/ohbendy/5845143906

Hoefler apparently said he changed the inclination of his italic to better suit the screen. I said I'd been using what Ben is calling "rational fraction" angles -for both screen and print fonts- for over a decade, implying that I think it's a good idea, and in my previous post I tried to explain my reasoning.

hhp

Bendy's picture

Hoefler explained that the original Gotham italic resulted in a slope with uneven steps like 2-3-2-3 which they corrected to 3-3-3-3. My understanding was that converting to a rational angle helped this?

vernon adams's picture

The licensing issues of letting loose all their designs onto the web is waaaay more interesting than the technical issues :)

Bendy's picture

That depends what you're interested in ;)

kentlew's picture

. . . uneven steps like 2-3-2-3 which they corrected to 3-3-3-3. My understanding was that converting to a rational angle helped this?

Yes. But what David was saying is that there is no single magic rational angle that will do this for all rendered sizes. The above illustration works much smoother at 12px, sure, but will again give an uneven stairstep at 10px or 11px for instance.

It’s somewhat size-dependent. So, if you're working with a single outline, it’s a matter of choosing your poison.

Bendy's picture

Wow, yes, I hadn't considered that. Goodness, this stuff is complex.

hrant's picture

Ben, that's exactly right. And a "2-3" isn't so bad - it typically gets much worse.

Kent, that's not entirely accurate. When you have a "rational fraction" inclination the worst that can happen is the outermost step gets truncated; plus if you have a head-serif, you don't notice a thing.

And you still have the ease-of-editing that I mentioned. Again: why use integer angles? What's the advantage of 11 degrees over 1/5 = ~11.31 degrees for example?

hhp

Bendy's picture

Well, wouldn't the first one in my example also represent by a 2:5 rational angle?

hrant's picture

You mean in terms of editing? Yes, good point.
But no [practical] integer degree converts to such a handy fraction.

hhp

Bendy's picture

I'm just thinking out loud really. I'm gathering that a rational angle is better for even steps; but, in fact the 2-3-2-3 slope also describes a rational angle of 2:5. And 2:5 would be perfect if you're looking at a 10px height. But at 12px we have the 2-3-2-3, which isn't just truncated, it's uneven all the way along. So it all leads in a circle, doesn't it?

vernon adams's picture

>Hoefler explained that the original Gotham italic resulted in a slope with uneven steps like 2-3-2-3 which they corrected to 3-3-3-3. My understanding was that converting to a rational angle helped this?<

actually it's 2-3-2-3-2 (12) and 3-3-3-3 (12) in the example - it's a 12px high stem, the first stem has a 5 x 12 px box, the second stem has a 4 x 3 px box (hence the difference in gradient angle)

The formula (so called) only works when the height of the glyph part in question can be sub divided equally AND still create the same-ish slope angle, eg. 9, 12, 20, etc What was suggested for all those other intermediate pixel sizes? That's where it gets interesting :) Also what was suggested for a font where the x-height obeys the formula but the baseline to Cap height does not? or vise versa?

Not exactly ground breaking technique but prob good for a bit of conference 'wow' effect :o

It depends at what large px height you consider all this gets irrelevant (28?, 32? higher?), but if you at least nail 5 or 6 heights down amongst the 'small sizes' like this then at least the intermediate px sizes have something well balanced to go to/from.

and isn't it pretty much WindowsGDI essential only? far less an issue with the 'other' render engines.

hrant's picture

> the 2-3-2-3 slope also describes a rational angle

That's why I've been putting "rational fraction" in quotes - that's not how I refer to my idea. I call it "integer slope", meaning 1/n where n is an integer.

> 2:5 would be perfect if you're looking at a 10px height

1) No "perfect". Never "perfect". :-)
2) It's pretty steep (although I admit that might help onscreen).
3) I'd rather have an integer slope with a truncation, but in this case maybe at both ends, so 2-3-3-2.

> It depends at what large px height you consider all this gets irrelevant

Depends. To me: for a-a, high 20s; for b&w, much higher.

hhp

Rob O. Font's picture

"and isn't it pretty much WindowsGDI essential only? far less an issue with the 'other' render engines."

Steps is steps. This voodoo is rendering independent or it's doodoo.

But yes, what works for the l.c. n at one size does not work for h at that size, much less the Icelandic LC thing that ascends and descends and angles vary to optically appear alike, and this wasn't an isolated case if WTF I felt listening to that presentation.

" Goodness, this stuff is complex."

Not this, this is simple.

For me though it is never so simple, I walk a thin line day after day, year after year, between support for colleagues, and the font public's right to know the truth about web fonts. I have all the stab wounds in the back to prove my vigilance, and am sure to have more soon:)

dezcom's picture

Keep up the good work, David! and stay away from The Forum on March 15 ;-)

Syndicate content Syndicate content