Posts in category typography - page 3

Font hinting and instructing – a primer

Taking my bitmap font Envy Code B into the vector TrueType Envy Code R was a long process, the most difficult being hinting.

Bitmap v scalable fonts

Bitmap fonts are incredibly easy to make. Using a program like Softy or BitFonter you decide the size of your letters and start plotting pixels. You can see exactly how it will look because you draw every glyph (letter/symbol/number) in every size you want to support. This can obviously be very time consuming and doesn’t let you take full advantage of the resolution of the device and the capabilities it offers. A printer can handle in excess of 300 dpi while a display is typically 72 dpi (Mac) or 96 dpi (Windows) with LCD’s supporting sub-pixels due to the individual layout of the red-green and blue elements you can’t feasibly pre-plot every single combination and even if you could the file size would be rather large.

Rather than having specific set of pixels to turn on or off TrueType, OpenType and PostScript fonts contain a series of instructions that tell the computer the shape using a series of points, lines and curves. This means the computer can scale the glyph to the size that is required and then take full advantage of the device being rendered honoring the users preferences for anti-aliasing (smoothing using shades of gray), sub-pixel precision (smoothing using hints of red, green and blue to take advantage of the layout of color elements in an LCD display), desired contrast and gamma settings etc.

Grid fitting

Such a scaled glyph won’t fit perfectly within a pixel grid and a small sizes and low resolution it can look awful. It is also necessary to ensure that the vertical part of the letter I (known as a stem) looks very similar to the stem of other letters at the same size – we don’t want some letters looking bold – and that the top of the letter o aligns nicely with the top of the i etc. (in most fonts). The glyphs themselves don’t know what is a stem, what should align with other glyphs etc.

Many renders include logic to try and improve un-hinted fonts such as the drop-out control in Windows through to the full auto-hinter in FreeType. If you’ve ever used free fonts from any of the numerous web sites around you’ve probably seen that it doesn’t get it right and it looks like this: Envy Code R un-hinted

The first few versions of Envy Code R looked like that because to address this problem you need to learn a process called hinting, which let’s the designer give the renderer “hints” on how to choose the pixels.

Hinting

Font hinting started off as stem and edge identification so that glyphs would maintain the right proportions when sized and rendered on these low-DPI devices. It became apparent that a much more fine-grained level of control was required and so a stack-based byte-code language was developed as part of the TrueType specification to allow designers finer control in how points are adjusted to better take advantage of the display characteristics.

A TrueType font can contain extra blocks which describes, using a sequence of bytes that represent instructions and their arguments, the process by which to align the points and therefore make decisions about how best to fit the letter into the grid by retaining and adjusting various elements.

The important blocks are:

Block Name Description
fpgm Font program Run once when font first used to setup the tables.
gasp Grid-fitting and scan conversion Table specifying when to apply smoothing and grid-fitting based on size ranges.
prep Control value program Run every time the font needs to be drawn differently (e.g. change of size, changing anti-aliasing etc)
cvt Control value table Set of tables that can be used to specify various heights, widths, spacing, positions etc. that glyphs can relate to.

Each instruction (opcode) has a mnemonic that is representative of what it does and these are documented in Chapters 5 through 6 of the TrueType specification (along with much other useful relevant information). Actual per-glyph instructions are stored with each glyph outline in the glyp block.

Rasterizing & rendering

There are many different ways a TrueType font can end up on your screen with a lot of variants between how vendors chose to render the font and what options they expose to developers and users to fine-tune the experience.

  • Windows – User choice of 1-bit, 4-bit gray-scale anti-aliasing, ClearType, ClearType tuning and display DPI plus WPF and DirectWrite per-app options
  • Mac OS X – User choice of sub-pixel anti-aliasing strength and 1-bit cut-off plus per-app 1-bit option (e.g. Terminal)
  • Java – Per-application choice of 1-bit, gray-scale or sub-pixel rendering
  • Flash – Per-application choice of 1-bit or gray-scale
  • FreeType – Rendering library that exposes a number of run-time and compile-time settings

