CSS/Tutorials/Typografie/Textformatierung

Text-Info

: 30min
: einfach
: Grundkenntnisse in
• HTML
• CSS

Unter Textformatierung sind Angaben zu Textfarben, Abstände zwischen Zeichen oder Wörtern sowie weitere Textdekorationen zu verstehen. In den Standardeinstellungen der Browser (Default Stylesheets) wird Text schwarz-weiß dargestellt.

In diesem Kapitel lernen Sie, wie Sie HTML-Elemente, die Text enthalten können, mit CSS gestalten können.

Textfarbe[Bearbeiten]

color[Bearbeiten]

Mit der Eigenschaft color legen Sie die Farbe der Schrift bzw. des Textvordergrundes fest.

Erlaubt sind dabei folgende Werte:

eine Farbangabe
die Angabe transparent
die Angabe currentColor, weist den Browser an, den berechneten Wert der color-Eigenschaft zu verwenden
die Angabe inherit, weist den Browser an, den Farbwert des Elternelementes zu verwenden

color - Schriftfarben festlegen ansehen …

		p     {color: green;}
		h1    {color: #abc;}
		a     {color: rgb(153,68,0);}
		span  {color: hsl(240,100%,50%);}

Das HTML-Dokument erhält im style-Bereich CSS-Regelsätze, mit denen verschiedene Elemente unterschiedliche Schriftfarben erhalten. Dabei werden die Farbangaben variert.

p erhält als Farbangabe einen Farbnamen
h1 einen Hex-Wert in Kurzschreibweise
a einen rgb()-Wert
span einen HSL-Wert (Farbton/Sättigung/Helligkeits-Mischung)

		h2 {
		  color: #abc; 
		  background-color: #000;
		}

Ist Ihnen aufgefallen, dass die Überschrift sehr blass ist?
Es ist sinnvoll, neben der Farbzuweisung der Schriftfarbe mit color auch den Hintergrund mit background-color zu gestalten.
So bietet die h1-Überschrift gegenüber dem weißen Hintergrund nur wenig Kontrast. Durch die Angabe der schwarzen Hintergrundfarbe bei h2 ist die hellgraue Schrift jetzt gut lesbar.

ansehen …

Hinweis

Verwenden Sie stets möglichst kontrastreiche Kombinationen aus Vorder- und Hintergrundfarben, um sehbehinderten Menschen den Zugang zu Ihren Inhalten nicht zu erschweren. Der Color-Contrast-Checker kann Ihnen im Vorfeld bei der Farbwahl behilflich sein.

Empfehlung: Der SELFHTML-Farbauswähler kann Ihnen beim Ermitteln der Farbwerte helfen.

Füllungen und Konturen[Bearbeiten]

Im Print-Bereich wird Text häufig als grafisches Objekt gesehen, dessen Füllung und Kontur unabhängig voneinander gestaltet werden können. In HTML ist das (noch) nicht möglich.

Deshalb implementierte Google die Eigenschaften text-fill-color für die Füllung und text-stroke für eine Randlinie, die als -webkit-text-fill-color und -webkit-text-stroke mittlerweile von allen Browsern übernommen wurden. Farbangaben mit color werden überschrieben.

Browserunterstützung: caniuse.com

Hack: Verlauf mit -webkit-text-fill ansehen …

h2 {
  color: white;   /*wird überschrieben */
  font: bold 4em Helvetica, Arial, sans-serif;
  margin: 0.3em 0;
  padding: 0;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px black;
}
	  
#jones {
  font-family: Bangers, sans-serif;
  letter-spacing: 0.1em;
  background-image: linear-gradient(red 40%, yellow 70%);
}

#rainbow {
  width: 4em;
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}

Die h2-Überschriften bekommen mit linear-gradient() einen Farbverlauf als Hintergrund. Der Text wird mit -webkit-background-clip: text; ausgeschnitten und mit -webkit-text-fill-color: transparent durchsichtig, sodass der Hintergrund durchscheinen kann.

Damit der Farbverlauf seine volle Wirkung entfalten kann, müssen die Innenabstände auf Null gesetzt, bzw. die Länge des Textabsatzes begrenzt werden.

Im zweiten und dritten Beispiel verläuft der Farbverlauf von links nach rechts. Während die Farben im zweiten Beispiel ineinander verlaufen, gibt es im 3. Beispiel feste color-stops, die die Buchstaben in jeweils einer Farbe leuchten lassen.

