+ All Categories
Home > Design > Typography Structure

Typography Structure

Date post: 23-Jan-2017
Category:
Upload: stefania-padalino
View: 427 times
Download: 0 times
Share this document with a friend
16
Typography Structures Stefania Maria Padalino | Art 227 - Typography: Structures | Instructor: John Nettleton | Oregon State University | June 9, 2004 DYNAMIC ENERGY
Transcript
Page 1: Typography Structure

TypographyStructures

Stefan

ia Maria P

adalin

o |

Art 227 - T

ypograp

hy:Stru

ctures |

Instru

ctor:

John N

ettleton |

Orego

n S

tate University |

June 9,

2004

DY

NA

MIC

EN

ER

GY

Page 2: Typography Structure

Stef

ania

Mar

ia P

adal

ino

| Art

227

- Typ

ogra

phy:

Stru

ctur

es |

Inst

ruct

or: J

ohn

Nettl

eton

| O

rego

n St

ate

Univ

ersi

ty |

June

9, 2

004

Page 3: Typography Structure

This book is a very short summary of a course I took this year at Oregon State University,Art 227Typography: Structures with John Nettleton.

What I have learned about letterforms and typography is that letters have a life and dignity of their own,as Robert Bringhurst said. “Letterforms that honor and elucidate what humans see and say deserve to be honored in their turn.Well-chosen words deserve well-chosen letters; these inturn deserve to be set with affection, intelligence,knowledge, and skill.Typography is a link, and it ought,as a matter of honor, courtesy, and pure delight, to be as strong as the others in the chain.”

I am impressed with the way the textbooks I have read for this class talk about letters and typography.I feel like I am approaching almost a sacred subject, and if nothing else, I should regard it with respect.

SMP

“Typography is concerned with the structuring and arranging of visual language. Both typeform andtypography are designed to convey a message.The question of how typography is used to convey a message can be divided into two parts, typography as appearance or style, and the practicalities of working with typography, such as legibi-lity, scale and formatting.”

Phil Baines & Andrew Haslam

“In all stages of the historical development of the world, the written word and typography have [sic] been a fundame-ntal ingredient in human culture.Only a few specialists are, however, familiar with their background and effect.Whereas the names of the innovatorsin the “classical disciplines”, [sic] such as painting, music and literature, are common knowledge, those of type designers and typographers of all historical periods are largely unknown;only a few appreciate the significance of their work.Yet the effects of text and typography on all spheres of human activity are constantly present.They influence the fields of aesthetics and technology, of the arts and economics.Without them the rapid exchange of information we take for granted in our contemporary world would be inconceivable.”

Typography–An Encyclopedic Survey of Type Design and Techniques

Foreword

Page 4: Typography Structure

2 Letters

4 Letterspacing

6 Kerning

8 Column width

10 Leading

12 Alignment

14 Rags

16 Ligatures

18 Hanging punctuation

20 Expressing Hierarchy

22 Normative studies phase II

Contents

Page 5: Typography Structure

“As with any craft that has evolved over 500 years, typogra-phy employs a number of technical terms.These mostly describe specific part of letterforms.It is a good idea to familiarize yourself with this lexicon.Knowing a letterform’s component parts makes it mucheasier to identify specific typefaces.”

John Kane

The design and use of typefaces as a means of visual communication from calligraphy to the ever-developing use of digital type is the broad use of the term typography.However, the art and practice of typography began with the invention of moveable type and the printing press.Typography is sometimes seen as encompassing many separate fields from the type designer who creates letterforms to the graphic designer who selects typefacesand arranges them on the page.

“Typography is the craft of endowing human language with a durable visual form, and thus with an independent existence.Typography is concerned with the structuring and arranging of visual language.”

Robert Bringhurst

Letters

Typography exists to honor content.

Letters have a life and dignity of their own.

Read the text before designing it.

Give full typographic attention even to

incidental details.

Make the visible relationship between the

text and other elements.

Choose a typeface or a group of faces that

