How to make Photoshop text match HTML text

[drooh]

This has been a long ongoing problem that I have never figured out.

Ill get a design in PSD format, and when I go to code it into a website template. Its difficult to get the text to match exactly. It seems Photoshop wants to use pt sizes and on my sites we use px size.

Any ideas or suggestions?

[rocknbil]

You should be able to set your preferences to px in PS

Edit -> Preferences -> Units & Rulers -> Type (select pixels)

It also depends on the resolution of the file. If you work with 72 DPI files, it should be pretty close, at least, if you're using web-safe fonts.

It's really irrelevant - it will never render "exactly" the same. The anti - aliasing settings and rendering engine in Photoshop is independent of the operating system's type rendering in various browsers, so it will always be "just different enough" to make a visible mismatch. Pick one or the other and go with it. :-)

[birdbrain]

Hi there drooh,

this link will, hopefully ;), give you the required technique....

• point to pixel conversion information [emdpi.com]

coothead

[tangor]

rocknbil has the best answer as to setting PS to pixel measure. I tend to design from the other direction, website first (in code) then adding any imaging necessary to finish. In my experience it is the underlying code that makes the site work, not the pretty design. :)

[xword_5601]

Send it over to ImageReady, which I believe comes with every Photoshop installation. At the bottom of the menu is a quick jump button. From there you can save images straight into html files if I recall correctly. I'm not on a computer with it to check but I remember doing it.

[rocknbil]

The question is not how to get images into HTML, it's how to match text rendered by Photoshop with text rendered by HTML.

[lucy24]

You can replace the word "Photoshop" with absolutely anything-- up to and including "my computer"-- and the answer will always be "Can't be done". Your Palatino is not my Palatino; your screen resolution is not my screen resolution; your browser defaults are not my browser defaults ... et cetera.