Um ein eng stehendes Buchstabenpaar zu trennen, prüfe zuerst den Zeichenabstand und das Kerning der Schrift in der Überschrift. Bei einer kurzen lateinischen Beschriftung kann ein lokaler Inline-Rand eine einzelne Grenze öffnen, unterbricht dort jedoch das Schrift-Shaping. Dieser Mac-Workflow erklärt, wann dieser Kompromiss sinnvoll ist.

Geht es um Zeichenabstand, Kerning oder eine lokale Kollision?

Diese Anleitung richtet sich an Personen, die auf einem Mac eine Webüberschrift anpassen und deren HTML und CSS bearbeiten können. Ziel ist es, ein ungünstig wirkendes Buchstabenpaar zu verbessern und den übrigen Text im normalen Browserfluss zu belassen. Die synthetische Überschrift NOVA STUDIO dient als konkretes Beispiel; das bedeutet nicht, dass diese Buchstaben in jeder Schrift kollidieren.

Der Zeichenabstand steuert die Abstände innerhalb einer Textauswahl. In CSS wird er über letter-spacing festgelegt: Positive Werte vergrößern den Abstand, negative Werte verringern ihn. Wird diese Eigenschaft für die gesamte Überschrift erhöht, ändert sich daher mehr als nur das problematische Buchstabenpaar. Prüfe zunächst, ob ein geerbter negativer Wert das Problem verursacht. MDN: letter-spacing

Beim Kerning werden Abstandsinformationen aus der Schrift verwendet. Die CSS-Eigenschaft font-kerning akzeptiert auto, normal oder none; einen benutzerdefinierten Abstand für ein bestimmtes Buchstabenpaar akzeptiert sie nicht. Mit dem Wert normal wird die Kerning-Information der Schrift angefordert. Damit lassen sich jedoch weder fehlende Anpassungen für ein Paar ergänzen noch lässt sich garantieren, dass eine bestimmte Buchstabenkombination passend aussieht. MDN: font-kerning

Nutze diese Entscheidungshilfe, bevor du Markup hinzufügst:

Beobachtung Erste Maßnahme Wann du weitermachen solltest
Die meisten Abstände wirken zu eng Vergleiche die Überschrift mit letter-spacing: normal Fahre nur fort, wenn ein einzelnes Paar weiterhin angepasst werden muss
Die Überschrift sieht nach dem Start einer Textanimation anders aus Vergleiche sie mit dem ursprünglichen, ungeteilten Text Prüfe zuerst die Aufteilung, bevor du einen Ausgleich hinzufügst
Eine einzelne Grenze wirkt in einem ansonsten passenden kurzen lateinischen Wort zu eng Ziehe eine lokale Abstandsänderung in Betracht Akzeptiere, dass sich das Shaping an dieser Grenze ändert
Das ursprüngliche Shaping muss exakt erhalten bleiben Belasse den Textlauf als Ganzes und vergleiche eine andere geeignete Schrift oder Schriftversion Wähle eine Darstellung, die ohne eingefügte Grenze funktioniert

Wenn du eine Seite in Chrome untersuchst, drücke Command–Option–C und klicke dann auf die Überschrift. Im Bereich Elements wird das Markup ausgewählt; der Tab Styles zeigt das anwendbare CSS. Suche nach Regeln für Überschriften, geerbtem Zeichenabstand und Elementen um einzelne Zeichen. Diese Schritte zur Untersuchung entsprechen dem dokumentierten Chrome-Workflow für Mac. Chrome DevTools öffnen

Vergleiche die Überschrift in der vorgesehenen Schrift, Schriftschnittstärke und Größe. Eine Korrektur für den Beispieltext in Arial dient nur der Veranschaulichung. Wähle die tatsächliche Anpassung, während du die gewünschte Überschrift betrachtest. Notiere die ursprünglichen Deklarationen, damit du jeweils nur eine Änderung vergleichen kannst.

Was bleibt bei einer lokalen Anpassung erhalten?

Ein einfaches span bietet einen Ansatzpunkt für Formatierungen, ohne selbst Bedeutung hinzuzufügen. Es dient als Container für seine Inhalte. So kann eine Überschrift den Text NOVA STUDIO beibehalten, während eine Klasse das Präfix kennzeichnet, das an der problematischen Grenze endet. WHATWG HTML-Standard: Das span-Element

