Session 2 Expressions through Typography Learning Outcomes In this session, you will learn to: > Explain Expressive typography > Explain the need of Expressive typography > Choose e typeface 2.1 Expressive Typography A chil sphabat ering proceas sia vith the recognition of ater shapes fo associat t wih sound and eaing, Lets feature grained symbas of stn ar val langage Typo becmnea nage nana nb Exresien tyoarepy, where tris gh vu Lees ae cries cfmearing and ota aBetncl notona i ral and hx pal shapes, The ato poy paye \/ ttentono shapes, to be used in graph design. Shapes of titers reno at feluces, They are exresie and ae basicaly ved a ound symbol fr won tnd verbal language. Figure 2.1: Expressive ‘typography Individual letters of an alphabet is revisited a number of times by a design student mage Courtesy: http:// to learn ways to use letters as an imagery and heighten sensitivity to their shapes. —_typostudents. blogspot. creative and prominent designer intimately knows every angle, curve, and stroke in/2010/11/expressive- of laters. Refer to Figure 2.1 typography.htm! Figure 2.2: Physical manipulation of the type Image Courtesy: http:/www.smashingmagazine.com/2011/03/24/how-to-choose-a-typeface A single style does not define this approach to type. Graphic elements need to be arranged in a logical and natural manner. The most obvious and easy way of adding an expression is by using the Physically manipulating type. Refer to Figure 2.2. Ways to create expressive typography are as follows: > Type can be altered to support a concept or attitude. > Type can be used as lines or shapes > Striking contrasts of size, style, position, and direction of type can be used to impart a message. > The size and shape of the letters have a direct bearing on the meaning ofthe words. > Always remember to find the perfect congruence between the meaning and the type itset. All design principles, such as hierarchy, unity, variety, proportions, balance, scale, and so on can be applied to typographical design, 2.2 Need for Expressive Typography ‘Type design when expressively presented instantly connects to the target audience. Letters as shapes give dramatic flair and Ife to the designs. They feature real physical shapes and are not just abstract notions or carriers of meaning, Detailing to shapes is an essential part of typography as the shape and size ofthe letters have a direct bearing on the ‘meaning of the words, Letters used as vieual elements have allusion to their meaning; representing collage rather thantypography. Typography is not staid, but has to be functional GB Note ‘However the text may be, typography needs to be practised mindfully, creatively, and respectfully. 2.3 Choosing a Typeface An abundant supply of options for evaluation makes choosing a typeface tricky. Moreover, the beauty and complexity of type can make your head spn. A winning typeface canbe selected using the following options 2.3.1 Setting a Goal ‘Setting goals is essential while designing a typeface. Folowing are the goals tobe keptin mind while designing a typeface: >> Foxma strong impression after interpreting audience reaction. >> Impression may be stated bythe cent or may be determined by the audience, > The typeface needs to strike efective combination of readabilly and legit, > Some degree of independent consideration needs tobe given foreach character. > There 6 possolity ofthe design going the wrong way, but the problem can be compounded as tevoWes. Understanding subjective and objective pars could be the toughest A complete understanding of the impression helps with the objective aspect of typeface selection. There are no fixed positions on the spectrum from subjective to objective. However, itis known that legibility is easily quantifiable than a mood. The two most objective attributes are readability and logbilty 2.3.2 Legibility It refers to design of typeface with relation to width of strokes and presence of novel type design elements. Legible typeface makes it easier to identify every leterform. For example, a decorative typeface has low legibility as itis primarily ‘meant to be seen at a glance, rather than read at a length. Conversely, typefaces designed for novels or newspapers have very high legibility. Refer to Figure 2.3 The legiblity needs to be designed based on function ofthe text. Tap the interactivity 2.1 and click the buttons for more details. es Obseaiows poets aman «queen near the ignorancap| “Meanwhile, poecats ove the champion throughout being freedom. Thee double odsequiows pole tute the Forthcoming tomture designates obseqic oleate agains your dana (Ornamenpolecars guns eve microwave outside a view. Figure 2.3: Legibilty Interactivity 2.1: Quick tips for legibility Image Courtesy: http:/www.smashingmagazine. com/2011/03/24/how-to-choose-a-typeface2.3.3 Readability Settings for typeface, complimented with the basic typeface legibly, yields readability. tis a dynamic interaction of the type style, tracking, color, size, leading, and other properties combined into one overall impression. Certain typographic style delivers quantifiable degree of readability. For example, one can use a style with intentionally low readability that is part of the message. Else it could be focusing on designing high readabilty as the message is complicated, and audience are expected to understand, Consider the example of Sabon in Figure 2.3 and alter its readability. On the loft, the font size of the toxt is been decreased, and tracking and leading is altered, the colors lightened, and the block is set to full ustification. Now, it tums ut to be a mess with unattractive text rivers. Refer to Figure 2.4. The unaltered text is left for comparison to the right side. Tap the interactivity 2.2 and click the buttons for more details. Oeauions polecate Cena eet squcen nea the igor 3 pee nce Memwtas ene ince ectom. The the champion thoughout Se ietng Of being eed, Ther shee 4 san queney Boece Set ete Cte he kam ee | tae eis Hiiwlore elects maa Otmamenpolecats guns ex cen eae fe ignoeant a] microwave outside a view. Figure 2.4: Readability Image Courtesy: http:/www. ‘smashingmagazine.com/2011/03/24/how-to- ‘choose-a-typeface 2.3.4 Aspects of Appropriateness Interactivity 2.2: Quick tips for readability ‘Some typefaces are more appropriate for a design task than others. Suitabilly is something one leas both by experience with a typeface and by other attribute of the typeface, including its history and original purpose. The four attributes of a typeface are as follows: > Design intent Itis very useful to consider the design intent of the typeface. Most of the popular typefaces have detailed write-ups and review making so that one knows at least something about yyour choice. For instance, if a typeface was designed for ‘signing, ke Cooper Black, it probably isn't going to work well ‘set as the body copy of a book eel term of your choice. ‘typeface should conform to the aesthetics expected by the Moin psi 80 ‘audience for which the design is intended. For instance, if ‘aa yr APH piece is being designed for a bank, setting their text or logo fore sav fons CD {or an ad campaign, Is too casual then it wort attract quailty ‘audience. Alternatively, ifthe logo designed is formal it might attract quality audience. Hence, one needs match the gist of Figure 2.5: Aesthetics typeface to the gist of topic. In Figure 2.5, two combinations Image Courtesy: http:/www. S opetces hae been seated THe WSt ore AMS emma meee COUR: Mn Souvenr crete an asthete that mere euted to hate MMONPaMegazIne.con/20110 museum than a ark The scone cobnton's composed & Gorendon ard Bombo. he ope ne 9 wel tained Bankers > Mood Mood is a dynamic synthesis of what one gets when helshe considers the aesthetics ofa typeface together with the readability designed into the piece, along with the perceived meaning of the text itself. For example, with ‘one typeface and one text a person can evoke a mood of excitement or panic. The typeface itself first evokes ‘a strong reaction, but the readability of the text and the design itself can take communication to another levelIn Figure 26, observe how the implied meaning of the phrase ‘kick back ard tela’ dramatically changed by alterng the typeface and | Qj readability. Mood is extremely powerful, and it's better to get the work Kick back & relax Teviewed to make sure one is not sending a wrong message. This demonstrates that matching the basic personaly ofthe typeface, and its readability, to the expected emtionalresponee of the message is essential for success. > Individual Preferences Most ofthe times a typeface strikes a typographer for some reason as ‘appropriate. The typographer’s right brain knows it but the left brain Figure 2.6: Mood ‘can't understand why. If helshe can make it work based on that alone, then helshe can go for it. He/she would of course do well to get informed Image Courtesy: http:// about the typefaces in his arsenel, especially he/she Keepsusing them www.smashingmagazino. ‘averand aver Atypographermay discover thathisiher wee afaypeface _€0Mm/2011/03/24qhow-to-choose-a- has nething to do with its original intent, butit can sl look great typeface For example, a typographer might ike OCR-A on the cover of an album dosign, though OCR-A was designed specifically for optical scanners so that computers can recognize the words through software. If the intended design fis forthe project, the typographer can go frit 2.4 Tips to Select a Typeface Following things needs to be taken into consideration to design an effective a vpetace > Plan the Hierarchy Dining eee nce a yposaphergets a good grasp content naypogtapic iorarty ho node dodge one Nera o yes baat on varus pas fran advosianrk ot wan, ts sd iu ued for bean, aoa, boy caps busee wa o2'corent a porno wet agen ha saris Ree fo Pouea? Consider what others have already done ‘Atypographer needs to study what others have already done so Figure 2.7: Hierarchy that he can bring uniqueness in his design, Image Courtesy: http://www. ae ‘smashingmagazine.com/2011/03/24/ > Exper y way how-to-choose-a-typeface Tips to experiment quickly and thoughtfully with the typeface choices: ‘© Whether you are designing for the Web or print set up style a sheet that speeds up the flow of ideas because they are easy to swap out ‘© Change the size of diferent elements to create and release tension by playing with hierarchy, ‘© Change things on the basis of the judgment. > Anachronisms should be avoid THE OLIVE TREE: For example, ithe typographer doesn't know the particular history of ee {ypeface, he might end up using itn a way that might make him look | «i's GuANNL GREE itl sil fhe picks Tralantoiustrate the tte graphics ofan article ‘about ancient Greece, that would be an uninlonded anachronism, This is because, Greece pre-dates Rome, and Trajan was a Roman THE OLIVE TREE: ‘emperor. The typeface Trajan is taken from ‘Trajan's Column’, | _anisroavorancinvrGxsecrurro which is a monument to a military victory around the year 100 A.D. | _BUTNOFINGHUDINGANY THING ROMAN ‘Answering Trajan’to the question "What font did you set the cover of this book about Ancient Greece in?” will make typographer squiem. Refer to Figure 2.8, Figure 2.8: Anachronism Image Courtesy: http:/wwww. smashingmagazine.com/2011/03/24/ ‘how-to-choose-a-typeface> Avoid trite correlations Following things should be taken into consideration while using a font: ‘© Do not use Papyrus only because the topic is ‘ancient’ especially ifits about Ancient Egypt ‘© Do not use Comic Sans only because the topic is humorous. ‘© Do not use Lithos only because the topic is about Greek restaurants, © Do not use Futura only because the topic deals with ‘the future’, Refer to Figure 2.9 > Consider an extended type family Extendedtype familes commonly has serfand sans seifversons, with mutiple weights, ful sets of special characters and igatures. ‘This ensures that atypographer willbe abe to find the right solution for every typographic challenge he can imagine. An extended type family gives him a uniform, orderly mood. Refer to Figure 2.10. Stick to the classic combi Ia typographer is stuck, itis advisable to go withthe tried and true, ‘especially ifthe deadline is tight. In such instances one can choose ‘neutral serf and sans ser combination. Refer to Figure 2.11 Use limited palette ‘One can consider limited palette of typefaces that he likes best {rom lists of the most popular type of all time, Refer to Figure 2.12, v > Break the Rules ‘One ean broak the rules to broak the cliché, Refor to Figure 2.13, Wings in Journ the Flamable j Adecinno casey | Wings in Jour the Flamable eters nau Nous Figure 2.11: Classic combination Image Courtesy: http://www. ‘smashingmagazine.com/2011/03/24/ how-to-choose-atypeface Figure 2.12: Limited palette Image Courtesy: http:/www. hhow-torchoose-a-typerace 2.5 Summary In this session, Expressions through Typography, you learned that: ‘smashingmagazine.com/2011/03/24/ In Ancient Times funny Things happened IN GREEK RESTAURANTS about the FUTURE Figure 2.9: Trite correlations Image Courtesy: http:/www.smash- Ingmagazine.com/2011/09/24¢how-to- ‘choose-a-typeface Figure 2.10: Extended type families Image Courtesy: http:/www. 'smashingmagazine.com/2011/03/24 ‘how-to-choose-a-typeface Figure 2.13: Break the rules Image Courtesy: http:// www.smashingmagazine. comv2011/08/24Mow-to-choose-a- typeface > Acreative and prominent designer intimately knows every angle, curve, and stroke of letters. > Type design when expressively presented instantly connects to the target audience, v Seiting goals are essential to design an effective typeface. ® Design Intent, aesthetics, mood, and individual preferences are the four aspects of appropriateness.2.6 Exercise 1 refers to design of yptace wi relation width of strokes and presence of noveltype design elements Legibilty Readabitty Design intent None of these 2. Which among the following are the aspects of appropriateness? Design Intent ‘Aesthetics Mood Allof above 3, One can break the rules to break the cliché. True False 4 ‘ype families commonly have ser and sans ser versions, with mutiple weights. Pictograms Ideograms Phonograms Extended 5. An abundant supply of options for evaluation makes choosing a typeface tricky. True FalseSession 3 An Introduction to Type Learning Outcomes In this session, you will learn to: > Explain family classifications of type > Explain type design > Type anatomy 3.1 Family Classifications of Type The fifteenth century brought considerable changes in written communication. Manuscripts were treasured possessions that rarely appeared outside monasteries or the courts of royalty Only the privileged few had access to the written word. The course of written word was changed in 1445, in Mainz, Germany, by Johann Gutenberg Johann Gutenberg perfected the workable system of moveable type. He developed an ingenious process employing a separate matrix, or mould, for each alphabet character, from Which metal types could be hand-cast in great quantities. ‘The typographic form has evolved with technology, philosophy, and culture since the time of Gutenberg, To analyze this typographic evolution effectively, the design of type characters is broken down into classifications of common visual characteristic, called families of type. Refer to Figure 3.1 It represents more than 500 years of development where every family displays distinct visual characteristics. These characteristice are basie to vieual communication with type, ‘The featured examples are for most part, contemporary derivations of period type designs. Commonly available versions of pre-twentieth century typefaces have been refined accordingto the dictates of technology and popular taste. Although these may vary, sometimes substantially, from the original versions, they nonetheless preserve predominate characteristics. Though they are widely available today, i is relevant in helping the contemporary designer identify typographic forms. The frst 300 years of type design concept formed the basis of adhering to manuscript models, and typefaces designed during this period. Commonly referred to as Old Style. Moreover, it is noted that in the revolutionary practice of cutting and casting the first types, no thought was given to the adaptation of leterforms in this new medium. Since printers apparently regarded their crafts an evolution of manuscript preparation, the first type designs Cut into metal were literal copies of the pen-drawn strokes of scribes, 3.2 Type Design The concept of typographic form has evolved into a seeming endless Oldstyle soa nay) Transitional etn ern) Modern. tae 1 com) Slab Serif os cnr Sans Serif stan tay) Decorative sera ema) Script. Cursive Figure 3.1 Expressive ‘typography Image Courtesy: Inttp:/graphicdesign. ‘spokanefalls.edu/ tutorials/process/ ‘ype_basies/typo_ ilies htm vatiety f designs. Type design variations can be bifurcated in varous | Times Helvetica categories. 3.2.1 Typeface Benguiat Optima Typeface isthe bsiccategoy of ype design tsthespecieleterom | LUDOlin Grogph design of an alphabet, including the serif shape, x-height, length of ascenders and descenders, variation of stroke weight, and such other Figure 3.2: Typeface characteristics that differentiate it from any other design. Every typeface Image Courtesy: http:/graphicdesign. is given a name such as Helvetica, Bodoni, Times Roman, etc. There _ spokanefalls.edu/tutorials/process/type_ ‘are several interpretations of typeface such as Century Schoolbook, basics/type_families.htmNew Century Schoolbook, and Century Oldstyle. The term typeface, ike most of the contemporary type terminology, originates with movable type blocks of wood or metal containing a relief image of a character on one surface called face. Refer to Figure 3.2. 3.2.2 Typestyle ‘Several design variations included by a typeface are called styles. The available number of typestyles varies among typefaces, It is based on certain visual characteristics, Refer to Figure 3.3. Roman /Jialic Bold Bold Italic Figure 3.3: Typestyle Image Courtesy: http:/graphicdesign.spokanefals.edu/tutorials/process/type_basies/type_families.htm ‘The basic typestyles are Roman, italic that is angled, and the standard vertical stye. italic typestyles are cursive, sole letterform variations based on handwriting or oblique, angled versions of the Roman style. Cursive italics are typically limited to serif design. Tap the interactivity 3.1 and click the buttons for more detais. Interactivity 3.1: Characteristics of typestyle 3.2.3 Font Font is a collection of all the characters of a typeface in one size and one style. It includes lowercase and Caps, Punctuation marks, and special characters contained inthe typeface like symbols or ligatures. The definition of the term "Font’is changing with the time. Initialy @ font was a collection of pieces of wood or metal type. They had a defined size and hence could print only one size character. Using digital font modern typesetting technology can reproduce almost any size character. So, though the terms font and typeface, while distinct from one another, are often used interchangeably. 3.2.4 Type Family It isa complete assembly ofall the styles and sizes ofa typeface fom a type family, baring the name of ts typeface. For instance, all the slyles and sizes of Helvetica form the Helvetica family. type family may contain several variations but they retain a strong visual continuity because all the variations are based on common design characteristic. Ths allows the designer to present visual variety on a page retaining a strong unified appearance. Refer to Figure 34. twas designed in 1980's for the contemporary designer using personal computer technology. The stone family contains the typeface variations based on strong design characteristics. It also includes complete groups of styles in three diferent typeface categories. They are as follows: u u ‘The concept of family is explored by Sumner Stone in his nique family of ypetaces. | (Uf lu Figure 3.4: Type family Image Courtesy: http:// > Stone Serif: itis a traditional thick and thin seri face. graphiedesign spokanefalls. > Stone Sans: Its @ contemporary uniform strike sans seri face ‘edurtutorials/process/type_ basics/type_familes.htmStone Informal: Its a graceful, contemporary rounded serif typeface. While running the gamut in typestyle variations, the Stone family has a strong visual consistency based on common typographic design characteristics. Thus, one can more safely combine several diferent typefaces and styles without worrying about visually incompatible images. Refer to Figure 3.5. Stone Serif. ‘Stone Sans r ‘Stone Informal Regular ‘Stone Serif ‘Stone Sans it ‘Stone Informal Italic Stone Serif Seibold Stone Sans Semibold Stone Informal Semibold ‘Stone Serif Semibold Italic Stone Sans Semibold Italic Stone Informal Semibold Italic Stone Serif Bold Stone Sans Bold ‘Stone Informal Bold ‘Stone Serif Bold Italic Stone Sans Bold Italic __Stone Informal Bold Italic Figure 3.5: Stone family Image Courtesy: http://graphicdesign. spokanefalls.edu/tutorials/process/type_basics/type_families.htm 3.2.5 Type Measurements ‘The demand of good design legibility and readability, especially with large amount of text, needs attention tothe size of type, the length of typeface line (or column width) and the space between paragraphs, lines, words and characters, and ‘80 on. The three basic units of measurement used in working with type are as follows: > Picas g ‘They are used to measure width, lke the width of a typeset colurmn (length of line) or the space between columns. Picas are more convenient in Figure 3.6: Points ‘comparison to inches because smaller spaces can be measured in whole Image Courtesy: http:// > Points ‘They are used to measure height, essentially the type size (height ofthe character) and the space between lines and paragraphs, Refer to Figure 36 1e—72 ps»! Units instead of fractions. graphicdesign.spokanefalls. > Ems and ens edu/tutorials/processitype_ basics/type_families.htm ‘The em space is based on the em quad that is the square of the type size. For instance, the em quad of 48 points, Futura is 48 points high by 48 points wide. The em space measures 48 points, It is specifically useful type measurement because instead of being static like points and picas, it ‘changes in proportion to size of type used. It is mainly used to control space between characters, words, and ‘special characters such as the long dash or em dash. Refer to Figure 3.7. 48 is. tM ww om — — - MEM m 7 spa 48 pt 48, 48pt aed Emepace En apace AOpt. 48. 4B Figure 3.7: Ems and ens Image Courtesy: http:!/graphiedesign. spokanefalls.edu/tutorials/process/type_basies/type_families.htm 3.3 Type Anatomy 3.3.1 Characters A character is the fundamental typographic element. It is any individual number, letter or punctuation mark. The capital letters are called caps or uppercase characters and small letters are called lowercase characters. Similarly, numbers are called numerals or figures. Lining or modern numerals are cap height while old style numerals have ascenders and descenders, Refer to Figure 3.8,1234567890 Modern -numerdis 1234567890 (Old numerals Figure 3.8: Characters Image Courtesy: http:/graphicdesign.spokanefalls.edu/tutorials/process/type_basics/type_families.htm = Special characters Pi charactare ara spacial characters used for math signs, puneluation marks, accantad characters, and reference marks. Refer to Figure 3.9. smn) ype Punctuation marks ™@OStt Reference marks Accented characters Figure 3.9: Special character Image Courtesy: http:/graphicdesign.spokanefalls. edututorials/process/type_basicsitype_f smilies. htm ‘On Macintosh systems, special characters can be viewed for any font with the Key Caps utility under the apple menu Ligatures are character pairs that are re-designed as optional single characters. Refer to Figure 3.10. fi ffl ct ffl a Standard characters set in Adobe Ligature characters set in Adobe Garamond Garamond. Expert and Adobe Garamond Alternative. Figure 3.10: Ligature Image Courtesy: http:lgraphicdesign.spokanefalls.edu/tutorials/process/type_basicsitype_familis.htm 3.3.2 Character Components Typographic characters have fundamental component parts. The easiest way to distinguish characteristics of type designs is by comparing the structure of these components. Tap the inferactivities 3.2 and 3.3 and click the buttons for ‘more details,f= Typography Interactivity 3.2: Character components | ed Interactivity 3.3: Typestyles 3.4 Summary ln this session, An Introduetion to Type, you learned that: > Typeface is the basic category of ype design > The design variations included by a typeface are called styles. > Fonts a collection ofall the characters ofa typeface in one size and one style > Type family is an assembly ofall the styles and sizes of a typeface from a type family, bearing the name of its typeface. Points, pleas, and ams are the thea hasie unite of measiirament © Acharacter isthe fundamental typographic element.3.5 Exercise 1 is the basic catogory of type design Typetace Typestyle “ype families None of these 2 is atradtional thick and thn serif face, Stone Informal ‘Stone Seri Stone Sans None of these 3 are used to measure width of typeset column Points Ens Ems Picas 4. The em space is based on the em quad that is the square of the type size True False 5. Stone Sans is a graceful, contemporary rounded serif typeface, True False