Interactive Typography cheatsheet

A few weeks ago I stumbled across a great resource, a typography cheat sheet explaining the proper names of all the different parts of letters. I thought it would be fun to turn this into an interactive cheat sheet and wondered how much would be involved. Turns out, it wasn’t that much, so here is an interactive typography cheat sheet for you.

The code is available on GitHub and I’d love to see contributions and improvement requests.

One quick note on quality and resources:

I was impressed how easy this was to do as the resource provided by the original creator Martin Silvertant was not only a PDF or JPG, but a cleanly organized AI file. My partner helped me to save it as an SVG and I was off to the races. The exported SVG was big, but it was easy to spot which parts aren’t needed. All I did was to use browser developer tools to see what is what by clicking the paths in the SVG in the source view and seeing them highlighted in the rendered SVG. I added an ID for each element and created a map in JavaScript to define what label to show when each element is clicked.

const information = {
  'e1': 'tittle',
  'e2': 'shoulder',
  'e3': 'aperture',
  'e4': 'stem',
 
/* and so on until */
 
  'e49': 'head serif'
}

The rest of the JavaScript is a pretty straightforward event delegation example. Using a slight transition in the CSS is the reason for the smooth transitions.

Things I’d love to see:

• Pull requests with localized versions (I have no idea what these things are called in other languages) and I will write a contribution guide.

Things I am planning to do:

• Turn this into a quiz/game