Sie sind hier: Startseite -> CSS-Grundlagen -> letter-spacing (Text -> Zeichenabstan

Mit CSS und letter-spacing für den Abstand sorgen

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 CSS-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.

Man kann auf jeden Fall für einen anderen optischen Effekt sorgen, auch wenn der für einen ganzen Text nicht ratsam ist.

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.

Themenseiten

Diesen Artikel teilen

Infos zum Artikel

Zeichenabstand in CSSArtikel-Thema: Mit CSS und letter-spacing für den Abstand sorgen
Beschreibung: Mit Hilfe von CSS und dem Befehl 👍 letter-spacing kann man den ✅ Zeichenabstand im Text nach Wunsch erweitern und ein anderes Erscheinungsbild erreichen.

Kategorien

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

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