Typographic anatomy: An interactive guide

Typography is the practice of positioning written words so that the text is both legible and pleasing to the eye of the reader. As such, typography is about both art and function. Strong typography skills are crucial for designers, who must consider its many aspects, including typefaces and font families; their sizes and weights; spacing between letters, lines, and words; and the alignment, or justification, of blocks of text.

For this post, my colleague Justin and I collaborated on designing an interactive to make exploring the anatomy of letters informative, visually appealing, and fun. You’ve seen these letters, but you probably aren’t familiar with their proper terms and many distinct parts of letterforms. And yes, they have specific names.

We built this guide in Ceros, a content platform we use here at Leff for creating interactive online designs and animated elements, and we set it in the Sabon font. It’s one of my favorite serif typefaces because its beautiful, classic look makes reading easier. Sabon is also a popular choice in book publishing.

Since this is a typography post, a little more background on Sabon: this font was designed in the 1960s by Jan Tschichold, who based it on Garamond, a 16th-century French, old style roman font. Tschichold is hailed as one of the greatest book designers and typographers in history.

Contact us with your questions about design, fonts, typography, or creating interactives. Trust me, we can talk about Sabon for hours.

We recommend exploring the interactive in full-screen mode; click the blue button at the top right.

Delilah Zak

The principal visualization artist at Leff, Delilah works collaboratively with the team to conceptualize and create all manner of graphic content, from public reports to management articles to standalone infographics and beyond.

Leave a Reply