Tipografia şi regulile tipografice în design
Transcript of Tipografia şi regulile tipografice în design
![Page 1: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/1.jpg)
Tipografia şi regulile tipografice
în design
![Page 2: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/2.jpg)
• De ce este importanta tipografia? • Oamenii devine vizual mai sofisticaţi
![Page 3: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/3.jpg)
• Folosirea eficienta a Tipografiei conteaza!!!
![Page 4: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/4.jpg)
Caractere - litere, numere, semne de punctuaţie
Terminologia şi anatomia literelor
![Page 5: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/5.jpg)
Majuscule/uppercase – prezenţă puternică pe pagină sau monitor, atenţie vizuală, emană idea de autoritate, încredere, necesită mai mult spaţiu între litere
![Page 6: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/6.jpg)
Minuscule/lowercase – mai personale, mai informale, prietenie, căldură, arată mai bine apropiate..
![Page 7: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/7.jpg)
baza (baseline) - linia de bază pe care se află litera adică serifele corespunzătoare orizontale. meanline - linia imaginară care se află deasupra literelor minuscule (X-height) Înălţimea de bază a literei este determinată de înălţimea literelor mici. Acea înălţime se extinde de la baseline (linia de bază) până la meanline şi este marcată cu X. ascendent (ascender) - înălţimea extensiilor superioare ale literelor mici, adică partea formei literelor mici şi mari care se ridică deasupra înălţimii literei de bază (meanline). descendent (descender) - înălţimea extensiilor de jos ale literelor mici, adică o parte dintr-o formă a literei mici, care coboară sub linia de bază (baseline). Ligatures - 2 sau mai multe caractere unite într-o singură unitate. Un rafinament tipografic care compensează pentru anumite litere care sunt aranjate urât una lângă cealaltă, cum ar fi ff,fi, fl, ffi, ffl. Stress(axa) – axa liniei literelor rotunjite
![Page 8: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/8.jpg)
Legături – 2 sau mai multe caractere unite
![Page 9: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/9.jpg)
- Serife, Sans Serife, Slab Serife
![Page 10: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/10.jpg)
![Page 11: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/11.jpg)
Typeface – un alfabet cu un design specific
Typestyles – variaţiile unui typeface în greutate, lăţime..
Fonts – programul care generează fontul
Type Families
numele greutatea lăţimea înclinarea
![Page 12: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/12.jpg)
Cele 5 stiluri clasice şi cum să le distingem
Garamond 1615, Jean Jannon
Baskerville 1757, John Baskerville
Bodoni 1700, Giambattista Bodoni
Century Expanded / Egyptian 1894, Linn Boyd Benton
Helvetica 1957, Max Miedinger (de la Haas Grotesk)
Old Style, Transitional, Modern, Egyptian sau Slab Serif, Sans Serif
![Page 13: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/13.jpg)
- Contrast mic în grosimea liniilor - Serife cu brackets mai ascuţite - Stress diagonal - Majusculele mai scunde ca ascendentul
- Contrastul mai mare la grosimea liniilor - Serife cu trecere mai fină, curbată - Stress, axa aproape verticală - X-height mare
![Page 14: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/14.jpg)
- Contrastul mare la grosimea liniilor (atenţie la leading) - Serife drepte fără trecere, sub unghi drept - Stress, axa verticală - X-height mică
- Contrastul mai putin la grosimea liniilor - Serife cu trecere mai fină, curbată - Stress, axa aproape verticală - x-height mare
- Sans serif - x-height mare - Stress putin sau inexistent
![Page 15: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/15.jpg)
Când dorim să găsim diferenţa dintre fonturi cel mai des urmărim/comparăm:
Caracteristici comune:
- variaţii în stress
- variaţii în stroke
- serife
Caracteristici individuale
- majusculele R, T, W şi minusculele h, a, e, g şi o
![Page 16: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/16.jpg)
![Page 17: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/17.jpg)
EXERCIŢIU
![Page 18: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/18.jpg)
Inspiraţie, crearea unui typeface în Adobe Illustrator inspirat din obiecte de zi cu zi. http://vimeo.com/45709309 http://vimeo.com/46812037
![Page 19: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/19.jpg)
Reguli tipografice în design
• În ce constă designul cu textul? • Cum citim?
![Page 20: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/20.jpg)
![Page 21: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/21.jpg)
Lizibilitatea – măsoară cât de uşor distingem 2 caractere între ele
Cu cât mai variată este rama textuală cu atât mai uşor ochiul recunoaşte cuvântul Chiar şi fără să îl citească
![Page 22: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/22.jpg)
• Distanţa între litere - Letterspacing
Spaţiul dintre litere il ajustam cu ajutorul comenzilor kerning & tracking
- Kerning reprezintă contraforma creată în spaţiul dintre două litere.
- Tracking reprezintă spaţiul dintre literele unui întreg rând
![Page 23: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/23.jpg)
• Spaţiul dintre rânduri – Linespacing/Leading
• Spaţiul dintre cuvinte –
Wordspasing
![Page 24: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/24.jpg)
• justificat şi nejustificat
• Hyphenation – despărţirea cuvintelor în silabe
![Page 25: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/25.jpg)
Linelenght - Lungimea rândului în cadrul textului
Pentru o lectură optimă, cel mai bine este să avem între 40 şi 80 de litere într-un singur rând
![Page 26: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/26.jpg)
• Orfani şi văduve
Evidenţierea textului
- o facem prin schimbarea de stil a fontului selectat în caractere Italic (cursive) sau Bold (îngroşate).
- subliniere, rame, semne de evideţiere, poziţia, scris de mână, dingbats
![Page 27: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/27.jpg)
![Page 28: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/28.jpg)
• Marginile
– Grids
![Page 29: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/29.jpg)
Cum să alegem fonturile şi să le combină între ele în aşa fel încat să creeze armonie? :D
![Page 30: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/30.jpg)
ierarhie vastă creată dintr-un singur typeface
![Page 31: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/31.jpg)
![Page 32: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/32.jpg)
![Page 33: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/33.jpg)
![Page 34: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/34.jpg)
![Page 35: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/35.jpg)
![Page 36: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/36.jpg)
![Page 37: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/37.jpg)
![Page 38: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/38.jpg)
Lizibilitatea - măsoară abilitatea de a descifra ceva, în termeni tiporafici măsoară cât de uşor este să vedem diferenţa între 2 litere ale unui typeface În exemplu vedem că serifele ajută sa distingem i de l, ceea ce este mai greu la sans serif
![Page 39: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/39.jpg)
Readability/citibilitatea
![Page 40: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/40.jpg)
![Page 41: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/41.jpg)
![Page 42: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/42.jpg)
![Page 43: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/43.jpg)
![Page 44: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/44.jpg)
Entry points/ punctele de focalizare
![Page 45: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/45.jpg)
Ce poate sa deranjeze lizibilitatea?
![Page 46: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/46.jpg)
X-height, counter mai mare ajută lizibilitatea
![Page 47: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/47.jpg)
![Page 48: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/48.jpg)
![Page 49: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/49.jpg)
Ierarhia in design – organizarea vizuală a textului
![Page 50: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/50.jpg)
![Page 51: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/51.jpg)
![Page 52: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/52.jpg)
![Page 53: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/53.jpg)
![Page 54: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/54.jpg)
Ierarhia sistematizată – conduce cititorul prin text - Formează o structură predictibilă bazată pe margini, imagini şi tipografie - foloseşte contrastul în: • Mărime • Greutate • Culoare • Orientare • Poziţie
• Creaţi-vă un plan de conţinut • Răspundeţi la întrebările: Ce doriţi să comunicaţi? cui? • Împărţiţi info. după importanţă
![Page 55: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/55.jpg)
![Page 56: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/56.jpg)
![Page 57: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/57.jpg)
![Page 58: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/58.jpg)
![Page 59: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/59.jpg)
![Page 60: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/60.jpg)
Contrastul : formal - informal
![Page 61: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/61.jpg)
![Page 62: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/62.jpg)
Simetric - asimetric
![Page 63: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/63.jpg)
complex - simplu
![Page 64: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/64.jpg)
Margini/grid – ne ajută să organizăm textul, să-i creăm o structură
![Page 65: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/65.jpg)
Gridul de 12 coloane rămâne un clasic şi se foloseşte la organizarea conţinutului revistelor, web site-urilor
![Page 66: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/66.jpg)
Grid inegal – coloane de diferite dimensiuni, complex dar organizat
![Page 67: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/67.jpg)
Grid de 3 coloane
![Page 68: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/68.jpg)
Grid de 5 coloane
![Page 69: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/69.jpg)
Ce ar trebui să evită în tipografie?
![Page 70: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/70.jpg)
![Page 71: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/71.jpg)
- Bold şi italic artificial
![Page 72: Tipografia şi regulile tipografice în design](https://reader034.fdocument.pub/reader034/viewer/2022051302/5870cc091a28abec698b9967/html5/thumbnails/72.jpg)
Blog-uri, link-uri AisleOne www.aisleone.net BeautifulType www.beautifultype.net Design Observer www.designobserver.com Easily Amused http://johndberry.com/blog The End Grain www.end-grain.net FontBook www.fontbook.com The FontFeed www.fontfeed.com Fonts In Use http://fontsinuse.com Grain Edit http://grainedit.com I Love Typography www.ilovetypography.com jon tangerine www.jontangerine.com LetterCult www.lettercult.com Letterpress Daily www.letterpress.dwolske.com Ralf Herrmann: Wayfinding and Typography www.opentype.info/blog
RockPaperInk rockpaperink.com Type Directors Club Online ww.tdc.org Typedia www.typedia.com Typefoundry www.typefoundry.blogspot.com Typeradio www.typeradio.org typo/graphic posters www.typographicposters.com Typographica www.typographica.org Typography Served www.typographyserved.com Typophile www.typophile.com Typoretum www.blog.typoretum.co.uk We Love Typography www.welovetypography.com Woodtyper www.woodtyper.com