Christian Heilmann

Interactive Typography cheatsheet

Monday, February 18th, 2019 at 2:31 pm

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

Share on Mastodon (needs instance)

Share on BlueSky

Newsletter

Check out the Dev Digest Newsletter I write every week for WeAreDevelopers. Latest issues:

160: Graphs and RAGs explained and VS Code extension hacks Graphs and RAG explained, how AI is reshaping UI and work, how to efficiently use Cursor, VS Code extensions security issues.
159: AI pipelines, 10x faster TypeScript, How to interview How to use LLMs to help you write code and how much electricity does that use? Is your API secure? 10x faster TypeScript thanks to Go!
158: 🕹️ Super Mario AI 🔑 API keys in LLMs 🤙🏾 Vibe Coding Why is AI playing Super Mario? How is hallucinating the least of our worries and what are rules for developing Safety Critical Code?
157: CUDA in Python, Gemini Code Assist and back-dooring LLMs We met with a CUDA expert from NVIDIA about the future of hardware, we look at how AI fails and how to play pong on 140 browser tabs.
156: Enterprise dead, all about Bluesky and React moves on! Learn about Bluesky as a platform, how to build a React App and how to speed up SQL. And play an impossible game in the browser.

My other work: