Phinney on Fonts About Thomas & the blog Phinney on Fonts main page

Picture of ThomasThomas “my other car is a sans serif” Phinney on fonts, typography & text. Geeky troubleshooting and info for font developers and users. Consulting & expert witness for fonts & typography.Read more...


Wired mag off-​​base on Roboto typeface »

Wired magazine’s puff-​​piece on Google’s Roboto typeface revisions is really bothering me. I thought if I held off, I could just do a few sarcastic tweets and be done with it, but no.

I am not a huge Roboto-​​hater like some folks in the type community. I just object to uncritically publishing quotes that make blatantly false statements.

UIs [user interfaces] are crafted from images and type,” Matias Duarte, Android’s head of design tells WIRED. “But the idea of having a typeface that’s thought out as a UI typeface—that’s not been done before.”

Well, that’s pretty much simply false. (UPDATE: Duarte says he thinks he was misquoted, basically he was trying to just say UI typefaces are hard, and Roboto had a particular challenge in needing to work in a wide range of contexts and types of devices.)

[Perhaps not Duarte, but apparently the Wired author was] unfamiliar both with an obscure operating system called “Windows” and its typefaces Segoe UI (introduced in Windows 7) and Tahoma (introduced in Windows 95), both of which were specifically designed/​intended for UI usage. Not to mention Chicago, developed for the original Mac OS back in 1984. (UPDATE: Plus, there is Prelude, designed by David Berlow and Font Bureau as a UI typeface for the Palm Pre operating system—when Duarte himself was in charge of UI for the Pre. Not to mention Android’s own Droid Sans, also designed as a UI typeface.)

A slightly weaker argument could be made for Lucida Grande (the Mac OS X UI font), which is only slightly tweaked from Lucida Sans. Of course, Lucida Sans itself was specifically designed for low-​​res screens and the like. Designer Chuck Bigelow got a MacArthur “Genius” award for his work on the family.

There are seven substantial paragraphs to the article, but both the people quoted are on the Android team. Thus it avoids mentioning the most famous thing anybody has said about Roboto, ever: Stephen “Stewf” Coles calling it a “four-​​headed Frankenfont” in a strong attack on the design philosophy behind it.

This is also why there is so much puffery throughout the article emphasizing how the typeface is designed for performance rather than aesthetics. Such choices do certainly explain most of the changes from v1 to v2 of Roboto, but “performance over aesthetics” is clearly false as a general proposition about the typeface. My big problem with Roboto is that the choice of closed counterforms for many letters and numbers (35CGSacs) is an inherently anti-​​legibility choice. Yes, they had more of these before the revision, and some (5) have been slightly improved, but they need to finish the process of transforming it into a different typeface if they want it to be an outstanding UI typeface.

Roboto compared to other UI fonts

Indeed, I would argue that such closed shapes are stupid bordering on criminal in a user interface typeface. There is a reason that most other typefaces specifically designed for user interfaces have used open counters, and that is because there is massive evidence that tells us these shapes are more legible (see for example the research cited in Sofie Beier’s book on the subject). Legibility should be a the paramount concern for a user interface typeface.

Roboto designer Christian Robertson explains the mix of open and closed shapes as saying that they create an appealing texture in body text. Which is lovely and all, but not as important as legibility.

That said, to be fair, Apple is doing a much worse thing in choosing Helvetica Neue as their UI typeface, first for iOS and soon for the next version of OS X. They too have gone to lengths to declare publicly how they are optimizing it for legibility, which is rather like trying to polish a turd. Helvetica is inherently anti-​​legibility. The only way to make it otherwise would be to change it so much that it doesn’t look like Helvetica any more. Sadly, that is not what Apple is doing.

Aside from the business of being first with a dedicated custom UI font, if Google and Apple were to explain that they are making their UI font choices for design reasons, that’s fine. But when they (or Wired) start touting the awesome legibility and functionality of their choices, I have to call them out on it. Nonsense.