will honor and elucidate the character

of the text.

Important to remember

Mphx x-height

ascender height

descender height

median

baseline

cap height

BaselineThe imaginary line defining the visual base of letterforms.

Medianthe imaginary line defining the x-height of letterforms.

x-height The height in any typeface of the lowercase ‘x.’

DescenderThat portion of the stem of a lower-case letterform that projects below the baseline

AscenderThe portion of the stem of a lower-case letterform that projects above the median.

Bembo Typography

Caslon Typography

Baskerville Typography

Bodoni Typography

Helvetica Typography

Univers Typography

2

Comparing typefaces

Page 6: Typography Structure

“The space between letters is integral to all typography.A particular letterspace may enhance or destroy the aestheticquality of a typeface or the legibility of text.‘A man who would letterspace lower case would steal sheep,’Fredirec Goudy liked to say. If this wisdom needs updating,it is chiefly to add that a woman who would letterspace lower case would steal sheep as well.Normal letterspace is related to the counterforms of lower case letters.Typefaces with large counterforms require more letterspace than typefaces with small counterforms.Letterspace must be decisive, either in harmony with or in strong contrast to the counterforms of lower case letters.For text, most typefaces set with the default set width appeartoo tight.Additional letterspace improves legibility and aesthetic quality. Unprofessional typesetting is generally cause not by the choice of typeface, but by too much, too little, or irregular letterspacing.Nevertheless, like every rule, this

one extends only as far as its rationale.The reason for not let-terspacing lower case is that it hampers legibility. But, there aresome lowercase alphabets to which this principle doesn’t apply.

(Robert Bringhurst)

‘Don’t letterspace the lower case without a reason.’

Robert Bringhurst

4

When letterspacing is too tight, the type appears patchy,disrupted by clusters;when too open, it looks scattered and framented.In both instances,the type is irritating and tiresome to read.The correct letterspacing in continuous text is a subtle question of balance: what is the optimum space that sufficiently separa-tes the letters without creating a string of disconnected elementsthat are difficult to grasp? The answer depends on the typeface andsize, and the visual result intended by the typographic designer.For both serif and sans serif type the optimum letterspace for textis determined by the counterforms of the lower case letters.Typefaces with small counterforms require less space between let-ters that those with large counterforms. If the letterspace is visuallylarger than the median counterforms of the lower case letter, the type appears too open. On the computer, most design applicationsadopt an average set width intended to work with all type sizes.For most typefaces, however, text composed with this setting appearstoo tight, requiring the letterspace to be increase for optimum legi-bility and aesthetic quality. In sizes larger than 24 point, mosttypefaces composed with an average set width appear too open.Display sizes generally require a decrease in letterspacing.In large type sizes, individual letterforms are visually more distinct,making it important to pay special attention to the letterforms in re-lation to each other.”

Willi Kunz, Macro-and Microaesthetic

Letterspacing

Normal tracking

Ideas

Everything is connected to everything else and searching for solutions oftenrequires being alert to spot the unlikely connections...

In Critique magazine Marty Neumeier writes:“If idea-making can’t be reduced to a system, perhaps it can be expressed in a formula.Like the workings of the internal combustion engine, the conceptual process can be seen as a series of controlled explosions that drive ideas forward.In a car engine, when fuel is mixed with fresh air and ignited by a spark,the wheels turn and the car accelerates. In the human mind, when a problem is mixed with a new perspective and exposed to intuition, the wheels turn and wearrive at a new concept. Problem + fresh perspective x intuition = concept.

Tight tracking

Ideas

Everything is connected to everything else and searching for solutions often requires being alert to spot the unlikely connections...In Critique magazine Marty Neumeier writes:“If idea-making can’t be reduced to a system,

perhaps it can be expressed in a formula.Like the workings of the internal combustion engine,the conceptual process can be seen as a series of controlled explosions that drive ideas forward.In a car engine,when fuel is mixed with fresh air and ignited by a spark,the wheels turn and the car accelerates.In the human mind,when a problem is mixed with a new perspective and exposed to intuition,the wheels turn and we arrive at a new concept.Problem + fresh perspective x intuition = concept.

