Tipográfia. Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html

Méret: px

Mutatás kezdődik a ... oldaltól:

Download "Tipográfia. Tananyagok motion design, webdesign, interface design témákban: timetodesign.hu/tananyag.html"

Róbert Székely
8 évvel ezelőtt
Látták:

1 Tipográfia Tananyagok motion design, webdesign, interface design témákban:

2 Betűtípus-osztályozás

3 Velencei reneszánsz antikva Centaur, Nicholas Jenson, XV. sz. erőteljes, egyenletes íráskép még nem olyan tudatos, geometrikus konstrukció

4 Francia reneszánsz antikva Garamond, Claude Garamont, XVI. sz. nyugodtabb írásképp a mai napig sok változatát használják

6 Barokk antikva Baskerville, XVIII. sz. még érzékelhető rajta a lúdtoll, de a rézmetszés hatása is nagyobb kisbetűk nyitottabb íráskép, kisebb betűméretekkel is használható

7 Klasszicista antikva Didot, XVIII. sz. vége réz és acélmetszés határozzák meg a tipográfiát vízszintesen és függőlegesen igazítva -> kemény és szigorú erős függőleges oszlopok

8 Lineáris antikvák a 19. sz. elején teret nyertek a hangsúlyos talpú lineáris betűk feltűnő reklámfeliratok igénye Egyptians : Clarendon, Slap serif, írógép-betűk

9 Clarendon nagyon erős, csepp alakú talpak markáns, erős íráskép plakátokhoz alkalmas

10 Slap serifs (itt: Rockwell) ipari forradalom korában kör- és négyzet-orientáltsága miatt igen konstruált jellegű négyzetes talpak, alig vannak lekerekítések

11 Írógépbetűk (itt: Courier) Typewriter types, Monospace minden írásjel egyenlő széles, azonos függőleges és vízszintes vonalvastagságok ritmus nélküli, technikai

12 Talp nélküli antikvák a 19. sz. elején az ipari forradalom racionalizáló szelleme négyzeteken és körökön alapuló betűket hozott

13 Gill egyes betűkön még látszik a változó szélességű tollvonás minden vonal közel azonos vastagságú

14 Bauhaus Bauhaus, Futura, Avenir mértani alapidomok alapján konstruálva nincs különbség vízszintes és függőleges vonalak között kevésbé jól olvasható; leginkább fejezetcímekhez

15 Helvetica mérsékeltebb, időtlenebb magasabb kisbetűk Univers, Arial

16 Antikva variánsok: Arnold Böcklin Jugendstil, növény-ornamentika a dekoráció áll előtérben, nem a jó olvashatóság

17 Antikva variánsok: FF blur technikai hiba által alakult ki egy Helveticából 90-es évek: digitális sampling, effektezés, keverés (David Carson)

18 Kézírások a latin hivatali betűk hatására egyéni kézírásokból és művészi betűtípus-vázlatokból lendületes nagybetűk Poetica, Zapfino, Linoscript, Mistral, Künstler Script

19 Künstler Script kötések azonos magasságban

20 Kézírásos antikvák nincs szigorú rendszer hangsúlyos kézírásszerű eredetiség Pl. Arcona, Kaufmann, Mistral, Pepita, Tekton belső variáció a digitális technikának köszönhetően

21 Arcona

22 Tört vonalú betűk ma már csak fejezetcímekben Gótikus, kerek gótikus, Schwabacher, Fraktur, Fraktur-variáns

23 Gothisch a kis betűk kerek formái meg vannak törve igen keskeny kisbetűk; nagybetűk sok formából belső hézagok = betűközök > hosszúkás; szigor

24 Fette Fraktur a függőleges vonalak vastagabbak, mint a belső hézagok és a betűközök Hasonlók: Unger-Fraktur, Walbaum-Fraktur

25 Betűcsaládok Talpas (serif) Groteszk (sans serif) Monospace Kézírásos (Handwriting) Georgia Open Sans Courier New Künstler Script Windings

26 Betűtípusok

27 Betűstílusok Vastagság Szélesség (narrow, codensed, wide / extended) Egyenes / dőlt

28 Formátumok OpenType: platform-független PostScript: Windowsra és ios-re külön-külön kell megvenni TrueType: platform-független; korábban használata PDF-ben korlátozott volt

29 Tipográfiai fogalmak

30 Glifák

31 Glifák Egy betűtípus összes írásjelének áttekintése.

32 Ligatúrák Betűkapcsolatok, ahol a betűk összetalálkoznának.

33 Anatómia

34 Méret Kiadványszerkesztők: pt (0,352 mm) A sortávolság A sorok közötti távolság; a két szövegsor alapvonala között pt-ben vett távolság. A sorok közötti távolság; a két szövegsor alapvonala között pt-ben vett távolság.

