Semiotic Typography Course Lite Lecture 1

Typo1graphy Specialized Course in

Typographic Visuality

V I S U A L I S A T I O N

Artwork: Jo

eyMariano

http://w

ww.cam

eron

mollcolosseo.com/abo

ut‐m

e/



Introduction 1/2

Topics for today’s classThe serif font and ways to implement typographic analysis and better typographic design.

Introduction to Typography as communication

Basic anatomy of the serif style (the antiqua),variations in italics, display fonts and small caps

The history and the practical issues on the x‐height and leading (references to Pedersen and Kidmose): Legibility and redesigns

References to the relevant sources will be given throughout these slides. At the end of this slideshow there will be a comprehensive list of the used sources.


Type specimen by William Caslon (1692– 1766). http://en.wikipedia.org/wiki/William_Caslon



Introduction 2/2

Topics for today’s classThe serif font and ways to implement typographic analysis and better typographic design.

Analyzing typography and making use of a typographic strategy

Basic anatomy of the serif style (the antiqua),variations in italics, display fonts and small caps

The history and the practical issues on the x‐height and leading (references to Pedersen and Kidmose): Legibility and redesigns

Target groups and the visual styles of fonts(denotation and connotation)

Typographic “grammar”: Micro‐, meso‐macro‐ and paratypography (Stöckl 2005)

Presentations—training the academic, practical and strategic skills/vocabulary!

References to the relevant sources will be given throughout these slides. At the end of this slideshow there will be a comprehensive list of the used sources.


A small movie on typography with Erik Spiekermann, type designer (Officina and Meta, to mention a few):

http://www.youtube.com/watch?v=_lfE3Q4kiSE&feature=related

Typo1graphy


Specialized Course in Typographic Visuality

Introduction to typography as communication

The basic anatomy of the serif style (the antiqua),variations in italics, display fonts and small caps.

At the time of the invention of the modern technology of print (in the 1440’s), the serif typeface was already old.

The Roman Empire used an upper case typographic serif style.

The Roman emperor Charlemagne (768–814AD) standardized the Carolingian miniscule in his vast European Christian empire.

In the roman period of the western culture (1000–1150) the regular writing style had developed into what is known today as the serif style.

From 1200–1400 there were two major styles in written typographic styles, the gothic style (it was dominant in the cultural gothic period, 1200–1400 in Europe, though it lasted longer in Northern Europe) and the miniscule writing. The miniscule writing became popular again in the Italian Renaissance (1400)

The Italian moveable type was refined based on the written cancellaresca italic. The antiqua serif, the type “with feet,” was born.

Sources (excerpts): http://en.wikipedia.org/wiki/Printing_press / http://en.wikipedia.org/wiki/Carolingian_minuscule / http://en.wikipedia.org/wiki/Typography

L–R: Egyptian Aleph, Phoenician Aleph,Greek Alpha, Roman A

The Cancellaresca

There are modern versions of this style, for example the typefaces Poeticaand Augusta

Detail from Trajan’s Column (113AD)

The modern Typeface Trajan is based on these latin upper cases

L–R: The gothic style as architecture and as typographic style (Fraktur)

L–R: The roman style as architecture and the serif style (carolingian style)

Below: The modern antiqua serif’s mother, Bembo (created by Francesko de Bologna, called Griffo. It was used for the first time in Aldus Manutius’ printing of Pietro Bembo’sbook De Aetna in 1495.)

The foundation is the stroke of the pen:

Typo1graphy




The basic anatomy of the serif style (the antiqua),variations in italics, display fonts and small caps.

There are some classic ways to create differences in the traditionaltypographic styles. Apart from bold, these are

Small caps are designed to look like small upper cases. It’s a good ideato use this style in printed text if you don’t want to create an unbalanced style in, say, a text in which youmake use of a corporatename traditionallt set in upper cases: DELL / DELL.Small caps are not just upper cases reduced in size, it’s a specialdesign!

Italic text is usually used to highligt something, as well as there arestandards to for example setting the name of a book: “I said no!” The book is calledWar and Peace. And there is of course the possibility of using the italic style in a specific design, for display typography in a header or in a logo.

