VelinStyle Text 1.2.2
Comprehensive text utilities for controlling typography — alignment, size, weight, decoration, wrapping, and more. Deutsch: Text
Maturity: Documented as stable in VelinStyle 1.2.0.
Studio and the complete Utility Engine remain planned — shipping utilities are hand-authored under
@layer utilities, not a full variant generator.
When to use
- Set type size, weight, align, truncate, and font family utilities.
- Use
.velin-font-display/ tabular-nums where documented.
When not
- Do not skip more than one step in the type scale between siblings.
Text Alignment
<p class="velin-text-start">Start aligned (left in LTR)</p>
<p class="velin-text-center">Center aligned</p>
<p class="velin-text-end">End aligned (right in LTR)</p>
<!-- Responsive -->
<p class="velin-text-center velin-text-md-start">Center on mobile, start on md+</p>Start aligned (left in LTR)
Center aligned
End aligned (right in LTR)
Center on mobile, start on md+
Font Size
<p class="velin-fs-1">Font size 1 (2.5rem)</p>
<p class="velin-fs-2">Font size 2 (2rem)</p>
<p class="velin-fs-3">Font size 3 (1.75rem)</p>
<p class="velin-fs-4">Font size 4 (1.5rem)</p>
<p class="velin-fs-5">Font size 5 (1.25rem)</p>
<p class="velin-fs-6">Font size 6 (1rem)</p>Font size 1 (2.5rem)
Font size 2 (2rem)
Font size 3 (1.75rem)
Font size 4 (1.5rem)
Font size 5 (1.25rem)
Font size 6 (1rem)
Font Weight
<p class="velin-fw-light">Light (300)</p>
<p class="velin-fw-normal">Normal (400)</p>
<p class="velin-fw-medium">Medium (500)</p>
<p class="velin-fw-semibold">Semibold (600)</p>
<p class="velin-fw-bold">Bold (700)</p>
<p class="velin-fst-italic">Italic</p>
<p class="velin-fst-normal">Normal style</p>Light (300)
Normal (400)
Medium (500)
Semibold (600)
Bold (700)
Italic
Normal style
Decoration & Transform
<p class="velin-text-decoration-underline">Underlined</p>
<p class="velin-text-decoration-line-through">Strikethrough</p>
<p class="velin-text-decoration-none">No decoration</p>
<p class="velin-text-uppercase">Uppercase text</p>
<p class="velin-text-lowercase">LOWERCASE TEXT</p>
<p class="velin-text-capitalize">capitalized text</p>Underlined
Strikethrough
No decoration
Uppercase text
LOWERCASE TEXT
capitalized text
Wrapping & Truncation
<p class="velin-text-wrap">Normal wrapping</p>
<p class="velin-text-nowrap">No wrapping</p>
<p class="velin-text-break">Break long words</p>
<p class="velin-text-truncate" style="max-width: 200px">
This long text will be truncated with an ellipsis
</p>Normal wrapping
No wrapping
Break long words
This long text will be truncated with an ellipsis
Font Family
<p class="velin-font-sans">Sans-serif (default)</p>
<p class="velin-font-serif">Serif font</p>
<p class="velin-font-mono">Monospace font</p>Sans-serif (default)
Serif font
Monospace font