Controleer eerst de letterspatiëring en tekenspatiëring van het lettertype om één krap letterpaar uit elkaar te halen. Bij een kort Latijns label kan een lokale inline-marge één overgang openen, maar daar wordt de vormgeving onderbroken. Deze Mac-workflow legt uit wanneer die afweging passend is.

Gaat het om letterspatiëring, tekenspatiëring of een lokale botsing?

Deze handleiding is bedoeld voor iemand die op een Mac een webkop aanpast en de HTML en CSS ervan kan bewerken. De taak is om één ongemakkelijk letterpaar te verbeteren en de overige tekst in de normale browserstroom te houden. De voorbeeldkop NOVA STUDIO dient als concreet voorbeeld; dat betekent niet dat die letters in elk lettertype botsen.

Letterspatiëring bepaalt de ruimte in een tekstselectie. CSS biedt hiervoor letter-spacing: positieve waarden vergroten de afstand, negatieve waarden verkleinen die. Als je deze eigenschap voor de hele kop verhoogt, verandert dus meer dan alleen het problematische paar. Controleer eerst of een overgeërfde negatieve waarde het probleem veroorzaakt. MDN: letter-spacing

Tekenspatiëring gebruikt afstandsinformatie die in het lettertype is opgeslagen. De CSS-eigenschap font-kerning accepteert auto, normal of none; een aangepaste afstand voor een benoemd letterpaar is niet mogelijk. Als je deze eigenschap instelt op normal, vraag je om de tekenspatiëringsinformatie van het lettertype, maar daarmee kun je geen ontbrekende paarcorrectie toevoegen of garanderen dat een bepaalde combinatie er goed uitziet. MDN: font-kerning

Gebruik deze besliswijzer voordat je markup toevoegt:

Wat je ziet Eerste actie Wanneer ga je verder?
De meeste afstanden lijken te klein Vergelijk de kop met letter-spacing: normal Ga alleen verder als één paar nog aandacht nodig heeft
De kop ziet er anders uit nadat een tekstanima tie begint Vergelijk hem met de oorspronkelijke, niet opgesplitste tekst Onderzoek de instellingen voor het opsplitsen voordat je iets compenseert
Eén overgang oogt krap in een verder acceptabel kort Latijns woord Overweeg een lokale afstandsaanpassing Houd er rekening mee dat de vormgeving bij die overgang verandert
De oorspronkelijke vormgeving moet exact behouden blijven Houd de tekstrun intact en vergelijk een ander geschikt lettertype of een andere versie ervan Kies een weergave die werkt zonder een overgang in te voegen

Druk op een pagina die je in Chrome inspecteert op Command–Option–C en klik vervolgens op de kop. Het paneel Elements selecteert de markup; op het tabblad Styles zie je de toepasselijke CSS. Zoek naar kopregels, overgeërfde letterspatiëring en wrappers rond afzonderlijke tekens. Deze inspectiestappen volgen de gedocumenteerde Mac-workflow van Chrome. Chrome DevTools openen

Vergelijk de kop met het beoogde lettertype, gewicht en formaat. Een correctie die je kiest voor de voorbeeldtekst in Arial is slechts een demonstratie; kies de daadwerkelijke aanpassing terwijl je de bedoelde kop bekijkt. Noteer de oorspronkelijke declaraties, zodat je wijzigingen één voor één kunt vergelijken.

Wat kan een lokale aanpassing behouden?

Een gewone span biedt een haakje voor stijlen zonder zelf betekenis toe te voegen. Het element vertegenwoordigt zijn inhoud, zodat een kop de tekst NOVA STUDIO kan behouden terwijl een class het voorvoegsel markeert dat eindigt bij de problematische overgang. WHATWG HTML Standard: The span element

