SlideShare ist ein Scribd-Unternehmen logo
Web
typografie
Mehr als Arial oder Helvetica
web-typografie martin hahn 2010




                 Typografie für digitale Texte

                 Typografie bezweckt, Texte lesbar und verständlich
                 sowie optisch ansprechend zu präsentieren.«
                                                               Wikipedia
Status quo
web-typografie martin hahn 2010
web-typografie martin hahn 2010
web-typografie martin hahn 2010




             Kommt einem irgendwie bekannt vor…
web-typografie martin hahn 2010




             Status quo
             Webdesign & Webtypografie
             Konzentration auf Farben, Bilder, Anordung  Inhalte.
             Typografische Gestaltung  Regeln werden mißachtet.


             BAD BAD TYPO
Die Folgen...
web-typografie martin hahn 2010




    „User wollen keine Texte lesen!“
Also besser machen!
was?
web-typografie martin hahn 2010




                       Am Anfang...




                                      war die Lesbarkeit.
web-typografie martin hahn 2010




                             Readability:

                              Texte organisieren!

                              Texte scanbar machen!

                              Texte lesbar machen!

                              Auszeichnungen einsetzen
wie?
Makrotypografie
Das große Ganze sehen.
web-typografie martin hahn 2010




                        Texte organisieren
                        Content Usability
                            Inhalt kürzen, Inhalt kürzen, Inhalt kürzen.
                            Nutzlose Wörter weglassen.
                            Objektive, einfache Sprache verwenden.
                            Schlüsselwörter benutzen.
                            Keine Rechtschreib-  Grammatikfehler.
web-typografie martin hahn 2010
web-typografie martin hahn 2010




        Pageflow 
        Readability
web-typografie martin hahn 2010
web-typografie martin hahn 2010
web-typografie martin hahn 2010
web-typografie martin hahn 2010




                                  Raster / Spalten
web-typografie martin hahn 2010




             http://960.gs                               http://gridinator.com
             http://www.spry-soft.com/grids              http://www.gridsystemgenerator.com
             http://www.grafikk.co.uk/gridmaker          http://speckyboy.com/2009/07/15/50-useful-
             http://www.andrewingram.net/articles/   tools-and-generators-for-easy-css-development/
         gridmaker_for_photoshop_cs4
web-typografie martin hahn 2010




                     Grundlinienraster
                      Im Print Standard, im Web ein Fremdwort.
                      Vertikale Ausrichtung der Inhalte.
web-typografie martin hahn 2010




  http://baselinecss.com
  http://www.alistapart.com/articles/settingtypeontheweb
  http://css-tricks.com/typographic-grid
web-typografie martin hahn 2010




           Think vertical
            Ausreichend Zeilenabstand
            Abstand zwischen Absätzen
            Abstand zu Überschriften
web-typografie martin hahn 2010




                          Artikel klar gliedern
web-typografie martin hahn 2010




                     Weißraum
                      Hilft die Seite zu strukturieren.
                      Bietet dem User Orientierung.
                      Zeigt inhaltliche Zusammenhänge auf.
web-typografie martin hahn 2010
web-typografie martin hahn 2010
mikrotypografie
Ins Detail gehen.
web-typografie martin hahn 2010




               Textauszeichnungen
                   Schriftgröße
                   Schriftart
                   Schriftfarbe
                   Schriftschnitt
                   Versalien
                   Hintergrundfarbe
web-typografie martin hahn 2010
web-typografie martin hahn 2010
web-typografie martin hahn 2010




                              Auszeichnungen...
                              erhöhen die Lesbarkeit.
                              strukturieren die Seite.
                              stellen Inhaltliches heraus.
Fontastisch!
Schriftarten  -techniken
web-typografie martin hahn 2010




          Variante Systemschriften
          Einfach mal den kleinsten gemeinsamen Nenner erhöhen.


Gill Sans Georgia Impact Trebuchet MS Copperplate
Tahoma Lucida Console Palatino Baskerville Optima
                                                ..und so ein paar Windows-Dinger...



           http://www.typetester.org
           http://flippingtypical.com
web-typografie martin hahn 2010




          Variante Text als Bild
          “Wir müssen unsere Hausschrift benutzen!”
web-typografie martin hahn 2010




                          Variante Webfont-Services
                           Neue Schriften braucht das Land.
