How to make letters appear as they do in this wireframe?

Question

I have this wireframe that I am working from:

and on the top banner there are two sections like "find a hike" and "plan a hike"

How can I make letters like that? They are white, but have a brown layer around them. I am not sure how to do that.

Also, what font is that? Is it supported by most browsers?

That font looks like Arial Rounded MT Bold. It's supported by any browser as long as it's installed on the user's computer. — BoltClock, Jan 26 '12 at 20:17
The css property used on the text to create that effect could be a `text-shadow` try it and see. — aziz punjani, Jan 26 '12 at 20:22
Either create it as an image or try this: http://stackoverflow.com/questions/4919076/outline-effect-to-text — j08691, Jan 26 '12 at 20:27
@interstellar: no you can't, it doesn't have the expand property like the box-shadow. — Ege, Jan 26 '12 at 23:34

score 2 · Answer 1 · answered Jan 26 '12 at 23:54

There is a css3 property called text-stroke which does exactly the same thing you asked. The easiest cross-browser solution would be an image.

pong · Answer 2 · 2012-01-27T14:14:47.380

1

You might also consider <canvas> to show-off your Bezier talent :)

edited Jan 27 '12 at 14:14

answered Jan 26 '12 at 21:32

pong

score 1 · Answer 3 · answered Jan 26 '12 at 22:08

You can't get a stroke to look like that with pure CSS. Unfortunately, that is a a photoshop effect and you won't be able to do that with live text.

Same goes for up in the nav. That looks like a bezel effect, so you'll have to recreate that with an image.

3 Answers3