trying to replicate a web font displayed on a webpage in photoshop

TF22Raptor's picture

Hi all,

I am trying to replicate the main body font style shown at this website http://mediatemple.net/ but I am doing it in photoshop text with (no antialiasing).

on my computer this webpages text is rendered like this:
http://gyazo.com/dcda9166b97bdc41afc8a1f27a42e53f.png

And in the webpages code for this text it shows:
16px "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif

Now I have all the fonts there on my computer, but when I am in photoshop and trying to replicate this font it's just not the same (Lucida Grande is very close but MT's is a lot cleaner).

I'm new to special webfonts or anything like that, not entirely sure what is going on here.

Any help would be great

Frode Bo Helland's picture

Your web browser uses another rendering engine than Photoshop. This might be why you see differences. Can you show us what's happening in PS?

Jan's picture

It’s Lucida Grande.
This is how it renders on mine (Mac):

Frode Bo Helland's picture

The extra weight in Jan's image is due to a rendering bug in Firefox (?) when rendering light text on a dark background.

Jan's picture

Yep, that was Firefox. But it doesn’t look that much different in Safari:

Frode Bo Helland's picture

But you can fix that with some CSS, but we are veering off topic :)

TF22Raptor's picture

Hi guys this is what I had in photoshop (the bottom one) without any antialiasing.

But I think I have worked it out, as soon as I tried this with (sharp) antialiasing, its pretty much identical to what I see in the webpage, so as Frode Frank says I guess what this is telling me is that there is some slight rending going on in my browser, and that it's not just a pixel font.

I guess I've got to research some more about webpage font rendering/@fontface clear type, that sort of thing.

aluminum's picture

Set the type in the browser. Screen shot. Paste into PhotoShop.

TF22Raptor's picture

also guys talking about Lucida Grande, what version of the font is this?

It's slightly different to the Lucida Grande I have, and I have tried back to backing Lucida Sans Unicode and plain Lucida Sans.

Whatever this version is it seems a little bit more open and smoother, simpler in its forms. The M has a wider base, e and a's are more rounded and open.

Any help would be great

TF22Raptor's picture

don't worry worked it out, it was Myriad I was after.

Syndicate content Syndicate content