web-typografie martin hahn 2010




                         http://typeface.neocracy.org
                         http://typekit.com
                         http://www.mikeindustries.com/blog/sifr
                         http://cufon.shoqolate.com/generate
                         http://www.fontsquirrel.com
                         http://code.google.com/webfonts
                         http://webfonts.fonts.com
                         http://www.typotheque.com/webfonts
                         http://www.fontslive.com
                         http://fontdeck.com
                         http://www.extensis.com/en/WebINK
typo als
gestaltungsmittel
web-typografie martin hahn 2010
web-typografie martin hahn 2010
web-typografie martin hahn 2010
web-typografie martin hahn 2010
web-typografie martin hahn 2010
web-typografie martin hahn 2010
und warum?
web-typografie martin hahn 2010




          Schlechte Typo Gute Typo
                                  unorganisiert
                                  unstrukturiert
                                  unlesbar
web-typografie martin hahn 2010




                          Gute Typografie kann den
                        Unterschied machen zwischen

                              verstehen oder mißverstehen
                 mit Inhalt beschäftigen oder Inhalt ignorieren
                                 Freude oder Enttäuschung
Typography is not on the Web,
  it is the Web.
                Mark Boulton, FOWD London 2009
danke sagt
martin hahn
hahnsinn.de
martin@hahnsinn.de
slideshare.net/hahnsinn

Weitere ähnliche Inhalte

Was ist angesagt?

Use of Lists and Tables in HTML
Use of Lists and Tables in HTMLUse of Lists and Tables in HTML
Use of Lists and Tables in HTML
PrakritiDhang
 
How Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) WorksHow Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) Works
Amit Tyagi
 
Sass presentation
Sass presentationSass presentation
CSS Introduction
CSS IntroductionCSS Introduction
CSS Introduction
Swati Sharma
 
CSS Dasar #3 : Penempatan CSS
CSS Dasar #3 : Penempatan CSSCSS Dasar #3 : Penempatan CSS
CSS Dasar #3 : Penempatan CSS
Sandhika Galih
 
Presentación stylus
Presentación   stylusPresentación   stylus
Presentación stylus
iOS23
 
html complete notes
html complete noteshtml complete notes
html complete notes
onactiontv
 
Html
HtmlHtml
Building Next-Generation Web APIs with JSON-LD and Hydra
Building Next-Generation Web APIs with JSON-LD and HydraBuilding Next-Generation Web APIs with JSON-LD and Hydra
Building Next-Generation Web APIs with JSON-LD and Hydra
Markus Lanthaler
 
Introdução ao HTML4 e HTML5
Introdução ao HTML4 e HTML5Introdução ao HTML4 e HTML5
Introdução ao HTML4 e HTML5
Leonardo Soares
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
Ajay Khatri
 
HTML Dasar : #2 Hello World
HTML Dasar : #2 Hello WorldHTML Dasar : #2 Hello World
HTML Dasar : #2 Hello World
Sandhika Galih
 
Ventajas y desventajas de los procesadores de texto
Ventajas y desventajas de los procesadores de textoVentajas y desventajas de los procesadores de texto
Ventajas y desventajas de los procesadores de texto
eliasdiego
 
CSS Dasar #5 : Text Styling
CSS Dasar #5 : Text StylingCSS Dasar #5 : Text Styling
CSS Dasar #5 : Text Styling
Sandhika Galih
 
HTML & CSS.ppt
HTML & CSS.pptHTML & CSS.ppt
HTML & CSS.ppt
vaseemshaik21
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
Mario Hernandez
 
Mediaqueries
MediaqueriesMediaqueries
Mediaqueries
Brillio
 
CSS Dasar #9 : Inheritance
CSS Dasar #9 : InheritanceCSS Dasar #9 : Inheritance
CSS Dasar #9 : Inheritance
Sandhika Galih
 
Front-end technologies for Wonderful User Experience through Websites
Front-end technologies for Wonderful User Experience through WebsitesFront-end technologies for Wonderful User Experience through Websites
Front-end technologies for Wonderful User Experience through Websites
Ready Bytes Software labs
 
Javascript
JavascriptJavascript

Was ist angesagt? (20)

Use of Lists and Tables in HTML
Use of Lists and Tables in HTMLUse of Lists and Tables in HTML
Use of Lists and Tables in HTML
 
How Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) WorksHow Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) Works
 
Sass presentation
Sass presentationSass presentation
Sass presentation
 
CSS Introduction
CSS IntroductionCSS Introduction
CSS Introduction
 
CSS Dasar #3 : Penempatan CSS
CSS Dasar #3 : Penempatan CSSCSS Dasar #3 : Penempatan CSS
CSS Dasar #3 : Penempatan CSS
 
Presentación stylus
Presentación   stylusPresentación   stylus
Presentación stylus
 
html complete notes
html complete noteshtml complete notes
html complete notes
 
Html
HtmlHtml
Html
 
Building Next-Generation Web APIs with JSON-LD and Hydra
Building Next-Generation Web APIs with JSON-LD and HydraBuilding Next-Generation Web APIs with JSON-LD and Hydra
Building Next-Generation Web APIs with JSON-LD and Hydra
 
Introdução ao HTML4 e HTML5
Introdução ao HTML4 e HTML5Introdução ao HTML4 e HTML5
Introdução ao HTML4 e HTML5
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
HTML Dasar : #2 Hello World
HTML Dasar : #2 Hello WorldHTML Dasar : #2 Hello World
HTML Dasar : #2 Hello World
 
Ventajas y desventajas de los procesadores de texto
Ventajas y desventajas de los procesadores de textoVentajas y desventajas de los procesadores de texto
Ventajas y desventajas de los procesadores de texto
 
CSS Dasar #5 : Text Styling
CSS Dasar #5 : Text StylingCSS Dasar #5 : Text Styling
CSS Dasar #5 : Text Styling
 
HTML & CSS.ppt
HTML & CSS.pptHTML & CSS.ppt
HTML & CSS.ppt
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
 
Mediaqueries
MediaqueriesMediaqueries
Mediaqueries
 
CSS Dasar #9 : Inheritance
CSS Dasar #9 : InheritanceCSS Dasar #9 : Inheritance
CSS Dasar #9 : Inheritance
 
Front-end technologies for Wonderful User Experience through Websites
Front-end technologies for Wonderful User Experience through WebsitesFront-end technologies for Wonderful User Experience through Websites
Front-end technologies for Wonderful User Experience through Websites
 
Javascript
JavascriptJavascript
Javascript
 

Andere mochten auch

Open reichstag
Open reichstag Open reichstag
Open reichstag
Michaela Strobel
 
Building products that don't suck by Satish Kanwar of Shopfiy
Building products that don't suck by Satish Kanwar of ShopfiyBuilding products that don't suck by Satish Kanwar of Shopfiy
Building products that don't suck by Satish Kanwar of Shopfiy
TechTO
 
Online-Portfolio - Webseiten von Selbständigen
Online-Portfolio - Webseiten von SelbständigenOnline-Portfolio - Webseiten von Selbständigen
Online-Portfolio - Webseiten von SelbständigenMartin Hahn
 
Lesson from 5 years of Lean UX
Lesson from 5 years of Lean UXLesson from 5 years of Lean UX
Lesson from 5 years of Lean UX
InVision App
 
Web Typografie
Web TypografieWeb Typografie
Web Typografie
Felix Widmaier
 
Slide Design for Non Designers
Slide Design for Non DesignersSlide Design for Non Designers
Slide Design for Non Designers
SketchBubble
 

Andere mochten auch (6)

Open reichstag
Open reichstag Open reichstag
Open reichstag
 
Building products that don't suck by Satish Kanwar of Shopfiy
Building products that don't suck by Satish Kanwar of ShopfiyBuilding products that don't suck by Satish Kanwar of Shopfiy
Building products that don't suck by Satish Kanwar of Shopfiy
 
Online-Portfolio - Webseiten von Selbständigen
Online-Portfolio - Webseiten von SelbständigenOnline-Portfolio - Webseiten von Selbständigen
Online-Portfolio - Webseiten von Selbständigen
 
Lesson from 5 years of Lean UX
Lesson from 5 years of Lean UXLesson from 5 years of Lean UX
Lesson from 5 years of Lean UX
 
Web Typografie
Web TypografieWeb Typografie
Web Typografie
 
Slide Design for Non Designers
Slide Design for Non DesignersSlide Design for Non Designers
Slide Design for Non Designers
 

Webtypografie