Een inline-wrapper en een afstandsaanpassing hebben echter verschillende gevolgen. De huidige Candidate Recommendation Draft van W3C voor CSS Text Level 3 stelt dat vormgeving doorlopend moet blijven over inline-grenzen zonder effectieve opmaakverandering. De specificatie vermeldt ook dat een niet-nul inline-marge, rand of padding tussen tekens de vormgeving bij die overgang onderbreekt. Een lokale marge kan daarom niet garanderen dat de oorspronkelijke tekenspatiëring over het aangepaste paar behouden blijft. CSS Text Module Level 3: Shaping Across Element Boundaries

Plaats voor het voorbeeld NOV in één inline-span en laat A er direct op volgen. Met een eindmarge voor dat voorvoegsel open je de overgang tussen V en A. De overige letters blijven gewone inline-tekst; je hoeft niet elk teken een eigen vak te geven. In horizontale tekst die van links naar rechts loopt, komt margin-inline-end overeen met de rechtermarge. MDN: margin-inline-end

Deze beperking is van belang bij het beoordelen van het resultaat: de zichtbare verandering omvat zowel het verlies van eventuele vormgevingscorrectie over die overgang als de toegevoegde marge. Het resultaat is dus niet noodzakelijk de oorspronkelijke afstand tussen de letters plus precies de opgegeven waarde. Als je de oorspronkelijke vormgeving wilt behouden, laat de tekstrun dan intact en vergelijk lettertypen.

Probeer een volledig lokaal voorbeeld op je Mac

Maak een aparte voorbeeldpagina voordat je de techniek toepast op een kop die je beheert. Kies in Teksteditor Archief → Nieuw en daarna Opmaak → Maak platte tekst. Plak het volledige document hieronder, sla het op als pair-preview.html en kies Gebruik .html als daarom wordt gevraagd. Apple beschrijft dit proces voor het maken van HTML-bestanden. Werken met HTML-documenten in Teksteditor op de 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 het opgeslagen document in je browser. Houd de tekst in de kop op de ene bronregel zoals weergegeven: er staat geen spatie tussen NOV en A, en er staat één gewone spatie vóór STUDIO. Zo blijft de tekst van het label intact en voeg je geen zichtbaar of speciaal spatieteken toe.

De aangepaste eigenschap --pair-gap bepaalt de marge bij de geselecteerde overgang. De beginwaarde dient ter illustratie. Bij een lettergrootte van 64px staat 0.02em voor 1.28 CSS-pixels marge; bij 40px staat het voor 0.8 CSS-pixels. De marge schaalt mee met de tekstgrootte, maar je moet de visuele correctie nog steeds controleren. Volgens MDN zijn em-marges relatief aan de tekstgrootte. MDN: margin-inline-end

De buitenste span .keep-word past white-space: nowrap alleen toe op NOVA. Zo blijft dat korte woord bij elkaar, terwijl de gewone spatie vóór STUDIO beschikbaar blijft voor afbreking. Pas dit niet toe op de hele kop, tenzij je bewust één ononderbroken regel nodig hebt. MDN: white-space

Als Teksteditor het bestand later als opgemaakte inhoud opent, kies dan Archief → Open, selecteer het bestand, kies Toon opties en selecteer Negeer opdrachten voor rich text. Je kunt ook Toon HTML-bestanden als HTML-code in plaats van als opgemaakte tekst inschakelen onder Teksteditor → Instellingen → Open en bewaar. Apple’s handleiding voor HTML in Teksteditor

Hoe kies je de kleinste bruikbare correctie?

Vergelijk gecontroleerd in plaats van de tussenruimte steeds te vergroten totdat die opvalt:

  1. Stel --pair-gap in op 0em, sla op en laad de pagina opnieuw. Controleer eerst de kop zonder aanpassing.
  2. Probeer 0.01em en daarna 0.02em; sla op en laad de pagina tussen de vergelijkingen opnieuw. Dit zijn testwaarden, geen aanbevolen typografische normen.
  3. Beoordeel het paar samen met de aangrenzende letters. Stop zodra het past bij het ritme van het woord.
  4. Maak het browservenster smaller totdat de kop wordt afgebroken. Controleer de hele kop, niet alleen de aangepaste letters.
  5. Herhaal dit voor elk kopformaat en -gewicht dat je opmaak werkelijk gebruikt.