My massive page of type design info »

Cristoforo swash B in FontLab Studio.

Cristoforo swash B in FontLab Studio. (No, you probably wouldn’t show all these layers at once during normal work.)

I just finished creating an organized  page of type design info and links. Enjoy!

Point Size and the Em Square: Not What People Think »

It’s easy enough to determine that a point is 1/​72 of an inch, and used to be about 1/72.27 in the days before digital type. But the challenging question is, when you look at printed type on a page, what part of a 12-​​point font is 12 points high? The short answer is “none.” Seriously. For metal type it’s the “body” which is not something you see in print, and for digital type it’s the “em,” which is completely virtual.

[I have been working on this piece on and off for months, and I keep on thinking it needs more graphics. But in the interests of getting it out there, I'm letting it go as is, because I think most of this is clear enough even without. If anybody wants to point me to a link or create a graphic to illustrate a point made here, feel free!]

Font Size Measurement Confusion

The background to this is long and complicated, so I hope you’ll forgive me if I first explain how this is the question that just refuses to die, and the confusion it can cause… in painful detail.

Historical Background

Back in the days of metal type, the answer was simple, even if it didn’t relate to anything one saw in the printed output. The point size of the type was simply the height of the metal body the type was cast on. Additional line spacing was added by means of thin strips of lead between the lines, hence the term “leading” (pronounced “ledding”) for line spacing.

Metal type, showing point size

Above is shown a piece of traditional metal type (photo courtesy Daniel Ullrich, licensed under Creative Commons Attribution Share-​​Alike 3.0). The added red bracket shows the body height, which one would measure to determine the type size.

In metal type, without leading, the distance from the baseline of one line to the next would be the same as the point size. However as you can see in the example, once the metal type was printed, there was no direct means of knowing what the original point size had been, unless one also knows either the original typeface or the amount of leading used with some certainty.

Today’s Answer & Implications

In digital type, the font’s letters are drawn on a grid, where an arbitrary number of units (often 1000 or 2048) are set to equal the “em” which is then scaled to the current point size for output. So to get 12 point type in print, with a 2048-​​unit em, that digital space is scaled so that the 2048 units in the design space are equal to 12 points. As Karsten Luëcke put it in a recent discussion on Typophile:

In digital type, the EM does not refer to a “real” box. You better consider the EM as a yardstick – an abstract letter-​​height yardstick which establishes a link between micro and macro level, between font-​​internal unit system and font-​​external unit system: The font-​​internal unit system is defined via UPM, i.e. as the number of units per EM. It is the letter-​​design grid or resolution. The font-​​external unit system may be typographic point, millimeter, pixel, etc. And this abstract EM serves to project the font-​​internal unit system onto the font-​​external unit system.

An example. You have a font with 2048 units per EM, internally, which is to be projected on 12 pt type size, externally. So 12 pts = 2048 M-​​units or 1 M-​​unit = 12/​2048 pt.

So to image the font at 12 point, one scales the abstract EM to equal 12 points.

The catch for purposes of measurement and standardization is that while there are some restrictions on how large one can draw letters in the design space, there is no necessary and required relationship between the size of the letters and the em. On average, with Latin-​​based languages such as English, the “cap height” of capital letters is about 70% of the point size, and the “x-​​height” of lower-​​case letters is about 70% of the cap height, or about half the point size. But (and I cannot stress this enough), those are only averages, and there is no technical requirement whatsoever that one be close to those averages. Indeed, x-​​height relative to cap height is one of the ways typographers describe typefaces (“high x-​​height” vs “low x-​​height”).

[UPDATE : I did some research for a client, and verified that as expected, cap size varies substantially between different fonts. In my sample, cap size was most usually 62%-78% of the em square, averaging right around 67-​​70%. Or to put it another way, if you take an “average” font printed at a given point size, other fonts at the same point size will commonly have capitals as much as 10% smaller or 10% larger than the capitals from the average font. At the extreme you can find fonts “in the wild” with caps barely over half the average size! (I expect you could also find fonts with caps close to half again the average size, but I wasn’t looking so hard in that direction.)]

Moreover, the Zapfino example given earlier shows how a given font could be at a radically different size relative to the point size and still be a legitimate font. Indeed, anyone knowledgeable in modifying fonts could in a matter of minutes, take almost any font and create a modified version, with the only visible difference being that text at a given point size is only a fraction of the size.

What About the Web?

The web can use points, but just defines them in terms of pixels. It has inherited the Windows definition of that ratio, so on the web by default 1 pt = 4/​3 pixels, so 12 pt = 16 pixels (but see below).

It used to be that Mac browsers used the Mac relationship of points to pixels, which was one-​​to-​​one, but that has been abandoned just a few years ago. so at least points vs screen pixels are now consistent across platforms, though how big a point is on screen (or a nominal browser pixel for that matter) depends on your screen resolution, what zoom level your browser happens to be set to at the moment, and (on Windows) whether you have set something other than the default screen resolution of 96dpi.

But the relationship between pixels and points is broken in some browsers on Windows (such as Internet Explorer 7 and earlier) when the user has a non-​​standard resolution set. For example, if you actively tell Windows your screen resolution is 120 dpi instead of 96 dpi, that means that point sizes get multiplied by 5/​4, but sizes in pixels do not. So at 120 dpi, a font set to 9 pt will instead show up at 15 px, but a font set to 12 px will still be 12 px, and now smaller. Arguably this is a reason never to do font sizes in px. (Bitmapped grapics generally are not scaled by the 5/​4 ratio in browsers, but they are in other apps such as Word or the usual graphics previewing programs.)

This may get even less standard in the future, as CSS 3 is threatening to make pixels a truly imaginary thing, always equal to 4/​3 the point size. This would cause pixels to scale into virtual pixels when non-​​standard resolutions are set.

Of course, some users (like me) are constantly changing the zoom level in their browsers, which also plays hob with any notion of fixed sizes for points, though at least relative sizes are maintained by browser zoom.

Things get kinda weird on the web, in another regard. CSS can use “ems” as a measurement unit. Okay, that makes sense, right? I mean, why not set an indent or margin in ems? No problem. Where it gets weird is that you can set the type size in ems. Now, logically based on the “normal” definition of the em, this makes no sense, because the size of an em is always the same as the type size, so the size of the type is always one em. But CSS allows you to break that assumption by setting an em to some specific number of points or pixels, and then setting the type size to some multiple of that. It gets even weirder, actually, because you don’t need to define the em in the first place. If you don’t define it, the standard browser assumption is that one em = 16 pixels (Firefox and possibly Chrome), or 12 points (Internet Explorer). The difference between IE and the rest doesn’t matter with default Windows resolutions, but it gets interesting at non-​​standard Windows resolutions because IE then scales the default em, while Firefox does not…. Ouch.

[Note: edited and expanded this section several times on 21 March 2011 to better reflect system scaling setting issues. Thanks to Beat Stamm for pointing out the omission and helping me with details I hadn't yet encountered.]

How to Legislate Type Size Today?

First, a disclaimer: One can implement reasonable precautions, but it’s not possible to stop determined people with sufficient knowledge of fonts and typography from creating customized fonts, which can in turn be used to create either illegible documents, or disclaimers that most people would never read. To even attempt to cover all possibiities would probably yield many pages of added law, which frankly somebody like me could probably still find a loophole in with a moderate investment of time and thought. What reasonably can be done, however, is to make the laws tight enough that it would take significantly more expertise, creativity and effort to work around them than is currently the case.

So what variables does the law need to control when it wants to legislate a minimum size and legibility?

Most common system fonts a reasonable person would think of using would mee these requirements, including Times/​Times New Roman, Arial, Helvetica, Courier/​Courier New, Verdana, Trebuchet, Georgia, Calibri, Consolas, Constantia, and Corbel.

Of course, I’ve only addressed the font size part of the equation. There are many other components to legibility of text in print, such as line spacing, letter and word spacing, line length, and the color of the text and the paper.

[EDITED various times to clarify minor points and improve wording.]

ADDENDUM 16 August 2012:

This stuff just doesn’t go away! A recent decision of the Michigan Supreme Court hinged on exactly this issue. The underlying subject matter was the hottest state political issue of recent years, an attempt to put in place a ballot measure that would in effect stop the ongoing removals of collective bargaining rights for folks doing business with cities. Here’s the Detroit Free Press about the case, and the actual court decision (including concurring and dissenting opinions).

Browser Choice vs Font Rendering »

This post by Jeffrey Zeldman on font rendering in web browsers is a good introduction to the subject in a number of respects, but unfortunately repeats a pernicious myth: that web browsers on Windows all render text differently, and that this interacts with the OS rendering. There are a couple of caveats (see below), but for the most part, this a this is a system level setting. On any given Windows computer running XP or Vista or Windows 7, you will generally get >pixel-​​for-​​pixel identical glyph rendering in Internet Explorer, Firefox, Chrome, or Safari. (As also shown in Si Daniels’ presentation at ATypI 2009 in Mexico City).

Why is this? All of today’s major web browsers on Windows (IE, Firefox, Chrome, Safari) simply use the OS’s user-​​adjustable GDI text rendering settings, whatever those may be. Similarly, all today’s major web browsers on Mac OS simply use the system text rendering.

(Yes, there are a couple of caveats. Internet Explorer 7 actually ignores the OS setting in favor of its own prefs setting, which is to use the OSes ClearType rendering regardless. Safari for Windows has an optional setting to use Apple’s “Quartz” text rendering, even on Windows—this was the one-​​and-​​only rendering option in Safari 3 for Windows, but Windows users “freaked,” so Apple changed it for Safari 4 for Windows. Also, Firefox can use the kerning built into fonts, which affects spacing, though it doesn’t actually impact rendering of individual glyphs. Every major browser uses the same rendering as some version of OS rendering, however; none does something unrelated to Mac or Windows text rendering.)

So why does rendering vary so much? Windows XP, Vista and Windows 7 can be set to one of three settings for “font smoothing” (a.k.a. anti-​​aliasing). These settings affect all applications using the old-​​school GDI APIs for text rendering, which as of late 2009 means all the major web browsers. The font smoothing settings are:


Note that the standard vs ClearType distinction only affects fonts with TrueType outlines. Fonts in PostScript Type 1 or OpenType CFF formats get a less sophisticated type rendering/​smoothing which, well, seems less than stellar these days.

Standard” (grayscale anti-​​aliasing) is the default on Windows XP, although installing Internet Explorer 8 will change that setting to “ClearType” (even if one then proceeds to use a different web browser). Windows Vista and Windows 7 default to ClearType. So, most folks on Windows are seeing ClearType rendering, one way or another. However,

Besides GDI (all of today’s browsers), there is a completely different rendering mode used by applications which are programmed to use the “DirectWrite” text APIs (similar rendering also available to the largely-​​ignored WPF APIs). This uses ClearType, but a ClearType which is improved over the GDI version. For TrueType outlines, It offers moderate but noticeable improvements, such as options for improved spacing, and anti-​​aliasing in the Y direction. OpenType CFF fonts see a truly dramatic improvement, going from really mediocre rendering under GDI to rendering roughly equally well with TrueType under DirectWrite (or under its predecessor, WPF)! Minion Pro and Myriad Pro in OpenType CFF render pretty well down to 9 pixels per em (ppem), and just fabulously at 12 or more.

This is worth knowing and noting because it has already been announced that Internet Explorer 9 will use DirectWrite, and apparently FireFox is working on it as well.

[Post updated 8 Jan 2010 to correct IE 7 having a built in pref for which OS rendering it uses. Thanks to commenters! - T]