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 :)

Solution 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.

Solution 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.