fbpx

Episode #65: 23 Pro Page Layout Tips for Print and the Web

Professional page layout tips for print, digital document and the web.

I share 23 pro page layout tips for print, digital documents and the web. Find out how to polish your page layout skills, so you have more professional-looking and reader-friendly pages. You’ll also discover some accessibility and usability tips that can give you an edge over other designers and help your clients reach more people. Plus, I’ve also got a bunch of free resources for you.


Show Notes


They say the devil is in the details, and the details are part of what can make a good designer even better. These tips apply to print but also to digital documents and the web.

Composition Tips

Let’s start out with some that are related to composition.

Tip #1: Use a grid

Print and Digital Documents

In page layout software, you can set up a grid on the master or regular pages.

In InDesign, you do this by going to Layout > Margins and Columns or Layout > Create Guides and set up guides for, say, three rows and three columns. It could be anything. A colleague of mine likes to use 12.

In Affinity Publisher, you do this under View > Guides Manager.

For either option, though, you’ll want to set a gutter measurement so that you have space between the sections of the grid.

For instance, you could set up a grid in three columns with a quarter-inch gutter. Body copy could run the width of two columns, leaving the outer column for a pull quote or sidebar. Images could be either one, two or three columns in width and one- or two-thirds of the page in height, depending on how your grid is set up.

This will ensure all images or sidebars, etc. will be the same width (and height, if desired), resulting in a clean layout that is pleasing to the eye.

It also makes it easy for layout because you never have to go back and get the measurement of an element from page to page. You just place and drag its frame edges to meet the guides.

Web

On the web, most themes use grids already as part of their setup.

Tip #2: Use sufficient inner and outer margins

Ensuring enough space in the inner and outer margins makes text easier to read and really makes something text heavy not feel so overwhelming. This applies to page margins and column margins.

Print and Digital Documents

Now, for print, if you have a publication that will be perfect bound and it’s several hundred pages in length, you will need larger inner margins, called the “gutter,” to accommodate for that. Otherwise, you run the risk of text winding up inside the gutter, which means someone won’t be able to read it unless they forcibly hold the book open.

If it’s a publication that will lay flat such as one that’s spiral bound and of any length in terms of page count, you need a larger inner margin to accommodate for where the spiral or wire binding will be. Otherwise, you risk text ending up where those holes will be. Not only that, but if you have content centered on the page and don’t take that space into account, then the content will be too far toward the gutter.

Web

On the web, most themes have already accommodated for these margins.

Tip #3: Balance page elements

Balance out where you place text, images, tables and sidebars and ensure there is a main focal point, which can be achieved through scale and color.

Print and Digital Documents

For print and digital documents, it’s good to balance out the lefthand and righthand pages, called the spreads. You can balance out the content by not having all photos, charts or tables all on one page and all the text on the other, for example.

Maybe you place a pull quote on a lefthand page and an image on a righthand page.

Instead of running a table at the bottom of the lefthand page to the top of the righthand page, leaving it where it falls in the text order, put it inside its own frame and have it all together on one page, or run it across the bottom half of the spread.

Look at your document from a more macro level too. By that, I mean view your document in spreads as you work to see how the final product will look to the reader.

Web

On the web, an example of this would be to not place a huge photo next to a small amount of text, unless the text size has been increased to take up more room. Otherwise, the photo would be overpowering.

Tip #4: Face images into the page

Print and Digital Documents

Typically, on a cover, you want any images of people to face toward the opening of the book, like you’re leading the reader into the book.

On the inside spreads, you usually want people to be facing inward, toward the inner margins.

Web

On a web page, it’s a bit different. For any photos you have that are not full width and have text wrapping around them, it’s usually best to place the photo so that the person or people are facing toward the center of the page. For example, if you have a photo on the left with a person in it and text to the right of it, the person should be looking toward the right, toward the text and vice versa.

So if you have text on the left and a photo on the right, you want them to be facing toward the text.

Sometimes to accomplish this, you have to flip the photo. In some cases, that’s perfectly fine. But in other cases, such as if there’s text in the image somewhere, you don’t want it to read backwards.

Tip #5: Use sufficient space between sections

Having enough space between sections is important, so that the reader can tell when one ends and another begins.

Print and Digital Documents

That means adding enough “space before” on headings in your page layout program.

Web

Now, on the web, you want to have sufficient space between paragraphs as well. Typically, you want to have that be the height of a line to a line and a half after a paragraph. This is something that is important for accessibility. You would do this by adding margin in your CSS.

