Wednesday, September 23, 2015

San Francisco Quotation Marks

Dr. Drang:

Given the overall look of San Francisco—and especially its commas—Gruber thought Verdana-style block quotation marks looked better. By the Apple Event on September 9, it was apparent that Apple agreed with him: San Francisco’s quotes are right again in the build of iOS 9 on the hands-on demo units.

A significant difference, though, is that while the early versions of San Francisco’s opening quotes were slanted down and to the right (like Verdana’s), the final versions are slanted down and to the left, just like its closing quotes. The only difference now between San Francisco’s opening and closing quotation marks is the tapering. The ticks of the opening quotes are fatter on the bottom, while the closing ticks are fatter on the top.

Update (2015-10-04): Khoi Vinh:

Of course, having such similar shapes for these glyphs can be a valid aesthetic choice for certain typefaces intended for certain kinds of usages. It just seems odd to me that San Francisco, which was custom designed for maximum legibility on digital devices, made this particular choice.

Akinori Machino (comments):

You can see the low legibility of Helvetica if you type texts in a small size and make them blur. Some texts become blended and hard to decipher.


This difference gives texts in SF Compact more margins between letters, resulting in high legibility in small devices like Apple Watch.

In addition, SF and SF Compact fonts are divided into two sub font families named “Text” and “Display”. This is what Apple calls “Optical Sizes”. The Text fonts are for smaller texts, and the Display fonts for bigger.

Update (2015-10-13): Nick Keppol:

The first way to compare the x-heights is to scale all of the typefaces to the same cap-height. This will give us the ratio of the x-height to the cap-height. If we use this metric for comparison, SF Compact and Verdana perform best, and DIN the worst.


Verdana and Lucida Grande have very open apertures avoiding becoming blurry at nearly all sizes. The bowl of the e does not curve back into the cross bar. It renders as a sharply defined aperture. These open apertures are one of primary traits of most screen fonts designed to be used at small sized or for low resolution displays.

Update (2015-10-23): Nick Keppol:

Unfortunately San Francisco has some of the same failings as Helvetica and Lucida Grande in mixed case settings. For example, it’s difficult to distinguish between the lowercase L and the capital i. To Apple’s credit though, they did take this into consideration with the vertical metrics. The ascender sits above the cap-height helping with mixed cased forms…just a little.


These optical cuts have unique adjustments made to the outlines of each glyph so they look best at their intended sizes. When the spacing differences between text and display are ignored and characters are overlaid directly on top of each other, you can see the differences in the glyph shapes.


Normally, punctuation sits on the baseline., however this looks off balance in time formats. Before San Francisco, you needed a few lines of code to fix this. More importantly, you had to remember to do it. San Francisco solves for this by having an alternate glyph with the colon aligned to the cap-heights optical center. The system switches to it automatically when it recognizes a time format. You can achieve the same thing in Photoshop by turning on the contextual alternates button in the Character palette, or by selecting the character from the Glyphs palette.

1 Comment RSS · Twitter

[…] It is perhaps not as optimized as Lucida Grande, but I like the character shapes (except for the quotes). I look at the screen, and seeing the letters so clearly again makes me happy. Needless to say, on […]

Leave a Comment