To separate one cramped letter pair, first check the heading’s tracking and font kerning. For a short Latin label, a local inline margin can open one boundary, but it interrupts shaping there. This Mac workflow explains when that tradeoff is appropriate.

Is the problem tracking, kerning, or a local collision?

This guide is for someone adjusting a web heading on a Mac who can edit its HTML and CSS. The task is to improve one awkward pair while keeping the remaining text in normal browser flow. The synthetic heading NOVA STUDIO supplies a concrete example; it does not imply that those letters collide in every font.

Tracking controls spacing throughout a text selection. CSS exposes this through letter-spacing: positive values increase spacing, while negative values tighten it. Increasing that property on the whole heading therefore changes more than the troublesome pair. Start by checking whether an inherited negative value caused the problem. MDN: letter-spacing

Kerning uses spacing information stored in the font. The CSS property font-kerning accepts auto, normal, or none; it does not accept a custom distance for a named letter pair. Setting it to normal requests the font’s kerning information, but cannot supply a missing pair adjustment or guarantee that a particular combination looks right. MDN: font-kerning

Use this decision aid before adding markup:

What you observe First action When to continue
Most gaps look too tight Compare the heading with letter-spacing: normal Continue only if one pair still needs attention
The heading looks different after a text animation starts Compare it with the original unsplit text Investigate the splitting setup before compensating
One boundary looks cramped in an otherwise acceptable short Latin word Consider a local spacing adjustment Accept that shaping changes at that boundary
The exact original shaping must remain intact Keep the text run intact and compare another suitable font or font version Choose a rendering that works without inserting a boundary

On a page you are inspecting in Chrome, press Command–Option–C, then click the heading. The Elements panel selects its markup, and the Styles tab shows the applicable CSS. Look for heading rules, inherited tracking, and wrappers around individual characters. These inspection steps follow Chrome’s documented Mac workflow. Open Chrome DevTools

Make comparisons at the intended font, weight, and heading size. A correction chosen for the sample’s Arial text is only a demonstration; choose the actual adjustment while viewing the intended heading. Record the original declarations so you can compare one change at a time.

What can a local adjustment preserve?

A plain span supplies a styling hook without adding meaning of its own. It represents its children, so a heading can retain the text NOVA STUDIO while a class identifies the prefix ending at the troublesome boundary. WHATWG HTML Standard: The span element

However, an inline wrapper and a spacing adjustment have different consequences. W3C’s current CSS Text Level 3 Candidate Recommendation Draft says shaping must remain continuous across inline boundaries with no effective formatting change. It also specifies that nonzero inline margin, border, or padding separating characters breaks shaping at that boundary. A local margin therefore cannot promise to preserve the original kerning across the adjusted pair. CSS Text Module Level 3: Shaping Across Element Boundaries

For the example, place NOV inside one inline span and leave A immediately after it. Adding an end margin to that prefix opens the V–A boundary. The other letters remain ordinary inline text; there is no need to give every character a separate box. In horizontal, left-to-right text, margin-inline-end maps to the right margin. MDN: margin-inline-end

The limitation matters when evaluating the result: the visible change includes the loss of any shaping adjustment across that boundary, plus the added margin. It is not necessarily the original pair spacing plus precisely the specified distance. If preserving that original shaping is a requirement, keep the run intact and compare font choices instead.

Try a complete local example on your Mac

Create a separate preview before adapting the technique to a heading you maintain. In TextEdit, choose File → New, then Format → Make Plain Text. Paste the complete document below, save it as pair-preview.html, and choose Use .html if prompted. Apple documents this process for creating HTML files. Work with HTML documents in TextEdit on Mac

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Local pair spacing preview</title>
  <style>
    body {
      margin: 2rem;
      background: #fafafa;
      color: #222;
    }

    main {
      max-width: 48rem;
    }

    h1 {
      --pair-gap: 0.02em;
      font-family: Arial, sans-serif;
      font-size: 64px;
      font-weight: 700;
      line-height: 1.1;
      letter-spacing: normal;
      font-kerning: normal;
    }

    .keep-word {
      white-space: nowrap;
    }

    .pair-prefix {
      margin-inline-end: var(--pair-gap);
    }
  </style>
