Typografie/Farbe und Dekoration
- 30min
- einfach
- Grundkenntnisse in
• Schriftformatierung
• CSS
Schriftformatierung behandelt die Einbindung von Schriftarten und Gestaltung der einzlenen Buchstaben. 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 interessant gestalten können. Dabei orientieren wir uns nicht an Minimalbeispielen, sondern bauen auf dem Grundwissen des Basis-Tutorials auf. Studieren Sie die Live-Beispiele und entdecken Sie weitere - im Tutorial nicht erklärte - Eigenschaften!
Inhaltsverzeichnis
Textfarbe
Mit der Eigenschaft color legen Sie die Farbe der Schrift bzw. des Textvordergrundes fest. Erlaubt sind dabei eine Farbangabe oder inherit. Diese oder keine Angabe weist den Browser an, den Farbwert des Elternelementes zu verwenden.
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.
-
perhält als Farbangabe einen Farbnamen -
h1einen Hex-Wert in Kurzschreibweise -
aeinen rgb()-Wert -
spaneinen HSL-Wert (Farbton/Sättigung/Helligkeits-Mischung)
h2 {
color: #abc;
background-color: #000;
}
Ist Ihnen aufgefallen, dass die h1-Ü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.
h1 {
font-family: Garamond, serif;
font-weight: normal;
margin-bottom: 4em;
text-align: center;
container-type: inline-size;
}
#eins {
font-size: 10cqw;
}
#zwei {
font-size: 16cqw;
}
Durch die große Schriftgröße der h1-Überschrift ist dies nicht ganz so schlimm. Damit sie auf kleinen Viewports nicht zu groß wird, wird mit container-type ein Container deklariert, auf den sich die responsive Schriftgröße cqw bezieht.
Ziehen Sie die Box kleiner oder größer und beobachten Sie, wie sich die Schriftgröße anpasst.
Druckausgabe
Webseiten werden nicht nur am Bildschirm genutzt, sondern auch ausgedruckt.
öffnen Sie die Druckvorschau (Strg p).
body {
font-family: arial, sans-serif;
max-width: 40em;
-webkit-print-color-adjust: economy;
print-color-adjust: economy;
}
Mit print-color-adjust: economy erreichen Sie, dass Farbfestlegungen beim Druck zugunsten materialsparender Einstellungen (und guter Lesbarkeit) wieder aufgehoben werden. Mit dem Wert exact würden auch Hintergrundbilder und -farben mit gedruckt werden.
Hauptartikel: Print-CSS
Füllungen und Konturen
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.
#eins {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 1px black;
background-image: linear-gradient( to right, red, orange, yellow, green, blue, indigo, violet);
}
#drei {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 1px black;
background-image: linear-gradient( red, red, orange, yellow, yellow);
}
Die spans mit den IDs eins und drei der h1-Ü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. Wenn Sie feste color-stops verwenden, können Sie die Buchstaben in jeweils einer Farbe leuchten lassen.
text ist für die Eigenschaft background-clip keine gültige Angabe.-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.
Alternativ können Sie einen validen Randlinien-Effekt mit text-shadow realisieren.
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:
<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>
Hauptartikel: SVG/Tutorials/Text
Umrisse mit text-shadow
Besser as die oben vorgestellte proprietäre (nicht standardisierte) Eigenschaft -webkit-text-stroke, ist eine Schattierung mit der text-shadow-Eigenschaft. Sie ermöglicht die Schattierung von Texten, vergleichbar mit box-shadow bei rechteckigen Elementen. Dabei sind auch komplexere Texteffekte möglich.
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.
h1 {
font: bold 7.5cqw Helvetica, Arial, Sans-Serif;
color: white;
}
#eins {
text-transform: uppercase;
text-shadow: 1px 1px 1px black, 1px -1px 1px black, -1px 1px 1px black, -1px -1px 1px black;
}
#zwei {
text-shadow: 0 0 5px black;
}
#gelb {
font-family: Chewy;
color: yellow;
letter-spacing: 0.1em;
text-shadow: 1px 1px 1px black, 1px -1px 1px black, -1px 1px 1px black, -1px -1px 1px black;
}
#gelb::first-letter {
color: lime;
}
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.
Stellen Sie sicher, dass ihre Schatten immer von einer (gedachten) Lichtquelle kommen. Schatten, die in mehrere Richtungen gehen, wirken unruhig und nicht stimmig.
Textdekoration
Mit HTML-Elementen wie span, em, strong und mark können Sie Text semantisch auszeichnen und optisch hervorheben. Damit Text gut lesbar bleibt, sollten die im Folgenden vorgestellten Techniken aber nur bewusst und sparsam verwendet werden.
text-decoration
Ein oder mehrere Wörter in einem Text können mit einer Linie „dekoriert“ werden, um bestimmte Aussagen über ihre Bedeutung zu machen. Beispielsweise werden Verweise vom Browser standardmäßig mit einer geraden Linie in Schriftfarbe unterstrichen dargestellt, und Rechtschreibfehler mit einer geschlängelten roten Linie.
CSS ermöglicht es, solche Linien auf unterschiedliche Arten zu beeinflussen. Dazu dienen die folgenden Eigenschaften, die sich auch in der Shorthand-Eigenschaft text-decoration gemeinsam angeben lassen:
- text-decoration-line
- Gibt an, ob die Linie den Text unterstreichen (
underline), durchstreichen (line-through) oder überstreichen (overline) soll. Die Schlüsselwörter schließen sich nicht aus, man kann zum Beispiel einen Text gleichzeitig unter- und überstreichen. Wo sich diese Linien in Bezug auf den Text befinden, ist grundsätzlich von der Schriftart oder dem Gutdünken des Browsers abhängig, die Position einer Unterstreichung lässt sich aber auch mit dentext-underline-*-Eigenschaften beeinflussen, die im Anschluss besprochen werden. - text-decoration-color
- Mit dieser Eigenschaft legen Sie die Farbe der Linie(n) fest. Jede CSS-Farbangabe ist möglich, allerdings keine Farbverläufe (das wäre ein Bild, und „text-decoration-image“ gibt es nicht).
- text-decoration-style
- Diese Eigenschaft wählt aus, ob die Linie einfach (
single), doppelt (double), gepunktet (dotted), gestrichelt (dashed) oder wellenförmig (wavy) sein soll. Der Stil lässt sich bei mehreren Linien nur gemeinsam festlegen, eine geschlängelte Unterstreichung mit einer gepunkteten Überstreichung zu kombinieren ist nicht vorgesehen. - text-decoration-thickness
- Und schließlich ist es noch möglich, die Strichstärke der Linien festzulegen. Hier kann jede Längenangabe verwendet werden, die Spezifikation verlangt aber von den Browsern, die Linien mindestens ein Pixel dick zu machen.
h1 {text-decoration: underline overline;}
p {text-decoration: overline; color: red;}
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; }
- Der Verweis erhält bei :hover eine doppelte, hellere Unterstreichung
-
.erledigtwird mit blau durchgestrichen. Dabei ist die Linie gestrichelt. -
.errorerhält eine rote Unterringelung -
.sonstigeserhält ober- und unterhalb eine Dekoration aus grünen, 3px großen Punkten.
Verwenden Sie
text-decoration daher nur zurückhaltend und vorsichtig!text-decoration-skip-ink
In der Überschrift h1 wird die Unterstreichung beim "g" unterbrochen. Dies ist das auto-Verhalten der Eigenschaft text-decoration-skip-ink. Es unterbricht nicht nur Unterlängen, sondern auch Oberlängen; diese müssen allerdings extrem sein, um ein overline zu unterbrechen. Man kann so etwas provozieren, indem man einen hohen Kleinbuchstaben mit einem kombinierenden Akzentzeichen versieht (z. B. ĥ = ĥ).
Außer den Einstellungen none und auto kennt text-decoration-skip-ink auch noch die Option all, die für ideographische Schriftzeichen von Bedeutung ist: Weil diese Schriftzeichen so oft aus dem normalen Schriftbereich ausbrechen, dass Dekorationslinien fast immer unterbrochen würden, findet in der auto-Einstellung bei diesen Zeichen kein Ink-Skipping statt. Mit all lässt es sich erzwingen, um den Preis, dass von der Linie eventuell nur Fragmente übrigbleiben.
text-decoration-skip-ink ist in der Shorthand-Eigenschaft text-decoration nicht integriert.
Der Verzicht auf das Ink-Skipping führt zu schlechter lesbarem Text. Sie sollten es daher für normale Unterstreichungen nicht anwenden. Die rote Schlängellinie einer Rechtschreibprüfung hingegen schaltet es ab, weil sonst die Aussage „dieses Wort ist falsch“ aufgeweicht würde.
text-underline-*
In Texten, die viele Subskripte oder Klammern verwenden (z.B. Formeln), ist die Position der Unterstreichungslinie möglicherweise zu nahe am Text und beeinträchtigt trotz Ink-Skipping die Lesbarkeit. In diesem Fall hilft die Eigenschaft text-underline-position weiter. Ihr Standardwert ist auto, womit sich die Unterstreichungslinie auf oder knapp unter der Basislinie des Texts befindet. Mit dem Wert under wird der Browser angewiesen, die Unterstreichungslinie unter den Textinhalt zu setzen. In den meisten Fällen ist sie dann so tief, dass sie nicht mehr von Unterlängen unterbrochen wird.
In vertikalen Schriftsystemen ist die Lage von „under“ nicht immer klar. Die Eigenschaftswerte left und right legen für vertikale Schreibrichtung fest, ob die Unterstreichung links oder rechts von den Schriftzeichen erscheinen soll. Falls durch </code>text-decoration-line</code> auch eine Überstreichung angefordert ist und die Platzierung der Unterstreichung durch left oder right dazu führt, dass Unter- und Überstreichung auf der gleichen Seite landen, schiebt der Browser die Überstreichung auf die andere Seite der Zeile.
Wenn die Textausrichtung variieren kann, können Sie under mit left oder right gemeinsam angeben.
MDN schreibt[1], dass in horizontal ausgerichtetem Text left und right wie under wirken würden. Das ist aber der Stand der Spezifikation von 2013, und es wurde für die Version von 2018 in auto geändert. Das bedeutet: left und right allein anzugeben bewirkt in horizontalen Schreibrichtungen nichts.
Falls Ihnen die Verschiebung mit text-underline-position nicht reicht oder zu grob ist, können Sie text-underline-offset verwenden. Diese Eigenschaft hat standardmäßig den Wert 0, und sie ermöglicht es, die Unterstreichung um die angegebene Länge zu verschieben. Diese Verschiebung wird mit text-underline-position:under kombiniert.
Zentriert mit Rand
Eine Überschrift kann auch durch eine Randlinie gestaltet werden, wobei eine früher übliche Unterstreichung im Internet häufig als Link missdeutet wird und daher aus der Mode gekommen ist.
Eine Umrandung der Überschrift ist auch mit der border-Eigenschaft möglich, stößt aber auf das Problem, das eine mittige Anordnung der Überschrift nur auf Desktop-Monitoren wirklich sinnvoll ist, während sie auf Mobilgeräten eventuell sogar über mehrere Zeilen geht. Da die Elemente h1-h6 Blockelemente sind, erstrecken sie sich über die gesamte verfügbare Breite, sodass ein Rand unter Umständen viel Leerraum umfassen würde.
Damit nur die (möglichst kurze) Überschrift umrandet wird, empfiehlt sich der Einsatz eines span-Elements, das als Inline-Element zentriert werden kann und nur die benötigte Breite des Inhalts einnimmt. Eine elegantere Lösung ist die Verwendung der intrinsischen Abmessung max-content :
h1 {
border: thin solid;
padding: 0.25em;
margin-left: auto;
margin-right: auto;
max-width: max-content;
text-align: center;
}
text-emphasis
Mit der Eigenschaft text-emphasis können Sie einen Text durch Zeichen und Symbole über und unter dem Text hervorheben. Diese Eigenschaft ist eigentlich nur für 傍点 bōten oder 圏点 kenten-Betonungen in ostasiatischen Sprachen erschaffen worden.
In Japan, the emphasis mark (傍点 bōten or 圏点 kenten) is usually a dot or a sesame dot and is centred above each character in the horizontal texts and to the right of each character in the vertical texts.
3. Emphasis Marks (CSS Text Decoration Module Level 3)
Editor’s Draft, 28 August 2023: https://drafts.csswg.org/css-text-decor/#emphasis-marks
Hervorhebung durch Blockschrift
Anfänger machen häufig den Fehler, Überschriften zu unterstreichen und in Großbuchstaben (→ Blockschrift[2]) zu schreiben. Dies ist eine von Schulheften gewohnte Konvention.
Im Webdesign ist dies kontraproduktiv. Screenreader lesen Großbuchstaben nicht vor, sondern buchstabieren sie. Auch für Lesende ist längere Blockschrift schwierig zu lesen: Das liegt daran, dass bei Großbuchstaben einige visuelle Anhaltspunkte verloren gehen. Alle Buchstaben sind gleich hoch. Bei Kleinbuchstaben oder gemischter Großschreibung verkürzen die Formen der Wörter die Zeit, die man braucht, um die Wörter zu interpretieren.
text-transform fest!text-transform
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 im HTML stehen.
h2, .uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.none { text-transform: none; }
Dabei werden sprachspezifische Regeln beachtet, das CLDR (Unicode Common Locale Data Repository) ist allerdings zurückhaltend, was dem Umgang mit ß angeht und setzt es bei capitalize in SS um. Aus gutem Grund: Entwürfe für ein großes SZ gibt es zwar seit über hundert Jahren und seit 2007 ist auf dem Codepoint U+1E9E das Zeichen ẞ (LATIN CAPITAL LETTER SHARP S) zu finden, aber erst seit 2020 schreibt die DIN 5008 vor, dass ẞ der Umwandlung in SS vorzuziehen sei. Ein schneller Test im Familienkreis ergab: Mit einem ẞ konfrontiert, reagierten die meisten mit „Hä?“ und eine Deutschlehrerin erklärte überzeugt, dass es kein großes ß gäbe.
Sie können mittels JavaScript eine Umwandlung von ß in ẞ vorsehen, müssen dann aber damit rechnen, dass veraltete Screenreader oder Fonts dieses Zeichen nicht verstehen oder darstellen können. Bei schlecht designten Fonts kann es auch sein, dass ẞ schlecht von ß oder B zu unterscheiden ist.
font-variant
Eine weitere Möglichkeit der Hervorhebung besteht durch die Angabe von font-variant:small-caps, die zur Anzeige als verkleinerte Großbuchstaben (Kapitälchen) führt. Im Gegensatz zu text-transform unterstützt die Kapitälchen-Darstellung – je nach verwendetem Font – auch das große ß. In einigen Fonts wird das kleine ß in Normalhöhe angezeigt, andere konvertieren auch in ss (was sich je nach Schriftart von zwei kleinen s unterscheidet oder auch nicht).
Anwendungsbeispiele
Texteffekt: 3D-Look
Mit der CSS-Eigenschaft text-shadow kann man erstaunliche Text-Effekte erzeugen. Durch eine Kombination mehrerer Schatten entsteht so ein dreidimensionaler Eindruck.
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 hsl(0 0% 50% / 1),
2px -2px 0 hsl(0 0% 55% / 1),
3px -3px 0 hsl(0 0% 60% / 1),
4px -4px 0 hsl(0 0% 65% / 1),
5px -5px 0 hsl(0 0% 70% / 1),
6px -6px 0 hsl(0 0% 75% / 1),
7px -7px 0 hsl(0 0% 80% / 1),
8px -8px 0 hsl(0 0% 85% / 1),
9px -9px 0 hsl(0 0% 90% / 1);
}
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 hsl-Farbwerte deutlich.
Texteffekt: Neon
Mit text-shadow kann man auch eindrucksvolle Neon-Effekte erzielen:
#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;
}
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
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>
Siehe auch
Referenz für CSS-Eigenschaften
- text-decoration als zusammenfassende Eigenschaft von
- text-decoration-skip-ink
Weblinks
- 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-decoration-underline: left, abgerufen am 12.02.2024
- ↑ Druckschrift (de.wikipedia.org)
text-decorationwird nicht vererbt. Dennoch ist der Verweis „überstrichen“, weil er innerhalb des Absatzes steht.