Ein Inline-Element und eine Abstandsänderung haben jedoch unterschiedliche Auswirkungen. Laut dem aktuellen Candidate Recommendation Draft des W3C für CSS Text Level 3 muss das Shaping über Inline-Grenzen hinweg durchgehend bleiben, wenn sich die Formatierung nicht wirksam ändert. Außerdem wird festgelegt, dass ein nicht null großer Inline-Rand, Rahmen oder Innenabstand zwischen Zeichen das Shaping an dieser Grenze unterbricht. Ein lokaler Rand kann deshalb nicht garantieren, dass das ursprüngliche Kerning über das angepasste Paar hinweg erhalten bleibt. CSS Text Module Level 3: Shaping über Elementgrenzen hinweg

Platziere für das Beispiel NOV in einem Inline-Span und belasse A direkt dahinter. Ein Endrand für dieses Präfix öffnet die Grenze zwischen V und A. Die übrigen Buchstaben bleiben normaler Inline-Text; es ist nicht nötig, jedes Zeichen in eine eigene Box zu setzen. In horizontalem Text mit Schreibrichtung von links nach rechts entspricht margin-inline-end dem rechten Rand. MDN: margin-inline-end

Diese Einschränkung ist bei der Bewertung des Ergebnisses wichtig: Die sichtbare Änderung umfasst sowohl den Wegfall einer möglichen Shaping-Anpassung an dieser Grenze als auch den zusätzlichen Rand. Es handelt sich nicht unbedingt um den ursprünglichen Abstand des Buchstabenpaars plus genau den angegebenen Wert. Wenn das ursprüngliche Shaping erhalten bleiben muss, belasse den Textlauf als Ganzes und vergleiche stattdessen verschiedene Schriften.

Probiere ein vollständiges lokales Beispiel auf deinem Mac aus

Erstelle eine separate Vorschau, bevor du die Technik auf eine Überschrift überträgst, die du betreust. Wähle in TextEdit File → New und anschließend Format → Make Plain Text. Füge das folgende vollständige Dokument ein, speichere es als pair-preview.html und wähle bei entsprechender Aufforderung Use .html. Apple dokumentiert dieses Vorgehen zum Erstellen von HTML-Dateien. Mit HTML-Dokumenten in TextEdit auf dem Mac arbeiten

<!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>

Öffne das gespeicherte Dokument in deinem Browser. Belasse den Text innerhalb der Überschrift in der gezeigten einzelnen Quelltextzeile: Zwischen NOV und A steht kein Leerzeichen, vor STUDIO hingegen ein normales Leerzeichen. So bleibt die Beschriftung unverändert, ohne ein sichtbares oder spezielles Abstandszeichen einzufügen.

Die benutzerdefinierte Eigenschaft --pair-gap steuert den Rand an der ausgewählten Grenze. Der Startwert dient nur der Veranschaulichung. Bei einer Schriftgröße von 64px entspricht 0.02em einem Rand von 1.28 CSS-Pixeln; bei 40px sind es 0.8 CSS-Pixel. Der Rand skaliert mit der Textgröße, die sichtbare Korrektur muss jedoch weiterhin geprüft werden. MDN dokumentiert, dass em-Ränder relativ zur Textgröße berechnet werden. MDN: margin-inline-end

Das äußere Element .keep-word wendet white-space: nowrap nur auf NOVA an. Dadurch bleibt dieses kurze Wort zusammen, während das normale Leerzeichen vor STUDIO weiterhin einen Zeilenumbruch erlaubt. Wende die Eigenschaft nicht auf die gesamte Überschrift an, es sei denn, sie soll bewusst in einer ununterbrochenen Zeile stehen. MDN: white-space

Falls TextEdit die Datei später als formatierten Inhalt öffnet, wähle File → Open, markiere die Datei, klicke auf Show Options und wähle Ignore rich text commands. Alternativ kannst du unter TextEdit → Settings → Open and Save die Option Display HTML files as HTML code instead of formatted text aktivieren. Apples Anleitung zu HTML in TextEdit

Wie findest du die kleinste sinnvolle Korrektur?

Vergleiche die Ergebnisse systematisch, anstatt den Abstand wiederholt so lange zu vergrößern, bis er auffällt:

  1. Setze --pair-gap auf 0em, speichere und lade die Seite neu. Prüfe zuerst die unveränderte Überschrift.
  2. Probiere 0.01em und anschließend 0.02em aus. Speichere und lade die Seite zwischen den Vergleichen neu. Dies sind Testwerte, keine empfohlenen typografischen Standards.
  3. Beurteile das Paar zusammen mit seinen direkten Nachbarbuchstaben. Beende die Anpassung, sobald es zum Rhythmus des Wortes passt.
  4. Verkleinere die Browserbreite, bis die Überschrift umbricht. Prüfe die ganze Überschrift und nicht nur die angepassten Buchstaben.
  5. Wiederhole den Vergleich für jede Schriftgröße und Schriftschnittstärke, die dein Layout tatsächlich verwendet.

