(x)

Anke Gaksch's picture

-

Grot Esqué's picture

Yes, it’s Lucida Grande. Try changing your anti-alias setting in Photoshop. Put “‘Lucida Grande’, ‘Lucida Sans’ in your css.

Anke Gaksch's picture

i tried every possible alias setting and it stills looks different. but i guess if i work with HTML the problem will solve itself.
thanks for confirming!

jasonc's picture

I think the problem might be related to the font being rendered using different rasterizers. In your web browser you're seeing the font rendered using your machine's ntaive rasterizer (OSX or Win), but Photoshop is using it's own internal rasterizer.
Lucida Grande is a well hinted TrueType font, and it looks to me like you're seeing the hints being interpreted differently (or on a Mac, seeing the results of downsampling.) In particular, note in your example how the ascenders are 1 pixel taller than the caps in the HTML version, but the ascenders align with Caps in your version. This could be a result of hints being applied differently.

In that case, you won't be able to get the exact same image in your browser as in Photoshop even if the fonts are exactly the same, but they should be close.

Jason

gargoyle's picture

I would agree with Jason that the difference you see is due to the rasterizer. Lucida Grande will look different still when viewed in a Windows or Linux browser, due to the different rendering engines on those systems.

You can only count on "Lucida Grande" being installed on Mac OS X systems, since it's the main UI font and I don't think you could delete it even if you wanted to. But Lucida Grande is just a newer version of Lucida Sans with an incredibly large character set. There is a similar version of Lucida Sans included with Windows 2000/XP called "Lucida Sans Unicode." Finally, the basic Lucida Sans ships with Microsoft Office products and thus can commonly be found on many Windows and Mac systems. It also has a true italic, which Lucida Grande and Lucida Sans Unicode lack.

The most interesting thing about the three different versions is that while their common glyphs share mostly identical outlines, each one is hinted differently, giving it a noticeably different look when rendered at smaller sizes (at least under Windows).

So, for cross-platform rendering on a website, you might write your style definition like this:

font-family: 'Lucida Grande', 'Lucida Sans', 'Lucida Sans Unicode', sans-serif;

elliot100's picture

I don't know if this helps but Photoshop 7 and above has a "System Layout" option on the Character palette, which according to Help "lets you preview text using the operating system's default text handling." For the old Win2k machine I'm on here, this means no anti-aliasing at all...

julienbidoret's picture

That's it !
I had heavy troubles whith photoshop' rendering for kerning, specially with Lucida Grande, on Win XP (without "clear" type).
My web pages mockups were confuse and quite dirty. That option (Character palette's "System Layout") solved the problem. Thanks for the help.

jokers's picture

You then select the website that best meets your needs, and simply simply select the website to check the offered wallpapers. You then click on back on your browser to select another related website for yourself. christmas desktop wallpapers ||| funny new year images

Syndicate content Syndicate content