This is of course ignoring the other rendering engines out there such as the Adobe’s Photoshop, RiscOS, D-Type rendering engine, Font Fusion (used on BeOS) etc. and prior versions of those renderers listed above (Flash and Mac OS changed significantly). Getting it pixel-perfect on every combination is impossible but we can try :)

Tools

Instructing fonts is a painstaking process at the best of times and few people deal directly with the low-level instructions instead relying on tools, stem identification and higher-level languages to achieve the same result. Some tools that have support for hinting instructions are:

  • FontLab Studio 5 Comprehensive font-production package for Windows and Mac that includes auto-hinting and it’s own higher-level link language that it can generate TrueType instructions from but it does not support viewing or modifying existing TrueType instructions and does not handle diagonals well. Rendering preview includes mono, gray-scale and ClearType. (Commercial $649)
  • Fontographer 4.1 Rather dated font-production package for Windows and Mac. (Commercial $349)
  • FontForge Comprehensive font-production package that runs on X11 that includes auto-hinting and the ability to disassemble and edit existing TrueType instructions as well as debug them with stepping. Includes basic mono/gray-scale rendering options. (Open source)
  • Microsoft Visual TrueType Hinting instruction tool from Microsoft that uses it’s own higher-level VTT Talk language that compiles down to TrueType instructions that you can further edit. Includes a comprehensive set of preview rendering options but is not capable of disassembling existing instructions. (Commercial, free with signed license agreement)
  • TTX Python scripts that can convert a font into an editable XML representation and back including disassembly and assembly of TrueType hinting instructions. (BSD)
  • TTIComp Command-line tool that provides an alternative C-like hinting language. (GPL)
  • Xgridfit FontForge scripts to provide an alternative XML-based hinting language. (GPL)
  • TrueTypeViewer Windows tool for displaying TrueType fonts and glyphs including debugging and descriptive disassembly of instructions. (GPL)
  • TTHMachine Real-time editing of hinting instruction mnemonics and observing their effects which is useful for learning. (Free, no longer supported)

[)amien

The Xerox Alto mono-spaced font rises again

Preview of the AltoMono fontComputing history tells us of a mythical place where many of the innovations we take for granted today were either invented or refined to a working level at a single location known as the Xerox’s Palo-Alto Research Center (PARC).

These discoveries form the basis of much of the technology we use today and include the desktop metaphor, the graphical user interface, laser printers, object orientation and Ethernet.

Xerox manufactured a number of high-end machines including the 1973 Xerox Alto which, being GUI based, shipped with a number of proportional bit-mapped fonts.

What is interesting to me however is the mono-spaced font used by the SWAT debugger (but not by the command prompts, they were proportional – ahead of their time!) and so, based on a screen-shot of SWAT, I thought it needed to live again!

I’ve had to make up a few of the symbols and letters that weren’t shown and filled out the symbols for the Windows 1252 Latin-1/ISO-8990-1 code-page and with the absence of any solid information online give it a name so here is Alto Mono!

Download Alto Mono (TrueType, Windows FON, BDF) (30 KB)

When using the TrueType version choose 6 point on Windows and 8 point on Mac OS X.

The Xerox manuals are also fun to browse though with such section headings as “Things the user doesn’t really need to know…” and “How to get out of trouble” and the comments about SWAT’s odd syntax and interface.

Don’t forget to check out my reproduction of the PalmOS system font. Not monospaced but very clear at small sizes – great for the Visual Studio output window ;-)

[)amien

Envy Code R preview #7 (scalable coding font)

Animated chart of Envy Code R styles at 10 point in Windows

It’s been a struggle but finally after countless hours here it is, the next release of my Envy Code R monospaced (fixed-width) font designed for programmers.

