Anyone who has built Flash websites and cares about the details of pixel perfection will have had to jump through hoops just to get something to look just so. On a recent project the hoop was getting a monospaced typeface to look sharp and legible, line up like a monospaced typeface should and do this on dark and light backgrounds with animation.

The first problem, sharp and legible, can nowadays (Flash 8+) be done by just selecting “Antialias for readability” on the antialising combobox. Mmm, nice a crisp now. However, that introduces a number of problems:

1) Bold and regular weights can look very similar

2) Strokes in the typeface are snapped to as many whole pixels as possible which may introduce weird kerning and will throw out the fixed spacing of a monotype typeface. This means that if you have multiple lines all the characters will go slightly out of alignment the longer the lines.

3) The dynamic range of the typeface color is severely reduced. You won’t be able to tell the difference between type with a color value of #fff and #ddd - it will be white either way

4) The weight of the font will look different on different backgrounds i.e. if you start on one background and change / animate it to another (ARGH!)

So what to do?

Well 1) can be tweaked around in the custom anti-aliasing settings. 3) is not so bad, and in this project the type is only grey, white and black - we didn’t need the full dynamic range so we got lucky there. 4) can be handled, by initially (before anyone sees it) setting the text color to a mid gray, say #888, and then by using script to change it to white and black when needed. It seems the Flash text rendering engine compromises on the anti-aliasing and it looks ok. Also we opted to minimise any fading and instead to go for a “typewriter” style animation effect.

2) Is the real problem. The only “solution” is to create textfields for each single character (including spaces) and positioning them on exact points. The main drawback is that doing this almost completely wipes out the possibility of HTML textfields (which we needed as the site was content managed) unless you want to right your own HTML textfield implementation (cost / benefit time!). In our case we left it unaligned - the soft “Antialias for animation” just wasn’t good enough and we didn’t think many people would notice it wasn’t aligned (except for the odd designer) - we may still go back to the soft type yet or we may still have a go at implementing the “textfield per character” solution (we only tested it so far).