13
Hierarchy

Hierarchy - City University of New York › files › 2017 › 10 › ... · 2017-10-11 · A visual hierarchy helps readers scan a text, knowing where to enter and exit and how to

  • Upload
    others

  • View
    1

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Hierarchy - City University of New York › files › 2017 › 10 › ... · 2017-10-11 · A visual hierarchy helps readers scan a text, knowing where to enter and exit and how to

Hierarchy

Page 2: Hierarchy - City University of New York › files › 2017 › 10 › ... · 2017-10-11 · A visual hierarchy helps readers scan a text, knowing where to enter and exit and how to

A visual hierarchy helps readers scan a text, knowing where to enter and exit and how to pick and choose among its offerings.

A typographic hierarchy expresses the organization of content, emphasizing some elements and subordinating others. A predicatable structure assists viewers understanding.

Each level of the hierarchy should be signaled by one or more cues, applied consistently across a body of text. A cue can be spatial (indent, line spacing, placement/orientation) or graphic (size, style, color). Infinite variations are possible.

emphasiscuesredundancy

Hierarchy

Page 3: Hierarchy - City University of New York › files › 2017 › 10 › ... · 2017-10-11 · A visual hierarchy helps readers scan a text, knowing where to enter and exit and how to

Emphasizing a word or phrase within a body of text usually requires only one signal. Italic is the standard form of emphasis. There are many alternatives, however, including boldface, small caps, or a change in color.

A full-range type family or Super Family has many weight and style variations designed to work together.

You can also create emphasis by mixing different fonts. Remember, if you want to mix font families, adjust the sizes so that the x-heights align.

Emphasis

Hierarchy

position

scale

weight

italics

case

type crime: too many signals — BOLD ITALIC UNDERLINED CAPS

Page 4: Hierarchy - City University of New York › files › 2017 › 10 › ... · 2017-10-11 · A visual hierarchy helps readers scan a text, knowing where to enter and exit and how to

In typography, some redundancy is acceptable, even recommended.

For example, paragraphs are traditionally marked with a line break and an indent, a redundancy that has proven quite practical, as each signal provides backup for the other.

To create an elegant economy of signals, try using no more than three cues for each level or break in a document.

Redundancy

Hierarchy

Page 5: Hierarchy - City University of New York › files › 2017 › 10 › ... · 2017-10-11 · A visual hierarchy helps readers scan a text, knowing where to enter and exit and how to

Int, ipit, officid ma natios et minusda quodist harchilit audanim utecate mporibusium nihitem oloreri tatemporum exeria aut fugit officitatem rempeRatur adic te nobis aut fuga. Ut laborec ullandae autaspient que niet explaborem faces sequo et maximi, tem as re cus reperibus fugit offiem rempelessunt harit. Tnihit alit estiur aut officiditam est, aspedis arunt res essum que officabori sedit fugiata tiantus maio. Sequi restorem nulparut.

Int, ipit, officid ma natios et minusda quodist harchilit audanim utecate mporibus.

Ratur adic te nobis aut fuga. Ut laborec ullandae autaspient que niet explaborem faces sequo et maximi, tem as rem exeria aut fugit officitatem rempelessunt harit

Tnihit alit estiur aut officiditam est, aspedis arunt res essum que officabori sedit fugiata tiantus maio. Sequi restorem qui berrovidebis exerum eaqui volut et que re.

redundancyHierarchy:

Line Breaks/Indents

Line Break (1/2 line inspace)

Int, ipit, officid ma natios et minusda quodist harchilit audanim utecate mporibusium nihitem oloreri tatemporum exeria aut fugit officitatem rempeRatur adic te nobis aut fuga.

Ut laborec ullandae autaspient que niet explaborem faces sequo et maximi, tem as re cus reperibus doluptaofficitatem rempelessunt harit

Tnihit alit estiur aut officiditam est, aspedis arunt res essum que officabori sedit fugiata tiantus maio. Sequi restorem nulparut.

Outdent

Int, ipit, officid ma natios et minusda quodist harchilit audanim utecate mporibus. Ratur adic te nobis aut fuga. Ut laborec ullandae autaspient que niet explaborem faces sequo et maximi, tem as re cus reperibus doluptat rercium nihitem olessunt harit Tnihit alit estiur aut officiditam est, aspedis arunt res essum que officabori sedit fugiata tiant tiantus maio. Sequi restorem qui berrovidebis exerum eaqui volut et que re consedit isque nulpario. Duntem nonsed qui tem nobit, unt accum alibus earum ut

No Indent or Line Break / Extra Space between paragraphs

Page 6: Hierarchy - City University of New York › files › 2017 › 10 › ... · 2017-10-11 · A visual hierarchy helps readers scan a text, knowing where to enter and exit and how to

Hierarchy: redundancy

