Typografie/Farbe und Dekoration

Aus SELFHTML-Wiki
< Typografie(Weitergeleitet von Text-stroke)
Wechseln zu: Navigation, Suche

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!

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.

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.

color - Schriftfarben festlegen ansehen …
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.

color - Schriftfarben festlegen ansehen …
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;
}
Empfehlung: Verwenden Sie stets möglichst kontrastreiche Kombinationen aus Vorder- und Hintergrundfarben, um sehbehinderten Menschen den Zugang zu Ihren Inhalten nicht zu erschweren. Unser Farbwähler kann Ihnen im Vorfeld bei der Farbwahl behilflich sein.

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.

Aufgabe: Öffnen Sie das Beispiel mit einem Klick auf "Vorschau" in einem neuen Tab und
öffnen Sie die Druckvorschau (Strg p).
color - Schriftfarben festlegen ansehen …
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.

Hack: Verlauf mit -webkit-text-fill ansehen …
#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.

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

Text in SVG

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

Funktionsweise von text-shadow ansehen …
      
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.


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.

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

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 - nicht nur für Links 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; }
  • 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.

Die Eigenschaft text-decoration-skip-ink erlaubt es, Teile eines Elements von der Textdekoration auszusparen oder eben die Linie durchzuziehen.

In der Überschrift h1 wird die Unterstreichung beim "g" unterbrochen. Mit text-decoration-skip-ink: none; könnten Sie die Unterstreichung über die Unterlänge ziehen, aber warum sollten Sie so etwas tun?

Beachten Sie: Beachten Sie die Größe der Punkte! Öffnen Sie das Beispiel mit "ausprobieren" und verändern Sie die Werte.
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!

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 :

zentrierte Überschrift mit Rand ansehen …
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

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 in der Datei stehen.

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

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.

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.

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 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:

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;
}

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

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>

Anti-Aliasing mit text-shadow

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 rgb(0 0 0 / 0.5);
}
h2.schwarzweiss {
 color: #000;
 background-color: #fff;
 text-shadow: 0 0 1px rgb(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.


ToDo (weitere ToDos)

Bitte geben Sie im Forum Feedback, ob die letzten beiden Anwendungsbeispiele entfernt werden oder hier ihren Platz behalten sollen.

--Matthias Scharwies (Diskussion) 15:48, 5. Aug. 2023 (CEST)

Siehe auch

Referenz für CSS-Eigenschaften

Weblinks

  1. MDN: text-transform