So you would have space after paragraphs and space before headings.

Tip #6: Add space between images and text

I sometimes see pages where body text is almost right up against a photo with a caption, making it hard to make out where the body text ends and the caption begins.

Give your layout breathing room and add space between images and captions and between body text and images.

Print and Digital Documents

In page layout software, this is called “text wrap.”

Web

On the web, this would involve adding margin-top, -left, -bottom or -right, or it might involve padding, depending on how the content is set up.

Tip #7: Use negative space

When you don’t use enough negative space, also called “white space,” the content can feel overwhelming. Clients sometimes request filling up pages with content, but the more text that’s crammed onto the page, the less likely someone is going to want to read it.

But negative space can also be used strategically to draw attention to something on a page.

Typography Tips

Let’s get into some practices that pertain to typography. Now, I know from having a foreign language degree that some of these are used the same in other languages, but some are not. I am only talking about these from a U.S. English standpoint.

Tip #8: Use correct typographic symbols

Typographic symbols convey certain meanings, so it’s important to get them right. These are my pet peeve.

I sometimes see the wrong type of quotation marks being used. There are straight quotes, which are really foot and inch marks, and then they are curly quotes, also called typographer’s quotes.

These should be your default settings, unless you type foot and inch marks more often than you do quotation marks. In your page layout program, go to your preferences and look for “Typographer’s quotes” and make sure that’s checked.

I often see hyphens used instead of en or em dashes, but they all serve different purposes.

In short, hyphens are for hyphenating words and are used in phone numbers.

En dashes, a bit longer than a hyphen, are used for numerical ranges. There are other uses but that’s the main one.

Em dashes—the longest of the three—are used for a mid-sentence pause.

Using them properly makes the content easier to understand.

I also sometimes see three periods in succession—or a period, space, period, space, period space—being used instead of an ellipsis, which is used to show that part of a sentence, such as in a quote, was omitted. If you use three periods instead, one or two of them may run over to the next line, and that will look sloppy.

Now, if you aren’t familiar with these symbols and want more information, I highly recommend checking out episode 31, Touch Up Typographic Typos and downloading my free Typography Cheat Sheet to help you out. It’s got all the keyboard shortcuts as well.

Tip #9: Remove extraneous spaces

Double spaces after a period should be removed. Adding two spaces after a period originated in the days of the typewriter. I know. I remember typing them on a typewriter.

Modern typefaces, other than monospaced ones, already accommodate for the space after a period, making it unnecessary practice to add two.

You might encounter copy that has been indented with spaces instead of tabs. If the text does need to be indented, do so with a paragraph style in your page layout software. If it’s on a website, use CSS to indent it instead.

This gives you cleaner copy, which is beneficial for two reasons:

  1. It’s more amenable to assistive devices or software that may be used by someone with a disability.
  2. It’s better for any content that may become an epub file.

Tip #10: Don’t use too many typefaces

Like with candy, you can have too many typefaces. Using too many leaves the layout looking unprofessional and very distracting to the reader.

A good rule of thumb is two, maybe three, for a project. Usually, this is a serif typeface, a sans serif and potentially a script or handwritten one that you use sparingly.

Print

For print, typically, it’s best to use serif for body text, especially if it’s long in length. But you can get away with sans serif too in some cases. Using serif or a more decorative typeface for headings provides a nice contrast. I’ve often used serif for body text and sans serif for headings and for sidebars and any tables, charts or infographics.

Web and Digital Documents

For the web or a document being read on a screen, it’s typical to use sans serif for body text. You could use sans serif, serif or a decorative typeface for headings.

When selecting a typeface, consider the audience. For instance, research shows that individuals with dyslexia find sans serif typefaces such as Arial and Helvetica easier to read than serif fonts.

Tip #11: Use proper sizes for text

The size of the text is important and may depend on the audience. For example, for an audience of senior citizens, you’ll want to increase the size of the text.

If you’re using a script, handwritten or other decorative typeface, be sure to use it at a size large enough for it to be legible. These typefaces don’t usually work well at smaller sizes, so they are best reserved for use in headings.

Web

Now, if you’re specifying text sizes for the web, you should avoid setting the font-size as an absolute measurement such as pixels. This is vital for accessibility. Instead, stick with rems, ems or percentages, which are relative units. Doing that makes it easier for someone using an assistive device or software to increase or decrease the font size as needed.

Tip #12: Use fonts that can be embedded