A display font can be one of a kind special type which you can’t reallyuse for plain text typography. Or it can signify the special design of a font with many withs, that is, there is a design for several sizes in ordernot to make the typeface look to bombastic in a big size.

Sources: http://en.wikipedia.org/wiki/Serif /

L–R: Upper case M, small caps M and lower case m

Some character pairs are designed as ligatures

The serif , the type “with feet” is usually good to use for print and it has not evolved that much from the Renaissance up till today

Below: The numerals should differ in relation to the text.

It was in 1984

SINCE 1890

The modern typeface Arno Pro (2007) has many optical sizes.

All these sizes are also available as semibold, bold, italic, italic bold, semibold italic, etc.

Typo1graphy




• The history and the practical issues on the x‐height and leading. Legibility and redesigns.

The very first serif typefaces had very small x‐heights.

The x‐height is crucial in the understanding of legibility. Research has demonstrated how especially larger chunks of text canbe read more easy if the x‐height is not too smal in relation to the upper cases (cap height).

(Examples in books, brochures etc.The visual identity by the use of typography)

Sources: Pedersen & Kidmose 1993.

The classic typeface Jenson, original from 1470

Constantia, Microsoft 2007

The anatomy ot the typographic signs

Typo1graphy



Analyzing typography

Target groups and visual styles of serif fonts

Different printed media, serifs and columns

Space, leading and kerning according to font family and effects

It’s not always easy to define the “nature” of a typographic style. Take a look at the examples to the left.

Is there something wrong, or …?

What is the use of thin, modern serif fonts, the space, the leading and the kerning. How can we explain this intuitively by desribing the typographic style?

One thing we can do is to explain why a certain typeface can be said to connotate something. A connotation can be explained as a mental process, a symbolic meaning derived from what you see (roughlyspeaking). A connotation is a shared cultural code. In this context it simplymeans, that, say, the Vogue Cover has a certain visuality thathas connotations of (normative) feminine aesthetics and fashion.

Sources:

Calibri, Microsoft 2007

FLOWERS FLOWERSLucida Handwriting, Microsoft 1992

L–R: Vogue cover s, 1967 and 2010

Below L–R: Rides magazine 2010 and National Geographic Kids

Robots

Typo1graphy




Typographic “grammar”: Micro‐, meso‐macro‐ and paratypography (Stöckl)

Typography is muchmore than just reading words.

Typography is an image, it is visual.

Hartmut Stöckl is a scholar in media communication. He has createda visual grammar for typography, a system in which he defines the different layers of typographic visuality.

This grammar can help us to both analyze typography and also to workwith design in a strategic way.

There are some references to semiotics, but wewill not focus on theseparts for now.

Let’s take a look at this grammar, step by step.

Sources: Stöckl 2005

Typo1graphy





Wewill concentrate on the micro‐, meso‐ and macrolevel.

A word on the mesotypographic level:

Mesomeans the means “in the middle.”

This level …

– is the grid itself

– is the placing of the“energy”of elements between the micro‐ and the macrotypographic level, and it has a hyge impact on the connotations.


DOMAINS OF TYPOGRAPHIC WORK

TYPOGRAPHIC BUILDING BLOCKS

TYPOGRAPHIC PROPORTIONS

MICROTYPOGRAPHYrelates to the design offonts and individualgraphic signs

type face

Type size Type style Colour of type

The typeface/font: Garamond, Ariel etc.

Point size Style (connotation) Black vs inverted

or coloured, etc.

MESOTYPOGRAPHYrelates to the configurationof graphic signs in linesand text blocks (also grid)

Letter fit

Word spacing Line spacing (leading)

Amount of print on page

Alignment of type(type composition)

Position /directionof lines (grids)

Mixing of fonts

Standard, spaced,reduced, etc.

Narrow, wide, etc. Double spacing,

single spacing Signs /print per page

Left‐/right‐aligned/centred

Horizontal, vertical,diagonal, circular, etc.

Hand lettering(artwork) plus type

MACROTYPOGRAPHYrelates to the graphicstructure of the overalldocument

Indentations andparagraphing

Caps and initials Typographic emphasis Ornamentation

devices

Assembling text andgraphics (image)

