Typophile

Font pixel sizes on Photoshop vs Web is very different?

aa1010 votes

I have had the developer tell me that there is a difference in pixel sizes for fonts.

I used DIN as primary font and then secondary to use Tahoma.

However on Tahoma, the font sizes are huge compared to DIN.
They looked fine when I mocked them up on Photoshop, its not the case on the web.

Is this true? I find it hard to believe and also for future projects how do I test this properly before showing to the client? I have had so many problems with the size difference. I also think the developer may be trying to worm his way out of his past mistakes but I need some confirmation first from other developers on this board if any.

Basically the Tahoma font looks like 20pt size compared to a 14pt size for DIN. If anyone can answer me as to why I can learn something important for today :D

Thanks in advance!!!

Your question is not clear.

The size of a pixel is determined by the computer screen on which something is viewed. If you use Photoshop or another paint program, if a letter is 60 pixels high on your computer, it will be 60 pixels high on any machine on which the image is viewed, whether because they downloaded the image, or because it appears in a web page.

When including text on a web page, one can specify that the text is to be larger or smaller than normal by specifying 'font size="-1"' or something like that. These sizes depend on the user's settings, and don't allow fine control.

However, when using CSS, you can also specify point sizes for text.

And, when using Photoshop, normally you don't specify the size of text in pixels, it is also specified in points.

Here, you can run into trouble.

Back in the days of Microsoft Windows 3.1, and Macintosh computers that used 68000-family processors:

On a Windows machine, 72 pixels were normally treated as "one inch" for translating the point size of type into the screen size of a typeface. That could actually have been any size, because a PC-compatible computer had no way of knowing how big your screen was. You could choose to use "large fonts", and to change that relationship so that the computer would treat 96 pixels as one inch.

On a Macintosh, the size of the screen was known to the computer, and it determined how many pixels the screen had. The standard resolution of the Macintosh platform was 60 pixels per inch.

Now, the standard resolutions is much greater on the Macintosh than it had formerly been. Changes on the Windows platform have not been so large, but usually the choice is between 96 pixels per inch and 144 pixels per inch.

So, if your computer is a Macintosh, and your web page is being viewed by someone using Windows...

if your CSS script says a certain type of text is "14pt", the height of that in pixels will be determined by the number of pixels per inch (72 points) on the user's Windows computer...

if you used 14 point text when preparing an image, the height of that text in pixels will be determined by the number of pixels per inch on your Macintosh.

This could be what the person was mentioning.

The CSS specs assume the world to be 96 ppi.

Ah, so I was wrong about that part of it.

In that case, setting screen resolution to be an effective 96 ppi on the computer running Photoshop should solve the problem, if the problem was what I thought it was.

Of course, in that case, a browser obeying the CSS specs is no longer screen resolution independent, so it could now be in violation of the interface specifications of the manufacturer of the operating system. Since Mozilla Firefox is something you download for free, I'm not sure if the people at Mozilla care about the right to put the "Designed for Windows 7" logo on their nonexistent boxes... but this must cause feelings of angst among someone involved with Internet Explorer.

Never use 'font size="-1"' in the HTML tags, define this in the CSS:

p {
font-family: Tahoma, sans-serif;
font-size: 14px;
}

This will style all the p tags in your HTML with 14px Tahoma, and where Tahoma is not present (for example on the iPad or on Android systems) it will use the standard sans-serif in those systems instead (and most are not as narrow as Tahoma, and might not share it’s x-height — 14px might look bigger or smaller in a fallback font). The font size can be specified in px’s (pixels), em’s or percents, the former being the most static as it only relates to the ppi of the screen. Depending on rendering engine in the end users OS and web browser and the design and hinting of the font, letters may appear with slight differences in width and height.

Mocking up in Photoshop is well and good, but a serious web designer should have some understanding of how the web works.

thanks for all your responses.

i had the idea that a 14pt or px Tahoma on my photoshop layout is NOT to have a big difference where it comes out something like 24pt or px on the web. The site is using CSS.

I am not too versed in programming hence I am asking on this forum. I know how to design visually good work but I need to have a developer who can assist me in coding. I would assume that a developer who is working on this project would tell me in advance the font sizing issues based on the designs I provided to him rather than have this shown to me when coded up. He said that there are huge differences in sizes from a photoshop file to the web but couldn't explain why. Wouldn't he know this in advance and adjust to my layout accordingly?'

I am also asking because I am going through some issues with him and I might need to go to another developer for help.

Short incorrect awsers, that i can understand. Long-wined ones, are such a marvelous mystery.

Windows defaults to 96 pixels per something and most users never change that. Mac is 72 per something. This supposedly due to windows users sitting farther from the screen than mac users, (really!) Besides that, fonts are sized to be larger or smaller on the em for a variety of reasons. Assuming the size specified in CSS is the same, both in value and in the units used to describe size for two fonts, Photoshop should give an accurate preview of what proportions two fonts have to each other on or off the web.

Don't blame your web designer though. This issue is so problematic, along side line spacing, letterspacing and other variations windows browsers add to the stew, that most web design with live type is doomed to loose specification, and thus loose design if it can be made to work at all. This is why publications who depend on tight consistent design the user cannot undo, only really appear on the iPad.

Captured from web.archive.org on 28 Jan 2018. view this capture