CSS/Tutorials/Typografie/Schriftformatierung/Darstellung
Text-Info
- 20min
- leicht
- Schriftformatierung mit CSS
Dieses Tutorial zeigt weitere Eigenschaften zur Schriftformatierung, die Laufweite, Zeichen- und Wortabstand gestalten können.
Inhaltsverzeichnis
font-stretch[Bearbeiten]
Mit der Eigenschaft font-stretch können Sie die Laufweite der Schrift, nämlich die Breite der einzelnen Zeichen der verwendeten Schriftart kontrollieren.
Details: caniuse.com
Erlaubt sind dabei folgende Schlüsselwörter:
- absolute Angaben
-
ultra-condensed
, sehr stark gestaucht -
extra-condensed
, stark gestaucht -
condensed
, gestaucht -
semi-condensed
, etwas gestaucht -
normal
, keine Veränderung der Laufweite, Voreinstellung -
semi-expanded
, etwas gestreckt -
expanded
, gestreckt -
extra-expanded
, stark gestreckt -
ultra-expanded
, sehr stark gestreckt
-
- relative Angaben
-
narrower
, schmaler als im Elternelement -
wider
, breiter als im Elternelement -
inherit
, Laufweite des Elternelements
-
table { margin: 1em; border-collapse: collapse; }
th, td { border: 1px solid; }
td { font: 1.6em sans-serif; padding: .3em 1em; }
.uc { font-stretch: ultra-condensed; }
.ec { font-stretch: extra-condensed; }
.c { font-stretch: condensed; }
.sc { font-stretch: semi-condensed; }
.se { font-stretch: semi-expanded; }
.e { font-stretch: expanded; }
.ee { font-stretch: extra-expanded; }
.ue { font-stretch: ultra-expanded; }
Für einen ererbten Wert von font-stretch
gelten folgende Regeln:
ererbter Wert | gesetzter Wert | |
---|---|---|
narrower
|
wider
| |
Ergebnis | ||
ultra-condensed |
condensed | normal |
extra-condensed
| ||
condensed
| ||
semi- condensed
| ||
normal |
expanded | |
semi-expanded |
normal | |
expanded
| ||
extra-expanded
| ||
ultra-expanded
|
Dies kann bedeuten, dass trotz der Angabe wider
, die Schriftlaufweite schmaler wird, etwa wenn für das Elternelement font-stretch: extra-expanded;
gilt. Ähnliches gilt auch für narrower
.
Die Kindelemente ihrerseits vererben den errechneten Wert, nicht etwa narrower
oder wider
.
letter-spacing[Bearbeiten]
Mit der Eigenschaft letter-spacing können Sie den Zeichenabstand zwischen den Buchstaben bzw. Zeichen im Text bestimmen.
Folgende Angaben sind möglich:
-
normal
, Standardwert, Zeichenabstand der verwendeten Schriftart, Browser kann Abstände flexibel ändern, um Text im Blocksatz anzuordnen, entsprichtletter-spacing: 0;
- eine Längenangabe, jedoch kein Prozentwert, auch negative Angaben
-
inherit
, Zeichenabstand des Elternelements
-
letter-spacing: 0;
bewirkt also nicht, dass die Zeichen aneinanderkleben, sondern dass sie sich wie beiletter-spacing: normal
verhalten. -
letter-spacing: 0.1em;
bewirkt analog nicht, daß zwischen den Zeichen genau 0.1em Platz ist, sondern dass zum normalen (letter-spacing: normal;
) Zeichenabstand noch 0.1em draufaddiert wird.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>letter-spacing</title>
<style>
p { letter-spacing: 0.25em; width: 30em; }
span { letter-spacing: 1em; color: red; }
</style>
</head>
<body>
<h1>Abstände zwischen Buchstaben festlegen</h1>
<p>
Die Zeichen dieses Textabsatzes haben einen
<span>zusätzlichen Abstand von 0.25em</span>. Innerhalb der farblich
hervorgehobenen Span-Elemente sind die
<span>Abstände zwischen den Buchstaben</span> größer.
</p>
</body>
</html>
word-spacing[Bearbeiten]
Mit der Eigenschaft word-spacing können Sie den Abstand zwischen Wörtern im Text bestimmen.
Folgende Angaben sind möglich:
- eine Längenangabe, jedoch kein Prozentwert, auch negative Angaben
-
normal
, Voreinstellung, festgelegt durch die Schriftart bzw. Browsereinstellung, Browser kann Abstände flexibel ändern, um Text im Blocksatz anzuordnen, entsprichtword-spacing: 0;
-
inherit
, Wortabstand des Elternelements
-
word-spacing: 0;
bewirkt also nicht, dass die Wörter aneinanderkleben, sondern dass sie sich wie beiword-spacing: normal
verhalten. -
word-spacing: 0.1em;
bewirkt analog nicht, daß zwischen den Wörtern genau 0.1em Platz ist, sondern dass zum normalen (word-spacing: normal;
) Wortabstand noch 0.1em draufaddiert wird.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>word-spacing</title>
<style>
p { word-spacing: 0.5em; width: 30em; }
span { word-spacing: 2em; color: red; }
</style>
</head>
<body>
<h1>Abstände zwischen Wörtern festlegen</h1>
<p>Die Wörter dieses Textabsatzes haben einen
<span>zusätzlichen Abstand von 0.5em</span>. Innerhalb der farblich
hervorgehobenen Span-Elemente sind die
<span>Abstände zwischen den Wörtern</span>
größer.
</p>
</body>
</html>
Siehe auch[Bearbeiten]
Referenz:
Weblinks[Bearbeiten]
- MDN: font-display
- W3C: font-display