Project 4 Step 2 Part 4

We’re going to check that the workbook file is linked properly to our template for the webpage.

In my tabs up top, I have the template document. I’ll go to the template and make some change. I’m going to make my header green. After I’ve made the change, I’ll click ‘Save’ and return to my workbook. There, you will notice a little caution symbol near the header. Double click on it. We see that that updates the website. So, the changes we make in the template, will show up in our workbook. At the end of this assignment, you’ll make your blog post on the first page, and upload the document, and that will be your final for your blog post.

Now, we’ll return to the template page. I’m going to talk about typographical hierarchy. All of this information (in our body text) is tagged and we have a fairly good line width here, but we want to make it so that this type is as easy to read as possible and we want to make it comfortable for the reader. I also want to show you a couple of examples of websites that are designed to be easy to read.

I’ll open my browser and go to zeldman.com. Jeffrey Zeldman is the king of making everything big. He has a headline here – none of you had any problem reading that. Then, he has an introduction paragraph that is larger. And then, his other type is a little bit smaller, but very easy to read. Then, he has his subheads. He is doing this to make a point that the web is to be used for reading, and not other things, so we should make it easy.

There’s another website: A List Apart. On alistapart.com, we have large headlines and small details. We have a large paragraph, and the body copy is comfortable to read. It’s a fairly good size.

Another example is ilovetypography.com. Here, we can see the author and the website. But there’s space and hierarchy between these paragraphs, there’s space around subheads.

Your job now is to go back to your InDesign document and make good typographic hierarchy. Since you have paragraph and character styles done, the easiest way to do that is through paragraph and character styles.

I would begin with your body copy. So, I’m going to select a little chunk of body copy and show you how we’re going to do this. Select ‘Paragraph Styles’ and double click on ‘Body Copy.’ Check the ‘Preview’ box below. I’m going to experiment with making the type larger, so I’ll start increasing the ‘Size.’ Let’s try 18 pt, then, I’m goin to set the ‘Leading’ to 20pt. I set this to 20 on purpose, because I want to set the elements to multiples of 20 or 10 to have an even system/scale.

When we look at this, we’ll notice that the space between the paragraphs isn’t enough now, so I’ll go to the ‘Indents and Spacing’ category on the list and make that ‘Space After’ 10. I’d actually like that to be larger; let’s try 15. Click ‘OK.’ Now we have the body copy scaled.

Once you’ve got your settings in the body copy, you need look at changing the other elements that exist. You can also choose to make the body copy wider here.

Now, adjust this typography so that there is scale and space and good relationship in the article so that this article is easy to read. If you discover that your article runs off the bottom of the page, don’t worry about that. Just think right now about your hierarchy.

Once you’re done, save this and return to your workbook. Double click on the caution icons to add the changes. Then save the document, and you can export as a PDF to publish it on the blog.