SlideShare a Scribd company logo
1 of 24
Typografi -  grundbegrepp
Två huvudfamiljer: antikva (serif) & linjärer (sans-serif)
Antikva/serif Skillnaden mellan antikva (serifer) och linjärer (sans-serifer) är just seriferna. A G  Adobe Garamond Pro
Linjär/sans-serif A  G  Saknar serifer Helvetica
Antikva/serif A G  Ytterligare en skillnad är skillnad mellan grundstreck och hårstreck Grundstreck Hårstreck
Mer terminologi För den som vill fördjupa sig i typografi finns det mycket terminologi. I denna kurs går vi inte så djupt, men här finns ett exempel hämtat från Christer Hellmarks bok: Bokstaven, ordet, texten
Indelning Det finns olika sätt att dela in de olika typsnitten. Här lånar vi i huvudsak terminologi och exempel från  Typografi och grafisk design  (en gammal upplaga)
Ytterligare indelning: Antikva 1) Diagonalantikva (geralder) Antikvorna delas in i ytterligare familjer. En av dem skildrar den historiska utvecklingen av antikvorna. Först kommer den äldsta: 1) Diagonalantikva (geralder) Kännetecken
Ytterligare indelning: Antikva 2) Transantikva (realer) Här följer ytterligare en antikva,  med rötter i 1700-talet. Diagonalen lutar inte lika mycket och de har fortfarande drag av handskrift. 2) Transantikva (realer) Kännetecken
Ytterligare indelning: Antikva 3) Vertikalantikva (didon) Ännu en antikva,  med rötter i sent 1700-tal och tidigt 1800-tal.  Stor skillnad mellan grund- och hårstreck. Serifferna tunna och horisontella. 3) Vertikalantikva (didon) Kännetecken
Ytterligare indelning: 4) Linjär, sans-serif (grotesk) Tidigare såg vi varianter av antikva. Här kommer  en helt annan familj – den saknar helt serifer. Hår- och grundstreck är jämntjocka. Den dyker upp under tidigt 1800-tal. 4) Linjär, sans-serif (grotesk) Kännetecken
Ytterligare indelning: 5) Mekan, egyptienn, (modern) Kom samtidigt som linjärer tidigt 1800-tal. Industrialismen hade behov av tydlig reklam. Känns igen på överdrivna seriffer. 5) Mekan, egyptienn (modern) Kännetecken: överdrivna seriffer Blackoak
Ytterligare indelning: 6) Skripter Kännetecknas av handskriftskaraktär (kalligrafi). Från Frankrike i slutet av 1600-talet (Ludvig XIV) 6) Skripter Kännetecken: liknar handstil Brush script
Ytterligare indelning: 7) Dekorativa Det finns gott om moderna typsnitt som är mycket fantasirika. De skulle kunna gå under en egen beteckning: 7) Dekorativa
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Indelningen:
Jämförelse Det går att dela in på olika sätt. Vi har sett på en traditionell indelning. En stor typografisajt på nätet ( dafont ) med mängder av typsnitt delar in på följande sätt:
Använda typsnitt Några ord om att använda typsnitt. När man använder typsnitt handlar det ofta om att bli medveten om kontraster. De kan byggas på olika sätt. Vi börjar med  storlek Den som surfar in på GP vet förmodligen vilken dag det är. Behöver inte betonas. Vad är viktigt? Gör det stort!
Använda typsnitt Typsnitt finns i olika varianter (vikter), normal,  kursiv ,  fet, KAPITÄL  m.m. Använd dessa för att förstärka kontrasten. (Enklare i tryck där man kan få fram fler nyanser är för skärm.) Exempel på fet rubrik och normal text. Man för in ytterligare en kontrast:  färg , för att signalera mellanrubrik. Vi tittar på några exempel från webben...
Använda typsnitt Vad kan vi säga om användningen av typsnitt här???
Använda typsnitt Grundregel: Växla mellan serif och sans-serif. Inte för lika typsnitt! Kontrastera med färg och storlek.
Använda typsnitt Vad händer  här?
Använda typsnitt Och här?
Tänk på ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Bye!

More Related Content

What's hot

10 Usability Heuristics for User Interface Design
10 Usability Heuristics for User Interface Design10 Usability Heuristics for User Interface Design
10 Usability Heuristics for User Interface DesignMaxx Crawford
 
Initiation méthodes UX en bibliothèque
Initiation méthodes UX en bibliothèqueInitiation méthodes UX en bibliothèque
Initiation méthodes UX en bibliothèqueNathalie Clot
 
