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


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

  • 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
  • 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

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.

  • 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. – user56reinstatemonica8 Dec 15 '12 at 17:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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