Question: In our (web) application, we want tooltips (read: title attributes) that also indicate shortcuts for buttons. We have some button that involve the cursor ('arrow') keys. 

We've tried using characters like ⬅ and ←, but they just don't look right. We've also tried spelling it out, e.g. "Left Arrow Key", but that's a bit verbose.

What's a good way to do this?

Answer: 
Maybe you could try a dingbat font with actual keyboard keys? Something like this:

![alt text](https://i.stack.imgur.com/2bxjj.png)
If you move beyond using the title attribute and instead utilize a CSS solution, you could actually provide both a small image of the keyboard key as well as a short description below it. There are a huge collection of very interesting web pages and example images of "CSS Keyboard Key images" use that phrase in a Google Image search for starters here is an erudite page by somebody who cracked the way it is done on Stack Overflow pages see:-

<http://www.jimmyscode.com/css-styling-for-kbd-tags/>