1 / 36

Typography: Old Design Know the Rules Before You Break the Rules

Learn the fundamentals of type hierarchy, bullet points, and emphasis to create effective flyers, newsletters, and print layouts. Avoid common design mistakes with alignment, repetition, and simplicity. Understand paragraph formatting, indents, and avoiding widows, orphans, and rivers. Properly use hyphens and dashes for clear and professional typography.

petersjames
Download Presentation

Typography: Old Design Know the Rules Before You Break the Rules

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. T Y P E L A Y O U T

  2. Old Design Know the rules before you break the rules. W I S D O M ________________________________________

  3. type hierarchy SubheadingA type hierarchy is a system for organizing type that establishes an order of importance that allows the reader to easily read, scan, and navigate content to find what they’re looking for. Here we see the most important type is the largest and heaviest—the headline. The subheadings are much smaller and simpler, but still larger and bolder than the body copy, which is the smallest type on the page. Body copy also needs to be in a simple font (not script or decorative) so that it can be easily read.. BulletsBullets provide emphasis and organization of lists. lUse bullets or numbers to offset important points.lBullets should be solid and bold.lDo not use asterix, complex wingdings or symbols.lUse small space between your bullet and text. Emphasis Useitalics or bold for emphasis, not all capital letters.

  4. Flyers IDEAS

  5. BE BIG, BE BOLDCUT THROUGHTHE CLUTTER FOCAL POINTS:Dominant visual, big headline(start by making the visual and headlineas big as possible and then size down from there).CONTRAST: Contrast your type (small body copy)If all type is large, nothing can grab attention. ALIGNMENT:Chose one kind of alignment (hopefully not centered)Don’t mix center alignment with left or right.REPETITION:Repeat type in key places (e.g., subheadings)for consistency. SIMPLICITY Usually no more than 2 or 3 different fonts on a page.

  6. Alternatives to Centering Type Justify and fit.

  7. Align right or leftagainst a line.

  8. Divide the space with 2 columns of type and a line down the middle.

  9. Align left alignmentagainst right alignment.

  10. Divide the space with a column of type and a corresponding icon.

  11. Create small columns.

  12. Create a rectangle for a small amount of centered text (the edges reduce the “ragginess”)

  13. Sometimes it’s okay to center short lines of text when you have a strong centered image, but text should not look “raggy.” In this image, justified type is the largest (smaller type is centered).

  14. Newsletters IDEAS

  15. Dominant visual, big headline, type columns

  16. Use color bars and boxes.

  17. Integrate visuals with text.

  18. Type Layout Guidelines For Print

  19. Use columns when laying out large amounts of type.

  20. Thin lines can be used between columns if needed. Need more gutter spaceif you add lines.

  21. Magazine paragraphs can be indented or not indented.Newspaper paragraphs are indented. If you don’t indent paragraphs, add space between paragraphs.

  22. Even if you do indent . . .

  23. Indenting in InDesign • Never create an indent by tabbing or typing five spaces. Default tabbing usually creates indents that are way too large, and typing five spaces will result in inconsistent indents. • Instead, use the Paragraph or Control Panel and set the “First Line Left Indent.” • According to Peachpit Press, the size of your indent “should depend on your design and on the typeface you’re working with. Typically, the larger the x-height of the font, the larger first-line indent you should use. Book designers often use a one- or two-em indent, so in an 11-point type, the indent might be 11 or 22 points.” More About Paragraph Formatting and IndentsMore About Setting Indents in Adobe InDesign

  24. Remember: • Use bold or italics.Do not use underline (in the olden days, underlining was a way to let the typesetter know the word should be set in italics). • Use one space after punctuation (not two after a period any longer).

  25. What is a widow? • What is an orphan?

  26. Avoid Widows and Orphans • A widow occurs when the last line of a paragraph is too short (less than half the line across).An orphan occurs when fewer than two lines appear at the top of a column or the bottom of a column.

  27. Avoid Widows and Orphans • A widow occurs when the last line of a paragraph is too short (less than half the line across). • An orphan occurs when fewer than two lines appear at the top of a column or the bottom of a column.

  28. What are “rivers?”

  29. Avoid “Justifying” Type. Align left. Don’t justify type like this, because it creates “rivers” of white space that flow through the paragraph, and you have to tweak the text a lot to fix it.

  30. What are the following used for? • Hyphen • Em dash • En dash

  31. Hyphens and Dashes 1) Turn OFF automatic hyphenation in page layout (so you don’t have too many hyphens up and down a page dividing words at ends of lines) InDesign: Go to Type > Paragraph Styles).2) Use hyphens and dashes properly:Hyphen (-) En Dash (–) Em Dash (—) lHyphen (-) is used to join compound words (e.g., hand-painted statue).Use the hyphen key to create a hyphen.lEn Dash (–) is used between dates and times (e.g., 9:00–10:00)InDesign: Option + Hyphen or go to Type > Insert Special Character > Hyphens & Dashes > En Dash. MS Word: Insert > Symbols > More Symbols > Special Characters > Endash WebCode: – lEm Dash (—) is used to emphasize a phrase of a sentence (e.g., The dog was small—but fierce.)InDesign:Option+Shift+Hyphen or Type > Insert Special Character > Hyphens & Dashes > Em Dash. MS Word: Two hyphens will automatically turn into an emdash. Web Code: — but two hyphens are acceptable on the Web (not in print).

  32. Type Guidelines For Web

  33. LOGO Logo upper left (84%) or upper center (16%).Never at bottom of a scrolled page or on the right. NAVIGATION BARAcross the top and/or vertical left contains menu text, which remains constant on every page. Font is simple, legible, not too large or small BANNERThe graphic that spans across the top and unifies the page is a banner. It usually has images of people (most engaging) +usually contains headline. COLUMNS OF TEXT- Type hierarchy- Short teaser text on home page- goal is to entice people to click into the site

  34. TYPE ON INTERIOR PAGE Long text is hard to read sprawling across a web page, so type is divided into columns with short width and length. • 2-3 columns divide page • Type hierarchy consistent • Paragraphs are short. • Create space between paragraphs • No indentation of paragraphs. • In this site, main menu is down the left side, creating a left column T P

  35. Questions?

More Related