Die Angabe color: white; ist als Fall-Back für die Browser (IE 9-11) zu sehen, die die Angabe -webkit-background-clip: text nicht interpretieren. Sie stellen den Text in weißer Schriftfarbe dar.

ansehen …

Beachten Sie: Der Wert text ist für die Eigenschaft background-clip keine gültige Angabe.

Empfehlung: Wenn Sie diese Eigenschaft verwenden, sollten Sie sie innerhalb einer @supports-Regel notieren. So können Sie ausschließen, dass eine transparente Textfarbe und eine nicht angezeigte Randlinie Text nicht sichtbar werden lassen.

Hinweis

Die Eigenschaften -webkit-text-fill-color und -webkit-text-stroke sind nicht Teil der Spezifikation und sollten nicht in Produktiv-Webseiten verwendet werden!

Wenn Sie Text mit Randlinie und einem Verlauf als Hintergrund darstellen wollen, können Sie Text W3C-konform als SVG einbinden.

Der Kurs Texteffekte mit SVG stellt einige Beispiele vor.

Alternativ können Sie einen validen Randlinien-Effekt mit text-shadow realisieren.

Text in SVG[Bearbeiten]

Text in SVG …

wird von Suchmaschinen und Screenreadern als Text erkannt und hilft Ihre Webseiten zugänglicher zu machen.
kann durch Scriptprogramme bearbeitet …
und in die Zwischenablage kopiert werden.

Text in SVG kann mit CSS formatiert werden:

Form, Stärke und Farbe der Randlinie (Kontur
Füllung mit einer Farbe, einem Verlauf, oder sogar einem Muster:

Text mit Hintergrundmuster ansehen …

  <defs>
    <pattern id="karo" x="10" y="10" width="30" height="30" patternUnits="userSpaceOnUse">
      <rect x="0" y="0" width="10" height="10" fill="#dfac20"/>
      <rect x="10" y="0" width="10" height="10" fill="#3983ab"/>
      <rect x="20" y="0" width="10" height="10" fill="#c32e04"/>
 
       ...  
    </pattern>
    <pattern id="punkte" x="0" y="0" width="30" height="30" patternUnits="userSpaceOnUse">
      ...   
    </pattern>
  </defs>
 
  <text fill="url(#karo)" stroke="black" x="0" y="170" >SELFHTML</text>
  <text fill="url(#punkte)" stroke="black" x="0" y="350" >SELFHTML</text>

ansehen …

Hauptartikel: SVG/Tutorials/Text

Textformatierung[Bearbeiten]

text-decoration[Bearbeiten]

Verweise werden normalerweise unterstrichen und mit blauer Textfarbe dargestellt. Dazu ändert sich beim Drüberfahren mit der Maus der cursor.

Die Eigenschaft text-decoration ist eine Zusammenfassung der Eigenschaften text-decoration-line, text-decoration-color, text-decoration-style und text-decoration-thickness.

Browserunterstützung: caniuse.com

Folgende Angaben sind für text-decoration-line möglich:

underline, unterstrichen
overline, überstrichen
line-through, durchgestrichen
none, keine Dekoration, Voreinstellung
inherit, Textdekoration des Elternelements

Folgende Angaben sind für text-decoration-style möglich:

solid, durchgezogene Linie, Voreinstellung
double, doppelte Linie
dotted, gepunktete Linie
dashed, gestrichelte Linie
wavy, Wellenlinie

text-decoration ansehen …

 
	h1         {text-decoration: underline overline;}
	p          {text-decoration: overline; color: red;}

Der Wert der Eigenschaft text-decoration wird nicht vererbt. Dennoch ist der Verweis „überstrichen“, weil er innerhalb des Absatzes steht.
Die Farbe der Textdekoration entspricht der Textfarbe des Elements, auch wenn Kindelemente ggf. eine andere Textfarbe besitzen, wie z. B. der Verweis.

 
	a:hover,
	a:focus    {text-decoration: underline double skyblue;}
	.erledigt  {text-decoration: line-through dashed blue 1px;}
	.error     {text-decoration: underline wavy red; }
	.sonstiges {text-decoration: overline underline dotted green 3px; }

In CSS3 kann auch die Art der Dekoration mit text-decoration-style; die Farbe mit text-decoration-color und die Dicke mit text-decoration-thickness verändert werden:

Der Verweis erhält bei :hover eine doppelte, hellere Unterstreichung
.erledigt wird mit blau durchgestrichen. Dabei ist die Linie gestrichelt.
.error erhält eine rote Unterringelung
.sonstiges erhält ober- und unterhalb eine Dekoration aus grünen, 3px großen Punkten.
Beachten Sie: Beachten Sie die Größe der Punkte! Öffnen Sie das Beispiel mit "ausprobieren" und verändern Sie die Werte.

ansehen …

Notieren Sie Angaben zur Art der Dekoration, deren Farbe, Linientyp und gegebenenfalls Dicke mit Leerzeichen dazwischen.

Empfehlung: Jedes Kind lernt in der Grundschule, Überschriften und Wichtiges zu unterstreichen. Im Web hat sich jedoch durchgesetzt Hyperlinks durch eine andere Textfarbe und eine Unterstreichung zu kennzeichnen.
Verwenden sie text-decoration daher nur zurückhaltend und vorsichtig!

text-decoration-skip[Bearbeiten]

Die Eigenschaft text-decoration-skip erlaubt es, Teile eines Elements von der Textdekoration auszusparen.

Browserunterstützung: caniuse.com

Beispiel

Code

Mit text-decoration-skip können Sie Teile von Elementen von der Textdekoration befreien. Erlaubt sind dabei folgende Angaben für die Unterbrechung der Textdekoration:

none, keine Unterbrechung, Linie zieht über Buchstaben mit Unterlängen (g,q, etc)
images, Unterbrechung für Inline-Grafiken, Voreinstellung
spaces, Unterbrechung für white-space
ink, Unterbrechung zum Beispiel für Unterlängen
all, keine Textdekoration

text-transform[Bearbeiten]

Mit der Eigenschaft text-transform können Sie in einem Textbereich Kleinbuchstaben, Großbuchstaben oder die Großschreibung des jeweils ersten Buchstaben erzwingen, unabhängig davon, wie die einzelnen Buchstaben tatsächlich in der Datei stehen.

Folgende Angaben sind möglich:

capitalize, Wortanfänge als Großbuchstaben, alle anderen Buchstaben werden nicht verändert
uppercase, nur Großbuchstaben
lowercase, nur Kleinbuchstaben
none, keine Text-Transformation
inherit, Text-Transformation des Elternelements

text-transform ansehen …

      h2, .uppercase { text-transform: uppercase; }
      .lowercase     { text-transform: lowercase; }
      .capitalize    { text-transform: capitalize; }
      .none          { text-transform: none; }

ansehen …

Dabei werden sprachspezifische Regeln beachtet. Zum Beispiel wird der Minuskel ß nicht in ẞ sondern in SS umgewandelt.^[1]

Beachten Sie: Eine für ein Element festgelegte Text-Transformation wird ohne Ihr Zutun an die Kindelemente vererbt.

text-shadow[Bearbeiten]

Die Eigenschaft text-shadow ermöglicht die Schattierung von Texten, vergleichbar mit box-shadow bei rechteckigen Elementen. Dabei sind auch komplexere Texteffekte möglich.

Syntax

text-shadow: offset-x | offset-y | blur-radius | [color]

offset-x offset-y: horizontaler und vertikaler Versatz des Schattens vom Element. Erlaubt ist eine absolute Längen- jedoch keine Prozentangabe.
blur-radius: (optional) Radius der Unschärfe für einen Weichzeicheneffekt, 0 entspricht einer scharfen Darstellung. Erlaubt ist eine nicht negative Längenangabe.
color: (optionale) Farbangabe, kann an erster oder letzter Stelle festgelegt werden.
Standardwert ist currentColor, der Wert der Textfarbe.
none: kein Textschatten

Beachten Sie: Die Angaben für den Textschatten eines Elements werden ohne Ihr Zutun an die Kindelemente vererbt.

Sie können für ein Element mehrere Schatten definieren. Die Schatten werden dabei in umgekehrter Reihenfolge der Definition „gestapelt“, das heißt, der zuerst festgelegte überdeckt die anderen.

Funktionsweise von text-shadow ansehen …

      
.eins {
  text-shadow: 5px 5px 5px; 
}
.zwei {
  text-shadow: 5px 5px 10px; 
}
.drei {
  text-shadow: 10px 20px 0px red; 
}
.vier {
  text-shadow: -5px -5px 10px yellow; 
}
.fuenf {
  text-shadow: 2px 2px 2px white, 
               5px 5px 10px black;
}

p span {
  text-shadow: none;
}

Die Textabsätze erhalten Klassen, die als CSS-Selektoren für verschiedene Schattierungen dienen.

Beispiel 1 und 2 verzichten auf eine Farbangabe. Die Schattierung wird in der Schriftfarbe ausgeführt. Sie hat einen Versatz von jeweils 5px und einen blur-Radius von 5, bzw. 10px.
Beispiel 3 hat keinen blur-Radius, sodass der rote Schatten den Text repliziert.
Beispiel 4 verwendet negative Werte für den Versatz, sodass der gelbe Schatten nach links und oben geworfen wird.
Beispiel 5 verwendet zwei Schatten. Der weiße Schatten akzentuiert die Zeichen und liegt über dem schwarzen Schatten.

    
    <p class="eins">Dieser Absatz soll die <span>Vererbung</span> demonstrieren.</p>

Der unterste Absatz enthält ein span-Element. Hier wurde der normalerweise vom Elternelement vererbte Schatten durch text-shadow: none; ausgeschaltet.

ansehen …

Empfehlung: Verwenden Sie Textschatten gezielt und sparsam. Die meisten Menschen haben ein intuitives Gefühl für Lichtverhältnisse. Im Allgemeinen kommt Licht beim Lesen von einer Leselampe von links oben auf den Text und der Schatten fällt dann nach rechts unten.
Stellen Sie sicher, dass ihre Schatten immer von einer (gedachten) Lichtquelle kommen. Schatten, die in mehrere Richtungen gehen, wirken unruhig und nicht stimmig.

Anwendungsbeispiele[Bearbeiten]

Texteffekt: 3D-Look[Bearbeiten]

Mit der CSS-Eigenschaft text-shadow kann man erstaunliche Text-Effekte erzeugen. Durch eine Kombination mehrerer Schatten entsteht so ein dreidimensionaler Eindruck.

Beispiel ansehen …

p {
  font: bold 5em Helvetica, Arial, Sans-Serif;
  padding: .2em;
  margin: 0;	
}
 
#eins {
  color: yellow;
  text-shadow: 
    1px 1px blue, 
    2px 2px blue, 
    3px 3px blue;
  transition: all .12s ease-out;
}
#eins:hover {
  position: relative; top: -3px; left: -3px; 
  text-shadow: 
    1px 1px blue, 
    2px 2px blue, 
    3px 3px blue, 
    4px 4px blue, 
    5px 5px blue, 
    6px 6px blue;
}
 