Vergleiche den Rand von null mit einem Wert über null mit Bedacht. Sobald der Wert größer als null ist, entsteht die zuvor beschriebene Shaping-Grenze. Die erste Änderung kann deshalb größer ausfallen, als der Zahlenwert des Rands vermuten lässt. Wenn schon ein sehr kleiner positiver Wert das Paar zu weit auseinanderzieht, entferne die Anpassung und prüfe stattdessen die Schrift oder die vorhandene Formatierung der Überschrift.

Die Anpassung beansprucht außerdem Layoutbreite. Nachfolgende Buchstaben verschieben sich mit dem Text, und eine Überschrift, die fast die verfügbare Breite ausfüllt, kann anders umbrechen. Lokaler Abstand vermeidet es, den Zeichenabstand in allen Zwischenräumen zu ändern, garantiert aber keinen unveränderten Zeilenumbruch. Prüfe das abstrakte Layout in schmaler und breiter Ansicht, bevor du die Änderung übernimmst.

Beschränke das Element ohne Zeilenumbruch auf ein kurzes Wort. Wenn das Wort selbst breiter als der verfügbare Platz ist, kann es überlaufen. Verkleinere die Überschrift in diesem Layout oder überdenke das Element, statt den Überlauf zu verbergen. MDN unterscheidet die Steuerung des Zeilenumbruchs mit white-space von Eigenschaften, die Umbrüche innerhalb von Wörtern ermöglichen. MDN: white-space

Was ist, wenn die Überschrift bereits SplitType verwendet?

SplitType ist ein Animationswerkzeug, das Zeilen, Wörter und Zeichen in Elemente einschließt. Die offizielle Dokumentation empfiehlt font-kerning: none für Zielelemente, um leichte Zeichenverschiebungen beim Aufteilen oder Zurücksetzen zu verhindern. Diese Empfehlung bezieht sich auf den Animationsablauf. Sie kann die Abstände in der gesamten Überschrift ändern. SplitType-Dokumentation

Wenn eine vorhandene Überschrift SplitType verwendet, vergleiche den ursprünglichen Text, bevor du eine weitere Korrektur hinzufügst. Die Bibliothek dokumentiert eine Instanzmethode namens instance.revert(), mit der der ursprüngliche Inhalt wiederhergestellt wird. Wenn die Implementierung bereits eine SplitType-Instanz verwaltet, nutze deren dokumentierten Lebenszyklus, um diesen ursprünglichen Zustand zu prüfen. Das lokale HTML-Beispiel oben benötigt keine Bibliothek. SplitType: Geteilten Text zurücksetzen

Prüfe auch das Verhalten bei Größenänderungen. Laut SplitType können relativ positionierte Wort- und Zeichenelemente umbrechen. Nach dem Aufteilen in Zeilen oder bei absoluter Positionierung ist nach einer Größenänderung des Containers ein erneutes Aufteilen nötig. Tritt die scheinbare Kollision nur nach einer Breitenänderung auf, untersuche zunächst dieses Layoutverhalten, bevor du eine dauerhafte Korrektur für das Buchstabenpaar festlegst. SplitType: Responsiver Text

Für diese Aufgabe mit einem einzelnen Buchstabenpaar lässt sich daraus praktisch ableiten, dass du keine Zeichenaufteilung allein deshalb einführen solltest, um einen Ansatzpunkt für Abstände zu erhalten. Sie erzeugt mehr Layoutgrenzen, als das Beispiel erfordert.

Wann solltest du den Textlauf als Ganzes belassen?

Verwende das Beispiel mit dem lokalen Rand nur für eine bewusst ausgewählte Grenze zwischen einfachen lateinischen Buchstaben. Verallgemeinere es nicht zu einer Routine, die jede Position in einer Zeichenfolge mit Elementen umschließt. Das W3C warnt davor, Graphemcluster oder Ligaturen durch Elementgrenzen aufzuteilen, da dies zu uneinheitlicher oder unerwünschter Darstellung führen kann. Eine Zeichenposition in einer Zeichenfolge ist nicht automatisch eine geeignete Stelle, um das Shaping zu unterbrechen. CSS Text Module Level 3: Zeichen und Buchstaben

Wenn das Shaping exakt erhalten bleiben muss, belasse die Überschrift als durchgehenden Text, prüfe die nativen Kerning-Einstellungen und wähle eine Schriftdarstellung, bei der das Buchstabenpaar zufriedenstellend aussieht. Wenn eine gezielte lokale Ausnahme akzeptabel ist, füge eine einzelne Grenze ein, verwende den kleinstmöglichen sinnvollen Rand und prüfe das Ergebnis zusammen mit den Umbrüchen im Wort und in der Zeile.

Quellen