• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Webtypografie
 

Webtypografie

on

  • 5,095 views

 

Statistics

Views

Total Views
5,095
Views on SlideShare
5,075
Embed Views
20

Actions

Likes
6
Downloads
9
Comments
0

2 Embeds 20

http://www.slideshare.net 19
http://www.slideee.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Webtypografie Webtypografie Presentation Transcript

    • 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