Intro to Publication Layout

1. Intro to Publication Layout Design for Journalists Summer 2013

2. Publication layout • Publication layout refers to the arrangement of elements on a page. • Publication layout concepts apply to newspapers, magazines and Web sites. • Publication layout concepts are also increasingly being applied to broadcast news, too.

3. Modular design • Most newspapers and websites, and many magazines, are designed using what’s referred to as “modular design.” • Modular design refers to the act of enclosing all stories into rectangles and snapping the pieces together into a grid.

4. Modular newspaper design

5. Modular website design

6. Modular magazine design

7. Modular broadcast TV design

8. Layout elements: the basic four • Headlines • Images • Body copy • Cutlines/captions

9. Headlines: rules of thumb • Headlines get smaller as you move down the page. • Smaller stories get smaller headlines. • 5-10 words is optimum for most headlines • Don’t butt headlines. If you must, run the left headline several counts short, then vary the sizes and the number of lines. • Write headlines in the present tense.

10. Headline styles: banner headlines • The basic headline is the banner, which runs across the top of the story. • The basic headline style is positioned flush left • Most US newspapers use “downstyle” headlines (first word capitalized, the rest lowercase)

11. Headline styles: banner headlines • Some Newspapers Prefer Upstyle, Where Each Word Begins with a Capital Except for Prepositions, Conjunctions and Articles

12. Headline styles: decks • Each line in a headline is referred to as a “deck” • Headlines may have more than one deck

13. Headline styles: kickers • A “kicker” is a short phrase set above the headline. • Adds more information & serves as an introduction for the headline. • Often introduces a column, or recurring section. • Usually set in a smaller type, or different font/weight than the headline.

14. Headline styles: hammers • Hammers use a big, bold phrase to catch your eye. • Hammers are followed by lengthier decks below. • Typically used for “special reports,” in newspapers, or features in a magazine.

15. Headline styles: slammers • Slammers are two-part headlines. • They have a boldface word or phrase leads into contrasting main headline.

16. Headline styles: tripods • Tripods are three-part headlines. • A boldface word or phrase precedes two smaller decks.

17. Headline styles: sidesaddle • Sidesaddles are headlines that are placed beside the story instead of above the story. • You can also use a sidesaddle subhead, such as in the bottom example.

18. Headline styles: raw wrap • Multi-line headline that does not cover all columns of a story.

19. Images: Rules of thumb • An image’s direction should face the text it accompanies. • Stories always need a dominant piece of art. • If stuck choosing one big photo or two small photos, always stick with one big photo. • Images should be a variety of shapes and sizes.

20. Images: direction, dominance, variety

21. Images: direction, dominance, variety

22. Images: direction, dominance, variety

23. Body copy: rules of thumb • Use common fonts (serif for print, sans-serif for web). • Pick an appropriate font size for your platform. • Use only between 50 and 60 characters per line.

24. Body copy: common fonts • Georgia (print) • Palatino Linotype (print) • Book Antiqua (print) • Times New Roman (print) • Lucida Sans Unicode (web) • Lucida Grande (web) • Arial (web) • Verdana (web)

25. Body copy: font size • On average, websites’ body copy is between 12 and 14-point. • On average, print publications’ body copy is between 8 and 10-point.

26. Body copy: line length • Lines should have a maximum of between 50 and 60 characters. • Break your stories into columns according to this character count.

27. Cutlines: rules of thumb • One cutline per photo. • When cutlines run below photos, square them off as evenly as possible on both sides of the photo. • Cutlines should not extend beyond the edge of the photo. • Avoid “widows” (only one-two words of text on second/third line) in any cutline more than one line deep.

28. Cutlines: positions • Below: Cutline text goes below the photo. • Beside: Cutline goes “sidesaddle” to the right or left of the photo. • Between: Two photos share a common cutline.

29. Cutlines: positions • Cutlines below the photo extend the width of the photo. • They should never extend beyond the photo. • Cutlines below very wide photos may be split into two columns.

30. Cutlines: positions • Cutlines beside the photo should be flush left or right, depending on their orientation. • Try to put sidesaddle cutlines on the edge of the page so there’s no butting text.

31. Cutlines: positions • A cutline between two photos serves as the caption for both. • A cutline between two photos is often justified. • A cutline between two photos is usually the same height as the photos.