SlideShare a Scribd company logo
1 of 127
Webbtypografi
                        Peter Ström


torsdag 6 oktober 11
Konst & Teknik




torsdag 6 oktober 11
Konst & Teknik




torsdag 6 oktober 11
5 oktober 2011
    1. Webbsidans struktur
    2. Typografi på webben
    3. Webfonts / @font-face
    4. Blandat...
    5. Eventuell mer K&T
torsdag 6 oktober 11
1. Webbsidans struktur




torsdag 6 oktober 11
En (modern)
                       webbsidas struktur
    — Bild
    — Text / typografi
    — ’Multimedia’
    — Designelement
torsdag 6 oktober 11
1

                       3




                               2 4




torsdag 6 oktober 11
HTML — HyperText
                       Markup Language
               ’är ett märkspråk och webb-
                standard för strukturering
               av text, hypertext, media och
                    inbyggda objekt på
                exempelvis webbsidor och i
                    epostmeddelanden.’
torsdag 6 oktober 11
CSS — Cascading
                         Style Sheets
              ’Styr’ typografi och form
                av sidor från (oftast)
                    samma fil(er)

torsdag 6 oktober 11
Standards:
                       CSS, HTML


torsdag 6 oktober 11
CSS standards
    — CSS 1: 1996
    — CSS 2: 1998
    — CSS 3: ‘Under develop-
      ment since 15.12.05’

torsdag 6 oktober 11
HTML standards
    — HTML 1: 1990
    — HTML 2–4: 1995–1998
    — HTML 5: in progress...


torsdag 6 oktober 11
HTML 5
    — Drag and drop
    — Ljud
    — Video
    — SVG
    — (Webfonts)
    — med mera
torsdag 6 oktober 11
HTML 5
                              CSS 3
                       Båda under utveckling


torsdag 6 oktober 11
Flash (1996–)
                Program från Adobe för
                att skapa ’Rich Internet
                Applications’ i (främst)
                      vektorformat

torsdag 6 oktober 11
torsdag 6 oktober 11
Shockwave
                       Silverlight
                       Real Audio
                           ...


torsdag 6 oktober 11
Webbdesign:
             Design av system/mallar,
               inte ’färdiga’ sidor
                       (för det mesta)
torsdag 6 oktober 11
T ex:
                       Olika språk

                        Formulär

torsdag 6 oktober 11
Webbläsare
    — Chrome
    — Internet Explorer
    — Firefox
    — Opera
    — Safari
    — ...
torsdag 6 oktober 11
Operativsystem
    — Win: 95, 98, Vista, ...
    — OSX: 10.1 [...] 10.7
    — Linux
    — iOS
    — Android
    — ...
torsdag 6 oktober 11
Att tänka på
    — Olika browsers
    — Olika operativsystem
    — Mobiltelefoner
    — Uppkopplingar
    — ...
torsdag 6 oktober 11
2. Typografi på webben



torsdag 6 oktober 11
Webbtypsnittshistoria
                               (!)



torsdag 6 oktober 11
HyperText:
                       November 12, 1990




torsdag 6 oktober 11
torsdag 6 oktober 11
torsdag 6 oktober 11
Det har ’alltid’ gått att visa
     typsnitt på webben, men
    användaren har behövt ha
     typsnitten installerat i sin
                dator

torsdag 6 oktober 11
PC Windows 95

           Arial, Courier, Modern, MS
          Serif, MS Sans Serif, Smallfonts,
            Symbol, Times New Roman,
                   


torsdag 6 oktober 11
Mac OS
                            Baskerville
                            Big Caslon
                            Didot
                            Futura
                            Optima
                            ...
torsdag 6 oktober 11
Arial
                       1992


torsdag 6 oktober 11
Courier New
                       1955 (1992)


torsdag 6 oktober 11
Times (New Roman)
                          1931 (1992)


torsdag 6 oktober 11
Arial
                         Courier New
                       Times New Roman


torsdag 6 oktober 11
Core Fonts on the Web
                          1996
        Andale Mono, Arial, Comic
       Sans, Courier New, Georgia,
         Impact, Times New Roman,
          Trebuchet MS, Verdana,
              
torsdag 6 oktober 11
Georgia
                       ABCDEFGHIJKL
                       mnopqrstuvwxyz

                          Verdana
                       ABCDEFGHIJKL
                       mnopqrstuvwxyz

torsdag 6 oktober 11
Core Fonts on the Web
                          1996
                 1. Bra läsbarhet på
                    skärm
                 2. Blandade ’stilar’
                 3. Internationellt stöd

