Micro-Typography: How To Space And Kern Punctuation Marks And Other Symbols — Smashing Magazine

Micro-Typography: The Case For Spacing Punctuation

Typography is often described as the art of arranging type, but just as important is the arrangement of the absence of type. Between the letterforms and glyphs lies a layer of white space that, when thoughtfully adjusted, separates competent typesetting from the genuinely refined. One of the more subtle yet consequential details in this layer concerns the horizontal spacing around punctuation marks and other non-alphabetic symbols.

For designers looking to improve reading comfort, especially in long-form text, understanding and applying this level of micro-typography can make a meaningful difference. But doing so with current tools is surprisingly cumbersome. Here we look at what spacing punctuation actually means, why it can improve legibility, and where today’s workflow complications lie.

Spacing Definition and Its Subtle Impact

The practice focuses on the unequal distribution of white space around punctuation and symbols, but it differs from the standard tracking (letter-spacing) or kerning adjustments you might already make at a global level. The target is specifically the space flanking marks like periods, quotes, and brackets, usually within a sentence rather than across an entire block of text.

That before-and-after view, in its default state, may look almost arbitrarily different—but it provides a relevant first view into the details of micro-typography. While initially imperceptible, consistent and small additions of space in these areas help information align more cleanly for the reader.

The benefits also extend beyond pure aesthetics. Arguments, while largely unsupported by confirmed studies, point to potentially improved readability for aging readers and for children learning to read at roughly age six. The reasoning follows that increased visual emphasis gives the eye more time to register a mark without it being compressed against the next word or character.

There is reason to view these spacing decisions as analogous to the use of pauses in a musical score—a function of rhythm and timing to guide the narrative. Surveying typographic manuals, such as Jost Hochuli’s Detail in Typography, endorses proper spatial control of these symbols as a hallmark of expert typesetting. While some may argue that the effect is unnoticed by most, and thus irrelevant, there is a core belief among practitioners that clarity in punctuation ultimately strengthens written communication.

“Every typographic decision—font, size, position, orientation, weight, colour, style—affects the reader’s speed of access, the rate at which the message is engaged by the nervous system.” — Bruce Mau

Which Space Width And Which Marks To Target?

Typographers do not treat all spaces equally. In traditional typesetting, various fixed widths exist for specific use cases. Typically, these fall into categories referencing the em width, and while adjustments might vary in width depending on application, characters and punctuation usually receive spaced additions around ¼ em maximum.

Not all spaces are created equal either, in practice or in letterpress lore. As typesetter Roland Stieger notes, this process is rarely mechanical. “We do not always use the same spaces, because every typeface has a different kerning,” Stieger says. “For short texts, we often do it by hand. With some fonts I find a hair space is fine, sometimes I find a thin space better.”

Which marks deserve treatment? Spacing is often applied in one of two directions, depending on the character’s shape. In common practice, space is introduced to the left of these particular marks:

: ; ” ’ ! ? / ) ] } * ¿ › » @ ® ™ ℓ ° ¡ ' " † + = ÷ - – —

Furthermore, space is often positioned to the right of these symbols:

