TED HARRISON: We get calls asking: How do I make my fonts in colour, or greyscale? Well, you can use XML and PNG and suddenly you get all the things you don’t get in outline fonts. But photofonts suffer from some of the same drawbacks as bitmap fonts, especially when it comes to the Web.
One problem is scalability. They aren’t. We’ve managed to get around that to some degree. They are scalable within some limits. On the Web, bitmaps are just graphics; they’re not recognized as text. So what we’ve done in our latest iteration is to get around that problem. But anyway, once you make a photofont you have to be able to use it somewhat or other, and like in previous version, they’re just bitmaps as far as most page-layout or word-processing or other applications are concern.d So we had to figure out how to make them work, at least sort of, in these programs. We’re developing plugins. The first one is for Photoshop. We have a couple of them, in fact. One is free, our basic plug-in, called Photofont Start. (Photofont file: .phf extension, XML+PNG, embedded or linked pictures, Unicode, pair kerning.) Plugins for Dreamweaver and so on by the end of the year.
ЮРИЙ ЯРМОЛА: I found a few nice samples of colourful fonts physically put on your clothes. I think it’s a very good example of how photofonts can work. So we open this picture in BitFonter. Then when I want to remove the white background. It’s not the best thing, but it works to some extent. Then I want to automatically separate shapes into individual cells. Then I need to adjust some baselines. Most of them are automatically detected, but they’re not really precise. Then I want to put all these glyphs into a font. Font sizes are automatically created. Here we have our characters.
To convert them to lowercase characters, I don’t need to switch to all caps. And I also need to make a space. Now we an check how this font works (shows demo of live typing of text). Now I ant to create a photofont out of it and try to use it in Photoshop. (Saves as SampleAlphabet. Adjusts a few boundary lines. Saves.)
I want to copy this to a special location so it will be accessible by Photoshop and other tools (a certain folder in Library). (Creates new picture and layer. Selects Photofont Start from Filter menu. Types some words, selects new font, doesn’t work. [TWARDOCH: You can have image data inside the .phf file or with an extra PNG file. I’m using the other settings.] Redoes the export. It works.)
If you pick a size bigger than the root size, our algorithm produces good results up to 150% of the point size without serious artifacts. (TWARDOCH: The InDesign plug-in will let you edit the text; other applications just treat it as an image.)
There’s not much new about photofonts yet. We’ve been showing that for two years later. (TWARDOCH, who never shuts the fuck up: You just released a version that is ten times faster than the old one.)
HARRISON: How to make type on the Web look like you want it to look for the person at the other end, so that basically yo aren’t dependent on the fonts that are on the user’s computer as to how your Web page looks. There have been a lot of previous attempts – Bitstreams’s Fontplayer, Netscape’s Dynamic Fonts, Microsoft’s font-embedding tool [does not mention sIFR] – but they all suffered from incompatibility with other operating systems or browsers, so one of them has really become overwhelmingly popular.
And of course they also have the same restriction of non-Web fonts have that they’re not in colour. So in 2001 or so, Mike Davidson of ESPN.com had the bright idea that Flash could display text any way he wanted it, so why didn’t we just use Flash to display text rather than relying on the browser. He wrote a custom Flash component that, with a little JavaScript, allowed him to do that on the ESPN site. They were the first to do this – t display their headlines in their house Akzidenz-Grotesk font. Shaun Inman developed that further so that you didn’t have to have this special Flash component; you could just use plain old Flash. He created Flash text and he used a combination of JavaScript and as stylesheet to tell the browser what to do when to substitute a Flash movie for text that it found in a page.
Some other people came on after that and refined it more, because Shaun’s first crack at this was kind of limited. Davidson and other people continued to develop this and came up in 2004 with scalable Inman font replacement technology. And without disturbing people who didn’t have Flash. If they didn’t, they wouldn’t see like a blank space; they’d just see the normal browser text that was there.
You make a Flash font out of whatever typeface you want to work with. Then you upload that file with a CSS file and JavaScript, and then when your Web page came up, the JS would look to see if Flash was installed. If not, they’d just see normal browser text. If it was, it would search through the Web page and find every place that was tagged as, say, h1 if that’s what you wanted to replace and hide the text. It would automatically reserve a space, create a Flash movie of that same text, scale it, and plug it in there. All this takes place in fractions of a second. The text remains selectable, copyable, searchable, spell-checkable.
The original sIFR [an acronym he never uses] was just black and white. We’ve spent the last year and a half so you can use photofonts, too. Just this month we’ve finally been able to put together an application. The whole process is fairly transparent to the end user and allows you not to have to write custom JavaScripts or CSS and things like that each time you want to do this. Photofont WebReady and it’s not quite ready for release. Btu we do have a very, very late beta version here for demo.
ЯРМОЛА: I want to create another one, a script like Beckham. I’m importing it to bitmaps. Remove all the additional glyphs. (Save as photofont.) Then I try to run this new application. It scans for installed photofonts. (Selects Bickham Script. Opens a sample HTML page. (Selects a smaller size. Shows embedding parameters. Can do it with dynamic Flash or with a static Flash file. Or just a bitmap. Chooses JPEG. Selects sample HTML as a source. Saves results. Can automatically upload to server. Two more steps. Updates HTML, creates two CSS and JS and a Flash movie. Doesn’t work. Shows a prepared sample that does work. Text is selectable, copyable. It reflows.)
(Shows source code. It placed a script at the end of the document after </html>. I complained about it.)
This is just a fun example, but actually it can be used to sample real outline fonts.
HARRISON: Hopefully ready in a month or so.
ЯРМОЛА: Also an online version.
HARRISON: There are some drawbacks. Only for display text. Theoretically you could use it for everything or for a Japanese font with 30,000 characters, but the rendering time would be in a matter of hours for each page. You’re limited to about 10 blocks of Flash fonts per Web page. For display purposes only, really.
If you have only small amounts of text, it’s possible you can get away with a Flash font for body text as well. As bandwidth and processor speeds increase over the years, these restrictions may become pretty much moot.
No right-clicking on a link to save as or whatever. But this technology works in pretty much every browse – Opera, IE, Firefox, Safari, a few of the more obscure ones. That’s pretty much it. Those are pretty much the only drawbacks we’ve found so far. Only about 10K JS files. CSS file size is trivial. Not a whole lot of uploading that has to be done. We think it’s a pretty good technology. We hope eventually maybe browsers and applications will adopt it as well so we won’t need a plug-in. We’ll be pushing this technology pretty hard.
(Q&A: I got up their noses about Web standards and told Twardoch to stop interrupting. I told them they need to get the standards and accessibility down pat before they ship. The presenters looked politely annoyed. ¶ Kerning is possible in Photoshop. ¶ Many OpenType features will be supported.)
(We talked later and I agreed to hook everybody up so this thing will be as standards-compliant as sIFR is. By the way, they say they have never bothered to contact Mike Davidson or Shaun Inman.)