Navigation Menu

KeyCap Fonts for Windows and OS/X Software Instruction

For software instruction, many people clearly prefer seeing exactly what to do, even at the level of knowing the specific keys they are to press. KeyCap fonts (fonts that look just like the keys on the computer keyboard) let a software trainer write a web page showing step-by-step instruction for any software.

Surprisingly, there are few good keycap fonts available, that show what is most needed for software instruction — the specialty keys. Most keycap fonts have the standard letter and number keys, which are not needed (and actually make computer instructions less clear), and don't have special keys such as the Windows "flag" or "tab" keys.

Here are some of the solutions I have, first using CSS and fonts that would be on a Windows or OS/X computer, and then the KeyCaps fonts available for free to use in websites.

What I Want for Key Caps

I'm looking for a font that displays what keys a user should press, for computer instructions, easy to read with the surrounding text. The special keys should have the symbols like the keyboard has, so a novice doesn't wonder "what is the clover key", or "do they mean the zig-zag line key"?

Font Developers, please do a single OpenType font for web use, like Mac Key Caps (Linotype) that also has the special Windows keys: Microsoft flag, right-click menu, Fn (for notebook numeric keypad), Alt, PrntScrn, NumLk/ScrollLk, Pause.

The Tab key should have the arrows drawn just like on a Microsoft or Dell keyboard, and another character that looks just like the Tab key on a Macintosh keyboard. The PrntScrn text should be legible. So the keycap font looks good on the screen, the key height should be close to the text size (a Courier 12pt sentence should have a 12pt key cap, the key cap text should be almost the size of the text next to it, the key height perhaps 1.5 times the ascender-descender height of Courier). Note: they keys in this paragraph and next are all done in CSS.

The Windows Flag key is and check this page's HTML and CSS source for a cool way (on browsers that support CSS3) to show the Windows key: .

To select the next word, press Ctrl-Shift-. On a Mac, press -Shift-.

If your computer doesn't show these characters, from the Windings font, please let me know.

Uses Downloadable Fonts

Most recent browsers support downloadable fonts. If you don't see images that look like keyboard keys, get the Screen Capture of Keycap Fonts for Windows and OS/X (you'll probably have to click the image to make it display full-width).

(View the source code of this page to see the character mappings, and view keycaps.css for font download definitions and CSS key caps formatting. Also see my font-size-adjust page.)

Mac Key Caps (Linotype, from FontPark)

All special Mac keys, very clean design. Overall the cleanest most usable keycaps font I've found. No Windows special keys, darn. Has a copyright notice from Linotype, yet is available for Download Mac Key Caps.

