CSS letter-spacing für den Abstand

Zeichenabstand: Abstand der Zeichen per CSS einstellen

Neben der Fettschrift, der Schriftfamilie, der Größe und weiterer Details kann man mit CSS auch den Abstand der einzelnen Zeichen manipulieren. Es gibt den Befehl letter-spacing, der nicht so oft verwendet wird, aber schöne Effekte anbietet. Das passt nicht überall, kann aber punktuell sehr auffällig eingesetzt werden.

Normalerweise wird man den Text in normaler Art und Weise darstellen wollen, aber bestimmte Begriffe, wichtige Aussagen oder ähnliche Aussagen lassen sich mit einfachen Mittel hervorheben. Einen Versuch ist es sicherlich wert, weil auch nicht so oft mit diesem Befehl gearbeitet wird und man von der Masse hervorstechen könnte.

Zeichenabstand durch letter-spacing in CSS verändern

Eingesetzt wird der Befehl in folgender Weise:

letter-spacing: 3px;
letter-spacing: 3mm;
letter-spacing: 4%;

Der Befehl letter-spacing kann also sowohl numerische Angaben als auch prozentuale Angaben beinhalten. Mit diesem Befehl lassen sich sehr schöne Effekte erzielen, wenn man eine Überschrift oder eine bestimmte Textpassage hervorheben möchte.

ergibt:

letter-spacing: 3mm;

letter-spacing: 2px;

letter-spacing: 10px;

letter-spacing: 2%;

Die Beispiele zeigen, dass sich der Text deutlich anders darstellt als normalerweise und so kann man sich überlegen, ob man diese Technik einsetzt oder ob man eher mit der kursiven Schrift arbeiten möchte, wenn fett doch ein wenig zu stark für die aktuelle Situation empfunden wird. Denn die Fettschrift ist häufig die Idee Nummer eins beim Hervorheben, passt aber nicht immer.

Lesen Sie auch

Die Textformatierung ist bei CSS neben der Positionierung eine Hauptaufgabe, weil gefälliger Text einfach eher angenommen wird und einen Mehrwert darstellt. Man darf es nicht übertreiben, aber man kann sich damit sich auch einmal spielen und ein wenig die Reaktionen überprüfen. Wichtig ist einmal die grundsätzliche Einstellung der Schriftart und Schriftgröße.

Dann kommen Befehle, die sehr häufig benötigt werden. Dazu gehört font-weight für die Fettschrift, alternativ und nicht so häufig wird man font-style für kursiv nutzen. Sehr oft braucht man color für die Textfarbe und text-decoration speziell bei der Gestaltung und Auszeichnung der Links.

Und dann gibt es noch weitere Einstellungen wie den Abstand von Buchstaben und Wörter, den Schatten oder auch die Textumwandlung und die Schriftvariante.

Diesen Artikel teilen

Kategorien

Grundlagen
HTML-Grundlagen
CSS-Grundlagen
Javascript-Grundlagen
PHP-Grundlagen
MySQL-Grundlagen
SEO-Grundlagen

Infos, Tipps, Vermarktung
Webdesign-Lexikon
Online-Werbung
PHP-Codeschnipsel