#zwei {
  text-shadow: 
    1px -1px 0 hsla(0, 0%, 50%, 1),
    2px -2px 0 hsla(0, 0%, 55%, 1),
    3px -3px 0 hsla(0, 0%, 60%, 1),
    4px -4px 0 hsla(0, 0%, 65%, 1),
    5px -5px 0 hsla(0, 0%, 70%, 1),
    6px -6px 0 hsla(0, 0%, 75%, 1),
    7px -7px 0 hsla(0, 0%, 80%, 1),
    8px -8px 0 hsla(0, 0%, 85%, 1),
    9px -9px 0 hsla(0, 0%, 90%, 1);
}

ansehen …

Im ersten Beispiel wird der Textschatten bei :hover um 3px vergrößert und der Text entsprechend nach links oben verschoben. Der Schatten ist einfarbig.

Einen realistischeren 3D-Effekt können Sie erreichen, wenn Sie die Farbangaben in den verschiedenen Lagen des Textschattens allmählich verdunkeln. Dies wird durch die Verwendung der hsla-Farbwerte deutlich.

Texteffekt: Umriss[Bearbeiten]

Eigentlich gibt es für einen Text, bei dem nur der Umriss zu sehen sein soll, die CSS3-Eigenschaft text-outline, die jedoch noch nicht unterstützt wird, sowie die proprietäre Eigenschaft -webkit-text-stroke, die jedoch nur von den Webkit-Browsern interpretiert wird.

Man kann diesen Schritt aber auch mit text-shadow erreichen:

Beispiel ansehen …

#zwei {
  text-shadow:  
     1px  1px 1px black,
     1px -1px 1px black,
    -1px  1px 1px black,
    -1px -1px 1px black;
}
#drei {
  font-family: Chewy;
  color: yellow ;
  text-transform: uppercase;
  letter-spacing: .1em;
  text-shadow: 
     1px  1px 1px black,
     1px -1px 1px black,
    -1px  1px 1px black,
    -1px -1px 1px black;
}

ansehen …

Im zweiten Beispiel werden vier Schatten jeweils links oben, rechts oben, rechts unten und links unten platziert, sodass die Schrift einen gleichmäßigen Umriss- oder outline-Look erhält.

Im dritten Beispiel wird ein Google Font eingebunden, der mit letter-spacing und text-transform: uppercase gestaltet wird.

Texteffekt: Neon[Bearbeiten]

