Typography: Anatomy of Letterforms

Typography is a critical component of web design that often goes underappreciated. As a full-stack developer, it‘s essential to understand the anatomy and terminology of letterforms so you can choose and implement typography that enhances the user experience on every project.

Far from just arranging some letters on the screen, great typography requires a deep knowledge of how the intricate parts of characters influence the readability, personality, and performance of the text. Let‘s take a comprehensive look at the anatomy of letterforms and why it matters for building successful user interfaces on the web.

Dissecting the Anatomy of Letterforms

At the core of typography is the alphabet – those seemingly simple shapes we‘ve seen all our lives. However, when you really examine the construction of letterforms, you‘ll find a rich architecture of elements that combine to create the typefaces we know and love.

Source: Typedia

The main components of a letterform can be broken down into:

Strokes

The strokes form the main body of the letterform. They are the lines, curves, and other core shapes that define the recognizable parts of each character.

Common types of strokes include:

• Stems – The main vertical or diagonal strokes (e.g. in H, T, V)
• Crossbars – Horizontal strokes connecting two stems (e.g. in A, H, f, t)
• Shoulders – Curved strokes, also called an arch (e.g. in h, m, n)
• Bowls – Curved strokes that create an enclosed space (e.g. in a, b, d, o)
• Legs – Short, often angled strokes extending from the main stroke (e.g. in K, k, R)

Strokes are further defined by their position and orientation relative to several key imaginary lines:

• Baseline – The invisible line where most characters sit or begin
• Mean line – The top of lowercase letters, excluding ascenders
• x-height – The height of lowercase letters, typically based on the x character
• Cap height – The height of uppercase letters from baseline to top
• Ascender line – The height of ascenders that exceed the mean line (e.g. in b, d, h, k)
• Descender line – The depth of descenders that drop below the baseline (e.g. in g, j, p, q)

The length, position, and interplay of these strokes and lines form the foundation of the font‘s overall appearance and personality.

Terminals

The terminals are the end points of the strokes. The design of the terminals is one of the most distinctive characteristics of a typeface.

Typefaces generally fall into two categories based on their terminal features:

Serif	Sans-serif
Decorative strokes at the end of main strokes	No decorative strokes or embellishments
Easier to read for long copy	Better for short text & digital displays
Conveys traditionalism and formality	Conveys simplicity and modernism

Serif fonts have an extra stroke or flourish at the beginning or end of the main strokes, while sans-serif fonts have no extensions and terminate with a plain edge.

There are many different styles of serif fonts, classified by the shape of their serifs:

• Hairline – Very thin, tapered serifs
• Wedge – Triangular serif, wider at the base
• Slab – Heavy, block-like rectangular serifs with little or no bracketing
• Bracketed – Serif with curved brackets connecting them to the stroke
• Rounded – Serif with a rounded end,ball-shaped

While serifs increase readability in print, sans-serifs tend to be more legible on screens, especially at smaller sizes. This is why sans-serifs are used predominantly for body copy on the web.

Space

The final element of letterform anatomy is the space in and around the character. This includes features like:

• Counters – The enclosed or partially enclosed spaces inside letters (e.g. in a, b, d, o)
• Apertures – The opening between an enclosed counter and the outside of the letter (e.g. in c, f, s)

The proportions and size of the spaces contribute to the letterform‘s overall style – whether it appears more open and airy or dense and compact.

Type Classifications & Measurements

In addition to the construction of individual letterforms, typography involves several key conventions and units for organizing and measuring type.

Typeface vs. Font

Although the terms "typeface" and "font" are often used synonymously, they do have a technical distinction:

• Typeface – The overall visual design of a set of characters
• Font – A specific weight, width, and style of a typeface

So for example, Helvetica is a typeface family, while 12pt bold Helvetica is a font.

Type Families

A type family is a collection of related fonts with different variants and styles. Typical families include:

• Regular
• Bold
• Italic
• Bold italic
• Condensed
• Extended

Well-designed families maintain the core characteristics and proportions across all variations so they feel cohesive when combined.

Sizing Type

The size of type is traditionally measured in points (pt), with one point equal to 1/72 of an inch. Points refer to the height of the typeface block from the ascender line to the descender line.

Another common unit for type sizes is the pica (pc). A pica equals 12 points, with 6 picas in an inch. Picas are more often used for line-level sizing (line length or leading), while points are used for individual characters.

These print-centric units have been adapted for digital media, with 1pt usually treated as 1/72 of an inch on a display. However, digital type relies more on pixel-based sizes, such as setting body copy to a 16px font size.

Spacing & Position

The final key aspects of type measurement relate to the spacing between characters and lines:

