{"id":7405,"date":"2010-09-12T14:12:45","date_gmt":"2010-09-12T21:12:45","guid":{"rendered":"http:\/\/css-tricks.com\/?p=7405"},"modified":"2022-09-22T11:49:56","modified_gmt":"2022-09-22T18:49:56","slug":"adding-stroke-to-web-text","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/adding-stroke-to-web-text\/","title":{"rendered":"Adding Stroke to Web\u00a0Text"},"content":{"rendered":"\n

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! Example:<\/p>\n\n\n\n

h1 {\n  \/* Prefix required. Even Firefox only supports the -webkit- prefix *\/\n  -webkit-text-stroke-width: 1px;\n  -webkit-text-stroke-color: black;\n}<\/code><\/pre>\n\n\n\n\n\n\n\n
Or shorthand:<\/p>\n\n\n\n
h1 {\n  -webkit-text-stroke: 1px black;\n}<\/code><\/pre>\n\n\n\n
You might be thinking “Cool, but if only some browsers support this, if I set my text color to white<\/code> and my background is white<\/code>, the stroke makes it look cool in supporting browsers but entirely disappears in non-supporting browsers!”<\/em><\/p>\n\n\n\n
One possibility is this:<\/p>\n\n\n\n
h1 {\n  color: black;\n  -webkit-text-fill-color: white; \/* Will override color (regardless of order) *\/\n  -webkit-text-stroke-width: 1px;\n  -webkit-text-stroke-color: black;\n}<\/code><\/pre>\n\n\n\n
Shown here with @font-face font Anime Ace 2 by Nate Piekos:<\/p>\n\n\n\n
\"\"
Properly stroked!<\/figcaption><\/figure>\n\n\n\n
\"\"
Fallback to solid color. Shown here in Firefox<\/figcaption><\/figure>\n\n\n\n
Another possibility is only applying when supported:<\/p>\n\n\n\n
@supports (-webkit-text-stroke: 1px black) {\n  h1 {\n    -webkit-text-stroke: 1px black;\n    -webkit-text-fill-color: white;\n  }\n}<\/code><\/pre>\n\n\n
Support<\/h3>\n\n
This browser support data is from Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div>
Desktop<\/h4>
Chrome<\/span><\/th>Firefox<\/span><\/th>IE<\/span><\/th>Edge<\/span><\/th>Safari<\/span><\/th><\/tr><\/thead>
4*<\/span><\/td>49*<\/span><\/td>No<\/span><\/td>15*<\/span><\/td>3.1*<\/span><\/td><\/tr><\/table><\/div>
Mobile \/ Tablet<\/h4>
Android Chrome<\/span><\/th>Android Firefox<\/span><\/th>Android<\/span><\/th>iOS Safari<\/span><\/th><\/tr><\/thead>
123*<\/span><\/td>124*<\/span><\/td>2.1*<\/span><\/td>4.0-4.1*<\/span><\/td><\/tr><\/table><\/div><\/div>\n\n\n
Simulation<\/h3>\n\n\n
We can take this a bit further by not relying on the WebKit proprietary entirely. We can use the text-shadow<\/code> property<\/a> (supported in Firefox, Opera, and IE 10 as well) and simulate a stroke. We’ll use four shadows, each 1px offset of black with no spread, one each to the top right, top left, bottom left, and bottom right. We’ll remove the WebKit proprietary -webkit-text-fill-color in favor of color since we’re cross-browser compatible now. The only holdout would be IE9 and down, which of course you can use IE-specific stylesheets to account for.<\/p>\n\n\n\n
h1 {\n  color: white;\n  text-shadow:\n   -1px -1px 0 #000,  \n    1px -1px 0 #000,\n    -1px 1px 0 #000,\n     1px 1px 0 #000;\n}<\/code><\/pre>\n\n\n\n
\"\"
This is a stroke using all text-shadow. Pretty close to just as good as a real stroke. The primary issue is that you can only get 1px of stroke this way. Any more, and you see gaps. Any more with WebKit text stroke and there is issues too though, so it’s kind of a horse apiece.<\/figcaption><\/figure>\n\n\n
Combining<\/h3>\n\n\n
Using both a stroke and a shadow can be a great effect. Let’s toss on a WebKit stroke, the all-around text-shadow stroke, as well as a deeper text-shadow stroke.<\/p>\n\n\n\n
h1 {\n   -webkit-text-stroke: 1px black;\n   color: white;\n   text-shadow:\n       3px 3px 0 #000,\n     -1px -1px 0 #000,  \n      1px -1px 0 #000,\n      -1px 1px 0 #000,\n       1px 1px 0 #000;\n}<\/code><\/pre>\n\n\n\n
\"\"
Lookin’ good<\/figcaption><\/figure>\n\n\n
Demo<\/h3>\n\n\n