Screen Design Basics Typography Handling of Text
Total Page:16
File Type:pdf, Size:1020Kb
Screen Design Basics Typography Handling of Text Prof. Dr. Felicidad Romero-Tejedor Objec>ves of the unit: 1. Learn to see the text as a unit 2. Text and func>on 3. LeGer, text, layout 4. Leer, text and shape 5. Perceive the relaon between leGer shape and meaning Objec>ves of the unit: 1. Learn to see the text as a unit 2. Text and func>on 3. LeGer, text, layout 4. Leer, text and shape 5. Perceive the relaon between leGer shape and meaning Typography Greek »typos« (= form) + »graphéin« = wring Typography transforms spoken language in visual form. The invention of letters comes from a folk of traders called Phoenicians. Adrian Fruger, Signs and Symbols: Their Design and Meaning Ancient Greeks added the vowels in the Phoenician alphabet. So began the Latin writing. The origin of capitals is carving in stone. Trajan‘s Column (AD 113): oficial Roman alphabet. Trajan letter font by Carol Twombly 1990. Writing technique was developed from the writing instrument, the nib (Latin writing). Different developments come from other techniques. The capital letters developed in small letters by quickly writing with a pen. Quickly writing means easier letters. We have capital letters (majuscule) and small letters (minuscule). Here you see the levels of difficulty by hand writing. capital leGers (majuscule) small leGers (minuscule) Ceremonial – common, daily Several capital leGers did not become small leGers Letters build an unit with the combination from capital and small letters. Orphan Widow line Different fonts have different effect for the text as an unit. CronosPro Arial GillSans Didot Myriad Helvetica Palatino Times Objec>ves of the unit: 1. Learn to see the text as a unit 2. Text and func>on 3. LeGer, text, layout 4. Leer, text and shape 5. Perceive the relaon between leGer shape and meaning WORDSAREPICTURES ANDTHEREADERHASTO UNDERSTANDTHECOM PLETEMEANING Reading is to decode contents. For this reason the reader has to separate the words (above). WORDS·ARE·PICTURES· AND·THE·READER·HAS·TO UNDERSTAND·THE·COM PLETE·MEANING Reading is to decode contents. For this reason the reader has to separate the words (above). WORDS ARE PICTURES AND THE READER HAS TO UNDERSTAND THE COMPLETE MEANING. Reading is to decode contents. For this reason the reader has to separate the words (above). Letters have a function in the layout: Body text / running text Headlines Caption of images Slogans Logos Etc. San-serif (sans = without). We have differences in the letters (fonts) Serif typeface. Decorative typefaces Ini>al leGers in a German scripture (13 century). 1. The monk becomes a »sheet« of leather. 2. The writer draws lines. 3. The monk designs a portrait. 4. Wove paper will be cut. Text with different func>ons needs differences in appearance. Image cap>on Body text / running text Headlines We read the texts depending on their funcons. We read the texts depending on their funcons. Objec>ves of the unit: 1. Learn to see the text as a unit 2. Text and func>on 3. Leer, text, layout 4. Leer, Text and shape 5. Perceive the relaon between leGer shape and meaning Letters are designed within a grid. Letters are designed within a grid. Letter fonts are members of a family. The terms normal, regular and plain, some>mes also book, are being used for the standard weight font of a typeface. Where both appear and differ, book is o^en lighter than regular, but in some typefaces it is bolder. Small capitals are not capitals. To reduce the size of the capitals is not good. capitals capitals Small capitals Small capitals Reduced capitals Reduced capitals Small capitals and italic (used for emphasis) Italic comes from quickly handwriting. Oblique type ist not italic! regular regular italic italic oblique oblique Italic Oblique The addi>on of leGers build a web as tex>ls. The space between leGers is so important as the leGers. vom v o m v o m Type color / blackness: refers to the weight or boldness balance of type to white space. Slate fencing effect. Bad legibility Too wide and bold, the words cannot be read at once. If the text builds a too light grey, it is beau>ful but not for good legibility. Justified (flush left and right) If the text is not good compensated, it has the disadvantage that it tends to lead to very uneven spaces between words. The problem does not exist with flush left and ragged right. Boldface Bold is good for headlines, but not for body text. It breaks the balanced type color (blackness) of the text. If you use boldface in a body text, people do not read the text, people look only the bold words. Typography line terms The leading »line spacing« or »interline spacing« It means: the distance between the baselines Font 12 points, distance between the baselines 12 points. Font 14 points, distance between the baselines 14 points. Font 14 , baseline distance 18 points. Font 14 , baseline distance 18 points. Font 14 , baseline distance 18 points. Objec>ves of the unit: 1. Learn to see the text as a unit 2. Text and func>on 3. Leer, text layout 4. Leer and shape 5. Perceive the relaon between leGer shape and meaning Typography as syntactic play (playing with shapes) We work with the sentence: »Typografie ist grenzenlos.« It means »Typography is limitless.« The sentence is far away in the space Typografie ist grenzenlos. The writing comes near. It fills the space. Typografie ist grenzenlos Typografie The sentence closes the space, it does not let any free space. It is as a closed door. Writing comes from background to the front. It is aggressive. ist grenzenlos Text functions as a structure. Background should not be read. Background and foreground overlap. Eye catching for the word »Typografie«. Agitated background trembles, it moves itself. The word »Typografie« is a part of the background as a hole. The »pog« relation of »Typografie« has a symmetry. There are rhythms with colors. Blue color is very important in this combination (only one letter means exception). »Y« as an incursion of light. Letters will be illustrative. Hand drawing for a new, funny effect. Woodcarving. Not so funny, not elegant. It gives the effect of handmade roughness. Letters as architecture (objects). The »S« has a diagonal and arranges the words »Typograpie« and »grenzenlos«. You can do here an interpretation. The »i« is a man, the part of »S« is a horse … You can do with the shape of a letter a logotype. This is a hole part of a »g«. Objec>ves of the unit: 1. Learn to see the text as a unit 2. Text and func>on 3. Text als leGer layout 4. Leer, text and shape 5. Perceive the relaon between leGer shape and meaning Typography and semantic. Letter shape and its meaning Botanic garden Decorative Typofaces Zoological garden Sewing store Brick mason company Writing as architecture, 1933 Text shape and meaning in an object. Aratos- Manuscript. (AD 1. century. Copy about AD 800) Perseus killes the Gorgon Medusa. (1. century. Copy 8. century) One text with religious contain (catholic). Poem about the mount Fuji You can see the letters, but you can hear the letters as a train too. »in« with an arrow, also »out«. The arrows show the direction. »Inn«: you can go there… Here the letters are in style of art nouveau. Forms grow as the nature… Publicity for reading the magazin. »Lesen« means »read«. The letters are made from books. Wut = anger Das Bild kann nicht angezeigt werden. Dieser Computer verfügt möglicherweise über zu wenig Arbeitsspeicher, um das Bild zu öfnen, oder das Bild ist beschädigt. Starten Sie den Computer neu, und öfnen Sie dann erneut die Datei. Wenn weiterhin das rote x angezeigt wird, müssen Sie das Bild möglicherweise löschen und dann erneut einfügen. v x ySEXY Exercises 1.Experiment with letters: Take texts from magazines and create a collage with several types of texts. Describe the sort of texts and how it is used in the magazine. 2. Take a geometrical basic shape (square, circle or triangle) as a background and arrange the shape with a letter (of your name). Do several compositions as a logotype. You can do this exercise in your computer. 3. Write in your computer a sentence and try to visualize the meaning. Last project: Project: Design of a Website including all learned .