Introduction to User Experience and User Interface Design: A One-Hour Crash C...
Introduction to User Experience and User Interface Design: A One-Hour Crash C...Introduction to User Experience and User Interface Design: A One-Hour Crash C...
Introduction to User Experience and User Interface Design: A One-Hour Crash C...Jason Hong
 
Basics of typography hierarchy
Basics of typography hierarchyBasics of typography hierarchy
Basics of typography hierarchyalfiyafalak
 
Design Thinking With Persona
Design Thinking With PersonaDesign Thinking With Persona
Design Thinking With PersonaFranki Chamaki
 
Heuristic Evaluation based on Nielsen's 10 Usability Heuristics
Heuristic Evaluation based on Nielsen's 10 Usability HeuristicsHeuristic Evaluation based on Nielsen's 10 Usability Heuristics
Heuristic Evaluation based on Nielsen's 10 Usability HeuristicsSebbe Isaac Kurian
 
UX Design Essential Theories
UX Design Essential TheoriesUX Design Essential Theories
UX Design Essential TheoriesRavi Bhadauria
 
First Principle Thinking for Transformation Assurance
First Principle Thinking for Transformation AssuranceFirst Principle Thinking for Transformation Assurance
First Principle Thinking for Transformation AssuranceChinedu Achara
 
Poster design Challenge
Poster design ChallengePoster design Challenge
Poster design Challengemissjessm
 
Service Design, una brevissima introduzione
Service Design, una brevissima introduzioneService Design, una brevissima introduzione
Service Design, una brevissima introduzioneDaniele Iori
 
The business value of UX/UI
The business value of UX/UI The business value of UX/UI
The business value of UX/UI Knoldus Inc.
 
Personas Demystified 1.0
Personas Demystified 1.0Personas Demystified 1.0
Personas Demystified 1.0Mo Goltz
 
What is UI/UX and the Difference
What is UI/UX and the DifferenceWhat is UI/UX and the Difference
What is UI/UX and the DifferenceVibloo
 
37 ways for innovation by combination
37 ways for innovation by combination37 ways for innovation by combination
37 ways for innovation by combinationMarc Heleven
 

What's hot (20)

10 Usability Heuristics for User Interface Design
10 Usability Heuristics for User Interface Design10 Usability Heuristics for User Interface Design
10 Usability Heuristics for User Interface Design
 
Initiation méthodes UX en bibliothèque
Initiation méthodes UX en bibliothèqueInitiation méthodes UX en bibliothèque
Initiation méthodes UX en bibliothèque
 
Introduction to User Experience and User Interface Design: A One-Hour Crash C...
Introduction to User Experience and User Interface Design: A One-Hour Crash C...Introduction to User Experience and User Interface Design: A One-Hour Crash C...
Introduction to User Experience and User Interface Design: A One-Hour Crash C...
 
Basics of typography hierarchy
Basics of typography hierarchyBasics of typography hierarchy
Basics of typography hierarchy
 
Design Thinking With Persona
Design Thinking With PersonaDesign Thinking With Persona
Design Thinking With Persona
 
Heuristic Evaluation based on Nielsen's 10 Usability Heuristics
Heuristic Evaluation based on Nielsen's 10 Usability HeuristicsHeuristic Evaluation based on Nielsen's 10 Usability Heuristics
Heuristic Evaluation based on Nielsen's 10 Usability Heuristics
 
The UX Interview
The UX InterviewThe UX Interview
The UX Interview
 
UX is not UI!
UX is not UI!UX is not UI!
UX is not UI!
 
UX Design Essential Theories
UX Design Essential TheoriesUX Design Essential Theories
UX Design Essential Theories
 
First Principle Thinking for Transformation Assurance
First Principle Thinking for Transformation AssuranceFirst Principle Thinking for Transformation Assurance
First Principle Thinking for Transformation Assurance
 
Poster design Challenge
Poster design ChallengePoster design Challenge
Poster design Challenge
 
UX Quiz
UX QuizUX Quiz
UX Quiz
 
Service Design, una brevissima introduzione
Service Design, una brevissima introduzioneService Design, una brevissima introduzione
Service Design, una brevissima introduzione
 
Prototyping and storyboarding.pptx
 Prototyping and storyboarding.pptx Prototyping and storyboarding.pptx
Prototyping and storyboarding.pptx
 
UX Best Practices
UX Best PracticesUX Best Practices
UX Best Practices
 
The business value of UX/UI
The business value of UX/UI The business value of UX/UI
The business value of UX/UI
 
UI/UX Fundamentals
UI/UX FundamentalsUI/UX Fundamentals
UI/UX Fundamentals
 
