Otavio Augusto
Copyright Š Otavio Augusto All rights reser ved. No par t of this publication may be reproduced, stored in a retrieval system, or transmit ted in any form or by any means, electronic, mechanical, photocopying, recording, other wise, without permission of the copyright holder.
BOOK DESIGNER: Otavio Augusto Barbosa PROFESSOR: Robin Lynch Printed in New York by Purchase College w w w.purchase.edu
CONTENTS
I nt ro d u ct i o n. . . . . . . . . . . . 06
FORM
LEGIBILIT Y
L AYOUT
Letter Anatomy . . . . . . . . . . . . 08
Legibilit y . . . . . . . . . . . . 22
Space . . . . . . . . . . . . 34
Size . . . . . . . . . . . . . . . . . . .10
Ker ning . . . . . . . . . . . . .24
Rule Division . . . . . . . . . . . .36
X-Height . . . . . . . . . . . . . . . . . 11 Tracking . . . . . . . . . . . . . . . . .25
Ornamental Dividers. . . . . . . . 37
Classification . . . . . . . . . . . . . 12
Leading . . . . . . . . . . . . 26 Initial Letter . . . . . . . . . . . . . . . . .38
Families . . . . . . . . . . . . . . . . .14
Word Spacing . . . . . . . . . . . .27 Identation . . . . . . . . . . . . . . . . . 39
Punctuation . . . . . . . . . . . . . . . . . 16
Alignment . . . . . . . . . . . . . . . . . 28
Grid . . . . . . . . . . . . . . . . . 40
Numerals . . . . . . . . . . . . . . . . . 17 Line Flow . . . . . . . . . . . . . . . . . 30 Hypertext . . . . . . . . . . . . . . . . . . 42 Screen Fonts . . . . . . . . . . . . 18
Color . . . . . . . . . . . . . . . . . . 44 Sources. . . . . . . . . . . . . . . . . 46 Colophon. . . . . . . . . . . . . . . . 50
INTRODUCTION Hopefully if you are reading this book is because you have the same interest and concern about designand communication as I do. We all know that ever y thing we do, even by gestures we transmit ideas, without saying a word. The same thing happens in t ypogaphy, ever y detail of a t ypeface (its shape, color and placement) says something. Type can be almost invisible or the big focus on a page. We, Graphic Designers are the ones who will use the abilit y to choosing when and how the reader will understand the piece. My intention of this book is to show the basics of t ypography and give good practical advices on how to use it, and maybe open your eyes to dif ferent possibilities and ideas to create good and smar t designs. Thank you,
Otavio Augusto.
FORM
•
STEM
•
SMALL CAPITAL
•
LIGATURE
•
FINIAL
CAP-HEIGHT
X-HEIGHT
BASELINE DESCENDER LINE
08
LETTER: Letter Anatomy
•
LOWER CASE
•
CROSS BAR
•
SERIF
•
BOWL
•
ASCENDER
•
COUNTER
•
As in any profession, t ype designers have a specialized vocabular y to talk about the dif ferent par ts of letters. It isn’t necessar y to commit the entire list to memor y, but familiarizing yourself with this terminology will make it easier to communicate about t ypefaces and their characteristics. It will also help educate your eye to recognize the underlying structure of various designs and the dif ferences among them.
09
UPPER CASE
•
DESCENDER
The cap height is the distance from the top of the capital letter to its bottom. Some ver tical elements (ascenders) may extend slightly above the cap height. The baseline is the most stable axis along a line of text. The curves at the bottom of letters such as a or c hang slightly below the baseline. Commas and semicolons also cross the baseline. If a typeface were not positioned this way, it would appear to teeter precariously, lacking a sense of physical grounding.
LETTER: Letter Anatomy
10
LETTER: Size
All fonts in size 13
The x-height is the height of the main body of the lowercase letter (or the height of a lowercase x ), excluding its ascenders and descenders. The bigger the x-height is in relation to the cap height, the bigger the letters will look.
11
LETTER: X-Height
HU MANIST OR OLD ST YL E
T R A NS IT IO NA L
EGY PTIAN OR SLAB SER IF
HUMA NIST S A NS SERI F
The roman typefaces of the fifteenth and sixteenth centuries emulated classical calligraphy. Sabon was designed by Jan Tschichold in 1966, based on the sixteenth-century typefaces of Claude Garamond.
Numerous bold and decorative typefaces were introduced in the nineteenth century for use in adver tising. Egyptian fonts have heavy, slab-like serifs.
These typefaces have sharper serifs and a more ver tical axis than humanist letters. When the fonts of John Baskerville were introduced in the mid-eighteenth century, their sharp forms and high contrast were considered shocking.
Sans-serif typefaces became common in the twentieth century. Gill Sans, designed by Eric Gill in 1928, has humanist characteristics. Note the small, lilting counter in the letter a , and the calligraphic variations in line weight.
12
H U M A N I ST O R O L D ST Y L E
The typefaces designed by Giambattista Bodoni in the late eighteenth and early nineteenth centuries are radically abstract. Note the thin, straight serifs; ver tical axis; and sharp contrast from thick to thin strokes.
T RA N SI T I O N A L O R AN O N Y M O U S SA N S SERI F
Helvetica, designed by Max Miedinger in 1957, is one of the world’s most widely used typefaces. Its uniform, upright character makes it similar to transitional serif letters.
LETTER: Classification
G E O METRIC SANS SER IF
Some sans-serif types are built around geometric forms. In Futura, designed by Paul Renner in 1927, the Os are per fect circles, and the peaks of the A and M are sharp triangles.
A basic system for classifying typefaces was devised in the nineteenth century, when printers sought to identify a heritage for their own craft analogous to that of art history. Humanist letterforms are closely connected to calligraphy and the movement of the hand. Transitional and modern typefaces are more abstract and less organic. These three main groups correspond roughly to the Renaissance, Baroque, and Enlightenment periods in art and literature. Designers in the twentieth and twenty-first centuries have continued to create new typefaces based on historic characteristics.
13
LETTER: Classification
• • • •
ROMAN UPPERCASE LOWERCASE SMALL CAPS
A family is a collection of fonts with a common design. A font is a complete set of letters, numerals, punctuation, signs and symbols. When you buy a font it may include a comprehensive family of t ypefaces or it may be just one restricted t ypeface. A traditional roman book face t ypically has a small family -- a “nuclear” group consisting of roman, italic, small caps, and possibly bold and semibold (each with an italic variant). Sans-serif families of ten come in many more weights and sizes, such as thin, light, black, compressed, and condensed fonts.
14
In the 1990s, many t ype designers created families that include both serif and sansserif versions. Small capitals and non-lining numerals (a cour tesy traditionally reser ved for serif fonts) are included in the sans-serif versions of Thesis, Scala, Quadraat, and many other big contemporar y families. Tens of thousands of digital t ypefaces are available for use on desk top computers. Most of them are junk. Presented here is a small sampling of welldesigned fonts in current use: All t ypefaces, even the most seemingly original, are grounded, to some degree, in precedent.
LETTER: Families
15
Punctuation may vary in shape, depending on the typeface, like any other character.
Punctuation is ever y thing in written language other than the actual letters or numbers, including punctuation marks, inter-word spaces and indentation. Punctuation marks ser ve to indicate the structure and organization of writing, as well as intonation and pauses to be obser ved when reading it aloud.
Punctuation can be altered or removed entirely if the text treatment creates the equivalent meaning. For example, a colon separating a title and subtitle must remain if they follow each other on the same line; remove the colon if the subtitle is treated dif ferently enough from the title to visually imply the same grammatical separation.
16
LETTER: Punctuation
Typography includes not only the letters of the alphabet but also numerals. Numerals are the linguistic expressions of numbers through words. For example, five is a numeral expressing the number “5”. Digits are symbols (a number symbol, e.g. “3” or “7”) used in numerals (combinations of symbols, e.g. “37”), to represent numbers. Some t ype families have dif ferent sets of numerals, such as lining and non-lining and fractions.
Adobe Garamond
Georgia
Helvetica Fractions
17
LETTER: Numerals
A bitmap font is designed to be used on screen at a specific size, such as 8 pixels, because its body is precisely constructed out of screen units. A bitmap font should be displayed on screen in even multiples of its root size (enlarge 8-px type to 16, 24, 32, and so on).
A computer screen displays fonts in pixels (picture elements). Bitmap fonts are built out of the pixels that structure a screen display. Whereas a PostScript letter consists of a vectorized outline, a bitmap character contains a fixed number of rectilinear units that are either “on” or “of f”, meaning that they may not be reproduced in a high-resolution medium such as print. In a bitmap font, the pixels do not melt away as the letters get bigger. Some designers like to exploit this ef fect, which calls attention to the letters’ digital geometr y.
Antialiasing is a technique for making the edges of letters look smooth on screen by rendering some pixels in shades of gray. Antialiasing is generally helpful for presenting text on screen at large sizes (12 pixels and higher), but it can make small text dif ficult to read. Some designers prefer to use bitmap fonts, which are designed to be displayed without antialiasing, for small text on screen.
LETTER: Screen Fonts
Helvetica
Verdana
Times
19
LETTER: Screen Fonts
LEGIBILITY
PARAGRAPH WIDTH The width of a paragraph depends heavily on the size of t ype being used and, therefore, how many characters can be fit onto a single line. Regardless of a reader’s maturit y or the t ype size, between fif t y and eight y characters (including spaces) can be processed before a return—with words averaging between five and ten letters, that means approximately eight and twelve words per line. Achieving this character count determines the width of a paragraph. That width may be af fected by the propor tions of the page format and how much text must be made to fit overall, as well as subjective factors, but this method is the best way of finding an optimal paragraph width as a star ting point.
Choosing how long a line of text should be, rather than just pouring type into columns, is one of the
If lines are too short, everything appears choppy and words may be read together.
When the lines are too long, people have a tendency to lose their place and their reading becomes slowed.
22
T E X T: L e g i b i l i t y
POINT SIZE The point sizes you select for your t ype are ver y impor tant for legibilit y. You must remember your audience as well as presentation method when selecting a point size. For example, a children’s book set in 10-point t ype might prove dif ficult for a child to read, although a college-level text in 10-point might be per fectly acceptable, even expected. If the tex t is being presented on a screen, 10-point tex t is likely to cause some squinting among readers sitting far ther distances from their screens.
23
LEADING & READABILITY The leading of the lines is somewhat dependent upon the width of the paragraph, the t ype size, and its spacing. The space between lines should be noticeably larger than the optical height of the lines, but not so much that it becomes pronounced. Similarly, the leading must not be so tight that the reader locates the beginning of the same line af ter the return and begins reading it again. As paragraph width increases, so too must the leading, so that the beginnings of the lines are more easily distinguished. Oddly, as the width of a paragraph narrows, the leading must also be increased; other wise, the reader may grab several lines together because the snapshots he or she takes while scanning encompass the full paragraph width.
T E X T: L e g i b i l i t y
LETTER Kerning 0
Kerning and letterspacing refer to the adjustment of space between two letters. If letters in a t ypeface are spaced too uniformly, they make a pattern that doesn’t look uniform enough. Gaps occur, for example, around letters whose forms angle outward or frame an open space (W, Y, V, T, L).
Large text such as product labeling, book titles and poster copy, editorial headlines and text set in ALL CAPS always require kerning. Well kerned text demonstrates the designer ’s attention to aesthetics, detail and refinement.
In metal t ype, a kerned letter extends past the lead slug that suppor ts it, allowing two letters to sit more closely together. In the digital t ypefaces used today, the space between letters is controlled by a table of kerning pairs which address optical issues arising from the juxtapositioning of these characters.
24
T E X T: K e r n i n g
Kerning 90
Tr a c k i n g a l l o w s t h e universal application of letterspacing. It is the adjustment of space for groups of letters and entire blocks of text. While all digital fonts are packaged with a default track setting, designers should evaluate and adjust each font’s tracking to define the overall appearance and readability of text, setting it more open and airy or more dense and congested or arriving at a neutral adjustment. Tr a c k i n g a n d l e a d i n g have an interdependant relationship.
Yo u c a n a p p l y t r a c k i n g t o all text or to selected port i o n s o f a t e x t . I m p o r t a n t l y, selective tracking allows the designer to refine and adjust line lengths to fit more characters onto a line to save space or to prevent words from carrying over to another page or column of t e x t . C o n v e r s e l y, t r a c k i n g offers the expansion of text when needed. Tracking 140
Tracking can change line endings or shorten lines of text. Tracking can be further adjusted on individual lines or words to improve hyphenation and line endings, preventing the appearance of orphans and widows. Tracking should not replace careful copyfitting. Use tracking adjustments carefully and avoid extreme changes in the tracking (loose or normal tracking followed by a line or two of very tight tracking) within the same paragraph or adjacent paragraphs. Tracking 20
Tracking 250 25
T E X T: Tr a c k i n g
Leading should be increased proportionally as line length increases. If a line contains more than about 12 words, a leading value of 120% may not be enough. In other words,
Size 7 / Leading 10
Leading is the term for the horizontal space placed between lines of t ype. The term originally described thin strips of lead which were inser ted between lines of metal t ype to add space. This space is impor tant not only for readabilit y but also for appearance. When setting text for continuous reading (this does not necessarily apply to headline or display tex t) words should be set close to each other, about as far apar t as the width of the letter ‘i’. Line spacing is measured from baseline to baseline. As a general rule leading (the amount of space between lines) should be no less than 120% of the point size of the t ype. For example, if your tex t is set at 10-point, you should consider leading the line at least 12 points deep.
26
The leading you choose depends on the t ypeface, but generally speaking, there are no tex t faces that look bad with more leading, although decreasing the leading can make just about any font look bad as a tex t font. When handling large display t ype, such as headlines for example, decreased leading, even negative leading, may be appropriate for larger t ype. Size 9 / Leading 15
T E X T: L e a d i n g
Proper word spacing is something that should not be noticed at all, the copy should just flow. Many factors af fect the sensitive use of word spacing. One of the most common failings of inexperienced t ypesetters is to set all t ype with the same exact word spacing settings. Word spacing that’s too tight makes it hard for the eye to distinguish one word from the next, so that words appear to run into each other. But word spacing that’s too open creates oversized blocks of white space between the words which makes reading groups of words more dif ficult.
27
A LL C A PS, SM A LL C A PS OR A N Y T Y PE TH AT H A S INCR E A SED LE T T ER SPACE LO OK S BE T T ER W IT H A DDIT ION A L WOR D SPACING .
Expanded and condensed faces need more and less word space respectively for the same reasons they need more or less letter space. Small type needs additional word space, large type less. The eye cannot readily distinguish individual words in smaller sizes without extra space between them. In large display type the transition from word to word is apparent even with little word space. This is even more true when large copy is set with initial caps.
T E X T: W o r d S p a c i n g
FLUSH LEFT
There are four dif ferent ways to align tex t on a page: Flush lef t tex t aligns at the lef t while flush right aligns at the right. A centered setting distributes lines of tex t equally, lef t and right, down a center a xis. Justified is the most familiar method of t ype arrangement, especially for books, magazines, and newspapers. The lines of t ype are kept all the same length so that the lines are both flush lef t and right. Depending on how you align your block of tex t, you need to e sure you have an overall good rag, which means an uniform backand-for th rhy thm to line lengths, it creates an unforced ripple with no sharp negative spaces intrude into the tex t. The paragraph widths remain consistent from top to bottom of column.
An advantage to using flush left and right alignment is that the even word spacing creates a uniform overall texture ideal for using narrow columns widths. The risk of rivers of white flowing down the page is eliminated. Lines can run either long or shor t, hyphenated words become unnecessary.
FLUSH RIGHT Flushing right visually makes interesting layouts, especially for small blocks of text such as captions and quotations. A disadvantage is that this setting demands a higher amount of concentration on the part of the reader, due to the number of times the eye must reset at the beginning of a new line.
T E X T: A l i g n m e n t
CENTERED Centered type immediately communicates tradition and elegance. Centered type can also appear static and even trite. Another challenge presented when centering type is the possibility of creating an awkwardly shaped text block reminiscent of, as an example, a vase or an ink-blot test.
JUSTIFIED J u s t i f i e d tex t i s b e s t s u i te d f o r s u s t a i n e d re a d i n g comfor t. The justified column assumes a quiet look and does not work to distract the reader. It allows the reader to concentrate on the content rather than the design in hand. When column widths are too narrow, the page runs the risk of having inadequate word spacing. This can result in a column that is completely flooded with rivers. Rivers are the enemy of justified type. These visible gashes of negative space zigzag ver tically through a poorly justified paragraph block distracting and impeding reading. Wordspacing, kerning and letterspacing are frequently employed to make justified lines reach an optical equilibrium and to allow each line to fill the entire measure. Allowing more hyphenation reduces word space variations but may make situations at times more difficult to finesse.
29
T E X T: A l i g n m e n t
SIGNIFICANT LINEATION This feature is seen most of ten in poetr y, headlines and titling. When reading a sentence that has been broken into two or more lines we naturally pause and reset at the beginning of the next line. This pause greatly ef fects the way a sentence is read and understood and can be used by the designer to great ef fect, subver ting, empowering and manipulating meaning.
SKEWED LINES Skewed lines of text do not align to a hard edge. They may or may not align horizontally. Skewing lines of text gives the text a sense of motion. Skewed lines appear to advance and recede in space. The technique of skewing text can be ver y useful when putting emphasis on the z-a xis. Working with this level of depth in mind can be useful when one’s goal is to liven up a flat, lifeless layout. For this purpose and this purpose alone text should be skewed.
It is common for amateur designers to skew lines of text to make italics, but it doesn’t look the same. This is not recommended and makes a mess of the anatomical shape of the type.
30
Some amateur designers also manipulate particular typefaces
to give them an extended or condensed look. This is also not recommended. Most skilled designers can spot an unnaturally skewed line
T E X T: L i n e F l o w
INTERLINEATION
Interlineation is when lines of text are set in between other lines of text. Inter woven bodies of text can be offset from each other
An interlineated entit y of t ype can work to fuse together by differentiating typeface, type size, and the color of type.
agreeing texts, opposing texts, and ocasionally headings and subheadings. Interlineation is also commonly used in editing drafts of papers
and essays to make corrections and comments.
TEXT WRAP
T h e eye is se nsi ti ve to th e fo r m a n d plac e m e nt of t y p e. A good tex t wrap closely follows the contour of the object being wrapped. In t ypography, what is mathematically correct does not always look correct, so there is no per fect one-click wrap. Tex t wraps look bet ter when the marg i n a b u t t i n g t h e o b j e c t i s j u s t i f i e d. C l e a r l y, h av i n g e q u a l va l u e s fo r t h e boundaries above and below an object doesn’t guarantee that these spaces will appear equal. In the end, the spaces you see around the wrapped object depend on where it sits relative to the baselines of the tex t around it.
LAYOUT
34
STRUCTURE: Space
Space is one of the most power ful and ef fective design elements layout ar tist have to use. There’s a balance you cerate when you let the design element breathe on the layout rather than covering the page top to bottom. Layout professionals use a variet y of strategies and devices to counteract or eliminate deadly “gray” ef fects and to create instead a page that is both attractive to look at and easy and enjoyable to read.
35
STRUCTURE: Head Lines
Whereas sentences are grammatical elements intrinsic to the spoken language, paragraphs are wholly literar y conventions designed to divide content into por tions that are more appetizing to readers (and writers) than an endless stream of discourse. In the sevententh centur y, it became standard to mark the begnning of a new paragraph with an indent, and to mark its close with a line break. Before then, t ypographers sometimes lef t ex tra space between paragraphs or sentences (without a line break), preser ving the the clean edges of the tex t block. Despite the ubiquit y of the indent /line break convention today, numerous alternatives can be used in its place. Inventing new ones is an intriguing t ypographic exercise.
36
Rule Division is a geometric line used as a graphic enhancement in page layout assembly. The term is used to distinguish ruling lines from a line of type. A scribe could not star t copying texts until horizontal writing and ver tical boundary lines were drawn to guide the copying, to ensure the uniformity of the copy, and to help the scribe comply with traditional propor tions and layout of the written space.
STRUCTURE: Rule Division
Paragraphs can be divided by placing a pilcrow, an ornament or a rule in between each paragraph. Ornamental division can be used to give text layouts specific stylistic qualities. Graphic borders and ornaments were considered essential in even the earliest forms of printing.
Arabesques have countless uses – the key is to play with them and have fun. Don’t be afraid to mix up the elements and combine them into unexpected patterns. When it comes to these versatile graphic elements, the number of configurations is limited only by your imagination.
37
Arabesque is the name given to the whole category of graphic ornaments and embellishments. Also called printer’s flowers and fleurons, these decorative elements have been used by designers and printers since the invention of moveable type. Arabesques range from simple geometric designs to ornate configurations of inter twining leaves and flowers. Modern arabesques are often digital recreations or interpretations of traditional historic designs, while others bring this delightful prac¬tice of yesteryear unapologetically into the twenty-first century. Type design¬ers sometimes create arabesques that are specifically designed to accompany their typefaces.
STRUCTURE: Ornamental Dividers
istorically,
Traditionally initial letters introduce the beginning of chapters in a book, but today they can be found introducing new par ts of a brochure, sections of training manuals, products in a catalog, the main copy in adver tisements, or even ar ticles in a newsletter, just about any place where a spot of beaut y and a little emphasis helps the communication process. Initial letters are t ypically capitals set in a dif ferent t ypeface than the surrounding text. Some initial letters are highly decorative while others are simple. Initials can be created from your existing fonts, or purchased in sets of highly decorative letter form graphics. There are few rules for choosing initials except appropriateness.
the oldest form of initial letter is the drop cap. A drop cap is set within the copy; the top of it is no higher than the top of the first line of the text. Subsequent type flows around its lower “dropped” por tion and should occupy a space least three lines deep (an odd number of lines ap-pears most balanced and pleasing). Make sure the letter optically aligns with the cap height of the first line and that the base aligns with the baseline of the line of type on which it rests. Close proximity with the rest of the first word establishes that the “Drop Cap” initial letter is in fact the first letter of the first word of the paragraph to which it is applied.
nother
style is the raised initial. A raised initial rests on the baseline of the first line of copy and ascends above the body copy. W ith far fewer alignment variables, raised caps are much less complicated to incorporate. 38
STRUCTURE: Initial Letter
Note that with paragraphs separated marginally with indentation, it is white space that is the design element drawing the eyes’ attention to the fact that a new paragraph has begun. It is common to see paragraphs separated just by the device of indenting the first line of the paragraph. This scheme has the big advantage of using less space. Publishers of fiction of ten use this st yle of paragraph saving tons of paper yearly. Indentation is a textual use of white space. Indentation is visually striking, and its use should be restricted for specific purposes. You can indent the first line of text from the lef t margin or keep the first line flush lef t and indent the body text underneath it (exdentation).
39
STRUCTURE: Identation
• • • • • • •
HEAD FOREDGE GUTTER FOOT
DATUM COLUMN MODULE
A t ypographic grid is a two-dimensional structure made up of a series of intersecting ver tical and horizontal a xes used to structure content. The grid ser ves as an armature on which a designer can organize text and images in a rational, easy to absorb manner.
40
STRUCTURE: Grid
You can divide the page horizontally. For example, an area across the top can be reser ved for images and captions, and body text can “hang” from a common line. In architecture, a horizontal reference point like this is called “datum”.
While single-column grids work well for simple documents, multi-column grids provide flexible formats for publications that have a complex hierarchy or that integrate text and illustrations. The more columns you create, the more flexible your grid becomes. You can use the grid to ar ticulate the hierarchy of the publication by creating zones for dif ferent kinds of content. A text or image can occupy a single column or it can span several.
41
Readers have never been constrained to follow the order imposed by a writer. On the printed page, the reader’s eye has always been free to bounce and skip, to return or not. Readers bring with them their experiences and knowledge, which the writer cannot control (or even make assumptions about); these determine the readers’ interests.
In contrast to linear stories with distinct beginnings, middles, and endings, digital or print-based hyper texts generally have multiple possible entr y points and many internal threads. This makes hyper text especially suitable for stories with numerous components. In a nonlinear stor y, readers reading conventionally see first what the writer thinks matters most.
42
STRUCTURE: Color
W ikipeda.org is a hyper text website, readers immediately select what matters most to them.
As more readers become accustomed to online hyper text, they may feel unsatisfied when scrolling through linear stories formatted on their screen as if for printed media. Browsing through non-linear hyper texts is not without drawbacks, however. Users of ten describe disorientation: They repeatedly lose their place or forget to follow up on their intentions; because of this readers of ten wonder if they are missing any thing (Foss, 1989).
43
STRUCTURE: Color
Color perception is af fected by many factors, including physiological factors such as aging and color-blindness and environment factors such as display settings and room lighting. When designing elements that require clarit y and definition — such as tex t — choose colors for perceptibilit y and legibilit y above all other considerations to avoid using color combinations that make it dif ficult for users to distinguish foreground from background
42
Legibilit y is greatly af fected by the perceived contrast between text and background. With low-contrast t ypography, reading is dif ficult since readers must work to distinguish letter forms. A document set with pink text on a red background would be tiring, if not impossible, to read..
STRUCTURE: Color
Color dif ferentiation is most influenced by contrast in brightness, or light-dark contrast. Brightness is the amount of white that is present in a color. Pairing black with white provides the greatest brightness contrast since white has a 100% brightness value, whereas black has a brightness value of 0%. Legibilit y is greatest when the degree of brightness contrast between tex t and background is high.
Hue is also a factor in color dif ferentiation. Greatest contrast is achieved by using complementar y hues—that is, colors that are on opposing sides of the color circle—and by combining dark colors from the bottom half of the color circle with light colors from the upper half of the circle
KNOCKOUT When two colors overlap, they don’t normally print on top of each other. The bottom color is knocked out of - not printed in the area where the other color overlaps. Knockout type is typically text that is knocked out or reversed out of a dark background so that the type appears in the color of the paper.
43
STRUCTURE: Color
SOURCES: ONLINE
12 most common desktop publishing and graphic design mistakes. http://www.newentrepreneur.com/Resources/Articles/DTP_12_most_common/dtp_12_most_common.html An Introduction to Type http://graphicdesign.sfcc.spokanecc.wa.us/tutorials/process/type_basics/default.htm Case: The Science of Word Recognition http://www.microsoft.com/typography/ctfonts/WordRecognition.aspx Bold Beginnings with Initial Letters http://www.newentrepreneur.com/Resources/Articles/Initial_caps/initial_caps.html Color Wheel Pro: Color Meaning http://www.color-wheel-pro.com/color-meaning.html Design Basics White Space http://graphicdesign.about.com/library/weekly/aa030a.html Editors’ Preface to the Transcriptions http://rs6.loc.gov/ammem/alhtml/aleditors.html Evolution and Origins http://www.mediumbold.com/04_thinking/type/originsphonograms.html InDesign 2.0: Advanced Character Formatting http://www.uwec.edu/help/InDesign2/advaform.htm Pixel Principles: Typographic Rules http://www.sallygentieuwelch.com/pages/Type.html
44
SOURCES: Online
Tameri Guide for Writers: Typography http://www.tameri.com/dtp/typography.html The Rules of Typography: Part IV http://www.fontsite.com/Pages/RulesOfType/ROT1-08.html Type and Colour http://www.joeclark.org/book/sashay/serialization/Chapter09.html Type: Tracking http://papress.com/thinkingwithtype/text/tracking.htm Typography for Writers http://hanson.geog.udel.edu/prosem/typography.pdf Veritas: Looking back, looking ahead http://www.alteredegofonts.com/articles/about-veritas.htm Web Style Guide http://www.webstyleguide.com/type/case.html When it’s better: Hypertext http://www.press.umich.edu/jep/06-03/McAdams/pages/better.html Punctuation http://www.uottawa.ca/academic/arts/writcent/hypergrammar/punct.html
45
SOURCES: Online
SOURCES: PRINT
Lupton, Ellen. Thinking With Type: A Critical Guide For Designers, Writers, Editors, & Students. New York: Princeton Architectural Press, 2005 Baines, Phil. Type and Typography. New York: Watson-Guptill Publications, 2002 Jury, David. About Face. Switzerland: Rotovision, 2002 Samara, Timothy. Making and Breaking the Grid. Hochuli, Jost and Robin Kinross. Designing Books: Practice and Theory Muller-Brockmann, Josef. Grid Systems. Hurlburt, Allen. The Grid. Elam, Kimberly. Grid Systems
46
SOURCES: Print
47
SOURCES: Print
Designed for:
FONTS
Advanced Typography
Helvetica Nue Thin, Primary
Class of 2008
Baskerville Old Face, 08, 09
Prof. Robin Lynch
Gill Sans MT, 10, 11, 12
Purchase College
Bookman Old Style, 11 Constantia, 11 Palatino Linotype, 11 Eras Demi ITC, 11 Times New Roman, 11, 17 Sabon, 12 Baskerville, 12 Bodoni, 12 Clarendon, 12 Helvetica, 12, 14 Futura, 13, 22 Arial, 14, 15 Adobe Garmond, 15 Georgia, 15, 17, 38 Helvetica Fractions, 17 Amiga Forever, 18, 19 Verdana, 19 Franklin Gothic, 25 Helvetica Rounded, 26 Trajan, 27 Palatino Linotype, 27 Century, 28 Felix Titling, 34 Rockwell, 36 Imprint MT Shadow, 37 Impact, 39 Century Gothic, 40
otavioaugusto.com
Bauhaus, 42
48
“Design is linked tighly to society as it both reflects and helps to shape the world around us. Designers are part of this dynamic important process.� Amy E. Arnston
H a n d s o n Ty p e i s a b o o k d e s i g n e d t o i n s p i re i t s re a d e r s , t o m a ke p e o p l e m o re a w a re o f t h e t y p o g r a p h y t h a t i s a r o u n d t h e m a n d , m o re t h a n t h a t , t o i n s p i re p e o p l e t o l i t e r a l l y p u t t h e i r h a n d s o n t y p o g r a p h y, d i s c o v e r n e w w ay s t o u s e t h e f o n t s , p l ay w i t h s p a c e , u s e t h e grid, and most impor tant of all, making smar t c h o i c e s t o re l a t e t h e s u b j e c t t o t h e w o r k .
Otavio Augusto www.otavioaugusto.com