Loose tracking

Ideas

Ever y th ing i s connec ted to ever y th ing e l s e and sea rch ing for solut ions of ten requires being a ler t to spot the unl ikely connect ions . . .

In Cr itique magazine Mar ty Neumeier wr ites:“ If idea-making can ’t be reduced to a system, perhaps it can be expressed in a formula.Like the workings of the internal combust ion eng ine, the concep-tual process can be seen as a ser ies of control led explosions that dr iveideas forward. In a car eng ine, when fuel i s mixed with fresh air and igni ted by a spark, the wheels tur n and the car acce lera tes .In the human mind, when a problem is mixed with a new perspective and exposed to intuit ion, the wheels turn and we arrive at a new concept. Problem + fresh perspective x intuition = concept.

Page 7: Typography Structure

“Kern consistently and modestly or not at all.Don’t stretch the space until it breaks.”

Robert Bringhurst

“The term ‘kerning’ describes the automatic adjustment of space between letters. Because kerning removes space between letters, it is often mistakenly referred to as ‘letterspacing.’ In fact, letterspacing means adding space between letters, not removing it. For our purposes,the term ‘tracking,’ used in most computer program that incorporate typesetting, best describes the addition or removal of space between letters. Keep in mind that even the best tracking table sometimes requires minor adjustments, especially at larger point sizes.”

John Kane

Kerning can increase consistency of spacing in word likeWashington or Toronto, where the combinations Wa and Toare kerned, But names like Wisconsin,Tübingen,Tbilisi andLos Alamos, as well as common words like The and This, remain more or less immune to alteration. Hand com-positors rarely kern text sizes, because their kerning pairsmust be manually fitted, one at a time. Computerized typesetting makes extensive kerning easy, but judgment is stillrequired, and the computer does not make gook judgmentany easier to come by.Too little kerning is preferable to too much, and inconsistent kering is worse than none.Type design is an art practiced by few and mastered by fewer,but font-editing softwaremakes it possible for anyone toalter in a moment the widths and shapes of letters to whichas artist may have devoted decades of study, years of inspira-tion and a rare concentration of skill.The power to destroysuch a type designer’s work should be used with caution.And arbitrarily condensing or expanding letterforms is thepoorest of all methods for fitting un-editable copy into unalterable space.”

Robert Bringhurst

Kerning

YeYeWithout kerningWith kerning

Originally, the term ‘kern’ describedthe portion of a letterform thatextended beyond the body of the typeslug.Today the term ‘kerning’describes the automatic adjustment ofspace between letters.

Because kerning removes spacebetween letters, it is often mistakenlyreferred to as ‘letterspacing.’ In fact,letterspacing means adding space between letters, not removing it.

6

Visually awkward combinations, such as Ke, LT,ey, vo,are improved by reducing the space between the individualletters. Adjusting the letterspace between two letters isknown as kerning.Words set in all capital letters also requireattention to the space between individual letters.The particular combinations of letterforms determine whetherspace needs to be added or subtracted to achieve a visuallyeven composition.The optimum letterspace for a word set in all capital letters is determined by letters with large counterforms, such as C, D, G, O, Q, or with large surroun-ding space, such as L,T, V, Q,Y. if any of these letters standapart, the space between the other letters needs to beincreased. Ultimately, every letter should unobtrusively inte-grate itself into the visual form of the word.Unprofessionaltypesetting is generally cause not by the choice of type-face, but by too much, too little, or irregular letterspacing.”

Willi Kunz, Macro-and Microaesthetic

Page 8: Typography Structure

8

