Home >Documents >Massimo Vignelli - · PDF file TYPOGRAPHY The art or process of setting and arranging types...

Massimo Vignelli - · PDF file TYPOGRAPHY The art or process of setting and arranging types...

Date post:27-Jan-2021
Category:
View:1 times
Download:0 times
Share this document with a friend
Transcript:
  • I see typography as a discipline to organize information in the most objective way possible.

    Massimo Vignelli

  • WHAT TYPE ARE YOU?

  • http://www.pentagram.com/what-type-are-you/

  • TYPOGRAPHY The art or process of setting and arranging types and printing from them.

    The style and appearance of printed matter.

    A typeface is a set of characters that share the same style.

    The distinction between font and typeface is that a font designates a specific member of a type family such as roman, boldface, or italic type, while typeface designates a consistent visual appearance or style which can be a “family” or related set of fonts.

    FONT

    TYPEFACE

    DEFINITIONS

  • Simple CAP HEIGHT

    BASELINE x HEIGHT decender

    acender

    ANATOMY

  • 72 PTS 72 PTS 72 PTS 72 PTS

    SIZE The most important thing to know in regards to type size is that they all vary from typeface to typeface. Make sure to print out a test copy to see how it reads in print.

  • CLASSIFICATION

    serif classification san serif classification

    slab serif classification

    script classification symbols clas-

    categories that typefaces can be sorted into

  • FAMILY

    hairline Family

    thin italic Family

    light classification

    medium classification

    bold classification

    styles within a typeface

  • TYPEFACES

  • TYPEFACES

    Helvetica ABCDEFGHIJKLMNOPQRSTUVWXYZ

    abcdefghijklmnopqrstuvwxyz

    Gotham ABCDEFGHIJKLMNOPQRSTUVWXYZ

    abcdefghijklmnopqrstuvwxyz

    Futura ABCDEFGHIJKLMNOPQRSTUVWXYZ

    abcdefghijklmnopqrstuvwxyz Univers

    ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz

    Optima ABCDEFGHIJKLMNOPQRSTUVWXYZ

    abcdefghijklmnopqrstuvwxyz

    SANS SERIF

  • TYPEFACES

    Garamond ABCDEFGHIJKLMNOPQRSTUVWXYZ

    abcdefghijklmnopqrstuvwxyz

    Bodoni ABCDEFGHIJKLMNOPQRSTUVWXYZ

    abcdefghijklmnopqrstuvwxyz Times Roman

    ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz

    Century ABCDEFGHIJKLMNOPQRSTUVWXYZ

    abcdefghijklmnopqrstuvwxyz Baskerville

    ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz

    SERIF

  • SELECTION Your type will add a level of professional elegance to your portfolio.

    How are you using the type?

    What are you trying to convey?

    Do you have a large quanity of text?

  • PAIRING Combining typefaces

    SIMPLICITY In most cases one typeface will work for an entire portfolio. At the most use two. More than two typefaces gets complicated and overwhelming.

    CONTRAST If you use two typefaces, make sure there is contrast. If the typefaces are too similar they won’t read well.

    When combining typefaces you may need to adjust the point sizes to make sure the x-heights match.

  • HIERARCHY Proper hierarchy gets the viewer to look where you want them to look in the sequence you want them to look there. It adds organization and clarity and makes your text more efficient.

    Emphasis can be added by using

    Size Weight

    Color

    Style

    Placement

  • ALIGNMENT The choice of alignment for text is a fundamental typographic act. Each mode of alignment carries unique formal qualities, cultural as- sociations, and aesthetic risks.

    Left edge is hard: right edge is soft Flush left text respects the organic flow of language and avoids the uneven spacing that plagues justified type. A bad rag can ruin the relaxed, organic appearance of a flush left column. Designers should strive to create the illusion of a random, natural edge with- ough resorting to excessive hyphen- ation.

    Lines of uneven length on a central axis

    Centered text is formal and classical. It invites the designer to break text for

    sense and create elegant, organic shapes.

    Centering is often used in invitations and titles but generally shouldn’t be

    used for a longer body of text.

    Right edge is hard; left edge is soft Flush right text can be a welcome

    departure from the familiar. Used for captions, side bars, quotes, etc., it can

    suggest affinities among elements. It can also be hard to read & isn’t gener-

    ally used for long bodies of text.

    FLUSH LEFT

    CENTERED

    FLUSH RIGHT

  • Left and right edges are both even

    Justified text makes a clean shape on the page. Its efficient use of space makes it the norm for newspapers and books. Ugly gaps can occur, howev- er, as text is forced into lines of even measure. In long columns of text, these gaps can congregate into riv- ers that are visually distracting. Mak- ing wider columns of text can help and makes the block of text appear more elegant and less “newspaper” feeling. In a portfolio, Justified text is one of the harder alignments to work with and will take a lot of editing to make it ap- pear smooth, beautiful and elegant.

    JUSTIFIED

  • KERNING Kerning is the adjustment of space between two letters. Some letter combinations look awkward without special spacing considerations. Gaps occur around letters whose forms angle outward or frame an open space ( W, Y, V, T )

    In InDesign you find the kerning tools in the type:character window.

    Metric kerning uses the kerning tables that are built into the typeface and generally looks good, although cheap novelty fonts often have little or no built in kerning.

    Optical kerning is executed automatically by the page layout program. It accesses the shapes of all characters and adjusts the spacing wherever needed.

    Some designers apply optical kerning to headlines and metric kerning to text.

  • KERNING

  • TYPE SIZE RELATIONSHIP

    Try to achieve an elegant balance in your type size selection. Con- sider the composion of the text blocks and their graphic impact, just as you consider an image. For your portfolio you probably won’t need more than 2 sizes of type.

    68

    Type Size Relationship

    We have some basic rules for typesetting. Choose the proper size of type in relation to the width of the column: 8 on 9, 9 on 10, 10 on 11 pt for columns up to 70 mm. 12 on 13, 14 on 16 for columns up to 140 mm. 16 on 18, 18 on 20, for larger columns. Naturally every situation may require a different ratio. For display reasons we like to set the type much larger or increase the leading to achieve a particular effect. Basically we stick to no more then two type sizes on a printed page, but there are exceptions. We like to play off small type with larger type - usually twice as big (for instance, 10 pt text and 20 pt headings). I prefer to keep the same size for heads and subheads in a text, and just make them in bold, with a line space above and none below, or two line spaces above and one below according to the context. We love type size consistency in a book, which is also more economical since you can set a style page and stick to it. We try to achieve a typographic composition that expresses intellectual elegance as opposed to blatant vulgarity by using typographic devices: a proper amount of leading for the context, a proper use of roman or italic type, a regular spacing, a tight kerning, using rulers when appropriate (to separate different parts of the message), and a logical use of bold, regular and light type weights. We do not like the use of type as a decorative element, and we are horrified by any type deformation. There are situations, however, as in packaging design where a more flexible attitude could provide better results. But even there, when used, should be with great moderation.

    Lorem ipsum dolor sit amet, in maecenas pharetra gravida ullamcorper neque. Sed hendrerit proin diam duis eu, cursus odio placerat ultrices adipiscing lectus ornare, ut velit nonummy, quidem vitae turpis enim. Adipiscing a lectus, scelerisque tempus vivamus ac. Arcu fermentum nibh, turpis pharetra gravida urna pellentesque vel, mi sodales, justo congue pretium lectus condimentum, quisque diam consectetur interdum. Aliquam proin et magnis sit augue, nisl in quos odio eu odio, pellentesque suspendisse nec non pulvinar dui cras, sollicitudin at.

    Lorem ipsum dolor sit amet, in maecenas pharetra gravida ullamcorper neque. Sed hendrerit proin diam duis eu, cursus odio placerat ultrices adipiscing lectus ornare, ut velit nonummy, quidem vitae turpis enim. Adipiscing a lectus, scelerisque tempus vivamus ac. Arcu fermentum nibh, turpis pharetra gravida urna pellentesque vel, mi sodales, justo congue pretium lectus condimentum, quisque diam consectetur interdum. Aliquam proin et magnis sit augue, nisl in quos odio eu odio, pellentesque suspendisse nec non pulvinar dui cras, sollicitudin at.

    Lorem ipsum dolor sit amet, in maecenas pharetra gravida ullamcorper neque. Sed hendrerit proin diam duis eu, cursus odio placerat ultrices adipiscing lectus ornare, ut velit nonummy, quidem vitae turpis enim. Adipiscing a lectus, scelerisque tempus vivamus ac.

    Arcu fermentum nibh, turpis pharetra gravida urna pellentesque vel, mi sodales, justo congue pretium lectus condimentum, quisque diam consectetur interdum. Aliquam proin et magnis sit augue, nisl in quos odio eu odio, pellentesque suspendisse nec non pulvinar dui cras, sollicitudin at.

    Title

    Title

    Title

Click here to load reader

Reader Image
Embed Size (px)
Recommended