I have a .psd file and in there is a text with "Arial 17pt regular strong" when I wrote the same text on my html file and using CSS made the font of this text "Arial 17px regular" it showed a bigger font and doesn't look the same as it look in photoshop, it is bigger and looks different.

What should I do to make the same font appear the same as in photoshop?

2 answers


pt and px are different measurements. Kind of like inches to centimeters. You can use pt instead of px in your CSS to make it a closer match.

In your Photoshop document, make sure all your text anti-aliasing is set to "none" and not "smooth" to give it a closer match to what it will look like in HTML.

Text on the web is a highly dynamic thing. Some users with visual impairments may want to enlarge your text a lot to make it easier to read so make sure your text can scale and will be readable at any size.

Answered almost 9 years ago by Artistic Abode
  • anti alias setting 'None' in photoshop is not a close match anymore IMO, as more and more folks have cleartype turned on in Windows and Macs have smooth fonts by default. It really depends. I find you have to experiment with smooth / strong / crisp / sharp to get the best fit. Moin Zaman almost 9 years ago

Fonts are always difficult on the web. Different computers may have different variants of a font, or lack them entirely. Photoshop renders fonts differently from browsers. Different browsers render the same font differently. And what about mobile? Etc.

Ultimately, since web design is so cross-platform, there is a great deal of trial and error.

You might want to check if your text is being sized by multiple different css selectors, and if so figure out which is taking precedence... For example is an id selector overriding a more general paragraph tag or something? For troubleshooting this I reccomend using a developer tool like Firefox's Firebug extension or Chrome's built in tools. These will tell you exactly what is being rendered and what rules are causing that. Then you can change your code so the desired css takes precedence, with !important or by being more specific in your selector.

Answered almost 9 years ago by ben author