## Texte stylen

Texte bilden den Grundpfeiler in der Übermittlung von Informationen (Audio-Visuelle Medien ausgeschlossen)

Entsprechend bietet CSS ein sehr breites Spektrum um Texte zu stylen

### Größen und Abstände

Zeichengröße lässt sich mithilfe von `font-size` modifizieren

#### Welche Einheit?

- `px` - Pixelwerte
- `em` - Element
- `rem` - Root-Element
- `cm/in/mm` - Standard-Maßeinheiten (Metrisch und Imperial)

Aber welche Einheit für Schriften?

- `px` - Skaliert nicht (Browser-Zoom)
- `em` - Skaliert auf Basis des Parent-Element
- `rem` - Skaliert auf Basis des root-Element (HTML)
- `cm/in/mm` - Für Print

Aber, was ist den nun ein `REM`?

Kurz: Normalerweise entspricht 1rem = 16px

Dies stammt aus den frühen Tagen des Webs, in dem 16px als gut lesbar und nicht zu groß empfunden wurde (für die damaligen Monitore)

          .font-large {
            font-size: 8rem;
          }

Ich bin 8rem groß!

#### `letter-spacing`

Mithilfe dieser Einstellung, lässt sich der Abstand zwischen einzelnen Characters ändern

          .letter-spacing {
            letter-spacing: 8px;
          }

8px Abstand zwischen Buchstaben!

#### `line-height`

Zeilenabstände modifizieren

          .line-height {
            line-height: 20px;
          }

20px Abstand
zwischen 2
Zeilen!

#### `word-spacing`

Abstände zwischen Wörtern modifizieren

          .word-spacing-X {
            word-spacing: Xrem;
          }

1rem Abstand!

2rem Abstand!

3rem Abstand!

#### `font-weight`

Voll Fett! Oder Dünn!

Mögliche Werte

- Numerisch. Je höher, desto fetter.
  - 100
  - ...
  - 900
- Keywords:
  - bold
  - bolder
  - lighter

Wichtig!

Nicht jede Schrift hat alle `font-weight`'s definiert.

Viele System-Fonts haben zum Beispiel keine Dünne Variante

          .font-bold {
            font-weight: 900;
          }
          .font-thin {
            font-weight: 100;
          }

Dünn!

Normal!

Fett!

#### `text-decoration-*`

Linien setzen

`text-decoration-line`

Unterstrichen (`underline`)

Durchgestrichen (`line-through`)

Überstrichen (`overline`)

Man kann das auch alles Kombinieren!

          .all-decorations {
            text-decoration: underline overline line-through;
          }

Alles was geht!

`text-decoration-style`

Doppelt (`double`)

Gepunktet (`dotted`)

Gestrichelt (`dashed`)

Gewellt (`wavy`)

`text-decoration-thickness`

            .thick-line {
              text-decoration-line: underline;
              text-decoration-style: solid;
              text-decoration-thickness: 1rem;
            }

Hallo Welt!

`text-decoration` als Kombination angeben

          .decorate {
            text-decoration: underline wavy 3px blue;
          }

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit ad minima laborum consequatur inventore? Placeat, perferendis deleniti? Facilis enim aperiam consequuntur itaque asperiores assumenda. Autem porro animi iure expedita inventore.

Wie eben gesehen, kann man auch die Farbe anpassen!

`(text-decoration-color)`

#### Textausrichtung mit `text-align`

4 Werte:

- start
- end
- center
- justify

Ich bin linksbündig

Ich bin rechtsbündig

Ich bin zentriert

`justify` erzeugt einen Blocktext

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quibusdam reprehenderit, nemo rem sunt magni in sit at unde, expedita sapiente iste tempore beatae! Voluptates praesentium deserunt dolores facilis non sit.

#### Kursiv mit `font-style`

          .kursiv {
            font-style: italic;
          }

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis eos inventore, excepturi alias molestiae rerum libero soluta neque ipsum veritatis corporis magnam tempora nulla qui id? Alias eligendi dicta exercitationem.

Es gibt auch dynamische Fonts, die es erlauben einen beliebigen "Slant" zwischen 0 und 90 Grad einzugeben.
Der einzugebene Befehl für den `font-style` ist "oblique":

          .angle-30 {
            font-style: oblique 30deg;
          }

Noch 2 ...

#### Textschattierung mittels `text-shadow`

          .bloody {
            text-shadow:
              5px // x-offset
              5px // y-offset
              10px // blur
              red // color
            ;
          }

Hallo!

#### Andere Schriftfamilien verwenden?

Natürlich lassen sich verschiedene und mehr als eine Schriftfamilie für die Website definieren.

Generel werden oft externe Fonts verwendet um dem Stil einer Website zu verdeutlichen.

Trotzdem sollte mit Bedacht gewählt werden; Webfonts müssen nachgeladen werden, und jede Font hat andere Features.

          .custom-fonts {
            font-family:
              Noteworthy,
              "Source Sans Pro",
              -apple-system,
              sans-serif,
              monospace;
            ;
          }

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero itaque expedita ratione maiores, nostrum quibusdam dicta illo iste veniam possimus ipsum, quam, repellat hic eveniet excepturi! Sit numquam unde necessitatibus.

Es lassen sich mehrere Fonts definieren, viele haben auch einen speziellen Namen, damit das Betriebssystem entscheiden kann ("sans-serif", "monospace", "-apple-system")

Der erste Verfügbare Font in der Liste wird dann dem Benutzer angezeigt.

Krass was alles geht!

Fonts mit CSS importieren und nutzen

          // Font definieren und importieren
          @font-face {
            font-family: 'Kablammo';
            font-style: normal;
            font-weight: 400;
            font-display: swap;
            src: url("/fonts/Kablammo.ttf") format('woff2');
            unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
          }

          // Font verwenden
          .apply-font {
            font-size: 6rem;
            font-family: Kablammo;
            font-optical-sizing: auto;
            font-weight: 400;
            font-style: normal;
          }