Stroking Text

Text can be stroked with a different (or same) color. The stroke can be any practical thickness.

A text stroke can be likened to a border around text characters.

Almost like that. Visualize a brush stroke around the edge of a text character. Part of the stroke is within the edge of the character and part is on the outside.

The wider the stroke, the more it covers the edge of the characters and the more it spills outside the edge.

Here is a repeated character, all the same specified color but with various widths of text strokes.

H H H H H

The first of the above characters has no stroke. The next has a 1-pixel stroke. After that, each subsequent character has a stroke double the width of the previous. The last character has an 8-pixel stroke.

Here is the source code for the above example.

<p style="margin:0; font-size:50pt; line-height:100%;">
<span style="color:pink;">H</span>
<span style="color:pink; -webkit-text-stroke:1px blue;">H</span>
<span style="color:pink; -webkit-text-stroke:2px blue;">H</span>
<span style="color:pink; -webkit-text-stroke:4px blue;">H</span>
<span style="color:pink; -webkit-text-stroke:8px blue;">H</span>
</p>

The CSS property -webkit-text-stroke is used to specify a text stroke.

The -webkit-text-stroke property requires two values, the width of the stroke and the color of the stroke. You'll see the values specifed in the above example source code.

An illustration of use: If the text color is specified as transparent and the stroke color as white (or other suitable color), you'll have transparent outlined text. Here is an illustration of text created with color:transparent; and -webkit-text-stroke:1px white; CSS definitions, on top of a color-gradient image.

Text

For completion, here is the source code of the entire above illustration.

<div style="max-width:300px; position:relative;">
<img src="https://willmaster.com/possibilities/images/poss1255(css).png" alt="Image with 'Text'">
<div style="color:transparent; -webkit-text-stroke:1px white; position:absolute; left:0; right:0; top:20px; text-align:center; font-size:123px;">Text</div>
</div>

Generally, because the stroke is partially over the edge of characters, the -webkit-text-stroke property is more suitable for larger text.

(This content first appeared in Possibilities newsletter.)

Will Bontrager