Text 1.2.0

Comprehensive text utilities for controlling typography — alignment, size, weight, decoration, wrapping, and more. English: Text

Reifegrad: In VelinStyle 1.2.0 als stable dokumentiert. Studio und die vollständige Utility Engine bleiben geplant — ausgelieferte Utilities sind unter @layer utilities von Hand geschrieben, kein vollständiger Variantengenerator.

Wann verwenden

Setze Schriftgröße, Gewicht, Ausrichtung, Kürzung und Schriftfamilien-Utilities.
Nutze .velin-font-display / tabular-nums dort, wo es dokumentiert ist.

Wann nicht

überspringe zwischen benachbarten Elementen nicht mehr als eine Stufe der Schriftskala.

Textausrichtung

<p class="velin-text-start">Am Start ausgerichtet (links in LTR)</p>
<p class="velin-text-center">Zentriert</p>
<p class="velin-text-end">Am Ende ausgerichtet (rechts in LTR)</p>
<!-- Responsive -->
<p class="velin-text-center velin-text-md-start">Mobil zentriert, ab md am Start</p>

Am Start ausgerichtet (links in LTR)

Zentriert

Am Ende ausgerichtet (rechts in LTR)

Mobil zentriert, ab md am Start

Schriftgröße

<p class="velin-fs-1">Schriftgröße 1 (2.5rem)</p>
<p class="velin-fs-2">Schriftgröße 2 (2rem)</p>
<p class="velin-fs-3">Schriftgröße 3 (1.75rem)</p>
<p class="velin-fs-4">Schriftgröße 4 (1.5rem)</p>
<p class="velin-fs-5">Schriftgröße 5 (1.25rem)</p>
<p class="velin-fs-6">Schriftgröße 6 (1rem)</p>

Schriftgröße 1 (2.5rem)

Schriftgröße 2 (2rem)

Schriftgröße 3 (1.75rem)

Schriftgröße 4 (1.5rem)

Schriftgröße 5 (1.25rem)

Schriftgröße 6 (1rem)

Schriftgewicht

<p class="velin-fw-light">Leicht (300)</p>
<p class="velin-fw-normal">Normal (400)</p>
<p class="velin-fw-medium">Medium (500)</p>
<p class="velin-fw-semibold">Halbfett (600)</p>
<p class="velin-fw-bold">Fett (700)</p>
<p class="velin-fst-italic">Kursiv</p>
<p class="velin-fst-normal">Normaler Stil</p>

Leicht (300)

Normal (400)

Medium (500)

Halbfett (600)

Fett (700)

Kursiv

Normaler Stil

Dekoration & Transformation

<p class="velin-text-decoration-underline">Unterstrichen</p>
<p class="velin-text-decoration-line-through">Durchgestrichen</p>
<p class="velin-text-decoration-none">Keine Dekoration</p>
<p class="velin-text-uppercase">Text in Großbuchstaben</p>
<p class="velin-text-lowercase">TEXT IN KLEINBUCHSTABEN</p>
<p class="velin-text-capitalize">text mit großschreibung</p>

Unterstrichen

Durchgestrichen

Keine Dekoration

Text in Großbuchstaben

TEXT IN KLEINBUCHSTABEN

text mit großschreibung

Umbruch & Kürzung

<p class="velin-text-wrap">Normaler Umbruch</p>
<p class="velin-text-nowrap">Kein Umbruch</p>
<p class="velin-text-break">Lange Wörter umbrechen</p>
<p class="velin-text-truncate" style="max-width: 200px">
  Dieser lange Text wird mit Auslassungspunkten gekürzt
</p>

Normaler Umbruch

Kein Umbruch

Lange Wörter umbrechen

Dieser lange Text wird mit Auslassungspunkten gekürzt

Schriftfamilie

<p class="velin-font-sans">Sans-serif (Standard)</p>
<p class="velin-font-serif">Serifenschrift</p>
<p class="velin-font-mono">Monospace-Schrift</p>

Sans-serif (Standard)

Serifenschrift

Monospace-Schrift