Text. Basic typography. Keep your eyes open! Typography Defined. Identify these logos Legibility. Playful l interaction

Transcription

1 Sonnoli Text Basic typography Legibility Most of the time test is there to read Size, font, colour contrast against background Playful l interaction ti text as image, illustration, inspiration, decoration Keep your eyes open! Text is important on the web Start noticing typography. Look at logos on everyday household items, bus signs, cereal boxes... everywhere, especially in ads. Look at use of type in print and on the Web. Identify these logos Typography Defined The art of using the shape of text characters and their arrangements as a graphic art form. The practice of visually representing words. Typography can offer solutions where some graphics cannot. 1

2 Terms to know Typeface (teckensnitt, typsnitt): A style of lettering, such as Helvetica, Futura, Comic Sans, Bodoni, Times, Papyrus, Apple Chancery, Sand, Lucida Handwriting Type family (teckensnittsfamilj, typsnittsfamilj, puh): A group of similar typefaces, such as Franklin Gothic, Franklin Gothic Bold, Franklin Gothic Condensed Font: A complete set of characters (A Z, plus numbers, symbols) of one specific size, style and weight of a typeface Familjer Typsnitt kan delas upp i sju huvudgrupper: Antikvor, till exempel Baskerville, Garamond och Times Mediaval, Transantikva, Nyantikva Mekaner till exempel Rockwell och Courir Grotesker till exempel Arial, Futura,Helvetica och Gill Sans Skripter (skrivstilar) Anatomy of typeface Letter characteristics Hairline (thinnest stroke) Bracketed serif Cupped serif (2 points touch) Titter i Terminal Slab serif Xheight and proportion Bokstaven HtiQfoe Palatino HtiQfoe Times new Wikipedia HtiQfoe - Bodoni HtiQfoe Arial 2

3 AAAA t t t t o o o o g g g g e e e e HHHH s s s s x x x x m m m m p p p p Garamond Oldstyle (1400+ ) Antikva / Mediaeval / Medievalantikva / Humanistantikva, Diagonalantikva / Renässansantikva. Palatino, Times new roman, Bodoni, Arial (all in size 72) Times new roman Transitional (or Modern?) (1775, Times new roman 1932) Subtle thick and thin organic contrast in weight of stem and hairline. Finely bracketed serifs, sharper and more defined than in oldstyle. Xheight larger than oldstyle The thinnest parts of letters are at an angle rather than at the top and bottom (compared to oldstyle) Palatino Oldstyle / Antikva / Transantikva / Real (Garamond, Times ) Subtle thick and thin organic contrast in weight of stem and hairline. Finely bracketed serifs. Capitals lower than lowercase ascenders. Diagonal stress (the thinnest parts of letters are at an angle rather than at the top and bottom) Confusion - Times (Windows ) Bodoni Modern /Nyantikva (1813, Didon) Extreme contrast in weight of stem and hairline. No bracket on serifs Horisontal stress Axis completely upright Arial Sans-serif / Grotesk / Linjär No serifs, little stress because weights of stem and hairline optically appear even. Large body height in proportion to capital height. Often squared-off terminal. 3

4 Comparison of some sans serif fonts Arial bold and Arial Black Arial and Impact Courier Slab serif (Egyptian) / Mekan / Egyptienne Sans serif + slabs (horisontal serifs with same weight as stem) Wide body Arial and Comic Sans Arial and Trebuchet Spacing The three types of spacing to control Letter spacing The space between letters Word spacing The space between words Line spacing (leading) The distance between lines of type Times New Roman, 10 point, with 1pt leading and with 3pt leading Horizontal Spacing Courier New and Times New Roman Proportional Spacing: each character is allotted width proportional to it s natural geometry Most fonts Monospacing: each character is allotted exactly the same width Computer programming code Courier New is a monospaced font: the comma gets as much horizontal space as the W. For program listings, this is exactly what we want. Seldom desirable otherwise. 4

5 A bit of C++ code in Courier In Times New Roman the same thing seems strange to a programmer Guidelines: Body Type on the Web Use Georgia or Verdana Use 10 point or 12 point type Avoid bold or italic in body type, except for a few words for emphasis Use upper case only for the first word of sentences, proper names, etc. Use left alignment Use dark text on a light background Never use underlining for emphasis Times New Roman & its screen friendly cousin Georgia in same font size Microsoft commissioned the design of Georgia to be a screen friendly font similar to Times New Roman. Times Roman letters have oblique stress; Georgia has vertical stress The pixel view: how Georgia gets vertical stress (the letters are bigger) 5

