13 Replies Latest reply on Dec 8, 2016 5:04 AM by rob day

    InDesign CC 2014 - fontsizes pt vs. px

    claudiakay Level 1

      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!

        • 1. Re: InDesign CC 2014 - fontsizes pt vs. px
          Steve Werner Adobe Community Professional & MVP

          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.

          • 2. Re: InDesign CC 2014 - fontsizes pt vs. px
            claudiakay Level 1

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

            • 3. Re: InDesign CC 2014 - fontsizes pt vs. px
              Steve Werner Adobe Community Professional & MVP

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

              • 4. Re: InDesign CC 2014 - fontsizes pt vs. px
                claudiakay Level 1

                that doesn't solve my problem though

                • 5. Re: InDesign CC 2014 - fontsizes pt vs. px
                  BobLevine MVP & Adobe Community Professional

                  Using a hammer as a screwdriver IS THE PROBLEM!

                  • 6. Re: InDesign CC 2014 - fontsizes pt vs. px
                    rob day Adobe Community Professional & MVP

                    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.

                     

                    Screen Shot 2016-12-06 at 9.36.24 AM.png

                    • 7. Re: InDesign CC 2014 - fontsizes pt vs. px
                      claudiakay Level 1

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

                      • 8. Re: InDesign CC 2014 - fontsizes pt vs. px
                        rob day Adobe Community Professional & MVP

                        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

                        • 9. Re: InDesign CC 2014 - fontsizes pt vs. px
                          rob day Adobe Community Professional & MVP

                          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.

                           

                          Screen Shot 2016-12-06 at 2.04.17 PM.png

                           

                          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

                           

                          Screen Shot 2016-12-06 at 2.34.49 PM.png

                          1 person found this helpful
                          • 10. Re: InDesign CC 2014 - fontsizes pt vs. px
                            philippanmei Level 4

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

                            • 11. Re: InDesign CC 2014 - fontsizes pt vs. px
                              rob day Adobe Community Professional & MVP

                              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.

                               

                              Screen Shot 2016-12-07 at 8.23.10 AM.png

                              • 12. Re: InDesign CC 2014 - fontsizes pt vs. px
                                philippanmei Level 4

                                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.

                                • 13. Re: InDesign CC 2014 - fontsizes pt vs. px
                                  rob day Adobe Community Professional & MVP

                                  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

                                   

                                  Screen Shot 2016-12-08 at 7.27.58 AM.png

                                   

                                  The source:

                                   

                                  Screen Shot 2016-12-08 at 7.36.25 AM.png