Search code examples
macoscocoa

What glyph/fonts to use for macOS keyboard shortcuts?

I'm trying to draw images in my user interface that match the glyphs used for keyboard shortcuts in menus. ⌘ for Command, ⌥ for Option, etc.

This list has all of the keys and Unicode characters used, but Apple changed some in (at least) macOS 10.13 and 10.14. I've determined most of the new mappings, but I can't get them to actually match. The image below shows how the shortcuts look in the menu on the left and what they look like drawn in San Francisco on the right:

Shortcut keys, menu vs San Francisco

I'm specifically concerned with the Pg Up/Pg Down since it's overloading the up/down arrows. I've tried using U+1F861 WIDE-HEADED UPWARDS LIGHT BARB ARROW, but macOS doesn't recognize it.

If I load those Unicode characters into TextEdit and use Apple's downloadable SF Pro Display font, a bunch of the glyphs will forcibly switch to another font. The Left/Right/Up/Down arrows match the menus if I set the font to Lucinda Grande, but Clear is still distinctly different and Return is more squared. I've found the arrow with squared hook in Apple Symbols, but Font Book just lists a glyph number for it, not an assigned codepoint. I can't find any fonts that match the Home/End glyphs either, and those seem clearer in the menus than they are when I draw them.

Apple does use a bunch of the Unicode private use area for function keys in keyboard events (e.g. NSHomeFunctionKey), but those specifically don't have glyphs assigned to them.

What's the correct way to draw these keys so they match what the system shows? Either what glyphs am I missing, or what font(s) do I need to use?

Solution

  • The correct function call for this is:

    CTFontCreateUIFontForLanguage(kCTFontUIFontMenuItemCmdKey, 0, NULL)

    CTFontCreateUIFontForLanguage returns a CTFontRef, which is toll-free bridged to NSFont. kCTFontUIFontMenuItemCmdKey is supported in macOS 10.8 and later; macOS 10.5-10.11 also supports the now-deprecated kCTFontMenuItemCmdKeyFontType, which in current SDKs is just an alias to kCTFontUIFontMenuItemCmdKey.

    macOS has a hidden font named ".Keyboard" stored at /System/Library/Fonts/Keyboard.ttf and using that will get you most of the way there, though the fallback for unsupported characters isn't quite the same.

    The CmdKey font does change the representation for various keys, so things like the Page Up arrow switches between the double-stroke arrow and unadorned arrow variants depending on the version of macOS you're running. In macOS 11 they changed the arrow keys to use thick arrowheads instead, which fixes the issue of them and Page Up/Page Down looking similar, but for some reason they didn't update the font for it, so you need to check that manually.

    The table in the question needs some adjusting. These are the character values/strings to use:

    Key Unicode Characters
    Backspace U+232B ERASE TO THE LEFT
    Tab U+21E5 RIGHTWARDS ARROW TO BAR
    Clear U+2327 X IN A RECTANGLE BOX
    Return U+21A9 LEFTWARDS ARROW WITH HOOK
    Esc U+238B BROKEN CIRCLE WITH NORTHWEST ARROW
    Space "Space"
    Page Up U+21DE UPWARDS ARROW WITH DOUBLE STROKE
    Page Down U+21DF DOWNWARDS ARROW WITH DOUBLE STROKE
    End U+2198 SOUTH EAST ARROW
    Home U+2196 NORTH WEST ARROW
    Left Arrow U+2190 LEFTWARDS ARROW (macOS 10.0-10.15)
    U+25C0 BLACK LEFT-POINTING TRIANGLE (macOS 11+)
    Right Arrow U+2192 RIGHTWARDS ARROW (macOS 10.0-10.15)
    U+25B6 BLACK RIGHT-POINTING TRIANGLE (macOS 11+)
    Up Arrow U+2191 UPWARDS ARROW (macOS 10.0-10.15)
    U+25B2 BLACK UPWARDS-POINTING TRIANGLE (macOS 11+)
    Down Arrow U+2193 DOWNWARDS ARROW (macOS 10.0-10.15)
    U+25BC BLACK DOWN-POINTING TRIANGLE (macOS 11+)
    Delete U+2326 ERASE TO THE RIGHT
    Help "?" + U+20DD COMBINING ENCLOSING CIRCLE
    F1..F9 U+F860 MACOS PRIVATE USE "GROUP NEXT 2" TAG + "F" + <digit>
    F10..F24 U+F860 MACOS PRIVATE USE "GROUP NEXT 3" TAG + "F" + <digit><digit>