Upload
others
View
4
Download
0
Embed Size (px)
Citation preview
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
typetypography examples