Typography

The Art of Bold

No Comments » Written on March 25th, 2010 by Alec
Categories: Tutorials, Typography

The Art of Bold

I remember thinking, way back when, that word processing software was amazing in the way it created bold versions of fonts whenever you typed ctrl-b. So naive. Of course, bold fonts are carefully crafted by font designers, not generated by some sub-par WordPerfect algorithm.

But why should bold fonts be generated by designers and not via an algorithm? Let’s take a look at the “H” from Helvetica:

Helvetica H

The glyph on the left is Helvetica. The glyph in the middle is what happens when you take Helvetica’s “H” and apply FontLab’s bold algorithm to it. The glyph on the right is Helvetica Bold. The two bold glyphs have the same stem widths (the vertical bars). But note the difference between the horizontal crossbars: the genuine bold glyph has a thinner crossbar than the algorithmically generated glyph.

I don’t know the secrets behind FontLab’s bold algorithm, but I think I can venture a guess. The algorithm takes the original glyph and uniformly inflates it, both vertically and horizontally. In the case of a very uniform sans serif like Helvetica, this algorithm generates something different but not vastly different from what the designer of Helvetica Bold produced. But look what happens in the case of a classic serif face like Minion:

Minion E

Applying FontLab’s bold algorithm to Minion’s “E” gives us a drastically different glyph from the genuine Minion Bold “E”. The stem of each glyph is the same width, but Minion Bold’s horizontal bars are much thinner than FontLab’s pseudo-bold ones. I haven’t highlighed it on the graphic, but, obviously, the serifs from Minion Bold are also much skinnier than the psuedo-bold serifs.

We can see the same issue with Minion’s “O”:

Minion O

A uniform inflating of the “O” gives us a very different glyph from Minion Bold’s “O” — Minion Bold features glyphs that have thicker vertical parts than horizontal parts, giving a delicate, interesting appearance missing from the pseudo-bold.

This is not at all a critique of FontLab’s bold algorithm, by the way. The algorithm is just a courtesy that generates a starting point from which font designers can tweak their bold faces. In fact, the uniform inflation of glyphs to make a bold face is a tried and true technique for some fonts. Take the case of the lovely Marydale as an instance:

Marydale A

Marydale’s bold “A” is essentially the same as its uniformly inflated pseudo-bold cousin.

Famous Serifs

I did a bit of numerical analysis on five of everybody’s favorite serif fonts, and came up with the following chart detailing how the stem widths and crossbar heights of “H” grow from regular to bold:

Bold Serif Chart

What does this mean? Well, the main thing to take away from this graphic is that these fonts hold true to the principle of boldness examined above: namely, that a bold glyph should be expanded from its regular cousin in a predominately horizontal fashion. The width of the stems in our “H”s grows significantly larger than the height of the crossbars, as we go from a regular font to a bold one.

Do you love this sort of typographical analysis? Get yourself Karen Cheng’s Designing Type, and check out the iLT article on vertical metrics.

Character Combiner

No Comments » Written on July 7th, 2009 by Alec
Categories: Typography
Character Combiner in Action

Character Combiner in Action

I whipped up a program to help me with kerning in FontLab. It’s Windows-only, and needs the .NET framework to run. It’s in pretty raw form, but does what it does pretty well. Feel free to download it (click on the image above) if you’re one of the seemingly rare Windows FontLab users out there. The idea is that you have two sets of glyphs (in FontLab’s slash-name format), and you generate all (or some random subset) of the combinations of those glyphs. Copy and paste this list into FontLab’s kerning window, and kern baby, kern. There’s no documentation, so if it’s confusing, just shoot me an e-mail.

sIFR, et al

No Comments » Written on January 28th, 2009 by Alec
Categories: Typography
Tags: ,

Great post over at Smashing Magazine about web typography. Scattered through the article are a bunch of sIFR-based, and quasi-sIFR techniques and plug-ins. I just finished playing around with some of them.

TTFTitles WordPress Plug-In: Works beautifully. The plug-in allows you to set up styles to be applied in your WordPress templates, and then generates PNG files on the fly based on your style and whatever TTF fonts you have uploaded in a special folder. The unfortunate bit is that you have to have fonts sitting on your web server, which opens up the Pandora’s box of piracy. And, of course, unlike sIFR, you now have images instead of text on your web pages.

Font Burner: Basically, this is sIFR for the technologically-impaired. The site has a collection of sIFR-ized fonts, and the code to be able to use them. Just find a font you like, copy the code, paste it into your web page, and you’re done. The problem is that the code you’re inserting points back to the Font Burner website. So if their site is down or changes, you’re screwed.

JQuery sIFR Plug-In: I’m excited about this one, and as soon as I’m done posting this, I’m off to try it. I love the idea of integrating sIFR into this revered JavaScript library.

Other Text-to-Image Packages: typeface.js, facelift, PHP + CSS Dynamic Text Replacement (P+C DTR).

Inconspicuous Vertical Metrics

No Comments » Written on January 14th, 2009 by Alec
Categories: Typography
Tags: , , ,

Johno has published my article over on iLT! (Debate rages on about whether or not they should be called “metrics”…)

OpensIFr

No Comments » Written on January 12th, 2009 by Alec
Categories: Typography
Tags:

Well, this is old news (2007), but I just stumbled across a version of sIFR that doesn’t require Flash in order to create Flash font files. It works with the wonderful swfmill, a project central to the open source Flash development community.

Check out opensIFr. It works really nicely, albeit only with True Type fonts.