Tell me more ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.
up vote 5 down vote favorite
1

I have seen a lot this type of fonts (the ones in the bar). It is a relief effect or the font is just like that?

enter image description here

share|improve this question

2 Answers

up vote 3 down vote accepted

That's an effect applied with either a graphics program like photoshop, or done dynamically with css for webpages.

share|improve this answer
Here are a list of tutorials for how to get this effect using css, photoshop, illustrator and a few others: sixrevisions.com/graphics-design/… – Anne Nov 20 '12 at 6:12
Thanks so much, exactly what I was looking for – Oscar Nov 20 '12 at 6:17
Yep. Fonts themselves do not support any colour or shade variation (although it is possible to fake it with multiple layered fonts, or halftoning effects). – e100 Nov 20 '12 at 10:00
up vote 4 down vote

It is simply a white drop shadow applied to the text.

In this case, it is achieved with the CSS code:

text-shadow: 0 1px 0 white;

Works best on bold text.

The icons would probably have been done in Photoshop in a similar style to match. In Photoshop, you could get the same effect by duplicating the text, moving the duplicate down one pixel, dropping it to a layer underneath, and making it white.

share|improve this answer
1  
I wouldn't do it that way in photoshop since photoshop has layer style called drop-shadow, but if I did this with code, I would probably use the latter method with js to get cross browser relief effect, like this: jsfiddle.net/lollero/WVnZL -- text-shadow support is horrible caniuse.com/#feat=css-textshadow – Joonas Nov 20 '12 at 8:53
text-shadow support is actually pretty good. All the modern browser versions support it, and the more recent versions of everything but IE support is as well. – Joe Nov 26 '12 at 22:55
1  
I'd favour text-shadow over the text-doubling javascript. Many screenreaders (98%, apparently) support javascript, and it can't be fun for these people to listen to every menu item twice. Text shadow will rarely be essential to a design, so I'd say use it as a progressive enhancement: site looks better in non-IE, still looks good and is perfectly usable in IE. – user568458 Dec 15 '12 at 17:52

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.