Mit text-shadow kann man auch eindrucksvolle Neon-Effekte erzielen:

Beispiel ansehen …

#zwei {
  text-shadow:  
     1px  1px 1px black,
     1px -1px 1px black,
    -1px  1px 1px black,
    -1px -1px 1px black;
}
#drei {
  font-family: Chewy;
  color: yellow ;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-shadow:  
     1px  1px 1px black,
     1px -1px 1px black,
    -1px  1px 1px black,
    -1px -1px 1px black;
}

ansehen …

Benutzen Sie text-shadow um das Leuchten langsam aufzubauen:

Der erste Schatten sollte die Textfarbe haben.
Die folgenden Schatten können in einer gewählten Farbe sein, ohne horizontalen bzw. vertikalen Abstand des Schattens vom Element. Der Weichzeicheneffekt (blur) sollte stetig vergrößert werden (je mehr Schatten Sie verwenden, desto stärker das Leuchten)

Die dritte Neon-Reklame funktioniert nicht richtig – animation sorgt für ein Flackern des "N". (Das ist natürlich so gewollt!)

RGBA[Bearbeiten]

Beispiel ansehen …

h2       { text-align: center; margin-top: 50px; letter-spacing: 1em; color: fff; font-size: 72px;}
h2 .rot  { text-shadow: -15px -25px 10px red, 0 -40px 10px green, 15px -25px 10px blue; }
h2 .grün { text-shadow: 0 -40px 10px green, -15px -25px 10px red, 15px -25px 10px blue; }
h2 .blau { text-shadow: 15px -25px 10px blue, -15px -25px 10px red, 0 -40px 10px green; }
p        { line-height: 1.5em; }
p span   { font-weight: bold; }
p .rot   { color: red; text-shadow: -2px -2px 2px red; }
p .grün  { color: green; text-shadow: 0 -2px 2px green; }
p .blau  { color: blue; text-shadow: 2px -2px 2px blue; }

    
<!-- #1# -->
<h2><span class="rot">r</span><span class="grün">g</span><span class="blau">b</span></h2>

ansehen …

Anti-Aliasing mit text-shadow[Bearbeiten]

Des Weiteren können Sie text-shadow dazu benutzen, eine helle Schrift auf dunklem Untergrund zu schärfen.

Beispiel ansehen …

h2 {
 color: #fff;
 background-color: #999;
 padding: 10px;
 font-weight: bold;
}
h2.mit {
 text-shadow: 0 0 1px rgba(0,0,0,0.5);
}
h2.schwarzweiss {
 color: #000;
 background-color: #fff;
 text-shadow: 0 0 1px rgba(0,0,0,0.5);
}

In diesem Beispiel erzielt man eine Art Antialiasing-Effekt (Kantenglättung), die den hellen Text auf dem dunklen Untergrund schärfer erscheinen lässt. Umgekehrt, bei dunklem Text auf hellem Hintergrund, sieht man dann die eigentliche "Kantenglättung" des Textes.

ansehen …

Siehe auch[Bearbeiten]

Referenz für CSS-Eigenschaften

text-decoration als zusammenfassende Eigenschaft von
text-decoration-skip

← Schriftformatierung

Text und Typografie
(Übersicht)

Textausrichtung →

Weblinks[Bearbeiten]

W3C: Text Shadows: the text-shadow property
3d-Text Generator (mit Vorschau-Funktion)
css3generator.in/text-shadow
thenewcode: Create A Flickering Neon Bar Sign With CSS

↑ MDN: text-transform

[1

CSS/Tutorials/Typografie/Textformatierung

Inhaltsverzeichnis

Textfarbe[Bearbeiten]

color[Bearbeiten]

Füllungen und Konturen[Bearbeiten]

Text in SVG[Bearbeiten]

Textformatierung[Bearbeiten]

text-decoration[Bearbeiten]

text-decoration-skip[Bearbeiten]

text-transform[Bearbeiten]

text-shadow[Bearbeiten]

Anwendungsbeispiele[Bearbeiten]

Texteffekt: 3D-Look[Bearbeiten]

Texteffekt: Umriss[Bearbeiten]

Texteffekt: Neon[Bearbeiten]

RGBA[Bearbeiten]

Anti-Aliasing mit text-shadow[Bearbeiten]

Siehe auch[Bearbeiten]

Weblinks[Bearbeiten]

Navigationsmenü

Meine Werkzeuge

Namensräume

Varianten

Ansichten

Mehr

Suche

Starten

Mitmachen

Werkzeuge

SELFHTML