InDesign CC 2014 - fontsizes pt vs. px

[claudiakay]

Hi there,

I've got a problem with my InDesign CC 2014. I'm designing something for web and tried to give the measurements to the web developer.

That was when I noticed that something is very wrong with my font sizes. If I take measures, 8pt font is 6px big, 12pt = 9px, 16pt = 12px, 19pt= 14 px, and so on.

That's just not right... I checked all the settings, but they are okay.

Does anyone know everything about this topic?

Thank you very much!

[Steve Werner]

It's a BAD IDEA using InDesign to design for the web. Use Muse (also available with a Creative Cloud subscription) instead. Or Dreamweaver if you're a coder.

InDesign was never created to do web design, sorry.

[claudiakay]

I had no choice. The agency who created the screens in the first place, did that using InDesign. I have to use their screens.

I'm not a coder, I'm an AD. And I've never had that kind of problem before...

[Steve Werner]

It's like trying to using a hammer as a screw driver.

[claudiakay]

that doesn't solve my problem though

[BobLevine]

Using a hammer as a screwdriver IS THE PROBLEM!

[rob day]

that doesn't solve my problem though

InDesign defines points and pixels as the same dimension 1pixel=1point=1/72". So if you type 10px in the font size field it will get converted to 10pt. With CSS the definition for type points is 1/96", so to get the CSS defintion you have to multiply the ID font size by 1.333 (96/72). You can see this in Dreamweaver where 72pt text displays at the same size as 96px text.

[claudiakay]

Thank you very much for the first helpful answer !

The problem is, my 72pt text doesn't display as 96px. It displays 96pt as 72px- so it's just the other way around than it's supposed to...

[rob day]

You have to also consider InDesign's zoom magnifcation definitions if you are comparing the display of pixels with an app like Photoshop or Dreamweaver. InDesign CS6 and later define the 100% zoom view as the document's print dimension and not the 1:1 image to monitor pixel view that Photoshop and Dreamweaver use. See this thread. If you are always designing for screens there are some scripts that will let you set ID to the pre CS6 100%=1:1 magnification:

Re: InDesign CS6 resolution for pixel documents not the same

[rob day]

The problem is....

Hopefully to add some clarity: Photoshop isn't primarily a web application either, but it's very common to use it for wire framing designs. There's no reason why ID can't also be used to wire frame, but you have to consider different units and zoom level definitions when setting up a document.

When I wire frame in InDesign I set my window's zoom percentage so that it equals Photoshop/DreamWeaver's 100% 1:1 view. For my iMac that is 66%, but the percentage is variable depending on your hardware. You can use this javascript and attach a key command to it to get your hardware's 1:1 percentage:

var mres=app.generalPreferences.mainMonitorPpi;
app.activeWindow.zoomPercentage=(72/mres)*100;

If I'm spec'ing type sizes for CSS code, I always use pixels so the translation is equal between ID and CSS code.

Here's a comparison with ID and Dreamweaver, where I have my window zoomed to 1:1 or 66% on my display. Note that the Dreamweaver and InDesign rulers set to pixels match up because I've set ID to the 1:1 view. In this case DreamWeaver's 96 pixel text matches ID's 96 point/pixel size. However, Dreamweaver's CSS point definition is larger than ID's point definition.

So if I wanted the equivalent DreamWeaver size in InDesign I would multiply by 1.33.

Or, if I wanted to spec a CSS equivalent in Dreamweaver that matches the ID display I would multiply by .75, so the CSS equivalent of InDesign 72pt type would be 54pt

[philippanmei]

hello guys just cool down...

Pt and px has a differences....

6pt = 8px

12pt = 16px

30pt = 40px

36 = 48px and so on....

If you want 16px in your web than using it 12pt in indesign or if you want 26px for web than use it 20pt in Indesign..

NB ( PT to PX Formula: size in pixels * (points per inch / pixels per inch) - Example: 16px * (72pt / 96px) = 12pt

And In short

px = pt*4/3

Example : 8px = 6pt * 4/3

72px = 96pt * 4/3

thanks....

[rob day]

Pt and px has a differences....

But the question really isn't about the difference between a point and a pixel within HTML/CSS code, but rather the difference between an InDesign point and an HTML/CSS point

You can see from the code in this capture I've set some DW text as 72 points and 72 pixels and, as you noted, the text displays at different sizes. But that is not the case over in InDesign. In InDesign 1point = 1 pixel, so if I enter 72px in the Font Size field I will get 72point text. If I wanted to match my InDesign 72 point text size in CSS code I could spec it as 72px and get a match as shown below, but if I wanted to get an equivalent size using points in the code I would have to translate—(ID point size) x (72/96).

ID zoom magnification set to 1:1.

[philippanmei]

And the question is not about the comparing the DW and the Indesign too.

Bringing DW is not a good answer in accordance to the question asked. I am explaining the method when we mistakenly done a work for web in Indesign. If we have do a work in Indesign for web for the fonts size the given formula is the way to got it in a correct form. If we are creating in DW what is matter for comparing with the Indesign.

[rob day]

If the question really is: why does a CSS pixel not equal a CSS point?, then you're right and the question isn't about InDesign at all. However the fact that InDesign and HTML don't use the same measurement system for font size could cause confusion and I was assuming that was the basis of the question. Claudia will have the clarify that.

If we are creating in DW what is matter for comparing with the Indesign

My HTML example open in a browser shows the same problem with point definitions. Here's Safari

The source: