PROFI-FOTOS-online.com - Der eigene Online-Shop für Profi-Fotografen - Einfach. Günstig. Fair.

CSS-Eigenschaft: letter-spacing, Kategorien: Textdarstellung (allgemein), Text (CSS 2.1), Text (CSS 3)

Buchstaben-Abstand

Bestimmt die Abstände zwischen den einzelnen Buchstaben bzw. Ziffern im Text.

CSS-Eigenschaft: letter-spacing
KurzbeschreibungWerteStandardwertKategorieHinweis
Buchstaben-Abstand
  • <length>
  • <percentage>(CSS 3)
  • normal
  • inherit
normal
Allgemein:
Textdarstellung
CSS 2.1:
Text
CSS 3:
Text
 

Verwandte Eigenschaften aus der Kategorie: Textdarstellung (allgemein), Text (CSS 2.1), Text (CSS 3):

Folgendes ist beim Einsatz von letter-spacing zu beachten:

  • Abstände werden mit Angaben von PX, PT, EM etc. vorgenommen. Angaben in % werden ignoriert (das galt für CSS 2.1, ab CSS 3 gehören %-Angaben zum Standard).
  • Negative Werte sind zulässig, damit werden die Buchstaben enger zusammen gerückt. Ist der negative Wert zu groß, kommt es zu unterschiedlichen Effekten. Firefox, Safari und Chrome schieben die Buchstaben auf die andere Seite des letzten Buchstaben, d.h. der Text läuft rückwärts und umso größer die negative Zahl ist, aus der Box heraus. Der IE8 stellt alle Buchstaben auf die Position 0, wenn der negative Wert größer als die Laufweite des Buchstabens ist. Opera wendet das negative letter-spacing nur an, wenn die negative Breite kleiner als die Breite des Buchstabens ist. Ist diese größer, wird das letter-spacing ignoriert.
  • Ein letter-spacing mit EM-Werten kann zu einem unruhigen Text führen. Die Darstellung im Browser findet PX-Weise statt. Auch wenn man einen Wert in EM angibt, wird dieser vom Browser in einen PX-Wert umgerechnet (Da auf Monitoren aktuell nur die Darstellung in PX-Abständen möglich ist) und positioniert damit die Buchstaben. Durch das Runden der EM-Werte kann es im Firefox zu unterschiedlichen, unregelmäßigen Abständen kommen. Beispielsweise: [1px 1px 2px 1px 1px 1px 2px 1px]. Das ist auf Anhieb nicht unbedingt sichtbar ist, kann aber einen unruhigen Effekt haben.
  • Schriften bestehen nicht nur aus Buchstaben, sondern gewinnen ihr Gesamtbild auch durch ihre Laufweite. Da letter-spacing dort eingreift, kann es dadurch zu unschönen Effekten kommen. Beim Einsatz von letter-spacing sollte von browser- und betriebssystemübergreifend die Auswirkung überprüft werden. In der Praxis führt letter-spacing oft zu nicht zufriedenstellenden Ergebnissen.
  • Falls eine Hervorhebung von Text beabsichtigt ist, sind HTML-Tags wie <strong> oder <em> zu bevorzugen. Alternativ stehen zuverlässige CSS-Eigenschaften wie font-weigth: bold oder font-style: italic zur Verfügung.
Browserunterstützung von letter-spacing
Firefox
Firefox		Google Chrome
Google
Chrome		Internet Explorer
Internet
Explorer		Safari
Safari		Opera
Opera
CSS21
Version: 16Version: 25Version: 30Version: 31Version: 32
j
Version: 20Version: 30Version: 35Version: 36Version: 37
j
Version: 8Version: 9Version: 10Version: 11
j
Version: 4Version: 5Version: 6Version: 7
j
Version: 10Version: 11Version: 12
j

Weiterführende Informationen zu letter-spacing:

  • letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
    left


Beispiele

HTML:

<div>
   <p>Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.</p>
</div>

CSS:

div {
   border: 1px solid black;
}
p {
   margin: 20px;
}
/* Normale Laufweite der Buchstaben. */

Beispiel Nr. 1 So sieht's aus:

Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.

 

HTML:

<div>
   <p class="doEm">Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.</p>
</div>

CSS:

p.doEm {
   letter-spacing: 1.8em;
}
/* Extreme Buchstabenzwischenabstände, mit dem Effekt, dass lange Worte das Layout verlassen. */

Beispiel Nr. 2 So sieht's aus:

Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.

 

HTML:

<div>
   <p class="doPx">Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.</p>
</div>

CSS:

p.doPx {
   letter-spacing: 10px;
}
/* Die Lesbarkeit verschlechtert sich mitunter bei einer Angabe von letter-spacing. */

Beispiel Nr. 3 So sieht's aus:

Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.

 

HTML:

<div>
   <p class="doNeg">Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.</p>
</div>

CSS:

p.doNeg {
   letter-spacing: -1pt;
}

Beispiel Nr. 4 So sieht's aus:

Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.

 

HTML:

<div>
   <p class="doVeryNeg">Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.</p>
</div>

CSS:

p.doVeryNeg {
   letter-spacing: -16px;
}
/* Hohe negative Werte lassen den Text je nach Browser rückwärst aus dem Layout laufen. */

Beispiel Nr. 5 So sieht's aus:

Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.

 

HTML:

<div>
   <p class="doEmMix">Mmmmmmmmmmmmm Xxxxxxxxxxxxx Iiiiiiiiiiiiiii Wwwwwwwwwwwww. Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.</p>
</div>

CSS:

p.doEmMix {
   letter-spacing: 0.025em;
   font-family: Verdana;
   font-size: 120%;
}
/* Nebeneffekt im Firefox: Schaut man genau hin, sieht man, dass zwischen den M's oder den I's die Buchstaben mal kleinere, mal größere Abstände haben. */

Beispiel Nr. 6 So sieht's aus:

Mmmmmmmmmmmmm Xxxxxxxxxxxxx Iiiiiiiiiiiiiii Wwwwwwwwwwwww. Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.

 

Fehler melden

Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.

Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!

Vielen Dank!

A-Z:

Schnell­auswahl

Seiten:

Letzte Änderung: 17. 01. 2024
Render Time: 0.062 sec.