How to Add Stroke to a Web Text

Fonts on the web are essentially vector based graphics. That’s why you can display them at 12px or 120px and they remain crisp and relatively sharp-edged. Vector means that their shape is determined by points and mathematics to describe the shape, rather than actual pixel data. Because they are vector, it would make sense if we could do things that other vector programs (e.g. Adobe Illustrator) can do with vector text, like draw a stroke around the individual characters. Well, we can! At least in WebKit.

Example:

h1 {
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}

Or shorthand:

h1 {
-webkit-text-stroke: 1px black;
}

WebKit has your back on that one, you can set the text color with another proprietary property, so you’re safe for all browsers:

h1 {
color: black;
-webkit-text-fill-color: white; /* Will override color (regardless of order) */
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}

Thankyou for reading.

Leave a Reply

Your email address will not be published. Required fields are marked *