5 CSS-eigenschappen die je moet kennen voor betere tekstontwerpen

Hier zijn vijf eigenschappen die kunnen helpen om woorden er beter, of in ieder geval interessanter, uit te laten zien op het web. Het zijn allemaal vrij eenvoudige implementaties die je kunt combineren met andere ideeën.

1. background-clip

In de typografie is de vulling van lettervormen meestal een egale kleur (met enkele wilde uitzonderingen). Het is echter vrij eenvoudig om in plaats daarvan een afbeelding te gebruiken om die ruimte te vullen. Alles wat we hoeven te doen, is een mooie achtergrond kiezen en deze uitsnijden naar de vorm van onze tekst. Het resultaat is een set opvallende uitsnedes die leesbaar blijven.

Eind jaren 2000 werd de waarde text geïntroduceerd voor de eigenschap background-clip, waardoor het mogelijk werd om achtergrondafbeeldingen (of gradiënten) te maskeren binnen actieve tekst. Sindsdien is dit een van de meest gezochte regels voor echt coole typografische visuals.

HTML

<p>Belize Reef</p>

CSS

p {
  /* `background-clip: text` is opgenomen in de shorthand */
  background: text url("image.jpg") center/auto 1lh;
  /* transparante tekst zodat de uitgesneden achtergrond eronder zichtbaar is */
  color: transparent;
}

2. vertical-align / align-content

Soms vormen de basisprincipes de briljantheid. We kunnen allemaal tekst horizontaal uitlijnen (text-align: center;), maar wanneer het aankomt op de verticale as, verloopt de tekstuitlijning niet altijd soepel. Het begrijpen van deze twee eigenschappen zou dat grotendeels moeten oplossen.

De eigenschap vertical-align stamt uit het tijdperk van het vroege web, toen HTML-tabellen de lay-out domineerden. Het werd veel gebruikt om inhoud binnen een tabelcel uit te lijnen. Buiten een tabelcel gaat het echter niet echt om het verticaal uitlijnen van tekst; het gaat eerder om het uitlijnen van inline-elementen ten opzichte van de tekst.

Als er iets in een regel tekst staat, zoals een span, img of input, en dit moet worden uitgelijnd ten opzichte van de tekst, dan is vertical-align de manier om dat te doen.

HTML

31 B<span class="emoji">&#x1F4BA;</span>

CSS

.emoji {
  vertical-align: top;
}

Wat we aanvankelijk wellicht dachten dat vertical-align deed — tekst verticaal uitlijnen in een box — wordt in werkelijkheid gedaan door de relatief nieuwere eigenschap align-content.

align-content is ontwikkeld in het tijdperk van moderne lay-outs. Naast flexbox en grid beïnvloedt align-content ook de block box en arrangeert het de inhoud van de box verticaal.

HTML

<p>Bonjour</p>

CSS

p {
  width: 360px;
  aspect-ratio: 1;
  text-align: center;
  /* Grid of flexbox is niet langer nodig */
  align-content: center;
}

3. box-decoration-mode

Bij typografisch ontwerp denken we meestal niet regel voor regel. Maar als we dat wel doen, is deze eigenschap alles wat we nodig hebben.

Er is een CSS-standaardmodule om te bepalen wanneer inhoud wordt onderbroken langs een flow, kolom of pagina, wat 'fragmentatie' wordt genoemd. Totdat box-decoration-mode kwam om de styling aan te pakken, ging dit alleen over het bepalen van de spatiëring, wrapping en de locatie van de onderbreking.

Wanneer de line box van een tekst wordt onderbroken, is de gebroken rand doorgaans ongestyled, wat zorgt voor een onrustig uiterlijk aan de randen van de fragmenten. Met box-decoration-mode kunnen we ervoor zorgen dat alle randen van de fragmenten uniform gestyled zijn. Dit betekent dat ze allemaal de borders, schaduwen, etc. krijgen die op het element aan de randen zijn toegepast.

HTML

<span>
  water cooler chat <br>
  everyone agrees <br>
  it is hot
</span>

CSS

span {
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  /* de randstijlen */
  border: solid blue;
  border-width: 0 1px 1px 0;
  box-shadow: 2px 2px 3px rgb(171, 171, 245);
  padding-inline: 6px;
  border-radius: 3px;
}

4. letter-spacing

De eigenschap letter-spacing wordt onderschat, niet alleen voor de typografische esthetiek, maar ook voor animaties.

Er is in CSS geen manier om individuele glyphs (tekens) in een tekst aan te spreken (behalve de eerste). Maar letter-spacing doet dat in zekere zin wel, aangezien het de ruimte achter alle tekens in een tekst bepaalt. De spatiëring accepteert zowel positieve waarden (afstand vergroten) als negatieve waarden (kier verkleinen).

Een animatie hiervan levert een "text reveal"-effect op.

HTML

<section id="text">
  <span>Ingvar</span>
  <span>Kamprad</span>
  <span>Elmtaryd</span>
  <span>Agunnaryd</span>
</section>

CSS

span {
  /* Letters inkrimpen en verbergen */
  letter-spacing: -1ch;
  color: transparent;
  /* De eerste letter zichtbaar houden */
  &::first-letter {
    color: #FBDA0C; /* geel */
  }
  /* Bij expansie */
  body:has(:checked) & {
    /* Letters uitbreiden en tonen */
    letter-spacing: 0ch;
    color: #0057AD; /* blauw */
    transition: letter-spacing 0.4s cubic-bezier(.8, -.5, .2, 1.4), color 0.8s linear;
  }
}

5. text-combine-upright

text-combine-upright is gemaakt voor Oost-Aziatische typografie, waar korte teksten soms in een klein formaat als een verticale zin worden geschreven. Dit betekent dat dit alleen werkt wanneer de schrijfwijze (writing-mode) op verticaal is ingesteld.

In LTR-talen (links-naar-rechts), zoals het Engels of Nederlands, kiezen we soms voor verticaal schrijven om ruimte te besparen of vanwege het uiterlijk. Het is dan handig als we nog steeds wat horizontale tekst kunnen toevoegen.

HTML

<p>2 Kilo <span>4 lb</span> Sugar</p>
<p><span>&#x1F3C2;</span><span>Feb</span> 02/26</p>

CSS

p {
  writing-mode: vertical-lr;
  span {
    text-combine-upright: all;
  }
}

Er zijn talloze eigenschappen die nuttig kunnen zijn voor typografisch ontwerp, maar deze vijf zouden je een voorsprong moeten geven en inzicht bieden in hoe typografie wordt benaderd met CSS en welke aspecten we kunnen gebruiken voor goede detaillering.