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?
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.
answered Nov 20 '12 at 8:01
-
1I 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-shadowsupport is horrible caniuse.com/#feat=css-textshadow – Joonas Nov 20 '12 at 8:53 -
text-shadowsupport 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 -
1I'd favour
text-shadowover 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