The question of column width is not merely one of design or format; the question of legibilityis of equal importance.The reader should be able to read the message of a text easilyand comfortably.This depends to a not inconsiderable extenton the size of the type, the length of the lines, and the leading.Printed matter in normal format is generally read withthe eye at a distance of 30-35 cm.The size of the type should becalculated with this distance in mind. Both too small and too large a type costs the reader an effort. He tires more rapidly.According to a well-known empirical rule there should be 7-10 words per line, for a text of any length of the line canbe readily calculated. So as to keep the type area light andopen in appearance, we have to determine the leading, i.e. thevertical distance from line to line, so that it suits the size of type. Photo- typesetting has brought an additional problem;namely, that of the spacing between letters. In lead type the dis-tance between the letters was determined by the body size an equalized. In photo-typesetting the distance between lettershas to be adjusted a new every time in the photosetting machine.Hence the irregularity of the typeface and the, unfortunately,usually too closely set letters.The designer is well advisedwhen ordering photo-typesetting to insist on normal spacingbetween the letters.

Practical experience has shown that the column widthof most printed matter (magazines, brochures) contain from 5to 8 words, averaging 40 to 60 characters. Even though there are no standards for the number of characters per line, we can take the average number of 40 to 60 characters as being an easily readable quantity.Type sizes for continuous text matter are between 8 and 12 points. Well-leaded lines emphasize the horizontal and make reading easier. In each kind of work (e.g.book or display pane), the dimensions of the page size or format are an important factor in determining the arrangement of columns. Where display lines are placed on above another,the space between lines has to be judged optically. In some cases equal line-spaces (leading) has an unequal optical effect.Such “errors” are overcome by different variations of linespacing.”

Ruedi Rüegg

Every difficulty standing in the reader’s way means loss of quality in communication and memorability.Just as overlong lines tire, so do overshot ones.The eye findthe long line strenuous to read because too much energy mustbe spent keeping the horizontal line in sight over a long distance. In the case of the too short line, the eye is copelledto change lines too often and this again wastes energy.The right width of column is essential for an even and pleasant rhythm of reading which enables the reader to relaxand concentrate wholly on the content.”

Grid Systems in Graphic Design

Column width

Column width long

Column width short

Column width medium

“ “

“Choose a comfortable measure.”Robert Bringhurst

Page 9: Typography Structure

Leading calls for just as close attention as the width of the lines.For, like lines which are too long or too short, leading can also affect the type area and hence the readability of the text.Lines that are too narrowly set impair reading speed because the upper and lower lines are both taken in by the eye at thesame time.The eye cannot focus on excesi-vely close so accu-rately that one line alone is read without the immediate surrounding area also entering the visual field.The eye is distrac-tires more easily.The same also holds true in respect of lines that are too widely space.The reader has trouble in linking upwith the next line, his uncertainty grows, and fatigue sets inearlier. Good leading can carry the eye optically form one line to the next, giving it confidence and stability, and enabling it to absorb and remember more easily what has been read.Where reading is smooth and easy, the meaning content of thewords is gra-sped more clearly; they acquire more character and expression and etch themselves more sharply on the mind.Proper leading is one of the most important factors in obta-ining a harmonious and functional type area which is aesthetically pleasing and will stand the test of the time.Another pointcalling for attention concerns the type area containing 3, 4 or more different type sizes.To ensure a regular and attractivetypographic design the leads for the various type sizes must beadjusted to one another.The size of the leads determines thenumber of lines that can be accommodated on a printed page.The larger the leads, the smaller the number of lines that can be placed on a page.”

From Grid Systems in Graphic Design

Leading

10

Ideas

Everything is connected to everything else andsearching for solutions often requires being alert to spot theunlikely connections…

In Critique magazine Marty Neumeier writes: “If ideamaking can’t be reduced to a system, perhaps it can be expressed in a formula. Like the workings of the internal combustion engine, the conceptual process can be seen as a series of controlled explosions that drive ideas forward.In a car engine, when fuel is mixed with fresh air and ignited by a spark, the wheels turn and the car accelerates.In the human mind, when a problem is mixed with a new perspective and exposed to intuition, the wheels turn and we arrive at a new concept. Problem + fresh perspec-tive x intuition = concept. An example of this formula in practice is the invention of the printing press. Gutenbergcould not figure out how to press a large number of letter seals onto a single sheet of paper at the same time.One day at a wine festival (after sampling a glass or two), hebegan to look carefully at a wine press. Suddenly he reali-zed that the wine press, with minor alterations, might be transformed into a printing press. Mein Gott! The simplemixture of two ideas, the letter seal and the wine press,sparked by a little imagination, produced one of the greatestinventions of the Renaissance.”