Vergelijk de nulmarge zorgvuldig met een niet-nul marge. Zodra de marge positief wordt, ontstaat de eerder beschreven grens in de vormgeving. Daardoor kan de eerste verandering groter lijken dan de numerieke marge doet vermoeden. Als zelfs een kleine positieve waarde het paar te ruim maakt, verwijder dan de oplossing en bekijk het lettertype of de bestaande stijlen van de kop opnieuw.

De aanpassing neemt ook ruimte in de opmaak in. De letters na de overgang verschuiven mee met de tekst, en een kop die bijna de beschikbare breedte vult kan daardoor anders worden afgebroken. Met lokale tussenruimte voorkom je dat de letterspatiëring voor elke afstand wordt aangepast; een ongewijzigd regeleinde is daarmee niet gegarandeerd. Controleer de abstracte opmaak in smalle en brede weergave voordat je de wijziging behoudt.

Beperk de wrapper die afbreking voorkomt tot een kort woord. Als het woord zelf breder is dan de beschikbare ruimte, kan het buiten de container vallen. Verklein de kop voor die weergave of overweeg de wrapper opnieuw in plaats van de overloop te verbergen. MDN onderscheidt afbrekingsregeling via white-space van eigenschappen die afbreking binnen woorden toestaan. MDN: white-space

Wat als de kop al SplitType gebruikt?

SplitType is een animatiehulpmiddel dat regels, woorden en tekens in elementen verpakt. De officiële documentatie raadt font-kerning: none aan voor doelelementen om kleine verschuivingen van tekens bij het opsplitsen of herstellen te voorkomen. Dit advies geldt voor de animatieworkflow; als je het toepast, kan de tussenruimte in de hele kop veranderen. SplitType-documentatie

Als een bestaande kop SplitType gebruikt, vergelijk dan de oorspronkelijke tekst voordat je nog een correctie toevoegt. De bibliotheek documenteert de instantiemethode instance.revert(), waarmee de oorspronkelijke inhoud wordt hersteld. Als de implementatie al een SplitType-instantie beheert, gebruik dan de gedocumenteerde levenscyclus ervan om die oorspronkelijke toestand te bekijken. Het lokale HTML-voorbeeld hierboven heeft geen bibliotheekafhankelijkheid. SplitType: Reverting Split Text

Controleer ook het gedrag bij formaatwijzigingen. Volgens SplitType kunnen splitsingen van woorden en tekens met relatieve positionering opnieuw afbreken; bij het splitsen van regels of absolute positionering moeten de tekstblokken na het wijzigen van de containerbreedte opnieuw worden gesplitst. Als de zichtbare botsing alleen na een breedtewijziging optreedt, onderzoek dan eerst dat gedrag voordat je een permanente correctie voor het letterpaar vastlegt. SplitType: Responsive Text

Voor deze taak met één letterpaar is de praktische conclusie dat je geen tekens moet opsplitsen alleen om een aangrijpingspunt voor een afstandsaanpassing te krijgen. Dat levert meer lay-outgrenzen op dan het voorbeeld nodig heeft.

Wanneer laat je de tekstrun intact?

Gebruik het voorbeeld met de lokale marge alleen voor een bewust gekozen overgang tussen eenvoudige Latijnse letters. Maak er geen routine van die elke positie in een tekenreeks omwikkelt. W3C waarschuwt dat het verdelen van grafeemclusters of ligaturen met elementgrenzen tot inconsistente of ongewenste weergave kan leiden. Een tekenpositie in een tekenreeks is niet automatisch een geschikte plek om de vormgeving te onderbreken. CSS Text Module Level 3: Characters and Letters

Als de vormgeving exact behouden moet blijven, laat de kop dan doorlopende tekst, vergelijk de ingebouwde instellingen voor tekenspatiëring en kies een lettertypeweergave die het paar goed oplost. Als een gecontroleerde lokale uitzondering acceptabel is, voeg dan één overgang toe, gebruik de kleinste bruikbare marge en controleer het woord en de regeleinden samen.

Bronnen