InDesign For Web Design Part 1 ·
Feb 09, 2010Welcome to part 1 of designing web sites using Adobe’s InDesign.
*I’ll start with the basics, a new site. *
First things first is setting up InDesign to change it’s default Font from Times New Roman to Arial or whatever other default font you’d like to use. I prefer Arial for the web. Here’s a link to how to do this easily.. So before opening anything I edit the default Paragraph Style settings.
This is the panel:
You can also get to the panel from InDesigns File / Windows Menu as well:
You can also set many of the Default colors for your text here as well under
The first thing you’ll see is the box pop up and ask you to input some fields. Here’s what the modal should look like. See image below. The settings I’ll use for a 1024×768 window. Though I’m making my window a bit taller by setting it to 1024×900 in case I require designs to fall a bit below the fold. Rather than using Pixels, Ems or Picas just enter into the Width 1024pt and InDesign will automatically turn it into Points. Remember Points and Picas are very close, but Picas allow for smaller measurements like 1p1 which equals 13pts. Also you should be aware that there is a 4px difference between Pixels and Points. Points are larger. So be aware that when you are designing and selecting fonts within InDesign that you are NOT working in pixels. If you mention to a web developer that your design used 18 pixel fonts, well you didn’t. You used 18 point fonts.
Before
After
Here’s what the fonts look like. See below. You’ll see how 17px is almost equal to 13pt. So just understand this, primarily because if you have worked in Photoshop in the past for design fonts are handled a bit differently.
— Zeus ::)