6 Times New Roman and Georgia Arial and its screen friendly cousin Verdana in same font size What are the discernible differences? (open/closed, descenders, distances between and within) Guess that Font Guess that Font Serif Sans Serif Decorative Comic sans Courier Arial Times Serif Old Style Modern Transitional i Slab Serif Script Sans Serif Decorative Choosing Fonts The Cardinal Rule: Don t mix two fonts of the same type (two (twoserif fonts together, or two sans serif fonts together) Doing so almost guarantees conflict; conflict is bad. Choosing Fonts The Cardinal Rule: Don t mix two fonts of the same type Doing so almost guarantees conflict. Conflict is bad. See? This page hurts 6

7 Headings on the Web Big is beautiful Use any typeface that is legible Use the HTML line height attribute for control of line spacing Use HTML letter spacing and word spacing to get effects you want Choosing Fonts (a matter of taste) Generally serif fonts are more decorative San-serif or mild old style fonts work better for large blocks of text. San-serif or mild old style fonts work better for large blocks of text. San-serif or mild old style fonts work better for large blocks of text. San-serif or mild old style fonts work better for large blocks of text. San-serif or mild old style fonts work better for large blocks of text. San-serif or mild old style fonts work better for large blocks of text Mixing them can create strong visual contrast (contrast is good) The Principles of Design Applied to Type: creating Unity Choose typefaces that complement each other. Use contrasting styles, faces, and weights, rather than using similar faces. Typefaces with pronounced or exaggerated design characteristics ti seldom mix well. Avoid mixing two or more sans serif typefaces in a design. Establish harmonious size relationships. Determine how the size and choice of typefaces will work with the visuals. Establish correspondence and alignment. The perfect paragraph? Before considering the question that is seemingly always the most immediate one and the only urgent one, What shall we do? we ponder this: How must we think? For thinking is genuine activity, genuine taking a hand, if to take a hand means to lend a hand to. The coming to presence of Being. We do not say: Being is, time is, but rather: there is Being and there is time. Why are there beings at all, instead of Nothing? Before considering the question that is seemingly gyalways the most immediate one and the only urgent one, What shall we do? we ponder this: How must we think? For thinking is genuine activity, genuine taking Before considering the question that is seemingly always the a hand, if to take a hand means most immediate one and the only urgent one, What shall we to lend a hand to. The coming to do? we ponder this: How must we think? For thinking is presence of Being. We do not genuine activity, genuine taking a hand, if to take a hand say: Being is, time is, but rather: means to lend a hand to. The coming to presence of Being. there is Being and there is time. We do not say: Being is, time is, but rather: there is Being and Why are there beings at all, there is time. Why are there beings at all, instead of Nothing? instead of Nothing? Whitespace and hard return Ragged edge or not? Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et felis ut nisi rutrum vehicula. Suspendisse sed tortor diam. Nullam rhoncus nibh non nunc posuere vestibulum. Pellentesque congue lectus et nibh bibendum mattis. Nullam eget nulla sapien, vitae placerat quam. Phasellus scelerisque, dui nec ultricies sagittis, est erat faucibus dolor, sit amet semper risus erat in urna. Donec vitae tellus metus. Nam viverra, leo non pretium congue, sem risus eleifend urna, ut commodo leo lectus sed magna. Pellentesque porta odio id neque rhoncus vestibulum. Maecenas volutpat tincidunt dapibus. Nunc lobortis luctus ante, et rhoncus orci egestas ut. Vestibulum vel urna a nisl eleifend placerat eu eu odio. Vivamus sem felis, iaculis tempus porta sit amet, dignissim nec turpis. Integer placerat porta magna eu lacinia. Praesent laoreet nibh eu lacus convallis et sollicitudin odio fringilla. Suspendisse potenti. In pulvinar imperdiet mi eu hendrerit. Curabitur sit amet odio lorem. Sed consectetur enim non augue ultrices luctus. Quisque euismod, risus vel lobortis accumsan, lacus nibh mattis erat, sit amet dignissim ipsum tortor a diam. Ut egestas enim at mauris euismod a rhoncus augue porttitor. Nulla facilisi. Suspendisse ipsum ipsum, eleifend eget molestie sed, lobortis et quam. Nunc a neque id sapien congue pellentesque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer volutpat faucibus metus dictum varius. In id metus congue dolor pretium venenatis. Sed at ligula quis mi aliquet congue nec eu dui. Suspendisse potenti. Donec vel varius tortor. Donec ac sapien et eros ullamcorper elementum quis ut sem. In blandit diam justo. Vivamus faucibus sem id ante laoreet tincidunt. Quisque nec turpis turpis, et pharetra arcu. Fusce eget libero velit. Praesent sit amet est vel dui porta auctor sed sit amet odio. Ut tincidunt sapien sit amet leo viverra id cursus neque feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et felis ut nisi rutrum vehicula. Suspendisse sed tortor diam. Nullam rhoncus nibh non nunc posuere vestibulum. Pellentesque congue lectus et nibh bibendum mattis. Nullam eget nulla sapien, vitae placerat quam. Phasellus scelerisque, dui nec ultricies sagittis, est erat faucibus dolor, sit amet semper risus erat in urna. Donec vitae tellus metus. Nam viverra, leo non pretium congue, sem risus eleifend urna, ut commodo leo lectus sed magna. Pellentesque porta odio id neque rhoncus vestibulum. Maecenas volutpat tincidunt dapibus. Nunc lobortis luctus ante, et rhoncus orci egestas ut. 7

8 Ragged edge or not? Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et felis ut nisi rutrum vehicula. Suspendisse sed tortor diam. Nullam rhoncus nibh non nunc posuere vestibulum. Pellentesque congue lectus et nibh bibendum mattis. Nullam eget nulla sapien, vitae placerat quam. Phasellus scelerisque, dui nec ultricies sagittis, est erat faucibus dolor, sit amet semper risus erat in urna. Donec vitae tellus metus. Nam viverra, leo non pretium congue, sem risus eleifend urna, ut commodo leo lectus sed magna. Pellentesque porta odio id neque rhoncus vestibulum. Maecenas volutpat tincidunt dapibus. Nunc lobortis luctus ante, et rhoncus orci egestas ut. Vestibulum vel urna a nisl eleifend placerat eu eu odio. Vivamus sem felis, iaculis tempus porta sit amet, dignissim nec turpis. Integer placerat porta magna eu lacinia. Praesent laoreet nibh eu lacus convallis et sollicitudin odio fringilla. Suspendisse potenti. In pulvinar imperdiet mi eu hendrerit. Curabitur sit amet odio lorem. Sed consectetur enim non augue ultrices luctus. Quisque euismod, risus vel lobortis accumsan, lacus nibh mattis erat, sit amet dignissim ipsum tortor a diam. Ut egestas enim at mauris euismod a rhoncus augue porttitor. Nulla facilisi. Suspendisse ipsum ipsum, eleifend eget molestie sed, lobortis et quam. Nunc a neque id sapien congue pellentesque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer volutpat faucibus metus dictum varius. In id metus congue dolor pretium venenatis. Sed at ligula quis mi aliquet congue nec eu dui. Suspendisse potenti. Donec vel varius tortor. Donec ac sapien et eros ullamcorper elementum quis ut sem. In blandit diam justo. Vivamus faucibus sem id ante laoreet tincidunt. Quisque nec turpis turpis, et pharetra arcu. Fusce eget libero velit. Praesent sit amet est vel dui porta auctor sed sit amet odio. Ut tincidunt sapien sit amet leo viverra id cursus neque feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et felis ut nisi rutrum vehicula. Suspendisse sed tortor diam. Nullam rhoncus nibh non nunc posuere vestibulum. Pellentesque congue lectus et nibh bibendum mattis. Nullam eget nulla sapien, vitae placerat quam. Phasellus scelerisque, dui nec ultricies sagittis, est erat faucibus dolor, sit amet semper risus erat in urna. Donec vitae tellus metus. Nam viverra, leo non pretium congue, sem risus eleifend urna, ut commodo leo lectus sed magna. Pellentesque porta odio id neque rhoncus vestibulum. Maecenas volutpat tincidunt dapibus. Nunc lobortis luctus ante, et rhoncus orci egestas ut. Ragged edge or not? Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et felis ut nisi rutrum vehicula. Suspendisse sed tortor diam. Nullam rhoncus nibh non nunc posuere vestibulum. Pellentesque congue lectus et nibh bibendum mattis. Nullam eget nulla sapien, vitae placerat quam. Phasellus scelerisque, dui nec ultricies sagittis, est erat faucibus dolor, sit amet semper risus erat in urna. Donec vitae tellus metus. Nam viverra, leo non pretium congue, sem risus eleifend urna, ut commodo leo lectus sed magna. Pellentesque porta odio id neque rhoncus vestibulum.. experiment, familiarize yourself with the tools BUT remember... Lots of tutorials on Youtube! WWU just because you CAN do something......doesn t mean you SHOULD Summary (1 of 2) Typography is the design of letterforms and the arrangement of them in two dimensional space (for print) and in space and time (for digital media). For both print and digital media, visual communication professionals must consider some fundamental issues of form and structure, design, message/content, and expression. Learn to differentiate among letterforms. Understand how letterforms are structured as well as generated. Summary (2 of 2) When arranging typographic elements, you should consider balance, emphasis, rhythm, unity, positive and negative space, and the manipulation of graphic space to create illusion. Consider the interrelated visual factors of visual weight, position, and arrangement. Consider form, direct and secondary meanings, and graphic impact. Considering the subtle, precise relationship of type and visuals in a design solution is crucial to creating visual messages with impact. It is essential to understand how type can be used creatively and expressively. 8