</head>
<body>
  <main>
    <p>Heading preview</p>
    <h1><span class="keep-word"><span class="pair-prefix">NOV</span>A</span> STUDIO</h1>
    <p>Change the pair gap, save, and reload to compare.</p>
  </main>
</body>
</html>

Open the saved document in your browser. Keep the text inside the heading on the single source line shown: there is no space between NOV and A, and there is one ordinary space before STUDIO. This keeps the label’s wording intact instead of inserting a visible or special spacing character.

The custom property --pair-gap controls the margin at the selected boundary. Its starting value is illustrative. At a font size of 64px, 0.02em represents 1.28 CSS pixels of margin; at 40px, it represents 0.8 CSS pixels. The margin scales with the text size, although the visual correction still needs inspection. MDN documents em margins as relative to text size. MDN: margin-inline-end

The outer .keep-word span applies white-space: nowrap only to NOVA. This keeps that short word together while leaving the ordinary space before STUDIO available for wrapping. Avoid applying it to the entire heading unless you intentionally need one unbroken line. MDN: white-space

If TextEdit later opens the file as formatted content, use File → Open, select the file, choose Show Options, and select Ignore rich text commands. Alternatively, enable Display HTML files as HTML code instead of formatted text under TextEdit → Settings → Open and Save. Apple’s TextEdit HTML guide

How do you choose the smallest useful correction?

Use a controlled comparison rather than repeatedly increasing the gap until it attracts attention:

  1. Set --pair-gap to 0em, save, and reload. Check the unadjusted heading first.
  2. Try 0.01em, then 0.02em, saving and reloading between comparisons. These are trial values, not recommended typography standards.
  3. Judge the pair together with its immediate neighbors. Stop when it belongs to the word’s overall rhythm.
  4. Narrow the browser window until the heading wraps. Check the complete heading rather than only the adjusted letters.
  5. Repeat at each heading size and weight your layout actually uses.

Treat the comparison between zero and a nonzero margin carefully. Crossing that threshold introduces the shaping boundary described earlier, so the first change can be larger than the numerical margin suggests. If a tiny positive value already makes the pair too loose, remove the workaround and reconsider the font or the heading’s existing styling.

The adjustment also consumes layout space. Letters following the boundary move along with the text, and a heading close to its available width may wrap differently. Local spacing avoids adding tracking to every gap; it cannot guarantee an unchanged line ending. Check the abstract layout in its narrow and wide forms before retaining the edit.

Keep the no-wrap wrapper limited to a short word. If the word itself exceeds the available width, it can overflow. Reduce the heading size for that layout or reconsider the wrapper rather than hiding the overflow. MDN distinguishes wrapping control through white-space from properties that allow breaks within words. MDN: white-space

What if the heading already uses SplitType?

SplitType is an animation utility that wraps lines, words, and characters in elements. Its official documentation recommends font-kerning: none on target elements to prevent slight character shifts when splitting or reverting. That recommendation addresses its animation workflow; adopting it can change spacing throughout a heading. SplitType documentation

If an existing heading uses SplitType, compare the original text before adding another correction. The library documents an instance method, instance.revert(), which restores the original content. In an implementation that already owns a SplitType instance, use its documented lifecycle to inspect that original state. The local HTML example above has no library dependency. SplitType: Reverting Split Text

Also check resizing behavior. SplitType says relatively positioned word and character splits can reflow, while line splitting or absolute positioning requires re-splitting after container resizing. If the apparent collision occurs only after a width change, investigate that layout behavior before encoding a permanent pair correction. SplitType: Responsive Text

For this single-pair task, the practical inference is to avoid introducing character splitting solely to obtain a spacing handle. It adds more layout boundaries than the example needs.

When should you leave the text run intact?

Use the local-margin example only for a deliberately chosen boundary between simple Latin letters. Do not generalize it into a routine that wraps every string position. W3C warns that dividing grapheme clusters or ligatures with element boundaries can produce inconsistent or undesired rendering. A character position in a string is not automatically a suitable place to interrupt shaping. CSS Text Module Level 3: Characters and Letters

When exact shaping must remain intact, leave the heading as continuous text, compare its native kerning settings, and choose a font rendering that resolves the pair satisfactorily. When a controlled local exception is acceptable, add one boundary, use the smallest useful margin, and check the resulting word and line breaks together.

Sources