Many glyphs have been redrawn since preview 6 including braces, lower-case y, 6 & 9, ampersand, dollar-sign, hash etc. One pixel was removed vertically height to make the box drawing balanced and allow more lines per screen.

These new box-drawing, shading and symbols make Envy Code R a great font for the command-prompt (Consolas and Lucida Console lack box-drawing completely). To use them you will need to run the included registry file and reboot to operate correctly from a command prompt’s properties dialog.

This typeface contains over 550 glyphs providing full complements for DOS, Windows and Mac versions of the US, Western, Central Europe, Turkish, Baltic, Icelandic and Nordic code-pages. This hits several Unicode ranges including Basic Latin, Latin-1 Supplement, Latin Extended A & B, Box Drawing, Block Elements, Letter-like Symbols, Number Forms, Arrows… although not all of these ranges are complete yet.

As well as regular and bold variants this version includes a full italic version too and the obligatory italic-as-bold hack to get italic syntax highlighting in Visual Studio as shown here in my favorite 10 point with my Humane theme.

Envy Code R in Visual Studio at 10 point with Humane theme using ClearType

And for those of you that like the font a little larger it now looks good and the odd sizing issues are all gone!

Envy Code R in Visual Studio at 18 point with Humane theme using ClearType

Okay, enough with the teasing, you’ve waited far too long…

Download Envy Code R Preview 7.2 (TrueType) (169 KB)

These files are free to download and use from damieng.com but CAN NOT be redistributed either by other web sites or be included in your package, download, product or source repository.

[)amien

May 2008 checkpoint

I am now settled into my new, albeit temporary, apartment here in Vancouver, BC working for Microsoft!

Joining Microsoft

For those who haven’t been following my blog long I took a job at Microsoft Canada Development Center as a developer on LINQ to SQL. It turns out my H-1B Visa has been approved and I will be moving down to Redmond in October.

Joining a company of Microsoft’s size is a daunting experience. The sheer number of people, departments, systems, procedures and intranet sites to navigate and learn plus of course the actual job of jumping into the product and seeing where we go from here. I’ve also been helping out a little on the forums and internal lists and getting involved in the regular scheduled update meetings.

Of course you also hear all sorts of interesting news just before it becomes public knowledge such as publishing XNA apps to Xbox Live! and Office getting ODF and PDF support.

On the personal front…

A whirlwind couple of weeks full of new employee orientation, relocating, getting lost, filling in forms, exploring, meeting a couple of hundred people and catching up with a few old friends including one from Guernsey all of which lead to a quiet blog.

There have been some personal stories of getting lost, baby sharks and falling in lakes which will be kept to email now – there’s no way those 500+ subscribers are here for my personal bits! I’ll be sending out an email this week so if you haven’t seen something by the weekend and we’re friends ping me and I’ll forward you on a copy.

Some photos are up on Facebook with a few more to follow.

Envy Code R

Of course what everybody really wants to know (according to my inbox) is where Envy Code R preview #7 is.

It is coming, but every time I think I’m close to a release I find another annoying glitch all related to hinting.

Hinting is the process whereby you tell the rendering system how to shape the characters to better fit into a pixel grid. It consists of a table saying at which sizes to smooth and apply instruction plus a program that adjusts the font as a whole for a given size and then a program per-glyph that tells it how to adjust the points in relation to each other with delta hints providing modifications for specific point sizes.

It’s a complicated process if you’re doing it at the lowest level with a tool such as Microsoft’s Visual TrueType but is made easier with a tool like FontLab Studio 5 which has an auto-hinter that often gets things wrong but is a lot easier to work with and works with hints at a higher level of abstraction.

Which is why I parted with $999 on FontLab and I’m going to investigate a donate option to try and recoup some of those costs.

The bold variant is the only one now requiring hinting and I’m hoping to have it done in the next 24-48 hours. The regular variant looks just great… as does italics.

[)amien