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. Le er, text, layout
4. Le er, text and shape
5. Perceive the rela on between le er shape and meaning
Objec ves of the unit:
1. Learn to see the text as a unit
2. Text and func on
3. Le er, text, layout
4. Le er, text and shape
5. Perceive the rela on between le er shape and meaning
Typography Greek »typos« (= form) + »graphéin« = wri ng
Typography transforms spoken language in visual form. The invention of letters comes from a folk of traders called Phoenicians.
Adrian Fru ger, 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 le ers (majuscule)
small le ers (minuscule)
Ceremonial – common, daily
Several capital le ers did not become small le ers 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. Le er, text, layout
4. Le er, text and shape
5. Perceive the rela on between le er 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 le ers 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 func ons. We read the texts depending on their func ons. Objec ves of the unit:
1. Learn to see the text as a unit
2. Text and func on
3. Le er, text, layout
4. Le er, Text and shape
5. Perceive the rela on between le er 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 le ers build a web as tex ls. The space between le ers is so important as the le ers.
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. Le er, text layout
4. Le er and shape
5. Perceive the rela on between le er 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 le er layout
4. Le er, text and shape
5. Perceive the rela on between le er 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.
SEXY y x v 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