Text
Body copy patterns with responsive sizing, semantics, and hyphenation edge cases for long words.
Available components
Examples
Sizes (xl, lg, md, sm)
Body text extra large
Body text large
Body text medium
Body text small
Sizes (xl, lg, md, sm) (dark)
Body text extra large
Body text large
Body text medium
Body text small
Color (primary, secondary)
Body text primary color
Body text secondary color
Color (primary, secondary) (dark)
Body text primary color
Body text secondary color
Semantic tags
The quick brown fox jumps over the lazy dog.
Viktoriaplatz 2, 3013 Bern
BKW Design System
Updated today
Semantic tags (dark)
The quick brown fox jumps over the lazy dog.
Viktoriaplatz 2, 3013 Bern
BKW Design System
Updated today
Family and weight variants
Favorit regular with regular weight
Favorit regular with medium weight
Favorit Extended with regular weight
Favorit Extended with medium weight
Family and weight variants (dark)
Favorit regular with regular weight
Favorit regular with medium weight
Favorit Extended with regular weight
Favorit Extended with medium weight
Responsive align ({ base, md, xl })
Alignment changes from start to center to end by breakpoint.
Secondary helper text with responsive alignment.
Responsive align ({ base, md, xl }) (dark)
Alignment changes from start to center to end by breakpoint.
Secondary helper text with responsive alignment.
Responsive size ({ base, md, xl })
Responsive size: sm to lg to xl
Favorit Extended medium scales from sm to md to lg.
This narrower example makes the responsive text size shift easier to spot as the viewport expands.
Resize the viewport to see the body copy step through the responsive text scale.
Responsive size ({ base, md, xl }) (dark)
Responsive size: sm to lg to xl
Favorit Extended medium scales from sm to md to lg.
This narrower example makes the responsive text size shift easier to spot as the viewport expands.
Resize the viewport to see the body copy step through the responsive text scale.
Edge Cases
Hyphenation in constrained containers
Donaudampfschifffahrtsgesellschaftskapitän
`auto` lets the browser hyphenate long words when the text container becomes narrow.
Donaudampfschifffahrtsgesellschaftskapitän
`manual` only breaks at inserted soft hyphen positions.
Donaudampfschifffahrtsgesellschaftskapitän
`inherit` picks up the hyphenation behavior from its parent context.
Hyphenation in constrained containers (dark)
Donaudampfschifffahrtsgesellschaftskapitän
`auto` lets the browser hyphenate long words when the text container becomes narrow.
Donaudampfschifffahrtsgesellschaftskapitän
`manual` only breaks at inserted soft hyphen positions.
Donaudampfschifffahrtsgesellschaftskapitän
`inherit` picks up the hyphenation behavior from its parent context.
Responsive and tag edge cases
LangfristigerTransformationsfahrplan
Larger semantic text tags can still use automatic hyphenation when layout width is constrained.
Donaudampfschifffahrtsgesellschaft
Combines responsive sizing with language-aware automatic hyphenation.
Donaudampfschifffahrtsgesellschaftskapitän
`none` preserves the word as-is, even when the container is narrow.
Responsive and tag edge cases (dark)
LangfristigerTransformationsfahrplan
Larger semantic text tags can still use automatic hyphenation when layout width is constrained.
Donaudampfschifffahrtsgesellschaft
Combines responsive sizing with language-aware automatic hyphenation.
Donaudampfschifffahrtsgesellschaftskapitän
`none` preserves the word as-is, even when the container is narrow.