Personas Demystified 1.0
Personas Demystified 1.0Personas Demystified 1.0
Personas Demystified 1.0
 
What is UI/UX and the Difference
What is UI/UX and the DifferenceWhat is UI/UX and the Difference
What is UI/UX and the Difference
 
37 ways for innovation by combination
37 ways for innovation by combination37 ways for innovation by combination
37 ways for innovation by combination
 

Typografins grunder

  • 1. Typografi - grundbegrepp
  • 2. Två huvudfamiljer: antikva (serif) & linjärer (sans-serif)
  • 3. Antikva/serif Skillnaden mellan antikva (serifer) och linjärer (sans-serifer) är just seriferna. A G Adobe Garamond Pro
  • 4. Linjär/sans-serif A G Saknar serifer Helvetica
  • 5. Antikva/serif A G Ytterligare en skillnad är skillnad mellan grundstreck och hårstreck Grundstreck Hårstreck
  • 6. Mer terminologi För den som vill fördjupa sig i typografi finns det mycket terminologi. I denna kurs går vi inte så djupt, men här finns ett exempel hämtat från Christer Hellmarks bok: Bokstaven, ordet, texten
  • 7. Indelning Det finns olika sätt att dela in de olika typsnitten. Här lånar vi i huvudsak terminologi och exempel från Typografi och grafisk design (en gammal upplaga)
  • 8. Ytterligare indelning: Antikva 1) Diagonalantikva (geralder) Antikvorna delas in i ytterligare familjer. En av dem skildrar den historiska utvecklingen av antikvorna. Först kommer den äldsta: 1) Diagonalantikva (geralder) Kännetecken
  • 9. Ytterligare indelning: Antikva 2) Transantikva (realer) Här följer ytterligare en antikva, med rötter i 1700-talet. Diagonalen lutar inte lika mycket och de har fortfarande drag av handskrift. 2) Transantikva (realer) Kännetecken
  • 10. Ytterligare indelning: Antikva 3) Vertikalantikva (didon) Ännu en antikva, med rötter i sent 1700-tal och tidigt 1800-tal. Stor skillnad mellan grund- och hårstreck. Serifferna tunna och horisontella. 3) Vertikalantikva (didon) Kännetecken
  • 11. Ytterligare indelning: 4) Linjär, sans-serif (grotesk) Tidigare såg vi varianter av antikva. Här kommer en helt annan familj – den saknar helt serifer. Hår- och grundstreck är jämntjocka. Den dyker upp under tidigt 1800-tal. 4) Linjär, sans-serif (grotesk) Kännetecken
  • 12. Ytterligare indelning: 5) Mekan, egyptienn, (modern) Kom samtidigt som linjärer tidigt 1800-tal. Industrialismen hade behov av tydlig reklam. Känns igen på överdrivna seriffer. 5) Mekan, egyptienn (modern) Kännetecken: överdrivna seriffer Blackoak
  • 13. Ytterligare indelning: 6) Skripter Kännetecknas av handskriftskaraktär (kalligrafi). Från Frankrike i slutet av 1600-talet (Ludvig XIV) 6) Skripter Kännetecken: liknar handstil Brush script
  • 14. Ytterligare indelning: 7) Dekorativa Det finns gott om moderna typsnitt som är mycket fantasirika. De skulle kunna gå under en egen beteckning: 7) Dekorativa
  • 15.
  • 16. Jämförelse Det går att dela in på olika sätt. Vi har sett på en traditionell indelning. En stor typografisajt på nätet ( dafont ) med mängder av typsnitt delar in på följande sätt:
  • 17. Använda typsnitt Några ord om att använda typsnitt. När man använder typsnitt handlar det ofta om att bli medveten om kontraster. De kan byggas på olika sätt. Vi börjar med storlek Den som surfar in på GP vet förmodligen vilken dag det är. Behöver inte betonas. Vad är viktigt? Gör det stort!
  • 18. Använda typsnitt Typsnitt finns i olika varianter (vikter), normal, kursiv , fet, KAPITÄL m.m. Använd dessa för att förstärka kontrasten. (Enklare i tryck där man kan få fram fler nyanser är för skärm.) Exempel på fet rubrik och normal text. Man för in ytterligare en kontrast: färg , för att signalera mellanrubrik. Vi tittar på några exempel från webben...
  • 19. Använda typsnitt Vad kan vi säga om användningen av typsnitt här???
  • 20. Använda typsnitt Grundregel: Växla mellan serif och sans-serif. Inte för lika typsnitt! Kontrastera med färg och storlek.
  • 21. Använda typsnitt Vad händer här?
  • 23.
  • 24. Bye!