“ ‘ / ( [ { > ≥ < ≤ £ $ ¢ € ‹ « √ μ # @ + = ÷ - – —

A closer review with sample text confirms that many additional characters and diacritics may require a manual nudge on one side or the other, often leaving the symbols visually cramped against their neighbors if left unattended.

When viewing figures 3 through 6, the case for smoother text may be visually compelling. The result suggests that the original font default stops short of offering the breathing room the eye might need, prompting the reasoning that the typeface itself may not have certain baseline kerning or spacing tasks complete.

Variation in Default Face Spacing

Many common questions arise from this topic, including: Are all typefaces initially set to the same metric for space around punctuation? In a word: no.

The amount of default space assigned by the typeface designer is as varied as typefaces themselves. For example, a sans-serif like Fira Sans Regular carries a cap width that sees tracking run a bit tight on the page. A serif designed more to extended reading motion, like Spectral Regular, has generous letter spacing that better accommodates punctuation as a matter of standard default.

Metrics are often built in to this level, as seen with faces like FF Unit, known for generous default tracking. In such cases, punctuation spacing adjustments are minimal. The scale leads to opposite ends of the spectrum; with monospace faces like Fira Mono Regular, every character shares a uniform width, creating grid alignment that renders punctuation spacing virtually a non-issue by design.

So, a designer will find that some typefaces come “ready to go” while others demand deliberate tweaking for polish.

The Core Problems With Achieving Proper Spacing Today

While professional judgment can take you far, it can only take you as far as the implementation workflow allows. Measured against the idea of actually producing this level of refinement on a job’s deadline with a client’s constraints, the modern toolset falls short on multiple fronts.

• Under any technique, adjusting punctuation spacing is too time-consuming for practical implementation across long documents.
• Relying on search/replace via regex (GREP) on a full text may present a large amount of unintended alterations or pose hidden issues downstream, embodying a delicate if not high-risk approach.
• For many users, accessing and reworking the default kerning and sidebearing assignments inserted into the font itself proves neither easy nor recommended practice.
• For online content (through 2020), applying controlled white space calls for a conspicuous amount of work and benefits from limited system-level support.
• In e-book or digital publishing files, very often the workaround (often adding this on the web), means web or code is stripped away at export, otherwise leading to rendering issues, including unsupported glyph or form issues displaying as blank squares.

Why Manual Spacing Is Impractical At Scale

For a 30-page A5 book, manual spacing and kerning is feasible. The time added to the total typesetting cost is negligible. A 300-page academic book is a different story. Manually adding spaces in Adobe InDesign or Quark would be far too time-consuming. On a website, you could open every page in Adobe Dreamweaver and insert spacing characters such as hair spaces and thin spaces, but few clients are willing to pay for that level of typographic quality. Nicky Barneby, writing in TypoGraphic 59, documents Penguin’s composition rules, set by Jan Tschichold in 1946. The practical need, as stated by typographers, is a method that applies agreed-upon spacing to a defined list of characters and symbols across an entire book or website in roughly 15 minutes, not days.

Find-And-Replace And GREP Are Risky Shortcuts

Find-and-replace is available in Adobe InDesign, Quark, Microsoft Word and Adobe Dreamweaver. You could watch changes happen manually, one pair at a time, but doing so for an entire book across all character and symbol combinations would add days to the typesetting schedule.

Ralf Herrmann has demonstrated GREP for this purpose in Adobe InDesign. Yet mass find-and-replace without seeing exactly what the software is doing is dangerous, especially with real-world clients where mistakes can be disastrous. GREP is also too technical for those who do not code. Bram de Does, designer of what some consider the world’s two most beautiful typefaces, summarised the sentiment:

“I like to do manual things as much as possible.”

Another problem emerges when you use a single hair space everywhere and later want to switch to a thin space. A global find-and-replace would convert every hair space, but two adjacent hair spaces would become two thin spaces; the combined width would no longer match the original intention. Find-and-replace is a solution waiting to go wrong.

Editing Kerning Values Inside A Typeface

Kerning changes space between two specific letters or symbols; letterspacing (tracking) adds or removes space across many characters. Every typeface includes a built-in kerning table defined by its designer. Robert Bringhurst, in The Elements of Typographic Style, proposes a different approach:

“One way to refine the typography of a text is to work your way through it line by line, putting space in here, removing it there, and repositioning errant characters one by one. But if these refinements are made to the font itself, you will never need to make them again. They are done for good.”

Editing kerning values or sidebearings directly in the font file, however, is not recommended for two reasons:

1. Typeface design software import options are not a casual exercise. Typefaces produced before roughly 2004 were simpler and less complex to import than today’s fonts. With variable-font settings and modern import complexities, errors are guaranteed.
2. Most typeface licences treat adjustments to built-in kerning values and sidebearings as modifications, which end-user licence agreements often forbid. Richard Hendel has suggested open-source typefaces might allow it, but that is not guaranteed.

Consider the pair A”, which carries a kerning value of -32. If you want to add space to your selected marks using a +30 unit, adjusting to -2 keeps the math simple. But what if the original value were -26? The arithmetic is doable but slow, and complexity quickly multiplies.

Quark’s Rare Kerning Table Editing

Quark has offered kerning table editing for years, a feature Adobe InDesign lacks. It lets you pick a typeface and single weight, then enter a kerning pair to modify and override the built-in table. The “Kerning Pair” box takes two characters; the “With-Stream” box adjusts horizontal space in increments of 10 units; the “Cross-Stream” box adjusts vertical space, similar to a baseline shift, also in 10-unit increments. The customised pair applies throughout the Quark document and can be saved and exported. It is a useful, time-saving option that edges closer to the ideal workflow.

Web Typography Lacks Granular Control

Adding space to punctuation and symbols on the web requires one of two methods:

1. Specifying an HTML or XML entity for a white space character, such as a hair space or thin space, directly in the markup, as Yves Peters describes.
2. Creating two CSS classes, one for left-side space and one for right-side space, then wrapping each symbol in a span tag.

Both work, but applying them across hundreds of web pages becomes unmanageable. For kerning, browsers essentially offer two CSS options: font-kerning: normal (use built-in kerning) and font-kerning: none (ignore it). Mozilla Developer Network documents the pair. Neither offers the control typographers need.

Returning to A” with its -32 kerning value, a hair space could replace numerical kerning entirely. White space characters have fixed, consistent widths, so no math is required; one hair space behaves the same wherever it appears.

eBooks Introduce Tofu Characters

White space entities such as non-breaking spaces and non-breaking hyphens can become empty tofu (□) characters when a document exports to an eBook format. These spaces should probably be stripped out before export. eBook kerning relies solely on the typeface’s built-in values; there is no way to override it. Options remain limited.

What Sidebearings Offer

Sidebearings are the fixed horizontal space on either side of a single character or symbol. Kerning modifies space between pairs; sidebearings behave like fixed blocks on the left and right of a glyph. Once set, they affect every instance of that glyph, with kerning applied on top. The two values are left sidebearing (LSB) and right sidebearing (RSB), ensuring characters sit evenly beside one another before kerning occurs.

Monospace fonts like Fira Mono Regular align all letters vertically because they share identical sidebearings; that is what makes them monospaced. Non-monospace typefaces have varied sidebearings across each character’s width. Good sidebearings make kerning easier, echoing Bringhurst’s point: fix it once in the font and it never needs fixing again.

In FontLab VI’s Manual Metrics Editing panel, selected glyphs reveal specific measurements. The e shows a total width of 591 units, with vertical guide lines marking its bounds. Its left sidebearing measures 68 units; the right sidebearing measures 53 units.

Consider the colon (:), which typically benefits from more space on its left so it sits away from the preceding character. Editing the left sidebearing would give every colon an automatic, consistent offset. Every usage would gain that space without further intervention. But that is not the end of the story.

In text like 1:1, an increased default left sidebearing could render as 1 :1. A kerning pair for 1: might fix that specific overlap, though expertise in that area is admittedly thin. There are, fortunately, potentially simpler and clearer alternatives to explore.

Three Routes to Better Punctuation Spacing

If adjusting spaces around punctuation through white-space characters has proven unworkable, what alternatives exist? The author of the original piece suggests three broad directions, each with its own trade-offs for print and web typography.

White-Space Edits in Print and Web

To clarify: Adding white spaces is basically adding a white space character (entity) as an alternative to adjusting kerning values.

An ideal white-space editing system would give typographers several controls that current tools lack:

1. A preset list of punctuation and symbols to which space can be added.
2. Control over whether that space is added to the left or right side of each character.
3. The ability to exclude problematic combinations, such as URLs. For instance, adding space to both sides of a forward slash would turn https:// into https:/ /, which is clearly undesirable.
4. A user-defined spacing value, perhaps chosen from a small set: in print, values like 25, 50, 75, 100 measured in 1/1000 em (as InDesign does), or pixel-based values like 1px, 2px, 3px, 4px for web.
5. The ability to attach these settings to paragraph or character style sheets in applications like InDesign, or to CSS classes on the web. This could be handled either by the user or delegated to typeface designers through OpenType feature syntax rules.

Practical implementation might look like amateur CSS or OpenType code, but the core requirement is a method to override a font's built-in spacing defaults, whether in a page layout app or in a stylesheet.

Kerning Table Editing in Print and Web

To clarify: Kerning is the customization of space in between two letters or symbols. Kerning values are stored in a font file in a kerning table (kerning can also be applied and customized via software and stored within software). Kerning values override the three sidebearing values (left sidebearing, width bearing, and right sidebearing). Kerning can also be customised on top of the built-in kerning table through software like Adobe InDesign and Quark. Letterspacing (also known as tracking) is a consistent positive (+) or negative (-) space value applied across a whole line of text.

Quark has long offered a kerning table editor; InDesign has not. But editing kerning pairs the traditional way is impractical for punctuation: addressing every combination of a character followed by a colon (a:, b:, c:, and so on) would involve thousands of individual pairs. A better approach would let a user specify a single character and apply a value like +25 units to one side, effectively creating a global rule for that glyph.

On the web, a similar mechanism could be expressed in CSS or via OpenType feature syntax. However, any such system needs a way to read the font's existing kerning values first, since without that baseline it is impossible to make informed adjustments.

Sidebearing Edits: The Bottom Layer

To clarify: Sidebearings differ from kerning because they act like bottom-level (non-overridable) concrete blocks, forming the width of all the individual letters and symbols. A sidebearing value affects all instances of the letter or symbol where it is used, and the kerning values are applied on top of it. So, a lowercase i has a narrower width sidebearing than a lowercase m, which is twice as wide as an i (for non-monospace typefaces in general).

Editing sidebearings would resemble the white-space approach described above, but would require knowing the three built-in values for each glyph — left sidebearing, right sidebearing, and width. For example, a specific character might have a left sidebearing of 68, a right sidebearing of 53, and a width of 591. With those values documented, CSS could potentially override them directly.

What Needs to Change

The core frustrations boil down to a few points:

• Inserting white-space character entities, whether hair spaces or thin spaces, creates more problems than it solves and generates heavy manual work.
• Spacing should be adjusted through kerning values, not through injected characters.
• Typographers need the ability to override a typeface's built-in kerning table and apply custom values globally.
• This should be possible through paragraph and character styles in InDesign and CSS, applying to selected punctuation and symbols across a document or site.
• The whole process should be achievable in under fifteen minutes by someone with basic software skills.

Several open questions remain for font makers and tool developers. Should the OpenType Feature File Specification allow typeface designers to package punctuation-spacing presets into their fonts before release? Should Adobe InDesign finally add kerning table editing? Should CSS expose a font's internal kerning table for override? And, perhaps most fundamentally, should typeface designers themselves simply devote more attention to spacing punctuation marks more generously?

Erik Spiekermann's assessment, offered in March 2020, is candid:

“I would love all those features, but I only know 1 or 2 other graphic designers who would use them. They don’t even use any of the OpenType features or Stylistic sets. I used the kerning table edit in Quark all the time, when setting different languages. Partly because I didn’t like some of the built-in kernings, partly because there were some missing, especially those after and before spaces. But most designers don’t even change the default word spaces in InDesign, let alone bother about more details. Sad, but ask other typeface designers and the few good typesetters out there: standards are low.”

The author of the original article concedes that no perfect solution is offered here — only directions worth exploring further. The underlying problem of punctuation spacing has persisted across centuries of changing technology, and the answer likely requires cooperation between typeface designers, layout software vendors, and web standards bodies.

Further Reading

• “Syntax for OpenType Features in CSS”, Adobe (2020)
• The Elements of Typographic Style, Robert Bringhurst (2004)
• “Manual: The Dash”, Anya Danilova, type.today (2019)
• “Punc Rocks: The Typographer’s Guide to Punctuation”, James Felici (2009)
• “Methods for Controlling Spacing in Web Typography”, Geoff Graham (2016)
• “Global Kerning Changes in InDesign through GREP Styles”, Ralf Herrmann (2016)
• Detail in Typography, Jost Hochuli (2008)
• “Character Design Standards: Punctuation for Latin 1”, Microsoft (2017)
• “TypeTalk: Document-Wide Kerning”, Ilene Strizver (2009)
• “Adventures in Space: Kerning”, Yves Peters (2016)
• “Space Yourself”, Marcin Wichary (2015)
• “font-kerning”, Mozilla Developer Network (2019)