Skip to main content
Inspiring
November 29, 2023
Answered

InDesign pixel dimensions do not relate to website sizes

  • November 29, 2023
  • 4 replies
  • 4699 views

I'd like to use InDesign to mockup the visual design of a website.

 

I've created a new a new 'web' document using pixel units. The document is 1920px wide. I'm viewing it at 100% scale and it isn't fitting into my 2560px monitor screen. Weird.

 

I've then added some 21px text and compared it to some 21px font-size text on my website. In InDesign it looks massively bigger. I have to reduce the zoom to about 65% before the text in InDesign looks about the same size as the text on a website.

 

Why isn't InDesign in a 'web' document, at 100% zoom, showing the correct scale? It is as if the pixels are massively bigger

This topic has been closed for replies.
Correct answer rob day

The document is 1920px wide. I'm viewing it at 100% scale and it isn't fitting into my 2560px monitor screen. Weird.

 

InDesign’s 100% view is the actual Print Output size—if you print your 1920px page its output size would be 26.66 inches wide. Photoshop’s 100% view is a 1:1 image to monitor ratio.

 

You can change InDesign’s default 100% View via scripting. See this thread:

 

https://community.adobe.com/t5/indesign-discussions/view-actual-pixel-dimensions-for-example-leaderboard-768x90/m-p/14263283#M552361

 

 

 

4 replies

rob day
Community Expert
rob dayCommunity ExpertCorrect answer
Community Expert
November 29, 2023

The document is 1920px wide. I'm viewing it at 100% scale and it isn't fitting into my 2560px monitor screen. Weird.

 

InDesign’s 100% view is the actual Print Output size—if you print your 1920px page its output size would be 26.66 inches wide. Photoshop’s 100% view is a 1:1 image to monitor ratio.

 

You can change InDesign’s default 100% View via scripting. See this thread:

 

https://community.adobe.com/t5/indesign-discussions/view-actual-pixel-dimensions-for-example-leaderboard-768x90/m-p/14263283#M552361

 

 

 

markeeeeeAuthor
Inspiring
November 29, 2023

Wow, that looks promising. Where / how do I put the Java Script?

Mike Witherell
Community Expert
Community Expert
November 29, 2023
100pk
Inspiring
November 29, 2023

Strange, I havent had this problem. I use Indesign al lot for creating website designs and social media banners.

If you set everything as web-based and use pixels all InDesign items should match your screen.

I know Figma or XD have big advantages over InDesign, but when you are used to a certain ‘Chocolate-application’ it is hard to switch. InDesign has a lot of functionality which is in fact perfect for designing for web. 

markeeeeeAuthor
Inspiring
November 29, 2023

The attached screenshot shows (top) 21px HTML text in a web browser and the same 21px font in an InDesign web document (bottom) at 100% scale.

 

This makes using InDesign kinda tricky to judge the size of things.

 

I agree, I think there are a lot of overlaps between InDesign/DTP and web design, especailly text and object styles and master pages

markeeeeeAuthor
Inspiring
November 29, 2023

markeeeeeAuthor
Inspiring
November 29, 2023

Okay I've made a 'web' doc in Illustrator – same scaling issues. But the same size doc 1920px in Photoshop looks like a 1920px website width.

 

Why is InDesign and Illustrator scaling web documents, so they look much bigger than they actually are?

BobLevine
Community Expert
Community Expert
November 29, 2023

Because they are not truly pixel-based, Photoshop is.

markeeeeeAuthor
Inspiring
November 29, 2023

And it's not possible in the Preferences to change this?

BobLevine
Community Expert
Community Expert
November 29, 2023

As someone who has used InDesign for well over 20 years and designed websites for almost as long, if you want to give a mock up to a web designer, draw it on the back of napkin and be done with it. There is no such thing as a pixel perfect website and you'll never get the feel of a responsive site using a page layout application.

 

I can tell you from experience this will not end well if the client is very picky and they'll be complaining left and right about the fact that the site doesn't look the same on the web as your InDesign mock ups.

 

If you wish to ignore this advice, go right ahead. I'm not going to even bother trying to explain the fake pixel counts in InDesign. 

markeeeeeAuthor
Inspiring
November 29, 2023

I normally design in a code editor, but I'm beginning to wonder if it would be quicker in InDesign and as someone who has used Quark/InDesign for well over 26 years I figure I should be pretty fast. But I've got this problem right from the off...

BobLevine
Community Expert
Community Expert
November 29, 2023

InDesign is not a pixel-based application. What you're seeing is an assumption of a pixel equaling 1/72 of an inch. That might have been appropriate more than a decade ago but it's not anymore.

 

If you really want to do this, and you find this a dealbreaker, find a more appropriate tool for it. Me? I'm a WordPress guy I figure if I have to design a site, I just design the site in WordPress.