Einführung in die
(Web-)Typografie
Jens Weigel
Designer
»Schrift verhilft der Sprache zur
Kommunikation. Sie will und wird
gelesen werden. Die Schrift erzeugt
eine Stimme im Kopf...
»Gute Typographie bemerkt man
so wenig wie gute Luft zum Atmen.
Schlechte merkt man erst, wenn es
einem stinkt.«
Kurt Weid...
jensweigel.de
Einführung in die (Web-)Typografie
Grundlegende
Begriffe
Einführung in die (Web-)Typografie
jensweigel.de
Grundlegende Begriffe
Hamburgewr
Serifen
Punzen Abstrich
Auf- oder Haarst...
Einführung in die (Web-)Typografie
jensweigel.de
Grundlegende Begriffe
ABCDEF Versalien
Majuskeln text-transform:uppercase...
jensweigel.de
Einführung in die (Web-)Typografie
Glype
Einführung in die (Web-)Typografie
jensweigel.de
Grundlegende Begriffe
Spationierung
HambDie Spationierung wird für jede
G...
Einführung in die (Web-)Typografie
jensweigel.de
Grundlegende Begriffe
Spationierung
Obwohl die Japaner als siebtgrößte au...
Einführung in die (Web-)Typografie
jensweigel.de
Grundlegende Begriffe
Kerning
AV Toll Voll Vhs
AV Toll Voll Vhs
ohne Kern...
jensweigel.de
Einführung in die (Web-)Typografie
Schrift
Einführung in die (Web-)Typografie
jensweigel.de
Schrift
Hamburgefonts
Der braune Fuchs
Schriftgrad & Durchschuß
Grundline...
Einführung in die (Web-)Typografie
jensweigel.de
Schrift
Schriftgrad & Durchschuß
Einheiten
font-size line-height
px /* Pi...
Einführung in die (Web-)Typografie
jensweigel.de
Schrift
Tiefergehender
How to Size Text in CSS
Css font-size: em vs. px v...
Einführung in die (Web-)Typografie
jensweigel.de
Schrift
serif sans-serif
Tiefergehender
Schriftklassifikation in a nutshe...
Einführung in die (Web-)Typografie
jensweigel.de
Schrift
Schriftschnitte
Regular
Italic
Bold
Bold italic
Kapitälchen
Conde...
Einführung in die (Web-)Typografie
jensweigel.de
Schrift
weitere Auszeichnungen
Iquistionem eaturerum, omnis autempo ratio...
jensweigel.de
Einführung in die (Web-)Typografie
Webfonts
Einführung in die (Web-)Typografie
jensweigel.de
Webfonts
WOFF
Formate
EOT TTF/OTF
• Microsoft-Format
• nur IE ab 5.5
• Um...
Einführung in die (Web-)Typografie
jensweigel.de
Webfonts
Einbinden
Selbstgehostet
• meist nur WOFF und EOT
@font-face {
f...
jensweigel.de
Einführung in die (Web-)Typografie
Absatz
Einführung in die (Web-)Typografie
jensweigel.de
Absatz
Absatzarten
linksbündig rechtsbündig
Iquistionem eaturerum, omnis ...
Einführung in die (Web-)Typografie
jensweigel.de
Absatz
Absatzarten
Blocksatz zentriert
Iquistionem eaturerum, omnis autem...
Einführung in die (Web-)Typografie
jensweigel.de
Absatz
Einzüge
Eingerückt hängender Einzug
Iquistionem eaturerum, omnis a...
Einführung in die (Web-)Typografie
jensweigel.de
Absatz
Initialen
Iquistionem eaturerum, omnis autempo ra-
tioribus aut od...
jensweigel.de
Einführung in die (Web-)Typografie
Detailtypografie
Einführung in die (Web-)Typografie
jensweigel.de
Detailtypografie
Anführungszeichen
”Die englischen Anführungszeichen
sind...
Einführung in die (Web-)Typografie
jensweigel.de
Detailtypografie
Anführungszeichen
«Die französischen Anführungszei-
chen...
Einführung in die (Web-)Typografie
jensweigel.de
Detailtypografie
Bindestrich und Devis
Bindestriche werden für Worttren-
...
jensweigel.de
Einführung in die (Web-)Typografie
Quellen
Einführung in die (Web-)Typografie
jensweigel.de
Quellen
W3C CSS2 http://www.w3.org/TR/CSS2/
W3C CSS3-Fonts http://www.w3....
jensweigel.de
Einführung in die (Web-)Typografie
Fragen?
Vielen Dank für eure
Aufmerksamkeit
Jens Weigel
Designer
Upcoming SlideShare
Loading in …5
×

Einführung in die (Web-)Typografie

1,750 views

Published on

Eine Einführung in die Typografie mit starkem Fokus auf Web. Von den Begriffen der Typografie über den Ist-Zustand vonWebfonts bis hin zur Detailtypografie wird versuch alle wichtigen Begriffe und Buzzwords zu behandeln.

Published in: Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,750
On SlideShare
0
From Embeds
0
Number of Embeds
32
Actions
Shares
0
Downloads
9
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Einführung in die (Web-)Typografie

  1. 1. Einführung in die (Web-)Typografie Jens Weigel Designer
  2. 2. »Schrift verhilft der Sprache zur Kommunikation. Sie will und wird gelesen werden. Die Schrift erzeugt eine Stimme im Kopf.«
  3. 3. »Gute Typographie bemerkt man so wenig wie gute Luft zum Atmen. Schlechte merkt man erst, wenn es einem stinkt.« Kurt Weidemann
  4. 4. jensweigel.de Einführung in die (Web-)Typografie Grundlegende Begriffe
  5. 5. Einführung in die (Web-)Typografie jensweigel.de Grundlegende Begriffe Hamburgewr Serifen Punzen Abstrich Auf- oder Haarstrich Glyphe
  6. 6. Einführung in die (Web-)Typografie jensweigel.de Grundlegende Begriffe ABCDEF Versalien Majuskeln text-transform:uppercase; abcdef Gemeine Minuskeln text-transform:lowercase; text-transform: none; /* default */ ff fl ffl ff fl ffl Ligaturen font-feature-settings: ”liga=0”; ß & ä ö ü auch Ligaturen
  7. 7. jensweigel.de Einführung in die (Web-)Typografie Glype
  8. 8. Einführung in die (Web-)Typografie jensweigel.de Grundlegende Begriffe Spationierung HambDie Spationierung wird für jede Glyphe eingestellt. Sie stellt ein harmonisches Schriftbild sicher.
  9. 9. Einführung in die (Web-)Typografie jensweigel.de Grundlegende Begriffe Spationierung Obwohl die Japaner als siebtgrößte aus- ländische Bevölkerungsgruppe eine kleine Minderheit bilden, prägen sie seit über 50 Jahren das Stadtbild und bereichern das wirtschaftliche und kulturelle Leben der Stadt. Die meisten in Düsseldorf lebenden Japaner wurden von ihren Arbeitgebern nach Deutschland entsandt und sind für wenige Jahre oder kurzfristige Einsätze in der Stadt. Es handelt sich überwiegend um gutbezahlte Spezialisten und Führungs- kräfte sowie deren Familienangehörige. Daneben studieren regelmäßig junge Ja- paner an der Musikhochschule oder der Kunstakademie. letter-spacing: 0.2em; Probleme: • Schrift ist Sprache • Sub-Pixel Positioning
  10. 10. Einführung in die (Web-)Typografie jensweigel.de Grundlegende Begriffe Kerning AV Toll Voll Vhs AV Toll Voll Vhs ohne Kerning mit Kerning Das Kerning regelt den Abstand bei zwei aufeinander treffenden Buchstabenpaaren.
  11. 11. jensweigel.de Einführung in die (Web-)Typografie Schrift
  12. 12. Einführung in die (Web-)Typografie jensweigel.de Schrift Hamburgefonts Der braune Fuchs Schriftgrad & Durchschuß Grundline x-Höhe VersalhöheOberlängen Unterlängen Durchschuß font-size line-height
  13. 13. Einführung in die (Web-)Typografie jensweigel.de Schrift Schriftgrad & Durchschuß Einheiten font-size line-height px /* Pixel */ Feste Größe em Größe richtet sich nach HTML-Elternelemente Zeilenhöhe richtet sich nach font-size; Einheit kann auch weggelassen werden. rem Größe richtet sich nach root keine Infos % /* Prozent */ Größe richtet sich nach Elternelemente Zeilenhöhe richtet sich nach font-size von root pt /* Punkt */ Feste Größe; eigentlich eine Maßeinheit 1pt = 0,3527 mm
  14. 14. Einführung in die (Web-)Typografie jensweigel.de Schrift Tiefergehender How to Size Text in CSS Css font-size: em vs. px vs. pt vs. percent Font sizing with rem Refine your Web type with this crash course on the CSS line-height property Schriftgrad & Durchschuß
  15. 15. Einführung in die (Web-)Typografie jensweigel.de Schrift serif sans-serif Tiefergehender Schriftklassifikation in a nutshell Schriftklassifikation und Schriftmischung (SlideShare, Blog) Klassifikation nach DIN 16518 font-family: ”Tolle Schrift”, Systemschrift, serif; font-family: ”Tolle Schrift”, Systemschrift, sans-serif; cursive fantasy monospace Klassifikation
  16. 16. Einführung in die (Web-)Typografie jensweigel.de Schrift Schriftschnitte Regular Italic Bold Bold italic Kapitälchen Condensed Extended font-weight: normal; font-style: italic; font-weight: bold; /* od. 700 */ font-style: italic; font-weight: bold; font-variant: small-caps; Working Draft: font-stretch: condensed; Working Draft: font-stretch: expanded;
  17. 17. Einführung in die (Web-)Typografie jensweigel.de Schrift weitere Auszeichnungen Iquistionem eaturerum, omnis autempo ratio- ribus aut odi que nonsequias con rest haruptam voluptaecto dit que dolupta tibusam harchil itaepe laut quis di cus Unterstrichen text-decoration: underline; text-decoration: line-through; Iquistionem eaturerum, omnis autempo ratio- ribus aut odi que nonsequias con rest haruptam voluptaecto dit que dolupta tibusam harchil itaepe laut quis Durchgestrichen Iquistionem eaturerum, omnis autempo ratio- ribus aut odi que nonsequias con rest haruptam voluptaecto dit que dolupta tibusam harchil itaepe laut quis di cus Oberstrich text-decoration: overline; text-decoration-style: solid | double | dotted | dashed | wavy text-decoration-color: #f00; Zukunft
  18. 18. jensweigel.de Einführung in die (Web-)Typografie Webfonts
  19. 19. Einführung in die (Web-)Typografie jensweigel.de Webfonts WOFF Formate EOT TTF/OTF • Microsoft-Format • nur IE ab 5.5 • Umständlich zu erstellen • weit verbreitet • wird fast von jedem Browser unterstütz • da nicht geschützt wurde es von den Fontherstellern nicht unterstützt • modernstes Containerformat • wird von allen Brow- sern unterstützt außer Android Systembrowser SVG ist inzwischen nicht mehr notwendig.
  20. 20. Einführung in die (Web-)Typografie jensweigel.de Webfonts Einbinden Selbstgehostet • meist nur WOFF und EOT @font-face { font-family: 'Schriftname'; src: url('dateiname.eot‘); src: local('?'), url('dateiname.woff‘) format('woff'), url('dateiname.ttf') format('truetype') font-weight: normal; font-style: normal; } fontshop.com myfonts.com CDN • teilweise speziell überarbeitete Schriften • große Auswahl von Schriften typekit.com fonts.com
  21. 21. jensweigel.de Einführung in die (Web-)Typografie Absatz
  22. 22. Einführung in die (Web-)Typografie jensweigel.de Absatz Absatzarten linksbündig rechtsbündig Iquistionem eaturerum, omnis autempo ratioribus aut odi que nonsequias con rest haruptam voluptaecto dit que dolupta tibusam harchil itaepe laut quis di cus dolorum es arum harumendam, tessi blaboritis exerum volo cone ilit que voluptae. Ut harum ex et magni doluptatur reperunt, inctur mo est, comniatem sitatum ad eumque veliqui debit vellace restiurem. Ebis simporro volo cum harumquis esciis ressinc temperisci blam, to conseque plautemquia alisquunt fugiam faccaest, sapitia eles estior sam, volorae ptatus dit, aspero que consed quame sapiet aut rep Iquistionem eaturerum, omnis autempo ratioribus aut odi que nonsequias con rest haruptam voluptaecto dit que dolupta tibusam harchil itaepe laut quis di cus dolorum es arum harumendam, tessi blaboritis exerum volo cone ilit que voluptae. Ut harum ex et magni doluptatur reperunt, inctur mo est, comniatem sitatum ad eumque veliqui debit vellace restiurem. Ebis simporro volo cum harumquis esciis ressinc temperisci blam, to conseque plautemquia alisquunt fugiam faccaest, sapitia eles estior sam, volorae ptatus dit, aspero que consed quame sapiet aut rep text-align: left; /* default */ text-align: right;
  23. 23. Einführung in die (Web-)Typografie jensweigel.de Absatz Absatzarten Blocksatz zentriert Iquistionem eaturerum, omnis autempo ratioribus aut odi que nonsequias con rest haruptam voluptaecto dit que dolupta tibusam harchil itaepe laut quis di cus dolorum es arum harumendam, tessi blaboritis exerum volo cone ilit que voluptae. Ut harum ex et magni doluptatur reperunt, inctur mo est, comniatem sitatum ad eumque veliqui debit vellace restiurem. Ebis simporro volo cum harumquis esciis ressinc temperisci blam, to conseque plautemquia alisquunt fugiam fac- caest, sapitia eles estior sam, volorae ptatus dit, asperoqueconsed quame sapiet aut rep Iquistionem eaturerum, omnis autempo ratioribus aut odi que nonsequias con rest haruptam voluptaecto dit que dolupta tibusam harchil itaepe laut quis di cus dolorum es arum harumendam, tessi blaboritis exerum volo cone ilit que voluptae. Ut harum ex et magni doluptatur reperunt, inctur mo est, comniatem sitatum ad eumque veliqui debit vellace restiurem. Ebis simporro volo cum harumquis esciis ressinc temperisci blam, to conseque plautemquia alisquunt fugiam faccaest, sapitia eles estior sam, volorae ptatus dit, aspero que consed quame sapiet aut rep text-align: justify; text-align: center;
  24. 24. Einführung in die (Web-)Typografie jensweigel.de Absatz Einzüge Eingerückt hängender Einzug Iquistionem eaturerum, omnis autempo ra- tioribus aut odi que nonsequias con rest ha- ruptam voluptaecto dit que dolupta tibusam harchil itaepe laut quis di cus dolorum es arum harumendam, tessi blaboritis exerum volo cone ilit que voluptae. Ut harum ex et magni do- luptatur reperunt, inctur mo est, comniatem sitatum ad eumque veliqui debit vellace restiu- rem. Ebis simporro volo cum harumquis esciis ressinc temperisci blam, to conseque plautem- quia alisquunt fugiam faccaest, sapitia eles es- tior sam, volorae ptatus dit, aspero que consed quame sapiet aut rep Iquistionem eaturerum, omnis autempo rati- oribus aut odi que nonsequias con rest ha- ruptam voluptaecto dit que dolupta tibusam harchil itaepe laut quis di cus dolorum es arum harumendam, tessi blaboritis exerum volo cone ilit que voluptae. Ut harum ex et magni doluptatur reperunt, inctur mo est, comniatem sitatum ad eumque veliqui debit vellace restiurem. Ebis simporro volo cum harumquis esciis ressinc temperisci blam, to conseque plautemquia alisquunt fugiam fac- caest, sapitia eles estior sam, volorae ptatus dit, aspero que consed quame sapiet aut rep text-indent: 1em; Wroking Draft: text-align: hanging;
  25. 25. Einführung in die (Web-)Typografie jensweigel.de Absatz Initialen Iquistionem eaturerum, omnis autempo ra- tioribus aut odi que nonsequias con rest ha- ruptam voluptaecto dit que dolupta tibusam harchil itaepe laut quis di cus dolorum es arum harumendam, tessi blaboritis exerum volo cone ilit que voluptae. Ut harum ex et magni do- luptatur reperunt, inctur mo est, comniatem sitatum ad eumque veliqui debit vellace restiu- rem. Ebis simporro volo cum harumquis esciis ressinc temperisci blam, to conseque plautem- quia alisquunt fugiam faccaest, sapitia eles es- tior sam, volorae ptatus dit, aspero que consed quame sapiet aut rep :first-letter {font-size: 3em;
  26. 26. jensweigel.de Einführung in die (Web-)Typografie Detailtypografie
  27. 27. Einführung in die (Web-)Typografie jensweigel.de Detailtypografie Anführungszeichen ”Die englischen Anführungszeichen sind bei deutschen Texten falsch” „Diese Anführungszeichen sind besser. Eselsbrücke: 99 66“ Die Systemschriften Verdana und Trebuchet haben keine korrekten deutschen Abführungszeichen.
  28. 28. Einführung in die (Web-)Typografie jensweigel.de Detailtypografie Anführungszeichen «Die französischen Anführungszei- chen auch Guillemet genannt» »… werden im deutschen andersherum gesetzt«
  29. 29. Einführung in die (Web-)Typografie jensweigel.de Detailtypografie Bindestrich und Devis Bindestriche werden für Worttren- nungen, gekoppelte Begriffe (Die Prism-Affäre) und »Auflistungen« (ein-, zwei-, dreimal) verwendet. Im Web kann die CSS-Anweisung hy- phens:auto; vor automatisches setzen von Bindestrichen. Nachteil ist, dass nach caniuse.com Chrome den Befehl nicht unterstützt. Außerdem gibt es keine Begrenzungsmöglichkeiten wieviel Zeilen hintereinander mit ei- ner Trennung enden. Das Devis hingegen wird als Ge- dankenstrich gestzt – natürlich geht das auch im Web. Auch als Bis- Strich wird das Devis verwendet.
  30. 30. jensweigel.de Einführung in die (Web-)Typografie Quellen
  31. 31. Einführung in die (Web-)Typografie jensweigel.de Quellen W3C CSS2 http://www.w3.org/TR/CSS2/ W3C CSS3-Fonts http://www.w3.org/TR/css3-fonts/ Wikipedia http://www.wikipedia.de Smashing Magazin http://www.smashingmagazine.com/ Weitere Infos Fontrendering A Closer Look At Font Rendering Font-Smoothing Schriftdarstellung mit -webkit-font-smoothing white-space http://css-tricks.com/almanac/properties/w/whitespace/ Anführungszeichen Typografie der Anführungszeichen: Gänsefüßchen und Guillemets Typografie.info
  32. 32. jensweigel.de Einführung in die (Web-)Typografie Fragen?
  33. 33. Vielen Dank für eure Aufmerksamkeit Jens Weigel Designer

×