Tipografia i

regulile tipografice
n design
De ce este importanta tipografia?
Oamenii devine vizual mai sofisticai

Folosirea eficienta a Tipografiei conteaza!!!

Coninutul

1. Scurt introducere n anatomia literelor i cele 5 stiluri de fonturi

2. Regulile de baz pentru punere n pagin

3. Folosirea anumitor tipuri de fonturi i combinarea lor n mod
corect

4. Analizm lucrarile voastre
Caractere - litere, numere, semne de punctuaie
Terminologia i anatomia literelor

Majuscule/uppercase prezen puternic pe pagin sau monitor, atenie
vizual, eman idea de autoritate, ncredere, necesit mai mult spaiu ntre
litere
Minuscule/lowercase mai personale, mai informale, prietenie,
cldur, arat mai bine apropiate..
baza (baseline) - linia de baz pe care se afl litera adic serifele corespunztoare orizontale.

meanline - linia imaginar care se afl deasupra literelor minuscule

(X-height) nlimea de baz a literei este determinat de nlimea literelor mici. Acea nlime se
extinde de la baseline (linia de baz) pn la meanline i este marcat cu X.

ascendent (ascender) - nlimea extensiilor superioare ale literelor mici, adic partea formei literelor mici
i mari care se ridic deasupra nlimii literei de baz (meanline).

descendent (descender) - nlimea 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 urt una lng cealalt, cum ar fi ff,fi, fl, ffi, ffl.

Stress(axa) axa liniei literelor rotunjite
- Serife, Slab Serife, Sans Serife
Typeface un alfabet cu un design specific
Typestyles variaiile unui typeface n greutate, lime..
Fonts marimea unui type style
numele greutatea limea nclinarea
Type Families
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
Old style
Transitional
Modern
Slab Serif
Sans Serif
Grotesque/gothic
humanist geometric
- Contrast mic n grosimea liniilor
- Serife cu brackets mai ascuite
- 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
- Contrastul mare la grosimea liniilor (atenie la leading)
- Serife drepte fr trecere, sub unghi drept
- Stress, axa vertical
- X-height mic

- Contrastul mai putin la grosimea liniilor
- Serife mai groase
- Stress, axa aproape vertical
- x-height mare
- Sans serif
- x-height mare
- Stress putin sau inexistent
Cnd dorim s gsim diferena dintre fonturi cel mai des
urmrim/comparm:
Caracteristici comune:
- variaii n stress

- variaii n stroke

- serife
Caracteristici individuale - majusculele R, T, W i minusculele h, a, e, g i o

EXERCIIU
Inspiraie,
crearea unui typeface n Adobe Illustrator inspirat din obiecte de zi cu zi.


http://vimeo.com/45709309
http://vimeo.com/46812037

Reguli tipografice n design

n ce const designul cu textul?
Cum citim?
Lizibilitatea msoar ct de uor distingem 2 caractere ntre ele
Cu ct mai variat este rama textual cu att mai uor ochiul recunoate cuvntul
Chiar i fr s l citeasc

Distana ntre litere - Letterspacing
Spaiul dintre litere il ajustam cu ajutorul comenzilor kerning & tracking
- Kerning reprezint contraforma creat n spaiul dintre dou litere.
- Tracking reprezint spaiul dintre literele unui ntreg rnd



Spaiul dintre rnduri
Linespacing/Leading



Spaiul dintre cuvinte
Wordspasing

justificat i nejustificat
Hyphenation desprirea cuvintelor n silabe
Linelenght - Lungimea rndului n cadrul
textului

Pentru o lectur optim, cel mai bine este s avem ntre 50 i 75 de litere ntr-un
singur rnd
Orfani i vduve




Evidenierea textului
- o facem prin schimbarea de stil a fontului selectat n caractere Italic
(cursive) sau Bold (ngroate).
- subliniere, rame, semne de evideiere, poziia, scris de mn, dingbats
Marginile
Grids
1. Folositi maxim 3 familii de fonturi
2. Font cu rol decorativ si ALL CAPS doar pentru text mic
3. Respectati spatierea
4. Evitati folosirea condensarii, expandarii si abstractizarii
5. Aliniati textul raportat la celalalte elemente din compozitie
6. Nu uitati lizibilitatea
7. Fiti moderat in utilizarea culorilor


Cum s alegem fonturile
i cum s le combin ntre ele n aa fel ncat s
creeze armonie? :D
ierarhie vast creat dintr-un singur typeface
Lizibilitatea - msoar abilitatea de a descifra ceva, n termeni tipografici msoar ct de
uor este s vedem diferena 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
Readability/cat de atractiv este textul
Entry
points/
punctele
de
focalizare
Drop Caps
Ce poate sa deranjeze lizibilitatea?
X-height, counter mai
mare ajut lizibilitatea
Ierarhia in design
organizarea vizual a textului
Ierarhia sistematizat conduce cititorul prin text
- Formeaz o structur predictibil bazat pe margini, imagini i tipografie
- folosete contrastul n:
Mrime
Greutate
Culoare
Orientare
Poziie
Creai-v un plan de coninut
Rspundei la ntrebrile:
Ce dorii s comunicai? cui?
mprii info. dup importan

www.Adobe.com
Fore distincte:
formal - informal
Simetric - asimetric
complex - simplu
Margini/grid ne ajut s organizm textul, s-i crem o structur
Gridul de 12 coloane rmne un clasic i se folosete la organizarea coninutului
revistelor, web site-urilor
Grid inegal coloane de diferite dimensiuni, complex dar organizat
Grid de 3 coloane
Grid de 5 coloane
http://www.w3schools.com/cssref/css_websafe_fonts.asp
Web Safe fonts
Ce ar trebui s evit n tipografie?
- Bold i italic artificial
Blog-uri, link-uri
Download Fonturi
http://www.myfonts.com/
http://www.dafont.com/
http://freetypography.com/

Articole
We Love Typography www.welovetypography.com
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

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
Woodtyper www.woodtyper.com
Letterpress Daily www.letterpress.dwolske.com
Ralf Herrmann: Wayfinding and Typography
www.opentype.info/blog