Project 4 Step 2 Part 2

In this video, we’ll start resizing the type to fit the webpage.

The column width here was automatically set by InDesign when we created the document. What we want to do now is determine a good column width for the type we are using. One way we can do that is start at the beginning or where the defaults would be on this document. To do this, first make sure that nothing is selected. Then, double click on ‘Body Copy.’ Under ‘Basic Character Formats,’ we’ll set the size to 16. The reason we’re changing it to 16 pixels is that 16 is the default size in HTML. If you did not specify any font size, HTML would automatically set the font size to 16. That’s where we’ll start. This doesn’t mean that you can’t make your type larger or smaller than that, but this is a good place to start. We can see that our leading is also at the default value, but we’ll make adjustments to that in a moment. Click ‘OK.’

Now, in our document we have a really long line width. How do we know how wide to make a line of type? I’m going to come into the typography here, and in between a couple of paragraphs, I’m going to add a new paragraph. In this paragraph, I’m going to type two and a half alphabets: I’ll type the alphabet, then I’ll type it again, then I’ll type it a third time, but I’ll stop at “m.” That is a good line width for the type you are using. There are a few different options to adjust the line width. The first option is to make the column width narrower. We could do that by just dragging the right margin over to meet the end of our text. That’s one option. The other option is to increase the size of the text until the “m” of the third alphabet reaches the column width. You can experiment with that if you want. I’m going to adjust the column width.

I drag the right margin to meet the end of the alphabet line. Then, I will drag the entire text box back toward the right until it is centered. Then double click the hand tool so we can see the entire document. Note here that we are not creating a functioning website; we are just creating a document that shows all the possible styles that can be used on a website.

We want to save this now with a specific name: “art230-p4_template-1” That “1” stands for the first version of the document. We’ll then click ’Save.’