9/9 Bembo

Idea

Everything is connected to everything else and

searching for solutions often requires being alert to spot

the unlikely connections…

In Critique magazine Marty Neumeier writes:“If idea

making can’t be reduced to a system, perhaps it can be expre-

ssed in a formula. Like the workings of the internal combustion

engine, the conceptual process can be seen as a series

of controlled explosions that drive ideas forward. In a car engine,

when fuel is mixed with fresh air and ignited by a spark, the

wheels turn and the car accelerates. In the human mind,

when a problem is mixed with a new perspective and expo-

sed to intuition, the wheels turn and we arrive at a new concept.

Problem + fresh perspective x intuition = concept.

An example of this formula in practice is the invention of the

printing press. Gutenberg could not figure out how to

press a large number of letter seals onto a single sheet of paper

at the same time. One day at a wine festival (after sampling

a glass or two), he began to look carefully at a wine press.

Suddenly he realized that the wine press, with minor alterations,

light be transformed into a printing press. Mein Gott!

The simple mixture of two ideas, the letter seal and the wine

press, sparked by a little imagination, produced one of the

greatest inventions of the Renaissance.”

9/14 Bembo

“Choose a basic leading that suits the typeface, text and measure.”

Robert Bringhurst

Page 10: Typography Structure

12

Traditionally, it was common practice to set type in a justified alignment.This was done for reasons of efficiency;in addition it was more familiar and was considered to bemore refined. In the 1920s, designer began to question this typographic convention and experiment with alterna-tive text setting styles. Unjustified and asymmetrical typography began to find widespread acceptance.Amongexperimental typographic designers was Herbert Bayer,who said,“I have long believed that our conventionalway of writing and setting type could be improved for easier I started to abandon the flush-left-and-right system for shortlines of text and have introduced the flush-left system,leaving a ragged-right outline.

There are appropriate reasons for setting either justified or unjustified typography, but type set flush left and raggedright promotes greater legibility. If properly used, flush-left,ragged-right typography provides visual points of refe-rence that guide the eye smoothly down the page from line to line. Because each line is either shorter or longer than thenext, the eye is cued from one to another. Lacking are visual cues that promote easy reading.With the use of unju-stified typography, wordspacing is even, creating a smoothrhythm and a consistent texture.The indiscriminate placement of additional space between works in order to justify lines causes awkward gaps or “rivers” in paragraphs,which are disruptive to reading. Hyphenations at the end of lines should be used whenever possible tokeep wordspacing consistent.”

Typographic Design

Alignment Flush leftThis format most closely mirrors theasymmetrical experience of handwriting.Each line starts at the same point butends wherever the last word on the lineends. Spaces between words are consis-tent throughout the text, allowing thetype to create an even gray value.

CenteredThis format imposes symmetry

upon the text, assigning equal value and weight to both ends of any line.It transforms fields of text into shapes,thereby adding a pictorial quality to

material that is non-pictorial by nature.Because centered type creates such astrong shape on the page, it’s important to amend line breaks so that the text

does not appear too jagged.

Flush rightThis format places emphasis onthe end of a line as opposed to

its start. It can be useful in situations(like captions) where the relationship

between text and image might be ambiguous without a strong orien-

tation to the right.

JustifiedLike centering, this format imposes asymmetrical shape on the text. It isachieved by expanding or reducingspaces between words and, sometimesbetween letters. The resulting opennessof lines can occasionally produce ‘riversof space running vertically trough thetext. Careful attention to line breaks andhyphenation is required to amend thisproblem whenever possible.