Int, ipit, officid ma natios et minusda quodist harchilit audanim utecate mporibus.Ratur adic te nobis aut fuga. n Ut laborec ullandae autaspient que niet explaborem faces sequo et maximi, tem as re cus reperibus doluptat rercium nihitem oloreri tatemporum exeria aut fugit officitatem rempelessunt harit n Tnihit alit estiur aut officiditam est, aspedis arunt res essum que officabori sedit fugiata tiantus maio. n Sequi restorem qui berrovidebis exerum eaqui volut et que re consedit isque nulpario. Duntem nonsed qui tem nobit, unt accum alibus earum ut

No Indent or Line Break / Symbol

Int, ipit, officid ma natios et minusda quodist harchilit audanim utecate mporibus.Ratur adic te nobis aut fuga.

Ut laborec ullandae autaspient que niet explaborem faces sequo et maximi, tem as re cus reperibus doluptat rercium nihitem oloreri tatemporum exeria aut fugit officitatem rempelessunt harit

Tnihit alit estiur aut officiditam est, aspedis arunt res essum que officabori sedit fugiata tiantus maio. Sequi restorem qui berrovidebis exerum eaqui volut et que re consedit isque nulpario. Duntem nonsed qui tem nobit, unt accum alibus earum ut

type crime: too many signals —

Using paragraph spacing and indents together squanders space and gives the text block a flabby indefinite shape

Page 7: Hierarchy - City University of New York › files › 2017 › 10 › ... · 2017-10-11 · A visual hierarchy helps readers scan a text, knowing where to enter and exit and how to

Hierarchy

I Military Rank a. General b. Colonel c. Major d. Captain

e. Officer f. Private

II Ruling Body of Clergy a. Pope b. Cardinal c. Archbishop d. Bishop

III Parts of a Text a. Work b. Chapter c. Section d. Subsection e. Pages

Military Rank General Colonel Major Captain Officer Private

Ruling Body of Clergy Pope Cardinal Archbishop Bishop

Parts of a Text Work Chapter Section Subsection Pages

Military Rank General Colonel Major Captain Officer Private

Ruling Body of Clergy Pope Cardinal Archbishop Bishop

Parts of a Text Work Chapter Section Subsection Pages

General Colonel Major Captain Officer Private

Pope Cardinal Archbishop Bishop

Work Chapter Section Subsection

MIlITARy

RAnk

RulInG BOdy

Of CleRGy

PARTS Of

A TexT

Page 8: Hierarchy - City University of New York › files › 2017 › 10 › ... · 2017-10-11 · A visual hierarchy helps readers scan a text, knowing where to enter and exit and how to

Hierarchy

I Military Rank a. General b. Colonel c. Major d. Captain

e. Officer f. Private

II Ruling Body of Clergy a. Pope b. Cardinal c. Archbishop d. Bishop

III Parts of a Text a. Work b. Chapter c. Section d. Subsection e. Pages

Military Rank General Colonel Major Captain Officer Private

Ruling Body of Clergy Pope Cardinal Archbishop Bishop

Parts of a Text Work Chapter Section Subsection Pages

Military Rank General Colonel Major Captain Officer Private

Ruling Body of Clergy Pope Cardinal Archbishop Bishop

Parts of a Text Work Chapter Section Subsection Pages

General Colonel Major Captain Officer Private

Pope Cardinal Archbishop Bishop

Work Chapter Section Subsection

MIlITARy

RAnk

RulInG BOdy

Of CleRGy

PARTS Of

A TexT

symbolsindentsline breaks

indentsline breaks

font changeindentsline breaks

alignmentline breaks

Page 9: Hierarchy - City University of New York › files › 2017 › 10 › ... · 2017-10-11 · A visual hierarchy helps readers scan a text, knowing where to enter and exit and how to

Dimensional Hierarchy

Typography Across Three Dimensions : A visual hierarchy is necessary for objects in a series. Identity of the individual products as well as the overall brand. There is an additional challenge of legibility across planes and light.

Objects sit in an enviroment with other products and need to stand out but be harmonious to their neighbors.

Page 10: Hierarchy - City University of New York › files › 2017 › 10 › ... · 2017-10-11 · A visual hierarchy helps readers scan a text, knowing where to enter and exit and how to
Page 11: Hierarchy - City University of New York › files › 2017 › 10 › ... · 2017-10-11 · A visual hierarchy helps readers scan a text, knowing where to enter and exit and how to
Page 12: Hierarchy - City University of New York › files › 2017 › 10 › ... · 2017-10-11 · A visual hierarchy helps readers scan a text, knowing where to enter and exit and how to
Page 13: Hierarchy - City University of New York › files › 2017 › 10 › ... · 2017-10-11 · A visual hierarchy helps readers scan a text, knowing where to enter and exit and how to