• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Semiotic typography course lite lecture_1
 

Semiotic typography course lite lecture_1

on

  • 1,049 views

Based on Hartmut Stôckls semiotic approach, this course introduces ways of analyzing levels of typographic design - and it offers a framework for developing ideas for typographic design.

Based on Hartmut Stôckls semiotic approach, this course introduces ways of analyzing levels of typographic design - and it offers a framework for developing ideas for typographic design.

Statistics

Views

Total Views
1,049
Views on SlideShare
1,049
Embed Views
0

Actions

Likes
1
Downloads
97
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Semiotic typography course lite lecture_1 Semiotic typography course lite lecture_1 Presentation Transcript

    • Typo1graphy V I S U A L I S AT I O N Specialized Course in  Typographic Visuality Artwork: Joey Mariano http://www.cameronmollcolosseo.com/about‐me/
    • Typography 1 V I S U A L I S AT I O N Specialized Course in  Typographic VisualityIntroduction 1/2Topics 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 Type specimen by  William Caslon (1692– 1766). http://en.wikipedia.org/wiki/William_CaslonReferences 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.
    • Typography 1 V I S U A L I S AT I O N Specialized Course in  Typographic VisualityIntroduction 2/2Topics 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! A small movie on typography with Erik Spiekermann,  type designer (Officina and Meta, to mention a few): http://www.youtube.com/watch?v=_lfE3Q4kiSE&feaReferences to the relevant sources will be given throughout these slides. At the end of this slideshow  ture=relatedthere will be a comprehensive list of the used sources.
    • Typography 1 V I S U A L I S AT I O N Specialized Course in  Typographic Visuality L–R: Egyptian Aleph, Phoenician Aleph, Greek Alpha, Roman A Detail from Trajan’s Column (113AD) The modern Typeface Trajan is based on  these latin upper casesIntroduction to typography as communication The Cancellaresca The basic anatomy of the serif style (the antiqua), There are modern versions of this style,  for example the typefaces  Poetica variations in italics, display fonts and small caps. and AugustaAt the time of the invention of the modern technology of print (in the  L–R: The gothic style  as architecture and  as typographic style (Fraktur)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  L–R: The roman style as architecture and the  serif style (carolingian style)styles, the gothic style (it was dominant in the cultural gothic period, 1200–1400 in Europe, though it lasted longer in Northern Europe) and  Below: The modern antiqua serif’s mother, the miniscule writing. The miniscule writing became popular again in  Bembo (created by Francesko de Bologna, the Italian Renaissance (1400) called Griffo. It was used for the first time in   Aldus Manutius’ printing of  Pietro Bembo’s book De Aetna in 1495.)  The Italian moveable type was refined based on the written  The foundation is the cancellaresca italic. The antiqua serif, the type “with feet,” was born. stroke of the pen:Sources (excerpts): http://en.wikipedia.org/wiki/Printing_press /  http://en.wikipedia.org/wiki/Carolingian_minuscule / http://en.wikipedia.org/wiki/Typography
    • 1 L–R: Upper case M, small caps M  V I S U A L I S AT I O N and lower case mTypo Specialized Course in graphy Typographic Visuality Some character pairs  are designed as ligaturesIntroduction to typography as communication The basic anatomy of the serif style (the antiqua), The serif , the type “with feet” is usually  variations in italics, display fonts and small caps. good to use for print and it has not evolved  that much from the Renaissance up till  todayThere are some classic ways to create differences in the  traditionaltypographic styles. Apart from bold, these are Below: The numerals should differ in  relation to the text.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 you make use of a corporate It was in 1984name traditionallt set in upper cases:  DELL / DELL. Small caps are not just upper cases reduced in size, it’s a special SINCE 1890design! 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 called War and Peace. And there is of course the possibility of using the italic style in a specific design, for display typography in a  The modern typeface Arno header or in a logo. Pro (2007) has many optical  sizes. A display font can be one of a kind special type which you can’t really All these sizes are also use for plain text typography. Or it can signify the special design of a  available as semibold, font with many withs, that is, there is a design for several sizes in order bold, italic, italic bold, not to make the typeface look to bombastic in a big size. semibold italic, etc. Sources: http://en.wikipedia.org/wiki/Serif / 
    • Typography 1 V I S U A L I S AT I O N Specialized Course in  Typographic Visuality The anatomy ot the typographic signsIntroduction to typography as communication• 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) The classic typeface Jenson, original from 1470Sources: Pedersen & Kidmose 1993.  Constantia, Microsoft 2007
    • 1 Calibri, Microsoft 2007 V I S U A L I S AT I O NTypo FLOWERS  FLOWERS Specialized Course in graphy Robots Typographic Visuality Lucida Handwriting, Microsoft 1992Analyzing 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 L–R: Vogue cover s, 1967 and 2010It’s not always easy to define the “nature” of a typographic style.  Below L–R:  Rides magazine 2010 Take a look at the examples to the left.  and National Geographic KidsIs 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 simply means, that, say, the Vogue Cover has a certain visuality thathas connotations of (normative) feminine aesthetics and fashion.Sources: 
    • Typography 1 V I S U A L I S AT I O N Specialized Course in  Typographic VisualityAnalyzing typography Typographic “grammar”:  Micro‐, meso‐ macro‐ and paratypography (Stöckl)Typography is much more 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 we will not focus on theseparts for now.Let’s take a look at this grammar, step by step.Sources: Stöckl 2005
    • Typography 1 V I S U A L I S AT I O N Specialized Course in  Typographic Visuality DOMAINS OF  TYPOGRAPHIC WORK MICROTYPOGRAPHY relates to the design of TYPOGRAPHIC  BUILDING BLOCKS  type face TYPOGRAPHIC  PROPORTIONS  The typeface/font:  Garamond, Ariel etc. fonts and individual  Type size  Point size  Type style  Style (connotation) graphic signs  Colour of type  Black vs invertedAnalyzing typography or coloured, etc. MESOTYPOGRAPHY  Letter fit  Standard, spaced, reduced, etc. Typographic “grammar”:  relates to the configuration of graphic signs in lines  Word spacing  Narrow, wide, etc. Micro‐, meso‐ macro‐ and paratypography (Stöckl) and text blocks (also grid)  Line spacing (leading)  Double spacing, single spacingWe will concentrate on the micro‐, meso‐ and macrolevel.  Amount of print on   Signs /print per page page  Alignment of type  Left‐/right‐aligned (type composition) /centredA word on the mesotypographic level:  Position /direction  Horizontal, vertical, of lines (grids) diagonal, circular, etc.  Mixing of fonts  Hand letteringMeso means the means “in the middle.”   (artwork) plus typeThis level … MACROTYPOGRAPHY  Indentations and  Size of text blocks,– is the grid itself relates to the graphic paragraphing distance between structure of the overall blocks document  Caps and initials  Ornamented/coloured– is the placing of the“energy”of elements between the micro‐ and the   Typographic emphasis  Underlined, italics etc.macrotypographic level, and it has a hyge impact on the connotations.  Ornamentation  Headline hierarchies, devices enumerations, tables, charts, indices, foot‐ notes, marginalia, etc.  Assembling text and  Image‐caption‐ graphics (image) relations,  figurative letters. PARATYPOGRAPHY  Materials: paper,   Thickness, format,  relates to materials, digital, wall, pen etc. surface, media type, Sources: Stöckl 2005  instruments and techniques resolution etc. of graphic signs‐making  Practice  By hand, digital etc.
    • Typography 1 V I S U A L I S AT I O N Specialized Course in  Typographic Visuality DOMAINS OF  TYPOGRAPHIC WORK MICROTYPOGRAPHY relates to the design of TYPOGRAPHIC  BUILDING BLOCKS  type face TYPOGRAPHIC  PROPORTIONS  The typeface/font:  Garamond, Ariel etc. fonts and individual  Type size  Point size  Type style  Style (connotation) graphic signs  Colour of type  Black vs invertedAnalyzing typography or coloured, etc. Typographic “grammar”:  Micro‐, meso‐ macro‐ and paratypography (Stöckl)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?Sources: Stöckl 2005 
    • Typography 1 V I S U A L I S AT I O N Specialized Course in  Typographic Visuality DOMAINS OF  TYPOGRAPHIC WORK MACROTYPOGRAPHY relates to the graphic TYPOGRAPHIC  BUILDING BLOCKS  Indentations and paragraphing TYPOGRAPHIC  PROPORTIONS  Size of text blocks, distance between structure of the overall blocks document  Caps and initials  Ornamented/coloured  Typographic emphasis  Underlined, italics etc.Analyzing typography  Ornamentation devices  Headline hierarchies, enumerations, tables, charts, indices, foot‐ notes, marginalia, etc.  Assembling text and  Image‐caption‐ Typographic “grammar”:  graphics (image) relations,  Micro‐, meso‐ macro‐ and paratypography (Stöckl) figurative letters.Analysis example: Bazaar (February 2009)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): How will 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?Sources: Stöckl 2005 
    • Typography 1 V I S U A L I S AT I O N Specialized Course in  Typographic Visuality DOMAINS OF  TYPOGRAPHIC WORK MESOTYPOGRAPHY relates to the configuration TYPOGRAPHIC  BUILDING BLOCKS  Letter fit TYPOGRAPHIC  PROPORTIONS  Standard, spaced, reduced, etc. of graphic signs in lines  Word spacing  Narrow, wide, etc. and text blocks (also grid)  Line spacing (leading)  Double spacing, single spacingAnalyzing typography  Amount of print on  page  Signs /print per page  Alignment of type  Left‐/right‐aligned (type composition) /centred  Position /direction  Horizontal, vertical, Typographic “grammar”:  of lines (grids) diagonal, circular, etc. Micro‐, meso‐ macro‐ and paratypography (Stöckl)  Mixing of fonts  Hand lettering (artwork) plus typeAnalysis example: Bazaar (February 2009)Mesotypographic level Letter fit: Are the letters made narrov or is it an original narrow style of 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: How many elements of collected text blocks 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 direction you 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?Sources: Stöckl 2005 
    • Typography 1 V I S U A L I S AT I O N Specialized Course in  Typographic VisualityAnalyzing typography Typographic “grammar”:  Micro‐, meso‐ macro‐ and paratypography (Stöckl) Workshops: Make an analysis of a typographic layout  by using Stöckl’s model. Use for example: http://www.sevenzebras.com/printdesignspecialists/magazine_ab rupt.html http://www.thebestdesigns.com/ Type specimen by  William Caslon (1692– 1766). http://en.wikipedia.org/wiki/William_CaslonSources: Stöckl 2005 
    • Typography 1 V I S U A L I S AT I O N Specialized Course in  Typographic VisualityResourcesHartmut 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.pdfThere 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/