torsdag 6 oktober 11
ClearType
                       (Windows Vista)
                            2007
                         Calibri, Cambria,
                       Candara, Consolas,
                        Constantia, Corbel

torsdag 6 oktober 11
(Tidigare) alternativ
                 till medföljande typsnitt



torsdag 6 oktober 11
Alternativ 1:
                       Göra bilder av text
                        (.png, .gif, .jpg)
                        Fungerat sedan
                        bilder på WWW
torsdag 6 oktober 11
Text som bild
                        Nackdelar:
    — Ej sökbart
    — Svårt för t ex blinda
    — Tidskrävande
    — Text går inte att kopiera
    — Ej typografisk kontroll
torsdag 6 oktober 11
torsdag 6 oktober 11
Alternativ 2:
                              SIFR
                         Scalable Inman
                       Flash Replacement
                           ca 2003–
torsdag 6 oktober 11
torsdag 6 oktober 11
SIFR
             Fördelar:
    — Sökbart
    — Typografisk kontroll
    — Kopierbar text
    — Skalbart
    — Licenciering av typsnitt
    — Dynamisk inmatning
torsdag 6 oktober 11
SIFR
                       Nackdelar:
    — Kräver Flash
    — Fungerar inte på iOS etc

torsdag 6 oktober 11
Alternativ 3:
                          Cufon
                        ca 2008–

torsdag 6 oktober 11
torsdag 6 oktober 11
Cufon
                       Fördelar:
    — ’Typ’ markerbart
    — CSS-kopplat
    — Bra kantutjämning

torsdag 6 oktober 11
Cufon
                       Nackdelar:
    — Bara typ markerbart
    — Inte alltid lagligt
    — Kräver Javascript
    — Börjar avvecklas...
torsdag 6 oktober 11
Kantutjämning



torsdag 6 oktober 11
torsdag 6 oktober 11
Hinting
       Matematisk anpassning av
       hur ett typsnitt visas i på
        skärmen, baserat till en
         rastrerad (pixlig) grid

torsdag 6 oktober 11
torsdag 6 oktober 11
Hinting
    — Väldigt tidskrävande
      (dyrt)
    — På sikt onödigt?
    — Men i dagsläget
      nödvändigt
torsdag 6 oktober 11
3. Webfonts / @font-face


torsdag 6 oktober 11
Webfonts / @font-face
                       Standard för att visa
                        typsnitt på webben


torsdag 6 oktober 11
WOFF
                 Web Open Font Format
                        2009–

torsdag 6 oktober 11
@font-face
                       Förutom WOFF:
                 EOT (Internet Explorer)
                   TTF / OTF (Safari)
                       SVG (iOS)
torsdag 6 oktober 11
EOT, TTF/OTF, SVG
                            WOFF
                 Sedan sommaren 2011!

torsdag 6 oktober 11
The W3C commented that
         it expects WOFF to soon
        become the ‘single, intero-
           perable [font] format’
        supported by all browsers.
                 — Team Comment on
                ‘WOFF File Format 1.0’
                     Submission
torsdag 6 oktober 11
Enorm utveckling:
                        Typsnitten behövs
                       inte längre i datorn
                         hos besökaren!

torsdag 6 oktober 11
‘It’s finally happening’
                         Chris Lilley, W3C


torsdag 6 oktober 11
‘It’s an exciting time for
               typography on the web.
               It’s 1985 all over again.
                 New technology, new
                 ways to use type, and
               new fonts made specifi-
               cally for a new medium.’
                       Stephen Coles
torsdag 6 oktober 11
På tiden!!!



torsdag 6 oktober 11
’Vanliga’ typsnitt
                  Köper typsnitt (online),
                  laddar ner, installerar i
                         datorn.

torsdag 6 oktober 11
Webbtypsnitt
          Prenumererar på eller
        laddar upp på egen server


torsdag 6 oktober 11
@font-face



torsdag 6 oktober 11
torsdag 6 oktober 11
@font-face
    — Firefox 3.5+, sept 2009
    — IE 5+, 1999 (!)
    — Opera 10+, sept 2009
    — Chrome 4+, sept 2008
    — Safari 3.1+, mars 2008
    — iOS, Andriod 2.2+,
      BlackBerry OS 6
torsdag 6 oktober 11
WOFF
    — Firefox 3.6, jan 2010
    — IE 9, höst 2010
    — Opera 11, dec 2010
    — Chrome 6, sept 2010
    — Safari 5, juli 2011

