Typografi.

En presentation över ämnet: "Typografi."— Presentationens avskrift:

1 Typografi

2 Läran om bokstavsformerna och dess användning
Typografi – Läran om bokstavsformerna och dess användning Teckensnitt – typsnitt - font

3 Ögat och hjärnan påverkas av textens uttryck och läsbarhet
TYPOGRAFI Hur läser vi? Vi bildar ordbilder (hjärnan känner igen ordbilder genom att göra fixeringspunkter i textraderna) Vad läser vi? Ögat och hjärnan påverkas av textens uttryck och läsbarhet Kultur och vanor påverkar hur innehållet tolkas

4 Formge text med god läsbarhet
VAD handlar texten om? VARFÖR ska den läsas? VEM ska läsa den? Under VILKA omständigheter? Målgruppsanpassa typografin

5 TYPOGRAFI Valet av typsnitt påverkar oss Typsnittet/bokstäverna förmedlar känslor, tankar och information: Karaktären på typsnitt i trycksaken, annonsen eller på profilprogrammet påverkar våra känslor och uppfattningar Typsnittet i en bok är valt med tanke på läsbarhet Typsnittet i ett företags profil visar företagets image Aktiv/synlig eller tyst/osynlig typografi

6 TYPOGRAFI Tyst/osynlig typografi: Den klassiska modellen Innehållet är viktigare än estetiken Tidlöshet och trovärdighet Stramhet, enhetlighet och igenkännande typografi Repetering och regelbundenhet Val av typsnitt, rubriker, format, satsyta, spalter etc identifierar trycksaken Bild och text varierar medan typografin står i bakgrunden Används gärna i böcker, rapporter, kataloger, tidningar

7 TYPOGRAFI Aktiv/synlig typografi: AIDA - attention, interest, demand and action. Synas för att väcka intresse och behov Rycka tag i och skapa uppmärksamhet Nya typsnitt, djärva rubriker, stora anfanger och överraskande moment och dekor Gärna bryta typografiska regler I en tidning kan varje artikel vara unik Uttrycket - lånat från reklamvärldens formspråk

8 A och O – skapa en attraherande och orienterande helhet!
TYPOGRAFI Att jobba grafisk handlar om att skapa en grafisk helhet - att ge form åt budskapet. A och O – skapa en attraherande och orienterande helhet! Text, bild och form samverkar till en enhet för att förklara eller beskriva något Texten i ett sammanhang kan delas in i flera viktiga delar som typograferas på olika sätt men oftast med samma typsnitt i grunden (ett två eller max tre typsnitt…)

9 Antikva Sanserif TYPOGRAFI typsnittsfamiljerna
Huvudfamiljerna Antikva och Linjärer Antikva Diagonalantikva - mjukare rundare serifer - Bembo, Berling, Garamond… Transantikva - spetsigare mer kontrast - Baskerville, Caslon, Caledonia… Vertikalantikver - nyantikva, raka klackar - Didot, Bodoni… Sanserif Funktionalismens typsnitt - Franklin, Futura, Gill, Helvetica

10 Antikva Har seriffer Växlande rytm med tunna hårstreck och tjocka grundstreck Ger baslinje som är lätt för ögat att följa Skapar tydlig ordbild

11 Sanseriff linjär grotesk
Inga seriffer Jämntjocka linjer

12 Mekaner Blandning mellan antikva och sanseriff med jämntjocka linjer och seriffer

13 TYPOGRAFI typsnittsfamiljerna Övriga familjer Skripter Fantasistilar

14 Teckensnittsvarianter
VERSALER gemener Rak/normal Kursiv Fet KAPITÄLER (Små versaler) Etc…

15 TYPOGRAFI textinnehåll Rubriken: ska fånga in läsaren Ingressen: sammanfattar och beskriver Brödtexten/löptexten: textinnehållet, framställning av ämnet Mellanrubriken: delar upp texten och gör texten lättare att hitta och förstå Bildtexten: hjälper oss att tolka bilden Bildtextrubriken: lockar till att läsa bildtexten. Lösorden/text i bild: förklarar Citatet: illustrerar verbalt budskapet Verbogram: olika textförstärkningar i tabeller tex

16 RUBRIK Den typografiska startpunkten. Ska avvika
RUBRIK Den typografiska startpunkten. Ska avvika. Mellanrubrik Slags punktform som ska ge överblick. Måste ha tydlig kontrast mot brödtexten. Ska alltid ligga närmare den text den tillhör än den ovan-liggande Nytt stycke markeras alltid med fyrkants indrag i normal brödtext. Aldrig radbrytning över fyrkants indrag!

17 TYPOGRAFI grundbegrepp Kägel - radavstånd i text (blytypens höjd)
Skärning - olika versioner av ett typsnitt Fyrkant - typografiskt mått och teoretiskt fyrkants indrag Brödtext - löpande berättande informativ textmassa Vänsterjusterad text Högerjusterad text Centrerad text Marginaljusterad text Anfang - görs ibland i början av stycke som utsmyckning Horungar - en textrad som hamnar ensam på nästa spalt t ex

18 Det mest förbjudna! Horungar! Förutom att texten självklart måste vara rättstavad så är det mest förbjudna att inte fixa till sina horungar. Detta är ett exempel på en horunge, dvs när ett stycke slutar med ett eller få ord överst i ny spalt.