,

,“

“Shape the page and frame the textblock so that it honors and reveals every element, every relationship between elements, and every logical nuance of the text.”

Robert Bringhurst

Page 11: Typography Structure

When setting ragged text with a computer, take a moment to refine your software’s understanding of what constitutes an honest rag. Many programs are predisposed to invoke a minimum as well as a maximum line. If permitted to do so,whether they are ragging or justifying the text. Ragged setting under these conditions produces an orderly rippledown the righthand side, making the text look like a neatlypinched piecrust.This approach combines the worst fea-tures of justification with the worst features of ragged set-ting, while eliminating the principal virtues of both. Unlessthe measure is excruciatingly narrow, it is usually better toset a hard rag.This means a fixed word space, no minimumline, and no hyphenated linebreaks.”

Robert Bringhurst

In justified text, there is always a trade-off between evennessof word spacing and frequency of hyphenation.The bestavailable compromise will depend on the nature of the text as well as on the specifics of the design. Good compositorslike to avoid consecutive hyphenated line-ends, but frequenthyphens are better that sloppy spacing, and ragged setting isbetter yet. Narrow measures – which prevent good justifi-cation are commonly used when the text is set in multiplecolumns. Setting ragged right under these conditions willlighten the page and decrease its stiffness, as well as prevent-ing an outbreak of hyphenation. Many unserifed faces lookbest when set ragged no matter what the length of the measure.And monospaced fonts, which are common on typewriters,always look better-set ragged, in standard typewriter style.A typewriter (or a computer-driven printer of similar quality)that justifies its lines in imitation of typesetting is a presump-tuous machine, mimicking the outer form instead of theinner truth of typography.

“Set ragged if ragged setting suits the text and the page.”Robert Bringhurst

Rags

When setting ragged-right test, care should be taken not to rag the type too much. Uncontrolled line breaksof erratic rhythm can create awkward spaces that inhibit reading. In ragged-right type, care should be given to theselection of interline spacing, for it influences legibility and appearance. Spatial consistency and rhythmicline breaks result from careful typographical decisions.The breaking of lines can be determined by the author’smeaning rather tan by appearance.This method, sometimesreferred to as ”thought-unit” typography, arranges lines into discrete parts related to the meaning of the text. Raggedright lines may be of any length, with line breaks that are logical and focus on the intended message of the writer.”

Typographic Design

14

example of soft rag

example of medium rag

example of hard rag

Page 12: Typography Structure

“Ligatures combine two or three letters into a single character.They are available on in expert fonts, and are cru-cial for the refined setting of serf type.The ligatures fi an flare, because of their frequency, the most important.Letterspaced text precludes the use of ligatures.”

Willi Kunz

Ligature

16

Bembo, set without ligatures (above) and with ligature (below)

Use the ligatures required by the font, and the charactersrequired by the language, in which you are setting type.In most roman faces the letter f reaches into the space beyond it.In most Italics, the f reaches into the space on both sides.Typographers call these overlaps kerns. Only a few kerns, likethose in the arm of the f and the tail of the j, are implicit in a normal typefont.

Robert Bringhurst

ff fi fl ffi ffl

ff fi fl ffi ffl

“If you wish to avoid ligatures altogether, restrict yourself to faces that don’t require them.

Willi Kunz

AE aeÆ æ

Page 13: Typography Structure

Hanging Punctuation Attention to typographic detail is one aspect of design that separates theamateurs from the pros.Today's softwaremakes some of these details of typog-raphy easier than ever to accomplish.Hanging punctuation, commonly usedfor pull-quotes, creates the illusion of a uniform edge for the text, with the punctuation outside the margins.It's also called optical alignment.Beyond punctuation, optical marginadjustments may be used to make subtle shifts to allow for the shapes ofletters and serifs, such as exten-ding the edge of initial caps outside theouter margin.

Compare these two examples of a pull-quote without and with hanging punctuation:

