Adding Stroke to Web Text

Published
September 12, 2010
by
Chris Coyier

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:

Right away, I'm sure you are thinking: "Cool, but only WebKit supports, this, so if I set my text color to white and my background is white, the stroke makes it look cool in WebKit but disappears in other browsers!"

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

Simulation

We can take this a bit further by not relying on the WebKit proprietary entirely. We can use the text-shadow property (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 use remove the WebKit propreitary -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.

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.

Combining

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.

Alignment

If you are familiar with Adobe Illustrator, you may know that you can align a stroke on the inside of a shape, outside, or centered. That option looks like this in the palette:

From left to right: center, inside, outside

For reasons unbeknownst to me, text in Illustrator can only be set to center stroke alignment as well. Once you expand the text into regular vector paths though, all three options become available. Reminder from Sam Frysteen: add a new stroke in the appearance panel and move it below your text (basically mimics outside stroke alignment).

From top to bottom: inside, centered, outside.

Only outside text stroke alignment looks any good at all to me. It's unfortunate, both for CSS and for Illustrator, that the unchangeable default is centered. The solution is just not to go too crazy with the thickness of your stroke border and things should be OK. Note: the text-shadow-only solution doesn't have this problem, but also is unable to stroke any more than 1px.

What we can't do

There are other things that vector based graphics programs can do with text. You can squish the letter horizontally / stretch them vertically. This type of text treatment is almost universally frowned upon, so no big loss that we can't do that. You can also set type on an irregular line (like around a circle). It certainly would be cool to do this with web text. Perhaps we could set text to follow the border path of its parent element.

In Illustrator, we can also tell a stroke how to handle sharp corners: rounded, beveled, or mitered. These can have nice effects, are not possible on the web. However, the WebKit handling of corners is pretty nice at its default (whatever it is), and arguably nicer than any of the options in Illustrator.

Fancies

For the record, you can use any type of color value for the color of WebKit stroke (hex, rgba, hsla, keyword). That means transparent strokes if you want them, which indeed to "stack" in that if strokes overlap each other (common) they will be darker.

As far as WebKit keyframe animation, the stroke color will animate but the stroke width will not.

Loved it! I don’t think i’m going to use it much though, I don’t think websites should look exactly the same in all browsers but this is about where I cross the line. Having a stroke or not is kind of a big graphical difference… Nevertheless, cool to know!

I fiddled around a little more and hacked together some sort of an Internet Explorer solution using filters. I actually feel a little dirty about the whole thing, and I can’t say it looks super great, but it’s reasonably functional. Great article as usual Chris. I’m always inspired to push the envelope after reading your stuff.

So I took the Thick text shadow only problem and looked at it from a icon artists perspective. So basically trace the outline of a b&w circle that is X in radius using text-shadow, then use rgba to blend the shadows together to get something close to a circle smoothed by anti-alias.

This is probably asking the browser for a lot of juice & the rgba alpha mustn’t help much, but it’s nicer.

I think you forgot to mention that if there’s a border around the page ( doesn’t matter where ) the -webkit-text-stroke will strangely not work in Chrome IF there is NO text-shadow around. It will still work in Safari though.

Hey Chris, great post. Having the flexibility to be able to customise real text like this on the web is amazing – the powers of CSS3 shine through once again. Being able to add strokes that scale to any size is great as well as the ability to customise the stroke positioning is a bonus! Thanks for sharing.

Personally, I think “outline” makes slightly more sense than “stroke”, unless the stroke is beefed up to allow you to specify an inner or outer stroke. If that’s the case, it would be cool for that to be applied to block-level elements as well.

I went through a phase about 5 years ago where I liked to “stroke” text a lot. I worked in the automotive industry and the style fit their needs pretty well (see racing team logo designs). If this had been available back then it would have been very helpful – even without the widespread support.

Thanks for the articles. They always get me thinking about other possibilities that are open to me and other CSS developers.

I generally use the text-shadow and -moz-text-shadow, but the new CSS3 potential is amazing, checkout -webkit-transition-duration: amd-webkit-transition-timing-function, We use it on our site for link fades!

I am taking a Graphic Design class and the instructor says that text strokes is taboo in the graphic design industry. Is that true or at least universal? They say that it makes text unreadable. I can see that if not done properly but it seems like a very good way to make text readable against some backgrounds. What do you think?

If I remember correctly from my 90’s reading of Adobe’s PostScript, the reason why fonts can’t have outer strokes only is eithe (a) because only PostScript fonts have the information of the path direction, which you can use to have overlapping paths and even though not generating a hole in the intersection, and (b) because the OS is what manages the font in the App (for speed purposes) and it’s the same reason why you couldn’t “view” stroke patterns and other PostScript effects until very recently.

Also, in Illustrator, if you add a fill and move it behind the “Characters”, as you mentioned, you still end up needing a fill color to cover the inside part of the stroke.

The correct way to do it is adding a new stroke and applying the “offset path” filter to it. That way you can make transparent-fill text outlined with the offset and width you want.

There used to be another way, with an “outline” filter, which would allowed you to add as many onion outlines as you want, but I can’t find it or it’s broken in AI CC :(

Try increasing the font size to mega size (258px on the example) when using text stroke. What is going on there!

This comment thread is closed. If you have important information to share, you can always contact me.

Treehouse is where you go to learn HTML, CSS, and how to build iOS apps. It's a complete education in modern web and app technology, designed to get you ready for a hot new job or to kickstart your own business.

The Lodge is a member login only area with access to video training on how to build websites from scratch using the best modern tools.

What now? I have some ideas for you.

Go explore CodePen!

As a front end designer and developer, you should have an account on CodePen so you can save your snippets, present your ideas, and engage with other front end folk. I'd encourage you to go PRO as well, to unlock the full power of CodePen.

Get the newsletter!

You should sign up for the CSS-Tricks newsletter. It's a clean copy of all the blog posts each week, combined together, right to your inbox. If email isn't your thing, there is an RSS feed, iTunes, and lots of other ways to subscribe.

Listen to ShopTalk!

Subscribe to The Lodge!

The Lodge is a members-only, ad-free video learning area here on CSS-Tricks. Just like the free screencasts, but organized into four large complete series. Membership is also the #1 best way to support CSS-Tricks.

We can do the real footer now.

Site Links

Colophon

CSS-Tricks* is created, written by, and maintained by Chris Coyier. It is built on WordPress, hosted by Media Temple, and the assets are served by MaxCDN. The fonts are Source Sans and Source Code Pro. It is made possible by viewers like you who subscribe to The Lodge and through advertising for products and services I like.