19 TYPOGRAFI rubriker - regler att tänka på (eller bryta mot) Inte för många rader i rubrik 3-4 max, hellre en förklarande ingress Ingen punkt i rubrik (!?) Inga avstavningar Inga rubriker på full radbredd Ingen lek med olika storlek för samma radbredd - bara om orden tillåter Rubrik ska passa, harmoniera med eller komplettera brödtext Logiskt tänkande vad gäller avstånd mellan rubrik och text - vad hör ihop? Inget indrag direkt efter rubrik - bara som styckeavdelare

20 TYPOGRAFI enkla basregler
Välj lättlästa och tydliga typsnitt som ger tydliga ordbilder Blanda inte olika typsnitt och grad - ger rörigt intryck Välj grad på rubrik och mellanrubrik som harmonierar med brödtextens uttryck Textraderna bör ej vara för långa (55-65 tecken) svårt att följa med i text Radavståndet ofta 20% större än grad, vid breda rader större avstånd Textraderna bör ej vara för korta, avstavningar kan göra texten svårläst (35-45 tecken/rad) Marginaljusterad text kan göra för stora avstånd mellan ord och bli svårläst Optiska utjämningen i rubriker är viktig för att hålla ihop orden Brödtexten ska ge ett jämnt och lugnt intryck, justeras med knipning eller kerning Kolla avstavningar, skiljetecken, specialtecken, förkortningar och siffror

21 TYPOGRAFI lättläst text Teckensnitt - Antikva eller Sanserifer Gemena
Versaler Teckengrad Negativ eller positiv text Färg, papper eller skärm Språket, innehållet, läsaren Mellanrubrik Indrag eller blankrad Kursiv (inte så bra i web) eller halvfet,fet (bättre i web) Kapitäler (inte så bra i web)

22 TYPOGRAFI arbeta med text Kerning minskar eller ökar avståndet mellan bokstäver för att skapa en bättre ordbild vid bokstavspar t ex i rubrik Knipning minskar proportionerligt avståndet mellan bokstäver i en text Spärrning ökar mellanrummen i ett eller några ord lika mycket Optisk utjämning, egna ögat avgör avståndet som görs manuellt

23 TVÅL SENAP Tillriktning S P Ä R R A
Öka mellanrummet mellan varje bokstav (aldrig gemener) Kerning Öka eller minska avståndet mellan enstaka bokstäver. Vissa bokstavskombinationer är ovänner! TVÅL SENAP

24 Hur märker man ut ord i tryckt text?
Anfang Markerar början på en text Kursiv vanligast, tydlig och elegant Halvfet kraftfullt, effektivt i faktaböcker Kapitäler ELEGANT, VERSALER PÅ GEMEN HÖJD Aldrig fet eller VERSALT

25 Hur märker man ut ord på webb?
Använd aldrig kursiv Halvfet eller fet – bäst!

26 Kom ihåg! 5 faktorer vad gäller läsbarhet - trycksak
Teckensnitt, typsnitt, (font) Teckengrad = punktstorlek Radlängd = spaltbredd/satsbredd Radavstånd = Kägel Papprets färg/struktur

27 Läsbarhet för skärm Samma som för papper ungefär med ett viktigt undantag: Använd ÖPPEN SANSERIFF Verdana Arial är OK OM antikva: Georgia 11 pixlar normal textstorlek

28 Läsbarhet på skärm Typsnitt - Använd sanserif (eller antikvatypsnitt anpassat för webb) Välj hög x-höjd Öppet typsnitt Breda typsnitt * Korta textstycken

29 Layout

30 Det symmetriska TYPOGRAFI & LAYOUT
typografisk helhet - tre formgivningsprinciper Det symmetriska Man låter rubriker och texter orienteras kring en vertikal axel för att få harmoni och elegans

31 Det asymmetriska TYPOGRAFI & LAYOUT
typografisk helhet - tre formgivningsprinciper Det asymmetriska Dynamiskt arrangemang med vänster eller högerställd texter och rubriker. Diagonala former skapar livfullhet

32 Det kontrastrika Storlekskontrast stor teckengrad mot en liten
TYPOGRAFI & Layout typografisk helhet - tre formgivningsprinciper Det kontrastrika Det starkaste typografiska arrangemanget som talat direkt till mottagaren. (gärna i kombination med det assymetriska) Storlekskontrast stor teckengrad mot en liten Styrkekontrast en kraftfull fet bokstav mot en mager FORMKONTRAST en rak versal mot kursiva gemener Färgkontrast rubrik i färg mot brödtext svart eller vit

33 LAYOUT optiska mittpunkten
Exakta mittpunkten på en yta är inte den optiska mittpunkten som känns rätt för ögat - bilden eller texten upplevs som hängande Lite ovanför känns mer rätt och skapar balans och harmoni Den optiska mittpunkten

34 gyllene snittet - greken Euklides 300 talet f Kr
LAYOUT gyllene snittet - greken Euklides 300 talet f Kr Gyllene snittet ger harmoniska proportioner och är användbart i visuell kommunikation, typografi och design På ett pedagogiskt sätt - 1 : 2 : 3 : 5 : 8 : 13 : 21 osv - summan av de två föregående talen bildar nästa Detta ger det mest harmoniska förhållandet mellan bredd och längd och t ex mellan rubriker och text