web - typografie

25
Web - Typografie Maria Goltsova

Upload: maria-goltsova

Post on 04-Jun-2015

396 views

Category:

Design


2 download

DESCRIPTION

Vortrag zum Thema "Web - Typografie", basiert auf dem Buch "#webtypobuch" von Gerrit van Aaken. HTW Berlin. Kurs: Current Trends in Web Standards-based UI Design

TRANSCRIPT

Page 1: Web - Typografie

Web - Typografie

Maria Goltsova

Page 2: Web - Typografie

Typografie ist die Kunst bzw. Lehre der grafischen Gestaltung,

die in irgendeiner Form mit Schriftzeichen zusammenhängt.

Page 3: Web - Typografie

Schriftentwurf

Detailtypografie

Makrotypografie

Page 4: Web - Typografie

Regeln – Die korrekten SonderzeichenUmlaute und ß

Page 5: Web - Typografie

Regeln – Die korrekten SonderzeichenAnführungszeichen

Page 6: Web - Typografie

Regeln – Die korrekten SonderzeichenHorizontale Striche

Page 7: Web - Typografie

Regeln – Die korrekten SonderzeichenWeitere Sonderzeichen

Page 8: Web - Typografie

Schriftwahl und Leserlichkeit

Page 9: Web - Typografie

Regeln

Laufweite

Abstand & Weißraum

Zeilenabstand

Grundlinienraster

Zeilenlänge, Spalten

Page 10: Web - Typografie

Regeln

Page 11: Web - Typografie

RegelnAusrichtung und Silbentrennung

Kontraste und inverser Satz

http://www.designmadeingermany.de/

Page 12: Web - Typografie

Web Typography Guidelines

Page 13: Web - Typografie

Webfonts Webfont-Anbieter:

Adobe Edge Web Fonts

Fontdeck

fonts.com

FontShop

Typekit

MyFonts

Google Web Fonts

Typotheque

Webtype

Fontspring

WebInk

FontSquirrel

Page 14: Web - Typografie

Lesarten – Lineares Lesen

http://ia.net/blog/ias-2006-facebook-designs-redesigned/

Page 15: Web - Typografie

Lesarten – Informierendes Lesen

http://www.zeit.de/index

Page 16: Web - Typografie

Lesarten – Informierendes Lesen

http://www.guardian.co.uk/

Page 17: Web - Typografie

Lesarten – Aktivierende Typografie

http://stationstreetpgh.com/

Page 18: Web - Typografie

Lesarten – Aktivierende Typografie

http://www.apple.com/de/iphone/features/

Page 19: Web - Typografie

Lesarten – Aktivierende Typografie

http://www.barleysgville.com/

Page 20: Web - Typografie

Lesarten – Inszenierende Typografie

http://www.twopaperdolls.com/hiring/

Page 21: Web - Typografie

Lesarten – Inszenierende Typografie

http://lostworldsfairs.com/atlantis/

Page 22: Web - Typografie

Lesarten – Inszenierende Typografie

http://www.seedconference.com/seed.php

Page 23: Web - Typografie

Links:Typecast http://typecast.com/

Typetester http://http//tpetester.org

FontFonter http://fontfonter.com/

FontShop-Plugin http://www.fontshop.com/plugin

FontSquirrel @font-face Generator http://www.fontsquirrel.com/fontface/generator

Page 24: Web - Typografie

Quellen:Der Vortrag basiert auf dem Buch "#webtypobuch" von Gerrit van Aaken (praegnanz.de – van Aaken & Bräunlich GbR), http://webtypobuch.de/

http://www.smashingmagazine.com/typography-guidelines-and-references/

http://www.calebgittins.com.au/news/web-typography-guidelines/

http://ia.net/blog/the-web-is-all-about-typography-period/

Page 25: Web - Typografie

Danke für die Aufmerksamkeit!