massimo vignelliin a portfolio, justified text is one of the harder alignments to work with and will...

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

SimpleCAP HEIGHT

BASELINE x HEIGHTdecender

acender

ANATOMY

72 PTS 72 PTS 72 PTS 72 PTS

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

CLASSIFICATION

serif classificationsan serif classification

slab serif classification

script classificationsymbols 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

HelveticaABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

GothamABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

FuturaABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyzUnivers

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

OptimaABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

SANS SERIF

TYPEFACES

GaramondABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

BodoniABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyzTimes Roman

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

CenturyABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyzBaskerville

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

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

SizeWeight

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 softFlush 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 softFlush 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 SIZERELATIONSHIP

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

EXAMPLES