CSS Visual Directory
Outlined Text
Letters drawn as an outline with a hollow centre, using a stroke rather than a fill.
Edit Outlined Text
Change any value to see it update live.
About this entry
What it is
Letters drawn as an outline with a hollow centre, using a stroke rather than a fill.
Posters, oversized display headings and text laid over a busy image.
Copy & use
How to copy and use outlined text
- 01
Copy the complete value
Use the copy button above so the value is captured without its label, description or surrounding page text.
- 02
Paste it where you need it
Posters, oversized display headings and text laid over a busy image.
- 03
Check the final result
Current browsers support the properties used here, but stacking contexts, background colours and inherited styles affect the result. Test snippets in the real component instead of judging them only in isolation.
Value by value
What each part of this rule does
Outlines each glyph and removes the fill, leaving hollow letters. The stroke is drawn centred on the glyph edge, so half of it sits inside the shape.
2px- Stroke width. Because it is centred, thick values eat into the counters.
#1c1917- Stroke colour.
color: transparent- Removes the fill. Keep a colour here for an outlined-and-filled look instead.
Making it yours
How to adjust outlined text
Outlined text needs a heavier typeface and more letter spacing than filled text at the same size. Thin fonts lose their counters as soon as the stroke passes about 2px.
Worth knowing before you ship it
The property is still prefixed and unstandardised. It degrades to solid transparent text where it is unsupported, which means invisible — so pair it with a fallback colour.
Common questions
Using outlined text
What is outlined text?
Letters drawn as an outline with a hollow centre, using a stroke rather than a fill. Posters, oversized display headings and text laid over a busy image.
Where do I put the outlined text CSS?
Paste the declaration inside the rule for the element you are styling — a class, an id or a component's scoped stylesheet. Posters, oversized display headings and text laid over a busy image. Change one value at a time so you can see what each part contributes, and check the cascade in case a more specific rule already sets the same property.
Will outlined text work everywhere?
Current browsers support the properties used here, but stacking contexts, background colours and inherited styles affect the result. Test snippets in the real component instead of judging them only in isolation.
Can I customise outlined text after copying?
Paste the declaration into the selector for the element you want to style. Adjust one value at a time and check the cascade so an existing rule does not unexpectedly override the effect.
Also known as
Keep browsing