A List Apart

Nick Sherman on Typography

Font Hinting and the Future of Responsive Typography

Font hinting has been the source of countless headaches for type designers and users. Meanwhile, some of the most fundamental and important elements of typography still can’t be addressed with the web of today. Rather than being seen as a tedious chore whose demise will be celebrated, hinting might actually provide the essentials for truly responsive design, and vastly expand the possibilities of digital typography for designers, publishers, and readers.

The fundamentals of hinting

Article Continues Below

Type and web designers usually think of “hinting” as instructions built into digital fonts to improve their rendering on a grid of pixels. Hinting pushes the points of a font’s Bézier curves around according to contextual conditions, such as the font’s rendering size. Though it’s now associated with type on screens, hinting was first used in the 1980s to improve rendering on low-resolution printers.

Thinking about it in these terms, hinting is responsive type that existed before the web: The font performs a media query of sorts to learn its size, then responds by repositioning points in each glyph according to built-in instructions, or “hints.”

The outlines of Georgia—one of the world’s most thoroughly mastered screen fonts—are grossly distorted when hinting is applied for different sizes. These distortions are very much intentional though, since they provide the desired results at actual size. (Thanks to Petr van Blokland for supplying post-hinting outlines of Georgia.)

In other words, hinting is to fonts what responsive layout is to websites. It allows a single font file to adapt to a variety of contexts, the same way CSS allows a single HTML file to adapt to a variety of contexts. In fact, Håkon W. Lie used the term “presentation hints” in 1994 to summarize his original proposal for CSS.

Hating hinting

Developing hinting instructions can be extremely difficult, expensive, and time-consuming. Automated hinting tools have begun to ease some of this pain, but for smaller body type—often the most important type on any page—there’s still no substitute for the quality that can be achieved through tedious manual hinting. That’s why most people who deal with hinting today eagerly anticipate a future when they’ll no longer need to worry about it. They optimistically cite advances in display resolutions and rendering software as sure signs that hinting will be obsolete within a few years. (Such claims have been made for the past twenty years, and will probably continue to be made for some time to come.) But this ardent desire to see the end of hinting is based on a narrow understanding of what hinting can be.

I used to be among the impatient hinting haters, cursing Apple (yes, Apple—whose rendering engines now all but ignore hinting data) for popularizing the concept of hinted screen fonts with their TrueType spec in 1991. And I would be lying if I claimed that the issues currently related to hinting don’t still cause me trouble. However, I’m very reluctant to dismiss the general concept of hinting just because current implementations of the idea are limited and hard to deal with.

Pushing toward macro-hinting

The hinting that people know and use today only represents a small sliver of the possibilities for contextual typeface modification. Considering that it’s impossible to query a font’s absolute size—never mind things like font smoothing conditions or physical pixel density—many of the most basic fundamentals of typography, typeface design, and readability are still lost on the web.

With better media query features in place, typefaces could be endowed with what I call macro-hinting: intelligence to modify a typeface according to variables beyond the nominal size. Such modifications could happen automatically according to the instructions of the type designer, or they could be adjusted by the specifications of the typographer.

A few contextual typeface modifications that could be possible with macro-hinting include:

  • Ascenders and descenders that dynamically shrink when the line height is reduced.
  • Glyphs that condense as column width is reduced.
  • Hairlines that are always exactly one pixel, gradually increasing the overall contrast between thick and thin strokes as the size increases. (This would be a hit with fashion magazines.)
  • Subtle weight adjustments to give a consistent feeling across different rendering environments, without needing separate font files.

Other context-specific typeface modifications

The idea of modifying a typeface’s letterforms for different situations is nothing new. As far back as Gutenberg, each size of a letterpress typeface has traditionally featured “optical size” variations that altered the spacing, proportions, weight, and other details for optimal results. This concept has been applied to some digital typefaces that are offered as “Text” and “Display” versions, for example.

Each size of Century Expanded as it existed in analog metal form had design variations to maintain stylistic traits at different sizes, compensate for technical printing issues, and improve readability.

In addition to optical size variations, some typefaces are offered in a range of “grades”—subtly different versions that allow for a high level of consistency across printing processes, paper stocks, and even humidity levels that affect ink spread.

Quiosco’s range of grades features glyphs with subtly different weights but identical spacing.

Adobe’s Multiple Master (MM) technology allows users to change a typeface along multiple axes such as weight, width, and optical size. Though MM technology is now mostly obsolete in typesetting software, it’s still used by type designers to generate font families, and—interestingly—in Adobe Acrobat for scaling generic fallback fonts to match the proportions of missing fonts.

Penumbra MM allows designers to adjust its weight and serifs.

For another example of contextual typeface modifications, applications like InDesign can tweak spacing or glyph widths for better copyfit. These automated modifications to a typeface have a very limited range of acceptable use, but they afford typographers that much more flexibility when needed.

InDesign’s paragraph settings let typographers define a range of acceptable variations in spacing and glyph widths to improve justification.

As with hinting, these methods of varying a typeface’s design exist to improve performance in context. The interesting twist is that, like hinting, they all come from the relatively static world of print typography, but are still largely absent from the otherwise dynamic world of web typography, which seems like their natural niche.

Static fonts floating in the seas of dynamic layout

In Tim Brown’s Universal Typography presentation (go to 15:50), he describes contemporary web typography as a practice in abstraction, determining limits, and defining ranges of acceptable solutions:

We used to think about typography as a set of fixed decisions, but now we understand it as a continuum of conditional logic.

I completely agree with him, but I wish the continuum didn’t end when it reached the base level of the typeface. In the current world of web typography, defining a typeface is still very much about fixed decisions. Web browsers can automatically interpolate the position, shape, and size of any element on the page, yet when it comes to the most basic typographic forms, there’s no instrument for adaptation.

We are beginning to see cases where designers will detect the users’ conditions and serve different font files accordingly. This method, which I call “detect and serve,” shows that there is still a need for context-specific typeface modifications on the web.

Indeed, until there is universal support for WOFF, even a single static type style requires an array of fonts in different formats just to match the requirements of different browsers. Providing real-world solutions for larger type families, or even the lowest level of contextual optimization, can require dozens or even hundreds of mostly redundant files.

As you can imagine, generating and serving individual font files for every possible situation quickly gets out of hand. The same way that web designers shouldn’t have to maintain multiple HTML files for every conceivable viewing condition, a broader implementation of the concepts behind hinting would allow a single responsive typeface to dynamically provide optimal results across a multitude of contexts.

Evolution, not extinction

In a series of follow-up columns, I’ll address the relationships between typefaces and media queries in more depth. For now, let it suffice to say that many pieces are still missing from the puzzle of responsive typography on the web.

Solving this puzzle will take time. Inventing new standards is not easy, never mind getting them widely supported. Bringing these ideas into practical reality will require new tools, coding languages, working groups, and public education. It won’t happen overnight.

In the short to medium term, we’ll see increasingly complex hacks to achieve similar results. The “detect and serve” method will likely become more popular in the near future, with font vendors generating arrays of distinct variations on each typeface. Some may even develop systems to spit out font files on demand to match each user’s situation. People will still complain about hinting, and hinting will continue to be a struggle.

However, at the end of the day, I don’t expect to see the extinction of hinting anytime soon. Instead, I foresee it evolving toward more advanced methods of describing digital letterforms. It may sound like science fiction, but typefaces will eventually gain more awareness of their internal structures and external surroundings. The concepts that underly hinting will only become more relevant as the scope of responsive design continues to expand.

18 Reader Comments

Load Comments