torsdag 6 oktober 11
— Utvecklingen sker i takt
      med standarden (W3C)
    — Men man måste tänka
      på fallbacks tills vidare
      (EOT, TTF/OTF, SVG)

torsdag 6 oktober 11
Fördelar med text
    — quick and easy to style
    — it’s Google-friendly
    — can be translated
    — can be read out loud by
      accessibility devices
    — PDF/utskrift, instapaper
           http://imprint.printmag.com/design-thinking/the-future-of-web-fonts-is-
                                 sooner-than-it-used-to-be/

torsdag 6 oktober 11
torsdag 6 oktober 11
torsdag 6 oktober 11
torsdag 6 oktober 11
Typografi på nätet:
                          I framtiden...



torsdag 6 oktober 11
CSS / HTML
    — Kerning
    — Avstavning
    — Spalter
    — Rotation av text,
      bakgrundsbilder i text
    — mm
torsdag 6 oktober 11
OpenType
    — < 65,536 tecken
    — Utvecklats sedan 90-tal
                       Tidigare
    — Postscript/Truetype:
      256 tecken
torsdag 6 oktober 11
torsdag 6 oktober 11
Innebär
    — Fler tecken...
    — Automatiska ligaturer
    — Kapitäler
    — Massa $ℙℇci⟑lt ℂKℰn
    — Flera språk i samma
      typsnitt
torsdag 6 oktober 11
torsdag 6 oktober 11
⤺ När det där fungerar, ⤺
          kommer vi äntligen
        ha samma typografiska
          förutsättningar på
         webben som tidigare
           endast existerat
         när man jobbat med
              trycksaker
torsdag 6 oktober 11
Några exempel



torsdag 6 oktober 11
torsdag 6 oktober 11
torsdag 6 oktober 11
torsdag 6 oktober 11
torsdag 6 oktober 11
torsdag 6 oktober 11
4. Blandat...

torsdag 6 oktober 11
Mobiltelefoner...
    — iPad/iPhone
    — Android
    — Etc...

torsdag 6 oktober 11
torsdag 6 oktober 11
iPhone: 40 typsnitt
                        iPad: 57 typsnitt
    — iPhone & iPad stödjer
      @font-face embedding
    — Stöd för andra typsnitt
      i appar
torsdag 6 oktober 11
torsdag 6 oktober 11
Typsnitt Android
                          Droid Sans
                       Droid Sans Mono
                          Droid Serif

torsdag 6 oktober 11
torsdag 6 oktober 11
Webbläsarna i
                        Android & iOS
                       bygger på Webkit


torsdag 6 oktober 11
— Vanlig laptop: 72 dpi
    — iPad: ca 150 dpi
    — iPhone 4+: 320 dpi
    — Dagstidning: ca 150 dpi
    — Bok: 300< dpi

torsdag 6 oktober 11
torsdag 6 oktober 11
Nya användningssätt
    — Symboler
      ist för
      text


torsdag 6 oktober 11
torsdag 6 oktober 11
torsdag 6 oktober 11
torsdag 6 oktober 11
torsdag 6 oktober 11
Vad har det här betytt?



torsdag 6 oktober 11
Anpassa print-
                        typografin till
                          (standard)
                       webbtypografin


torsdag 6 oktober 11
torsdag 6 oktober 11
torsdag 6 oktober 11
torsdag 6 oktober 11
torsdag 6 oktober 11
torsdag 6 oktober 11
Bra resurser:
                   blog.typekit.com
               nicewebtype.tumblr.com
                   trentwalton.com
                       www.linkli.st/1typo
torsdag 6 oktober 11
5. Eventuell mer K&T?
torsdag 6 oktober 11
torsdag 6 oktober 11
torsdag 6 oktober 11
torsdag 6 oktober 11
torsdag 6 oktober 11
torsdag 6 oktober 11
Småländsk Antiqua
                       ABCDEFGHIJKLM
                       nopqrstuvwxyzåäö
                         1234567890

                       The quick brown fox
torsdag 6 oktober 11
Sapmi Grotesk

                       ABCDEFGHIJKLMNOP
                       qrstuvwxyzåäö 123456

       Just another quick BROWN fox
torsdag 6 oktober 11
Dutopia
                       ABCDEFGHIJKLM
                       nopqrstuvwxyzåäö
                          1234567890

                   The quick utopian fox
torsdag 6 oktober 11
SITE Specific
         Konsten att äta 1234569
          hamburgare på en gång
               ABCDEFGHIJKLM
                NOPQRSTUVW
               TEATRON Techno
