{"id":16,"date":"2003-08-30T12:43:19","date_gmt":"2003-08-30T19:43:19","guid":{"rendered":"http:\/\/newsfeed.fatorcaos.com.br\/wp\/?p=16"},"modified":"2006-07-13T12:17:32","modified_gmt":"2006-07-13T19:17:32","slug":"the-death-of-the-pixel-font","status":"publish","type":"post","link":"https:\/\/labs.zeh.com.br\/blog\/?p=16","title":{"rendered":"The death of the pixel font"},"content":{"rendered":"

Everybody knows: Macromedia Studio MX 2004<\/a> has been announced by Macromedia, and that includes Flash MX 2004<\/a> in two flavors: standard or professional. The bomb is out there, and now there are lots of features<\/a> that will have to be assimilated by the Flash hacking crowd.<\/p>\n

One of the Flash features that received a long-awaited overhaul is text control<\/a>. From CSS support to vertical orientation, Macromedia has expanded what we can do with text quite a bit. One of the most important features, however, is the ability to use “aliased” text.
\n
\n\"Anti-aliasedTo quote the Macromedia web site in this:<\/p>\n

Produce crisp, highly legible text that\u2019s optimized for display at small sizes and on low-resolution displays such as mobile devices and cell phones. For optimal file size and streaming efficiency, text characters are converted to raster (non-aliased) display, and then transformed back to vector shapes.<\/i><\/p><\/blockquote>\n

In practical words, that means that you will be able to use fonts on lower resolutions just like you do in a Macintosh or in a Windows system, without having it all screwed up. Why? And why couldn’t you do that before? Well, to answer such questions, one needs first to understand how a font works.<\/p>\n

Basically, when you have a font file, you have a set of polygons which define each letter (or glyph): some squares for the letter “F”, one big ring for the letter “O”, and so on. However, a font is not only a set of drawings.<\/p>\n

When creating professional fonts, two more features (which are usually much more difficult and time-consuming than drawing the glyphs itself) have to be added: kerning<\/b> and hinting<\/b>.<\/p>\n

Creating kerning<\/b> is the process of checking every pair of letters is having the correct spacing between them. This means going through thousands of pairs (Aa Ab Ac Ad etc) and checking if everything’s fine, and there aren’t pairs with way too much space between them (it usually happens with AV, for example). It’s a boring, lengthy job but technically that’s not so hard.<\/p>\n

Now, hinting<\/b> is a much more difficult process and, at the same time, the one we needs most, since we use lower resolution devices (our retina-burning monitors). Hinting is, basically, telling the font at lower resolutions where it has to snap some of its corners to produce a better result. Without hinting, all fonts used at sizes 8 or 10 will look like cr*p, full of blots or barely readable. That’s why professional fonts usually are hinted to death: we wouldn’t be using fonts like Verdana or Arial without hinting. At the same time, you can try using an amateur font at size 8 with no antialias – you’ll only see lots of weird blots… because it has no hinting.<\/p>\n

If you want more information on hinting, this Microsoft page<\/a> explains a lot of TrueType hinting with beautiful graphics.<\/p>\n

Back to my point. When you add a font on a Flash movie, it actually adds the font glyphs to a table of characters that can be used later to draw the font on the screen, emulating the font drawing API. However, hinting instructions are not included on the movie; the Flash player doesn’t support it so he relies on anti-aliased fonts all the time, if the movie quality is set to “HIGH”, or he tries to do its best (which definitely is not enough) on lower quality settings.<\/p>\n

There are, basically, two reasons for that decision. The first is that adding hinting instructions to the font set would make the font attachment too big, and adding hinting support to the font drawing instructions on the player would make the player increase in size quite a bit too. I’m not even counting that’s pretty difficult to build a full-featured font drawing library.<\/p>\n

So, how has Macromedia added such support on the new Flash player, and why is that possible now?<\/p>\n

The answer comes from the Flashlounge list<\/a> (sorry, no archives yet). Authors in the known – Peter Hall<\/a> – explains what’s the catch (I hope he doesn’t mind being quoted):<\/p>\n

It actually creates a pixel font at authortime for the specific font size. This introduces an interesting consequence for filesizes.<\/p>\n

Up to 25-30pt, the aliased font is usually smaller in filesize than the original font becasue the curves are fewer and simpler. But if you use lots of different sizes then it can go the other way and add up to more than the original font, so it is something to watch…<\/i><\/p><\/blockquote>\n

What’s that? Well, it actually understands you’re using a font at, say, size 8, and creates a new font (using its hinting instructions) and adds it to the movie. Just like this application<\/a> that was also mentioned in the font feature thread on Flashlounge.<\/p>\n

I have to say I’m impressed. While it doesn’t mean Macromedia has embraced support for all kinds of fonts features and typography standards on the new Flash player, that means they have added hinting support in a way that won’t make the Flash player size increase a lot, or have incompatibility standards on cross platforms. Also, compiling time may increase, but who cares.<\/p>\n

This is good news for all Flash developers, but it also presents a new challenge for Flash font developers.<\/p>\n

In the past few months\/years, giving the Flash player inability to use fonts at small sizes with quality, we’ve had a massive increase on fonts created specially for flash – from miniml.com<\/a> to fontsforflash.com<\/a> to myself<\/a>, everybody wants a piece of the pie (except that I don’t charge money). Now, while some of this people has produced some nice original work (specially Craig Kroeger from miniml.com), their work is not needed anymore for the technical aspect of it – allowing text to be rendered on Flash with no anti-alias. Which, I believe, was the main purpose of many people when deciding to use their fonts. The Arial\/Verdana-clone fonts on fontsforflash.com prove a bit of that point.<\/p>\n

For much time, Flash font designers had to learn to create glyphs using a grid system equivalent to the pixel positions and emulate bitmap rendering, and learn to prevent the font from filling (one of the weirdest Flash font rendering bugs) through gaps on the glyphs. And while people will still prefer, say, the minimalistic design of miniml.com fonts, we’ll soon be flooded by sites using everything from Verdana to Arial to Times New Roman.<\/p>\n

That’s bad for the font designers? Probably. It’s kind of a let down when you spend years perfecting a technique only to find it’s not useful anymore.<\/p>\n

It’s bad for developers? No. Flash developers will now be able to have a better control of their text, being able to use the fonts they already have (instead of buying new ones) and modify it to their purposes – increasing or decresing the text size by one point instead of worrying if they have a pixel font that is a bit bigger.<\/p>\n

Bitmap-emulating fonts will still be around – they were here before Flash, only they found their safe haven in font-hungry Flash developers. Sites like 04.jp.org<\/a> will continue to create minimalistic-inspired fonts without caring a lot with its commercial use.<\/p>\n

Only that now, our Flash sites won’t look like they’re made by designers that only have 1 or 2 different fonts available.<\/p>\n","protected":false},"excerpt":{"rendered":"

Everybody knows: Macromedia Studio MX 2004 has been announced by Macromedia, and that includes Flash MX 2004 in two flavors: standard or professional. The bomb is out there, and now there are lots of features that will have to be assimilated by the Flash hacking crowd. One of the Flash features that received a long-awaited […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[2,4],"tags":[],"_links":{"self":[{"href":"https:\/\/labs.zeh.com.br\/blog\/index.php?rest_route=\/wp\/v2\/posts\/16"}],"collection":[{"href":"https:\/\/labs.zeh.com.br\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/labs.zeh.com.br\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/labs.zeh.com.br\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/labs.zeh.com.br\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=16"}],"version-history":[{"count":0,"href":"https:\/\/labs.zeh.com.br\/blog\/index.php?rest_route=\/wp\/v2\/posts\/16\/revisions"}],"wp:attachment":[{"href":"https:\/\/labs.zeh.com.br\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=16"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/labs.zeh.com.br\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=16"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/labs.zeh.com.br\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=16"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}