• Tracking – Adjusts the space between characters evenly across a range of text
• Kerning – Adjusts the space between a specific pair of characters
• Leading – Adjusts the vertical space between baselines of lines of text (line-height in CSS)

All three of these features can be used to refine the overall appearance and readability of a block of text. For example, increasing the tracking or leading can make densely-packed text feel more open and readable. Precise kerning is often used in headings or logos to create a cleaner, better-balanced result.

Impact of Typography on the User Experience

As a developer, it‘s crucial to recognize how the anatomy of letterforms and the choices you make about typography contribute to the usability, readability, and overall effectiveness of your websites and apps.

In study after study, typography has been shown to have a direct effect on factors like reading speed, comprehension, and even credibility.

For example, in one study of how typography affects reader mood and productivity, the researchers found that good typography "induces a good mood, which in turn leads to greater patience" and persistence in reading the text, as well as increasing overall comprehension and reading speed.

Source: Kuhna, M. et al (2018)

Another famous study by Colin Wheildon, author of Type & Layout, found that appropriate use of typography could enhance comprehension by up to 125%, while poor typography accounted for a loss of comprehension as high as 55%.

Source: Colin Wheildon, Type & Layout (2005)

Even minor tweaks to typography like font size can have a significant impact. When the New York Times increased their default font size from 12px to 14px, it improved readability so much that they saw a 7% increase in user engagement time. For a massive site like NYTimes.com, that small change likely yielded millions more in ad revenue.

The characteristics of letterform anatomy also play a key role in affecting the emotion, tone, and perceived appropriateness of the text.

A survey by Shaikh & Fox presented users with a variety of fonts and had them match the fonts to attibutes like stable, cheap, formal, and attractive. Clear trends emerged, with fonts like Courier and Times ranking high for stability, while script fonts were seen as more elegant and creative.

Source: Shaikh & Fox (2008)

Understanding these anatomical features and the personalities they convey allows you to make wiser choices about typography. You can align the typeface with the content‘s message and better shape the user‘s interpretation.

In a competitive digital landscape where every interaction matters, optimizing typography is a critical skill. Your goal should always be to remove typographic barriers so users can effortlessly read and engage with the content.

Typography & Accessibility

On the modern, multi-device web, accessibility is a huge concern. Your content needs to be legible and readable to the widest possible audience on the widest possible range of devices.

The decisions you make about typography can make or break the accessibility of a site. Some key considerations include:

• Font size & zooming – Use relative units so text scales with user preferences
• Color & contrast – Ensure adequate contrast between text and background for legibility
• Line lengths – Avoid long lines of text that are hard to track across the screen
• Spacing & kerning – Adjust to ensure distinct letterforms and clear word shapes

By keeping the anatomy of letterforms in mind and following WCAG accessibility guidelines for typography, you can create interfaces that are more inclusive and accomodating of all users‘ needs.

Optimizing Typography Performance

In addition to aesthetics and usability, typography also impacts the performance and technical efficiency of a site. With the rise of web fonts and typographic flexibility in CSS, there are more opportunities than ever to fine-tune the typography – but also more chances for things to go wrong.

Some performance issues to watch out for with typography include:

• Font files sizes – Custom fonts can add significant page weight if not optimized
• Font loading – Flash of unstyled or invisible text (FOUT/FOIT) while fonts are loading
• Font stacks – Improper fallback fonts if custom fonts fail to load
• Custom features – Ligatures, alternates, and OpenType features can cause performance hits
• Responsive text – Sizing text properly across viewports is tricky and can cause reflows

Optimizing your font loading strategy, minimizing the size of font files, using variable fonts, and bulletproofing your font stacks can go a long way to providing a smooth, snappy typographic experience. Tools like FontFaceObserver and subsetting fonts for only the characters you need are helpful for keeping things fast.

Typography Moving Forward

The evolution of typography on the web has come a long way since the days of 11px Verdana. As type rendering and font technologies continue to improve, there are more exciting developments all the time:

• Variable fonts – Single font files that can interpolate between custom axes and weights
• Dynamic responsive typography – Adapt font sizes and line lengths fluidly to screen sizes
• Advanced CSS properties – Control over OpenType features, kerning, ligatures, alternates, etc.
• Improved font file formats – WOFF2 and newer formats for optimized font compression
• Emotion detection – Detect user sentiment and adjust typography to match mood
• Personalized type – Adapt typography based on user preferences and accessibility needs
• Multi-script fonts – Better support for combining different languages and writing systems

By staying on top of these advancements and continuing to treat typography as an essential design element, not an afterthought, we can create more effective, equitable, and engaging experiences for all users.

After all, as legendary typographer Matthew Carter said:

"Typography at its best is a visual form of language linking timelessness and time."

It‘s up to us to shape that language with knowledge, skill, and care – one letterform at a time.