torsdag 6 oktober 11
wwwwwwwwww
                        wwwwwwwwww
                       wwWwwwwww.se




torsdag 6 oktober 11
The JAnte Law

               1. Do think you’re special
              2. Do think you’re of the same stature as us
              3. Do think you’re wiser than us
             4. Do imagine yourself better than us
             5. Do think you have more knowledge
                than us
             6. Do think you’re more valuable than us
             7. Do think you’re good at everything
             8. Do think you’re qualified to laugh at us
             9. Do think everyone cares about you
            10. Do think you can teach us everything


                             by Konst & Teknik, 2010
                                                             Die Schrift unserer Zeit   Konst & Teknik 2009




torsdag 6 oktober 11
torsdag 6 oktober 11
Länkar och referenser:
                        www.linkli.st/1typo




torsdag 6 oktober 11
Tack!
                   www.konstochteknik.se
                       www.linkli.st/1typo

torsdag 6 oktober 11

More Related Content

Featured

2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by HubspotMarius Sescu
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTExpeed Software
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsPixeldarts
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthThinkNow
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfmarketingartwork
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024Neil Kimberley
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)contently
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsKurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summarySpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentLily Ray
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best PracticesVit Horky
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project managementMindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...RachelPearson36
 

Featured (20)

2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 

Webbtypografi @ Beckmans Akademin

  • 1. Webbtypografi Peter Ström torsdag 6 oktober 11
  • 2. Konst & Teknik torsdag 6 oktober 11
  • 3. Konst & Teknik torsdag 6 oktober 11
  • 4. 5 oktober 2011 1. Webbsidans struktur 2. Typografi på webben 3. Webfonts / @font-face 4. Blandat... 5. Eventuell mer K&T torsdag 6 oktober 11
  • 6. En (modern) webbsidas struktur — Bild — Text / typografi — ’Multimedia’ — Designelement torsdag 6 oktober 11
  • 7. 1 3 2 4 torsdag 6 oktober 11
  • 8. HTML — HyperText Markup Language ’är ett märkspråk och webb- standard för strukturering av text, hypertext, media och inbyggda objekt på exempelvis webbsidor och i epostmeddelanden.’ torsdag 6 oktober 11
  • 9. CSS — Cascading Style Sheets ’Styr’ typografi och form av sidor från (oftast) samma fil(er) torsdag 6 oktober 11
  • 10. Standards: CSS, HTML torsdag 6 oktober 11
  • 11. CSS standards — CSS 1: 1996 — CSS 2: 1998 — CSS 3: ‘Under develop- ment since 15.12.05’ torsdag 6 oktober 11
  • 12. HTML standards — HTML 1: 1990 — HTML 2–4: 1995–1998 — HTML 5: in progress... torsdag 6 oktober 11
  • 13. HTML 5 — Drag and drop — Ljud — Video — SVG — (Webfonts) — med mera torsdag 6 oktober 11
  • 14. HTML 5 CSS 3 Båda under utveckling torsdag 6 oktober 11
  • 15. Flash (1996–) Program från Adobe för att skapa ’Rich Internet Applications’ i (främst) vektorformat torsdag 6 oktober 11
  • 17. Shockwave Silverlight Real Audio ... torsdag 6 oktober 11
  • 18. Webbdesign: Design av system/mallar, inte ’färdiga’ sidor (för det mesta) torsdag 6 oktober 11
  • 19. T ex: Olika språk Formulär torsdag 6 oktober 11
  • 20. Webbläsare — Chrome — Internet Explorer — Firefox — Opera — Safari — ... torsdag 6 oktober 11
  • 21. Operativsystem — Win: 95, 98, Vista, ... — OSX: 10.1 [...] 10.7 — Linux — iOS — Android — ... torsdag 6 oktober 11
  • 22. Att tänka på — Olika browsers — Olika operativsystem — Mobiltelefoner — Uppkopplingar — ... torsdag 6 oktober 11
  • 23. 2. Typografi på webben torsdag 6 oktober 11
  • 24. Webbtypsnittshistoria (!) torsdag 6 oktober 11
  • 25. HyperText: November 12, 1990 torsdag 6 oktober 11
  • 28. Det har ’alltid’ gått att visa typsnitt på webben, men användaren har behövt ha typsnitten installerat i sin dator torsdag 6 oktober 11
  • 29. PC Windows 95 Arial, Courier, Modern, MS Serif, MS Sans Serif, Smallfonts, Symbol, Times New Roman,  torsdag 6 oktober 11
  • 30. Mac OS Baskerville Big Caslon Didot Futura Optima ... torsdag 6 oktober 11
  • 31. Arial 1992 torsdag 6 oktober 11
  • 32. Courier New 1955 (1992) torsdag 6 oktober 11
  • 33. Times (New Roman) 1931 (1992) torsdag 6 oktober 11
  • 34. Arial Courier New Times New Roman torsdag 6 oktober 11
  • 35. Core Fonts on the Web 1996 Andale Mono, Arial, Comic Sans, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana,  torsdag 6 oktober 11
  • 36. Georgia ABCDEFGHIJKL mnopqrstuvwxyz Verdana ABCDEFGHIJKL mnopqrstuvwxyz torsdag 6 oktober 11
  • 37. Core Fonts on the Web 1996 1. Bra läsbarhet på skärm 2. Blandade ’stilar’ 3. Internationellt stöd torsdag 6 oktober 11
  • 38. ClearType (Windows Vista) 2007 Calibri, Cambria, Candara, Consolas, Constantia, Corbel torsdag 6 oktober 11
  • 39. (Tidigare) alternativ till medföljande typsnitt torsdag 6 oktober 11
  • 40. Alternativ 1: Göra bilder av text (.png, .gif, .jpg) Fungerat sedan bilder på WWW torsdag 6 oktober 11
  • 41. Text som bild Nackdelar: — Ej sökbart — Svårt för t ex blinda — Tidskrävande — Text går inte att kopiera — Ej typografisk kontroll torsdag 6 oktober 11
  • 43. Alternativ 2: SIFR Scalable Inman Flash Replacement ca 2003– torsdag 6 oktober 11
  • 45. SIFR Fördelar: — Sökbart — Typografisk kontroll — Kopierbar text — Skalbart — Licenciering av typsnitt — Dynamisk inmatning torsdag 6 oktober 11
  • 46. SIFR Nackdelar: — Kräver Flash — Fungerar inte på iOS etc torsdag 6 oktober 11
  • 47. Alternativ 3: Cufon ca 2008– torsdag 6 oktober 11
  • 49. Cufon Fördelar: — ’Typ’ markerbart — CSS-kopplat — Bra kantutjämning torsdag 6 oktober 11
  • 50. Cufon Nackdelar: — Bara typ markerbart — Inte alltid lagligt — Kräver Javascript — Börjar avvecklas... torsdag 6 oktober 11
  • 53. Hinting Matematisk anpassning av hur ett typsnitt visas i på skärmen, baserat till en rastrerad (pixlig) grid torsdag 6 oktober 11
  • 55. Hinting — Väldigt tidskrävande (dyrt) — På sikt onödigt? — Men i dagsläget nödvändigt torsdag 6 oktober 11
  • 56. 3. Webfonts / @font-face torsdag 6 oktober 11
  • 57. Webfonts / @font-face Standard för att visa typsnitt på webben torsdag 6 oktober 11
  • 58. WOFF Web Open Font Format 2009– torsdag 6 oktober 11
  • 59. @font-face Förutom WOFF: EOT (Internet Explorer) TTF / OTF (Safari) SVG (iOS) torsdag 6 oktober 11
  • 60. EOT, TTF/OTF, SVG WOFF Sedan sommaren 2011! torsdag 6 oktober 11
  • 61. The W3C commented that it expects WOFF to soon become the ‘single, intero- perable [font] format’ supported by all browsers. — Team Comment on ‘WOFF File Format 1.0’ Submission torsdag 6 oktober 11
  • 62. Enorm utveckling: Typsnitten behövs inte längre i datorn hos besökaren! torsdag 6 oktober 11
  • 63. ‘It’s finally happening’ Chris Lilley, W3C torsdag 6 oktober 11
  • 64. ‘It’s an exciting time for typography on the web. It’s 1985 all over again. New technology, new ways to use type, and new fonts made specifi- cally for a new medium.’ Stephen Coles torsdag 6 oktober 11
  • 66. ’Vanliga’ typsnitt Köper typsnitt (online), laddar ner, installerar i datorn. torsdag 6 oktober 11
  • 67. Webbtypsnitt Prenumererar på eller laddar upp på egen server torsdag 6 oktober 11
  • 70. @font-face — Firefox 3.5+, sept 2009 — IE 5+, 1999 (!) — Opera 10+, sept 2009 — Chrome 4+, sept 2008 — Safari 3.1+, mars 2008 — iOS, Andriod 2.2+, BlackBerry OS 6 torsdag 6 oktober 11
  • 71. WOFF — Firefox 3.6, jan 2010 — IE 9, höst 2010 — Opera 11, dec 2010 — Chrome 6, sept 2010 — Safari 5, juli 2011 torsdag 6 oktober 11
  • 72. — Utvecklingen sker i takt med standarden (W3C) — Men man måste tänka på fallbacks tills vidare (EOT, TTF/OTF, SVG) torsdag 6 oktober 11
  • 73. Fördelar med text — quick and easy to style — it’s Google-friendly — can be translated — can be read out loud by accessibility devices — PDF/utskrift, instapaper http://imprint.printmag.com/design-thinking/the-future-of-web-fonts-is- sooner-than-it-used-to-be/ torsdag 6 oktober 11
  • 77. Typografi på nätet: I framtiden... torsdag 6 oktober 11
  • 78. CSS / HTML — Kerning — Avstavning — Spalter — Rotation av text, bakgrundsbilder i text — mm torsdag 6 oktober 11
  • 79. OpenType — < 65,536 tecken — Utvecklats sedan 90-tal Tidigare — Postscript/Truetype: 256 tecken torsdag 6 oktober 11
  • 81. Innebär — Fler tecken... — Automatiska ligaturer — Kapitäler — Massa $ℙℇci⟑lt ℂKℰn — Flera språk i samma typsnitt torsdag 6 oktober 11
  • 83. ⤺ När det där fungerar, ⤺ kommer vi äntligen ha samma typografiska förutsättningar på webben som tidigare endast existerat när man jobbat med trycksaker torsdag 6 oktober 11
  • 91. Mobiltelefoner... — iPad/iPhone — Android — Etc... torsdag 6 oktober 11
  • 93. iPhone: 40 typsnitt iPad: 57 typsnitt — iPhone & iPad stödjer @font-face embedding — Stöd för andra typsnitt i appar torsdag 6 oktober 11
  • 95. Typsnitt Android Droid Sans Droid Sans Mono Droid Serif torsdag 6 oktober 11
  • 97. Webbläsarna i Android & iOS bygger på Webkit torsdag 6 oktober 11
  • 98. — Vanlig laptop: 72 dpi — iPad: ca 150 dpi — iPhone 4+: 320 dpi — Dagstidning: ca 150 dpi — Bok: 300< dpi torsdag 6 oktober 11
  • 100. Nya användningssätt — Symboler ist för text torsdag 6 oktober 11
  • 105. Vad har det här betytt? torsdag 6 oktober 11
  • 106. Anpassa print- typografin till (standard) webbtypografin torsdag 6 oktober 11
  • 112. Bra resurser: blog.typekit.com nicewebtype.tumblr.com trentwalton.com www.linkli.st/1typo torsdag 6 oktober 11
  • 113. 5. Eventuell mer K&T? torsdag 6 oktober 11
  • 119. Småländsk Antiqua ABCDEFGHIJKLM nopqrstuvwxyzåäö 1234567890 The quick brown fox torsdag 6 oktober 11
  • 120. Sapmi Grotesk ABCDEFGHIJKLMNOP qrstuvwxyzåäö 123456 Just another quick BROWN fox torsdag 6 oktober 11
  • 121. Dutopia ABCDEFGHIJKLM nopqrstuvwxyzåäö 1234567890 The quick utopian fox torsdag 6 oktober 11
  • 122. SITE Specific Konsten att äta 1234569 hamburgare på en gång ABCDEFGHIJKLM NOPQRSTUVW TEATRON Techno torsdag 6 oktober 11
  • 123. wwwwwwwwww wwwwwwwwww wwWwwwwww.se torsdag 6 oktober 11
  • 124. The JAnte Law 1. Do think you’re special 2. Do think you’re of the same stature as us 3. Do think you’re wiser than us 4. Do imagine yourself better than us 5. Do think you have more knowledge than us 6. Do think you’re more valuable than us 7. Do think you’re good at everything 8. Do think you’re qualified to laugh at us 9. Do think everyone cares about you 10. Do think you can teach us everything by Konst & Teknik, 2010 Die Schrift unserer Zeit Konst & Teknik 2009 torsdag 6 oktober 11
  • 126. Länkar och referenser: www.linkli.st/1typo torsdag 6 oktober 11
  • 127. Tack! www.konstochteknik.se www.linkli.st/1typo torsdag 6 oktober 11