Size of text blocks,distance betweenblocks

Ornamented/coloured Underlined, italics etc. Headline hierarchies,

enumerations, tables,charts, indices, foot‐notes, marginalia, etc.

Image‐caption‐relations, figurative letters.

PARATYPOGRAPHYrelates to materials,instruments and techniquesof graphic signs‐making

Materials: paper, digital, wall, pen etc.

Practice

Thickness, format, surface, media type, resolution etc.

By hand, digital etc.

Typo1graphy





Analysis example: Bazaar (February 2009)

Microtypographic level

Typeface: Modern Serif (Perhaps Bodoni) and a display font (Love).Describe the style of the serif font.

Type size: Can be measured, not important here

Type style: Timeless style, elegance …

Colour of type: Black and red (Black is dominant on red backdrop)

More details? X‐height?





MICROTYPOGRAPHYrelates to the design offonts and individualgraphic signs

type face

Type size Type style Colour of type

The typeface/font: Garamond, Ariel etc.

Point size Style (connotation) Black vs inverted

or coloured, etc.

Typo1graphy






Macrotypographic level

Indentions and paragraphing: Big contrasts in text blocks, how?

Caps and initials: No initials

Typographic emphasis: Bold, Regular, italic ?

Ornamentation devices: This is more suitable to use on text paragraphs, in brochures etc.

Assembling text and graphics (image):Howwill you describe the relation between the style of the typography and the images of graphics and photo?

What is the overall connotation of this macrotypographic layout?





MACROTYPOGRAPHYrelates to the graphicstructure of the overalldocument

Indentations andparagraphing

Caps and initials Typographic emphasis Ornamentation

devices

Assembling text andgraphics (image)

Size of text blocks,distance betweenblocks

Ornamented/coloured Underlined, italics etc. Headline hierarchies,

enumerations, tables,charts, indices, foot‐notes, marginalia, etc.

Image‐caption‐relations, figurative letters.

Typo1graphy






Mesotypographic level

Letter fit: Are the letters made narrov or is it an original narrow styleof the particular Exemplar?

Word Spacing: The letters are kerned very narrowly. Why?

Line Spacing: There is used negative space. Why?

Amount of print on page: Howmany elements of collected textblocks are there. Why?

Alignment of type: Mixed with a grid structure based on the stems.

Position/direction of lines (grids): What is the overall directrion of the typographic design? How is the balance between the directionyou read the words and comprehend the layers of all elements?

Mixing of fonts: Yes, but why? Do you think the word Love is a unique design or a standard diplay font?

What is the overall connotation of this macrotypographic layout?





MESOTYPOGRAPHYrelates to the configurationof graphic signs in linesand text blocks (also grid)

Letter fit

Word spacing Line spacing (leading)

Amount of print on page

Alignment of type(type composition)

Position /directionof lines (grids)

Mixing of fonts

Standard, spaced,reduced, etc.

Narrow, wide, etc. Double spacing,

single spacing Signs /print per page

Left‐/right‐aligned/centred

Horizontal, vertical,diagonal, circular, etc.

Hand lettering(artwork) plus type

Typo1graphy





Workshops: Make an analysis of a typographic layout by using Stöckl’smodel.

Use for example:

http://www.sevenzebras.com/printdesignspecialists/magazine_abrupt.html

http://www.thebestdesigns.com/


Type specimen by William Caslon (1692– 1766). http://en.wikipedia.org/wiki/William_Caslon



Resources

Hartmut Stöckl:“Typography: body and dress of a text – a signing mode between language and image.” In Visual Communication 4, 2005.Find the article online:http://www.signographie.de/cms/upload/pdf/stoeckl_viscom_05_typo_final.pdf

There are references to:

Kim Pedersen & Anders Kidmose: In Black and White. An r&d Report on Typography and Legibility.The Graphic College of Denmark 1993.(A publication in both Danish and English. Orig.: Sort på hvidt. En udviklingsrapport om typografi og læselighed. Den Grafiske Højskole 1993)

Link: http://ilovetypography.com/


Source: http://www.designzzz.com/spectacular‐typography‐text‐artworks/

Documents

Semiotic Typography Course Lite Lecture 1