35 Spacionálás, Betűköz A betűköz a szöveg betűinek egységes távolsága. A betűköz a szöveg betűinek egységes távolsága.

36 Spacionálás, Betűköz Tipográfia Tipográfia

37 Kerning

38 Kerning

39 A layouting-programok képesek ligatúrákra optikai betűközökre a betűméret, a betűköz és a sorköz dinamikus változtatására soronként iniciálékra (csak kép-körülfuttatással) A böngészők nem.

40 Kiemelések Im Winter hatte dieses Vergnügen ein Ende. Die Fenster waren oft ganz zugefroren; aber dann wärmten sie Kupferschillinge auf dem Ofen und legten den warmen Schilling gegen die gefrorene Scheibe; dadurch entstand ein schönes Guckloch, so rund, so rund; dahinter blitzte ein lieblich mildes Auge, eines vor jedem Fenster; das war der kleine Knabe und das kleine Mädchen. Er hieß KAY, und sie hieß GERDA. Im Sommer konnten sie mit einem Sprunge zueinander gelangen; im Winter mußten sie erst die vielen Treppen herunter und die Treppen hinauf; draußen stob der Schnee.

41 Címsorok Balra zárt: jólstrukturált Jobbra zárt: kiemelés Bal és jobb: dinamika Centírozott cím: erős középtengely

42 Folyószöveg Jobbra zárt: kellemetlen Elválasztások: keskeny oszlopoknál fontos

43 Folyószöveg Sorközök: kicsit nagyobb, mint a betűméret Groteszk: erőteljesebb, mert a kisbetűk nagyobbak kisebb betűméret és/vagy nagyobb sorköz

44 Tippek

45 Tippek 1. Klasszikus betűcsaládokból választani. 2. Kevés betűtípus használata: 2, max. 3 betű- TÍPUS, betű-stílusok takarékos bevetése. 3. Egységes külalak tartása. A heterogén íráskép zavarja az OLVASÓT.

46 Tippek 5. Túl hasonló betűtípusok kombinálásának kerülése. Garamond Times New Roman 6. Egészen eltérő érzelmekre indító betűtípusok kombinálásának kerülése. Algerian Mistral Cooper Black 7. VERZÁLIÁKBÓL ÁLLÓ BETŰTÍPUSOKAT CSAK RÖVID, JELENTŐSÉGTELJES SZÖVEGRÉSZEKHEZ HASZNÁLNI.

47 Tippek 7. Olvasható betűméretek: folyószöveghez min. 9pt max. 12pt 8. Kerning; betűközök kiegyensúlyozása

48 Tippek 9. Ügyeljünk az igazításra Ha túl keskeny oszloppal dolgozunk, a sorkizárás kevéssé alkalmas, mert sok hézag keletkezik, ami a szemnek változó olvasási tempót diktál. Balra zárt szövegnél a jobb oldal ugyan nincs kiegyenesítve, de az íráskép egységesebbnek hat, és általában kellemesebb.

49 Tippek 10.A kontraszt használata. Ideális esetben a szöveg színe jól elválik a háttérétől. Ilyen szemrontó feladványokat ne adjunk.

50 Tippek 11.Soha ne torzítsuk a szöveget.

51 Tippek 12.Kerülendő! Fattyúsor (özvegysor) Árvasor (suszterinas)

52 Tippek 13.Aláhúzások kerülése. Sokkal jobb lehetőségek vannak egy szövegrész kiemelésére. Sokkal jobb lehetőségek vannak egy szövegrész kiemelésére. 14.Bizonyos betűtípusok kerülése. Comic Sans Hű, de kafa

54 Tippek 15.A szabályok megszegése. Ha megértettük, miért alakult ki egy szabály, akkor megszegését design-motívumként tudatosan bevethetjük.

55 A MEGFELELŐ BETŰTÍPUS-MIX Fejezetcím Folyószöveg

56 1. Az ellentétek vonzzák egymást. Eltérő stílusok, méretek, igazítások, stb.

57 2. Családban marad. Különböző betűstílusokkal (félkövér, dőlt, vékony, sűrített) kontrasztot alkotni.

58 3. Mix & Match Talpas és groteszk kombinálása. Szerepcsere.

59 4. A hangulatok egyezése Kép és tipográfia erősítsék egymást.

61 Példák

Hasonló dokumentumok

Multimédia 2. Tipográfiai alapfogalmak A betű Számítógépes karakterek

Multimédia 2. Tipográfiai alapfogalmak A betű Számítógépes karakterek Tipográfia Eredeti (görög) jelentés: τυπος (tüposz): vert vagy vésett ábra, minta, γραψω (gráfó): írni kb. típusokkal írni. A szöveges