Print and Digital Documents

This is more so an issue with print and digital documents than the web.

I’ve seen designers post in groups and forums asking what to do after they tried to export their file for print or the web, and they got an alert saying that   the fonts could not be embedded.

Well, you could get around this by converting all the text to outlines. Yes, you could do that, but should you? No. You might actually be violating a licensing agreement, and that will render the text uneditable.

From the start, make sure you’re using typefaces that are allowed to be embedded. A lot of free fonts do not allow this. So always check the licensing. And if you need free fonts, download Google Fonts. Most, if not all of them, are free to use for any purpose.

Speaking of Google Fonts, when you use free, OpenSource fonts in your design work, it makes it easier to match them elsewhere, which is good for branding. That means the client can also download those fonts and can use them for the documents they produce. Those same fonts can be used on their website too. Everything is cohesive.

Of course, you and the client could both purchase typefaces, but not all clients are willing to do that.

Tip #13: Fully justify text only with hyphenation

Print and Digital Documents

In print, fully justified text is harder to read than flush left rag right, unless you turn on hyphenation. Otherwise, you’ll get gaps of varying widths between words. These gaps are sometimes larger than the spacing between lines, which makes it harder to read and more difficult for your eye to track from the end of a line of text to the beginning of the next line of text.

Web

On the web though, you want to avoid hyphenation and fully justified text, especially for long blocks of text. This is good practice for accessibility and overall usability.

Tip #14: Use sufficient leading

“Leading” is the term used for line spacing in print. “Line-height” is the term for line spacing for the web, in CSS.

When there is too much or too little line spacing, it makes the text harder to read.

Longer line lengths require more line spacing than shorter lines because it’s more work for your eye to go from the end of a line to the start of the next one.

A good rule of thumb (especially important for accessibility purposes) is to use about a line and a half worth of space, but this might be too little or too much depending on the typeface. You definitely want to make sure that the second line of text in a heading is closer to its first line rather than to the first line of text in the paragraph after it.

Also, sans serif typefaces usually require more leading than serif typefaces.

Tip #15: Avoid widows and orphans

Print and Digital Documents

This tip pertains to print and digital documents.

Widows and orphans are short lines of text, a word or word fragment that appear at the end of a paragraph that ends up by themselves at the top of the next column or page or ends up by itself at the bottom of a column or page continuing onto the next column or page.

In InDesign, you can easily prevent most instances by going to the paragraph style’s Keep options and setting all your headings to Keep Lines Together, All Lines in Paragraph and Keep with Next 2 or 3 lines.

So that will keep all of your headings together. They won’t split between pages or columns and will make sure that those headings also stick with the next 2 or lines of body text.

For body text, you usually want this to be set to Keep Lines Together, At Start/End of Paragraph 2 and 2, and not Keep with Next Lines.

What that means is that you’re keeping at least two lines together, or whatever you set. So you could have the 2 and the 2 refer to the start and end of the paragraph text. Not keeping with the next lines means it’s not going to keep with whatever is after that.

Now, if you want all of your paragraph text to never break across pages, then what you would do is set to All Lines in Paragraph.

You can also set hyphenation options to not break across columns and not hyphenate the last word in a paragraph.

If you set these with no documents open, then these will always be in your styles.

There are ways you can look for any remaining cases of these and fix them with GREP in InDesign, but for single words on a line by themselves, I just use a “no break” character style, which you can do in InDesign or Affinity Publisher. All that entails is checking off “no break” inside the character style. I then apply that to the space before that word along with the word itself.

In Affinity Publisher, you can do this with the paragraph styles’ Flow options and adjust the hyphenation options.

You could also fix this with tracking, but I don’t recommend going beyond -15 or -20. Otherwise, the text gets scrunched, is hard to read, and it looks bad.

Tip #16: Don’t format body text with a heading

I see this a lot on the web and I see it a lot in InDesign files I remediate for clients and other designers and other creative firms—for accessibility purposes.

Don’t style body text with a heading just because you want it to look that way. Instead, style it with a custom style.

Otherwise, what happens is the hierarchy of the page gets upset, and that affects search engine optimization and it’s really bad for accessibility too. That means that that page might end up in search results where it shouldn’t, which means people click through to the page and then leave, or it could mean that someone searching online doesn’t encounter that page at all when they should have.

With accessibility, what happens is that anyone using an assistive device or software can’t understand the page content because the page structure is out of whack.

Another potential issue is that it makes a mess when somebody goes to create an epub file.