Attention to typo-graphic detail is oneaspect of design thatseparates the amate-

“Attention to typo-graphic detail is oneaspect of design thatseparates the amate-

The eye craves order and alignment. However, techni-cally aligned text doesn't always look as if it is perfectlyaligned because of the shape and size of characters in text,especially punctuation. Optical alignment makes text edges look more orderly and balanced.At typical body copysizes, optical misalignment is rarely noticeable. However,at the larger text sizes used for pull-quotes and headlines theuse of hanging punctuation adds a touch of refinement to the layout. It may take extra time to hang your punctua-tion, especially if your software has no automatic alignmentoptions, but the results are noticeable.

http://desktoppub.about.com

Designing with Hanging Punctuation

In some programs, such as Adobe Illustrator and Adobe InDesign, hanging punctuation is an automated function. For other programs it requires some manualmanipulation of the text. For programs that don't have automatic options to hangpunctuation you can use kerning or invisible characters to create the hanging punctuation effect.To manually hang the initial (left) quotation mark in a pull-quote:

Method 1Add a space in front of the left quotation markKern the space to the left (negative kern value) until it moves outside the marginNote:The quotation mark may not show up on screen once kerned but it will print.

Method 2Apply a hanging indent to the paragraph so that the quotation mark extends to the left of the optical margin for the remainder of the text.Or, create a paragraph style or style sheet with a hanging indent.

1.2.

18

Examples of Hanging Punctuation

Page 14: Typography Structure

In most circumstances, a designer’s first goal is to make material comprehensible to a reader. In other words, you should understand thematerial well enough to know how someone else needs to read it tomake the best sense out of it.This understanding happens on twolevels: content and form.The recipe opposite is a fairly straightforwardpresentation of the making of an apple tart.With the exception of oneor two terms specific to cooking, its content does not require any special knowledge. However, in its form–the manner in which informa-tion is set and place on a page–the process it describes can be madeclearer than it appears as plain typescript.To understand the form, youmust first understand the kinds of information the recipe contains andthen rank it according to levels of importance, thereby creating a hierarchy. In this recipe there are the following levels of information:

title (1)

subtitles (2)

text (3).

Within the text there are

ingredient lists (3A)

oven temperature instructions (3B)

directions (3C).

Successfully setting this recipe in type requires that you makeeach of these distinctions clear to the reader.

Expressing Hierarchy

Establishing a format

After analyzing and organizing the content, devise a formatthat expresses differences within the text. Because the linelength required for easy reading of directions is more or lesstwice the line length required for a list of ingredients, the areawithin the margins of the sheet is divided vertically into three intervals, or columns. Ingredients cross-align with thedirections that refer to them. Single line spaces indicate breaksbetween paragraphs. Double line spaces indicate breaksbetween sections of text.

John Kane

20

Page 15: Typography Structure

Optimum of study two

Normative Studies phase 2

Optimun of study one

Optimum of study three

22

Page 16: Typography Structure

Colophon

Computer programs used: QuarkXPress Passport Adobe Illustrator 10 Adobe Photoshop 7.0

Fonts: Bembo – Bembo Bold Helvetica Neue – 75 Helvetica Bold

Fonts & size: Headings - 75 Helvetica Bold - 24 pt. typeSubHeadings - Bembo Bold - 12 pt. typeText - Bembo 9/11.5

Bibliography

Carter, Rob, Day, Ben, and Meggs, Philip.Typographic Design: Form and Communication.John Wiley & Sons, Inc.Third Edition.

Kane, John.A type primer. Prentice Hall, Inc. 2003

Bringhurst, Robert.The Elements of Typographic Style.2nd rev. ed. Point Roberts,WA: Hartley & Marks, 1996.

Kunz,Willi.Typography: Macro-and Microaesthetics.

Conclusion

My intent for this book was to keepit simple even because the time availableto me was very limited. I also wanted tocreate a sense of dynamicity and this is the best I could think about for thetime on hand.I hope the result is not too bad.

SMP


Recommended