# Text Stroke

The Text Stroke system allows you to add outlined text with customizable stroke width and color. This is useful for creating text that stands out against shaded backgrounds.

### Usage

The Text Stroke system includes preset size modifiers that allow you to quickly apply different stroke widths to your text. The default stroke is 3.5px white, with additional options for small (2px), medium (4.5px), large (6px), and extra large (7.5px).

AaNo Stroke

AaSmall

AaDefault

AaMedium

AaLarge

AaExtra Large

Text StrokePreset Sizes

    <span class="value value--large">Aa</span>
    <span class="value value--large text-stroke text-stroke--small">Aa</span>
    <span class="value value--large text-stroke">Aa</span>
    <span class="value value--large text-stroke text-stroke--medium">Aa</span>
    <span class="value value--large text-stroke text-stroke--large">Aa</span>
    <span class="value value--large text-stroke text-stroke--xlarge">Aa</span>

### Stroke Colors

Use the black modifier for text on dark backgrounds.

AaNo Stroke

AaSmall

AaDefault

AaMedium

AaLarge

AaExtra Large

Text StrokeColor Variants

    <span class="value value--large text--white">Aa</span>
    <span class="value value--large text--white text-stroke text-stroke--small text-stroke--black">Aa</span>
    <span class="value value--large text--white text-stroke text-stroke--black">Aa</span>
    <span class="value value--large text--white text-stroke text-stroke--medium text-stroke--black">Aa</span>
    <span class="value value--large text--white text-stroke text-stroke--large text-stroke--black">Aa</span>
    <span class="value value--large text--white text-stroke text-stroke--xlarge text-stroke--black">Aa</span>

Previous

[Description Format descriptive text with standardized styles](/framework/docs/1.2/description)

Next

[Image Optimize images using dithering techniques for 1-bit rendering](/framework/docs/1.2/image)