Design Interface macOS Typography


As long as I’ve used Sketch, I’ve wanted a way to display the letters in hex color codes in lowercase, which I find easier to read. See the two contrived but possible examples below. The top inspector screenshot is Sketch, the bottom with a few typography adjustments.

First example comparing Sketch hex codes rendered in all upper case and in mixed case with typography enhancements
Second example comparing Sketch hex codes rendered in all upper case and in mixed case with typography enhancements

The adjusted hex codes are rendered in Apple SF Pro Text with the “High legibility” (note the open 4 and slashed zero) and “One storey a” settings enabled in the Typography panel accessed in Sketch from View > Show Fonts > gear menu > Typography. I also applied character spacing of 0.2 to give the glyphs a little more breathing room.

On a related note, it would be great if Sketch’s text styles accounted for settings enabled in the Typography panel. As of the 53 beta release (71998), things like the “Single storey a” are not saved to and applied by Sketch text styles.

Design Interaction Interface macOS Typography

Sketch Missing Font Finder

I’ve opened a few Sketch documents lately that specify fonts I didn’t have installed. Something like the TypeKit integration in Adobe’s Creative Cloud apps could smooth the process of acquiring missing fonts.

Sketch find and install missing fonts dialog mockup

  1. I think it’s helpful to show the document name in the dialog because you can’t actually see the document open in Sketch yet. Maybe you opened a couple documents at once and aren’t sure which one has missing fonts.
  2. The Search Web for Font button would only appear if the specified font cannot be found on Google Fonts. Clicking it would open a search engine query (using the default engine in the user’s default web browser) with a string along the lines of “FontName-Weight+font”.
  3. Alternatively, a menu allowing the user to either search a generic search engine or a font site like FontSquirrel could appear.
  4. The dialog should be wide enough to accomodate most PostScript font names. Extremely lengthy font names should be truncated in the middle so the user can see the first bit of the family name and the weight. The whole name can be displayed on hover.
  5. Some variation of this interface should also appear in the Missing Fonts sheet.

James Young pointed me to the FontBuddy plugin by Anima.

Browsers Design Typography


If you are responsible for text marked up in HTML, please learn about character entities. Of late, I’ve noticed prominent companies sloppily using two hyphens where they should be using an em dash, which is —. This is particularly irritating when the text comes from a company that purports to know about design.

A Google page about the Nexus 7:

Double hyphens on Google's Nexus 7 product info page

A Fast Company story:

A Fast Company story using double hyphens

An Atlantic post discussing future mobile technology. The Atlantic is not a design publication, but surely they have people on staff who care about typography:

An Atlantic blog post using double hyphens

If you really want to get fancy, the double hyphens can be replaced with an em dash with thin spaces ( ) on either side. The difference between a standard space and thin space is subtle, but it is noticeable in Safari, Firefox, and Opera.

Like many things in typography, there is variation in the use of dashes, but no respectable typographer thinks two hyphens are the way to go. I should figure out how to insert thin spaces around em dashes in my existing posts…

Another common web typography problem is quotation marks. Setting up a regex to enclose quotes properly using “ and ” might be trickier, but it should also be done.

Apple gets these details right. See the press releases for the latest announcements.

NDP Software’s &what; is a nice search-based entity reference lookup.