Apple, Option, Ctrl, Opt
Left, Right, Up, Down, Next, Previous
Shift, Enter, Return, Space, Esc, Tab, Bksp, Delete, CapsLock
!“§$% &/()= ¡]¶¢[

Press B-E, press N and type "Hello", then press O.


By David Rakowski. Pretty good, basically clean design, though the text on some keys (e.g. Caps Lock) is tiny. Since Mac Key Caps is not licensed by Linotype for web use, this is my favorite (even without a Windows Flag key or notebook Fn key). One glitch: the font had spacing errors, widest characters overlapping other characters; running it through the Font Squirrel Generator (to make the ttf/otf, eot, woff, svg font files needed to load in almost all browsers) with the "Simplify Outlines" option, fixed it.

Apple/Cmd, Option, Alt, Ctrl zÛΩx o
Left, Right, Up, Down, No Next, No Previous jlik
Shift, Enter, Return, Esc, Tab, Backspace, Delete, CapsLock
qeb stn ∂≈c
PrintScrn, NumLock, Scroll Lock, Ins, Del d√gfy
Home, End, PageUp, PageDn huπr
F1-F12 ¡™£¢∞ §¶•ªº –≠“‘«
Help, Pause, Clear, Num-Enter wpç

Betsy Flanagan Two

Betsy Flanagan has letter and number keys, Betsy Flanagan Two has special keys. Separate fonts lets you use letters to map the keys (instead of awkward decimal codes). Key labels get illegible at small sizes, so have to use a large point size.

Betsy Flanagan Two has all keycaps for Windows (except notebook Fn key), no Mac keys:
acbdi jEFGI KLNeP QRSTU VWXYZ 12345 67890 !?
a=Left, c=Right, b=Up, d=Down, i=Windows Flag, j=Menu, E=Alt, F=Ctrl, G=Shift, I=Enter, K=Space, L=Esc, N=Tab, e=Bksp, P=CapsLock, Q=NumLock, R=PrintScrn, S=Scroll Lock, T=Pause, U=Ins, V=Del, W=Home, X=End, Y=PageUp, Z=PageDn, 1-0,!,? = F1-F12

Press E-E, press N and type "Hello", then press I.


MacKeyCapsRegular has all Mac keys including numeric keypad, no Windows keys. Space character is so wide, you have to switch to another font. Key labels are illegible when small, so must use very large font size so label size is comparable to text size :
Apple, Option, Cmd, Alt, Alt Gr, Ctrl, Opt
åÌÅ Øçı
Left, Right, Up, Down, Next, Previous
Shift, Enter, Return, Space, Esc, Tab(2), Bksp, (exaggerated space), CapsLock, Light
Ê©®× Ϙ†Ÿ Ç≈
PrintScrn, NumLock, Light, Scroll Lock, Light, Ins/Help, Del(2)
„ˆΣÙ ¥˙∂ˆ
Home, End, PageUp, PageDn ¹¾½¼
F1-F15 ∕¤‹› ‡° ∙‚¡™ „¢∞
British Pound, Section, +-, Keypad-0, Wide Shift, Anchor, UpAnchor
£§ªº ÍŒ∏‰


Keystroke has acceptable text on some keys, but has miniscule text on many essential keys (just look at the Esc next to the Tab). No Windows Flag or Right-Click Menu, no Mac keys — can't possibly use it.
Alt, Ctrl, Left, Right, Up, Down, Blank Key ¦§ ¥¤£¢¡
Shift, Enter, Return, Space, Esc, Tab, No Bksp, CapsLock ¨«¬¡ °©ª
PrintScrn, No NumLock, Scroll Lock, Ins, Del
F1-F12 characters are in the font, display in my font utility, but don't showing up on web pages, must be damaged somehow.
‘’“” •–—˜ ™š›œ
Home, End, PageUp, PageDn ²¶³´


KeyCapsRegular has Mac Opt & Cmd keys, no Windows Flag or Right-Menu keys. Is missing Bksp, F11, F12. The font is licensed, and apparently not available from the owner (found on several font web sites "for free").
Apple/Cmd, Option, Alt, Ctrl ©®ab
Left, Right, Up, Down, No Next, Previous zxwy ¦
Shift, Enter, Return, Space, Esc, Tab, No Bksp, CapsLock jefk^v@
PrintScrn, NumLock, Scroll Lock, Ins, Del i][hc
Home, End, PageUp, PageDn, Reset gd{}`
F1-F10, No F11 or F12 lmnopqrstu


KeyCapsNormal is missing Windows Flag, Menu, Enter, Del keys I'd need, and has illegible Alt, Ctrl, Shift keys! Blurry text for key labels. Requires large gaps between lines, from having to set the point size of the keys so large just to make the labels legible. Yuck!
This is a picture of it, I'm deleting the font:


                         

Characters f041-f05a (f05b-f060 blanks, f061-f07a are duplicates)

Other Keycap Fonts

Elfring KeyCaps, $39.95, includes Windows Flag and Mouse button characters, arrows, tab, backspace, etc. Has left and right edges of the keycap as a character, and all upper-case letters have matching top and bottom edges, so you can make a keycap with any text, very nice! Also has international KeyCaps version that covers most Western European languages.

RatSample has nicely formed keycaps, but the sample has no special keys, and has a short trial period. Ratsample™ Mac 3D and Ratsample PC 3D contain the entire Ratcaps™ 3D character set for the appropriate computer platform, plus four extra characters from Ratkeys™ 3D.

Mac Key Caps Pi™ Regular $39 -

Keystrokes (PC/Mac keys) $4.99 per computer.