Like I said earlier, the cleaner the copy and the proper formatting, the better.

Tip #17: Don’t indent the text after a heading

OK, this isn’t awful, but it is a pet peeve of mine: indenting the body text that immediately follows a heading. I always apply a style that doesn’t indent these paragraphs.

Tip #18: Don’t indent paragraphs that have space before them

In general, you either indent paragraphs and use no space between them, or you don’t indent them and you do use a space between them. But not both.

Color Tips

Now I’ve got some color tips for you.

Tip #19: Don’t use too many colors

Like too many typefaces, too many colors can be distracting. I recommend sticking with two main colors, possibly three, with one or two accent colors that get used sparingly. Obviously, you may need more colors than this for data graphics or if you need to signify different sections by color. That’s fine.

Tip #20: Use appropriate colors

I see designers all the time talking about how they choose colors based on their personal taste or what the client just wants. But the colors need to be appropriate for the brand. If a client’s branding uses green and blue, for example, you don’t want to use hot pink and black just because you or the client likes it.

You also want to consider their audience and demographics such as gender and age. For example, fun, bright colors could work for a younger audience, while darker colors could work better for a male audience.

Tip #21: Ensure sufficient contrast

I often see very light-colored text being used on a light background—or it’s counterpart, dark text against a dark background. It’s hard for me to read, and I don’t even have any vision issues.

Don’t make readers work to get information.

If you are following accessibility practices, which results in a better experience for all readers, then in every situation where you have a different color on a different background, you’ll need to consider and check their contrast against each other. This means body text against its background, headings against their background, sidebar text against its background, link and button text against their backgrounds and so forth—whether it’s for a PDF or a web page.

There are lots of free online checkers that do this. I like the WebAIM color contrast checker.

Finishing

When it comes to finishing your document, I’ve got a couple tips for that.

Tip #22: Spell check

There is no excuse for not spell checking. Yes, it might be the client’s responsibility—or their copyeditor’s responsibility, but if you spot errors and alert the client to them, that makes you the hero. You’re helping them save face and look more professional. You’re looking out for them.

I will say though, I do also point them out to clients because once there was a word I didn’t think was correct and it was. I’m Grammar Gratzer over here and have even done professional medical editing in the past, and I would have gotten that wrong, so I do always let them know just in case.

Another reason to let the client know is in case they’re planning to use that same copy elsewhere. Then they can correct it on their end.

Print and Digital Documents

In InDesign and Affinity Publisher, it’s really easy to spell check as you do the layout work. That’s what I do. In InDesign, just check Enable Dynamic Spelling in the Preferences. In Affinity Publisher, go to Text > Spelling > Check Spelling While Typing.

Web

If you’re working on something for the web and you’re using WordPress, it will identify misspelled words too. If you’re not using that and what you’re using doesn’t do this, you can copy and paste the text into another program that does.

Tip #23: Add bookmarks

Digital Documents

This one applies to digital documents only. You can easily add bookmarks by creating a table of contents based on certain styles in your page layout software. If you’re not going to have a table of contents in the document, you can just put it on the pasteboard. Just check the option to Create PDF Bookmarks.

Then, after you export to interactive PDF, open the PDF and go to File > Properties > Initial View and under Navigation Tab, select Bookmarks Panel and Page. You can also add them manually in InDesign or in Affinity Publisher. It’s always best to put them in the page layout software because then if you ever have to update the file and export again, you don’t have to do it all over again in Acrobat.

Conclusion

All of this might seem like a lot of work, but these details get easier with experience and as they become part of your process. You can add them to a task list in your favorite project management software to make sure you check for these things as you do page layout.

Learn More

If you’re a print designer, be sure to check out episode 3, Perfect Your Print Process. I talk about proper file setup, folds, binding, paper, ink, coatings, fonts and images, and how to get print bids.

If you use InDesign for page layout, don’t miss episode 15, where Jason Hoppe of CreativeLive and I discuss our favorite InDesign tips and ways to be much more efficient in InDesign. Even if you use Affinity Publisher, you can do most of these things as well.

If you’re a web designer, you can find out more about accessibility on my website. Go to the Podcast page and then the Accessibility category. I’ve talked about accessibility in several episodes of this podcast, given a webinar for WP Elevation and been interviewed on several podcasts and websites about accessibility. You can access all of that content on that page.

Also download my free Typography Cheat Sheet.

Leave a Reply

Your email address will not be published. Required fields are marked *