Photoshop Mock Up Font isn't same as in HTML

Question

(Beginner to HTML)

I have made a Photoshop mock-up of the website I want to make, but the text I have used in the mock-up looks different when viewed in Firefox. The text is Arial font, size 18pt and regular weight, and I have implemented this into HTML code, but it looks different.

Is there a way to make the font look the same in HTML as it does in Photoshop?

Thanks in advance :)

Answer 1

The short answer is "no". Photoshop has a lot more font functionality than a web browser. It applies all kinds of smoothing algorithms, and you can control kerning, tracking and spacing much better.

Each browser and OS has a distinct rendering engine as well, so even if you could get it the same in one browser/OS combination, it would look different in another.

However, check out all the CSS properties for text to see if you can get something you're able to live with. If not, your best bet is to just make an image out of your text and add it to your page with good "alt" text and such.

Answer 2

I'm not sure what OS you're on, but Windows and Macintosh have different font systems.

This post by Joel Spolsky points out that the font rendering is based on philosophical differences.

Is that what you're seeing? Please post images so we can see what you're talking about.

Answer 3

Fonts are something you simply can't get right on the web. If you absolutely have to control the look of fonts, then you have to use images (and get beaten for it, rightly so). It's simply not possible to achieve pixel-perfect text display in HTML. This starts with differences in fonts the operating system has and ends with differences in browser layout engines.

Answer 4

There are two ways to do it:

1. Take an image of that font and use it in the layout.
2. Use a custom font creation tool like SIFR or FLIR. This is a tricky option b/c you need to own Adobe Flash and you need to have the distribution rights to the font (similar to books, music, etc.).

Basically, if you want to have it look exactly the same and still stay standards compliant, this is really almost impossible.

If you're looking for how to turn Adobe Photoshop mockups into HTML documents, you should check out the screencast series on CSS-tricks.com, run by Chris Coyier, a very talented designer (no it's not me :) ).

Answer 5

Another thing that you will have to understand is that it is the people with the Web browsers that ultimately control how your page will look. So no matter how much fiddling you do to get a website the way you want to see it, it will view differently on someone else's computer

Answer 6

Thanks for all the responses.

Question answered!

Answer 7

If you need perfect, crystal clear font matches you can use flash... but that comes with a whole boatload of downsides.