Textformatierung

Geschätzte Lektüre: 5 Minuten 353 Ansichten

CSS (Cascading Style Sheets) bietet umfangreiche Möglichkeiten zur Gestaltung von Texten auf Webseiten.

Grundlegende Text-Eigenschaften

Schriftart (font-family)

Definiert die Schriftart für ein Element. Es können mehrere Schriftarten als Fallback-Optionen angegeben werden.

p {
  font-family: "Arial", "Helvetica", sans-serif;
}

p {
  font-family: "Arial", "Helvetica", sans-serif;
}

Schriftgröße (font-size)

Bestimmt die Größe des Textes. Kann in verschiedenen Einheiten angegeben werden.

h1 {
  font-size: 2.5rem; /* Relative Einheit */
}

p {
  font-size: 16px; /* Absolute Einheit */
}

h1 {
  font-size: 2.5rem; /* Relative Einheit */
}

p {
  font-size: 16px; /* Absolute Einheit */
}

Schriftgewicht (font-weight)

Steuert die Dicke der Schrift (normal, bold, oder numerische Werte).

strong {
  font-weight: bold;
}

.light-text {
  font-weight: 300;
}

strong {
  font-weight: bold;
}

.light-text {
  font-weight: 300;
}

Schriftstil (font-style)

Bestimmt, ob der Text normal, kursiv oder schräg angezeigt wird.

em {
  font-style: italic;
}

em {
  font-style: italic;
}

Textausrichtung und Abstand

Textausrichtung (text-align)

Steuert die horizontale Ausrichtung des Textes.

.center {
  text-align: center;
}

.justify {
  text-align: justify;
}

.center {
  text-align: center;
}

.justify {
  text-align: justify;
}

Zeilenhöhe (line-height)

Bestimmt den Abstand zwischen Textzeilen.

article {
  line-height: 1.6; /* Einheitsloser Wert (Multiplikator) */
}

article {
  line-height: 1.6; /* Einheitsloser Wert (Multiplikator) */
}

Buchstabenabstand (letter-spacing)

Kontrolliert den Abstand zwischen einzelnen Buchstaben.

.headline {
  letter-spacing: 2px;
}

.headline {
  letter-spacing: 2px;
}

Wortabstand (word-spacing)

Bestimmt den Abstand zwischen Wörtern.

.wide-spacing {
  word-spacing: 0.5em;
}

.wide-spacing {
  word-spacing: 0.5em;
}

Textdekoration und -transformation

Textdekoration (text-decoration)

Fügt Unterstreichungen, Durchstreichungen oder Überstreichungen hinzu.

a {
  text-decoration: none; /* Entfernt Unterstreichung bei Links */
}

.underline {
  text-decoration: underline wavy red; /* Wellenförmige rote Unterstreichung */
}

a {
  text-decoration: none; /* Entfernt Unterstreichung bei Links */
}

.underline {
  text-decoration: underline wavy red; /* Wellenförmige rote Unterstreichung */
}

Texttransformation (text-transform)

Ändert die Groß-/Kleinschreibung des Textes.

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize; /* Erster Buchstabe jedes Wortes groß */
}

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize; /* Erster Buchstabe jedes Wortes groß */
}

Erweiterte Textformatierung

Textschatten (text-shadow)

Fügt dem Text Schatteneffekte hinzu.

h2 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  /* horizontal vertical blur color */
}

h2 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  /* horizontal vertical blur color */
}

Textüberlauf (text-overflow)

Steuert die Anzeige von überlaufendem Text.

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* Zeigt "..." bei überlangem Text */
}

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* Zeigt "..." bei überlangem Text */
}

Schriftglättung (font-smooth)

Beeinflusst die Darstellung von Schrift auf verschiedenen Betriebssystemen.

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Praxisbeispiel: Komplexe Textformatierung

.article-title {
  font-family: "Georgia", serif;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.5px;
  color: #333;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
  margin-bottom: 1.5rem;
  text-align: center;
  text-transform: capitalize;
}

.article-body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: #444;
  text-align: justify;
  word-spacing: 0.05em;
  hyphens: auto; /* Automatische Silbentrennung */
}

.article-title {
  font-family: "Georgia", serif;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.5px;
  color: #333;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
  margin-bottom: 1.5rem;
  text-align: center;
  text-transform: capitalize;
}

.article-body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: #444;
  text-align: justify;
  word-spacing: 0.05em;
  hyphens: auto; /* Automatische Silbentrennung */
}

Responsive Textformatierung

Mit Media Queries kann die Textformatierung an verschiedene Bildschirmgrößen angepasst werden:

h1 {
  font-size: 2rem;
}

@media (min-width: 768px) {
  h1 {
    font-size: 2.5rem;
    letter-spacing: 1px;
  }
  
  p {
    font-size: 1.1rem;
    line-height: 1.8;
  }
}

h1 {
  font-size: 2rem;
}

@media (min-width: 768px) {
  h1 {
    font-size: 2.5rem;
    letter-spacing: 1px;
  }
  
  p {
    font-size: 1.1rem;
    line-height: 1.8;
  }
}

Webfonts einbinden

Mit @font-face können benutzerdefinierte Schriftarten eingebunden werden:

@font-face {
  font-family: 'MyCustomFont';
  src: url('fonts/myfont.woff2') format('woff2'),
       url('fonts/myfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'MyCustomFont', sans-serif;
}

@font-face {
  font-family: 'MyCustomFont';
  src: url('fonts/myfont.woff2') format('woff2'),
       url('fonts/myfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'MyCustomFont', sans-serif;
}

Variable Fonts

Moderne CSS-Technik, die verschiedene Schriftvariationen in einer Datei ermöglicht:

@font-face {
  font-family: 'VariableFont';
  src: url('font.woff2') format('woff2-variations');
  font-weight: 100 900; /* Bereich für Gewicht */
  font-stretch: 75% 125%; /* Bereich für Breite */
}

.heading {
  font-family: 'VariableFont';
  font-weight: 650;
  font-stretch: 110%;
}

@font-face {
  font-family: 'VariableFont';
  src: url('font.woff2') format('woff2-variations');
  font-weight: 100 900; /* Bereich für Gewicht */
  font-stretch: 75% 125%; /* Bereich für Breite */
}

.heading {
  font-family: 'VariableFont';
  font-weight: 650;
  font-stretch: 110%;
}

Umfangreiche Kontrolle

Diese Techniken geben Ihnen umfangreiche Kontrolle über die Textdarstellung auf Ihren Webseiten. Durch die Kombination verschiedener Eigenschaften können Sie ansprechende und leserfreundliche Typografie gestalten.