SlideShare wird heruntergeladen. ×
0
KIRSTEN SCHELPER · SCHELPERDESIGN.NET
http://www.oldtomfoolery.bigcartel.com/product/typestache-poster-fg-1Buy the poster:
Typografie im Responsive
Webdesign
KIRSTEN SCHELPER · SCHELPERDESIGN.NET
WWW.SCHELPERDESIGN.NET
Responsive Typography
The web is 95% typography.
Treat text as user interface.
– Oliver Reichenstein
WWW.SCHELPERDESIGN.NET
Responsive Typography
Kirsten Schelper
München
@kirstenschelper
www.schelperdesign.net
WWW.SCHELPERDESIGN.NET
Responsive Typography
01
Responsive Web Design
WWW.SCHELPERDESIGN.NET
Responsive Typography
WWW.SCHELPERDESIGN.NET
Responsive Typography
01 Responsive Web Design
• Ein HTML für alle
• Die Magie passiert allein über...
WWW.SCHELPERDESIGN.NET
Responsive Typography
01 Responsive Web Design
• Das CSS fragt ab, wie breit ein Bildschirm ist
und...
WWW.SCHELPERDESIGN.NET
Responsive Typography
02
Typografie Kriterium #1:
Lesbarkeit
WWW.SCHELPERDESIGN.NET
Responsive Typography
02 Lesbarkeit: Schriftgröße
• Kleines Display » geringer Leseabstand » kleine...
WWW.SCHELPERDESIGN.NET
Responsive Typography
02 Lesbarkeit: Zeilenlänge
• Zeilen mit 50 bis 70 Zeichen sind angenehm zu le...
WWW.SCHELPERDESIGN.NET
Responsive Typography
02 Lesbarkeit: Zeilenlänge
• Kleines Display » kurze Zeilen » weniger padding...
WWW.SCHELPERDESIGN.NET
Responsive Typography
03
Kriterium #1: Bedienbarkeit
WWW.SCHELPERDESIGN.NET
Responsive Typography
03 Bedienbarkeit
• Kleines Display = Touchscreen
40 x 40 Pixel
WWW.SCHELPERDESIGN.NET
Responsive Typography
03 Bedienbarkeit
• Ausreichend großer Zeilenabstand
• Sicher anklickbare Butt...
WWW.SCHELPERDESIGN.NET
Responsive Typography
04 Technik
Schriftgrößen & Abstände
WWW.SCHELPERDESIGN.NET
Responsive Typography
04 Schriftgrößen
• Pixel = absolute Einheit
• em und rem: relative Einheiten
...
WWW.SCHELPERDESIGN.NET
Responsive Typography
04 Schriftgrößen
h1 {font-size:32px}
h1 {font-size:2.0em}
h1 {font-size:2.0re...
WWW.SCHELPERDESIGN.NET
Responsive Typography
04 Schriftgrößen: em
Headline h1 3.0 em
body{font-size:100%} 16 Pixel = 1 em
...
WWW.SCHELPERDESIGN.NET
Responsive Typography
04 Schriftgrößen: rem
Headline h1 3.0 rem
body{font-size:50%}
3 x 16Pixel = 4...
WWW.SCHELPERDESIGN.NET
Responsive Typography
04 Schriftgrößen: rem
Headline h1 3.0 em
Headline h1 3.0 rem
html{font-size:1...
WWW.SCHELPERDESIGN.NET
Responsive Typography
» DEMO
WWW.SCHELPERDESIGN.NET
Responsive Typography
05
Responsive Typography
zum Mitnehmen
WWW.SCHELPERDESIGN.NET
Responsive Typography
05 Rezept
• html {font-size: 100%} + rem für Schriften
• body {font-size: x%}...
WWW.SCHELPERDESIGN.NET
Responsive Typography
05 Quellen
• http://css-tricks.com/why-ems/
• http://www.elliotjaystocks.com/...
WWW.SCHELPERDESIGN.NET
Responsive Typography
Fragen!
Nächste SlideShare
Wird geladen in ...5
×

Responsive Typography Wordcamp Hamburg-2014

2,109

Published on

Einführung und Tipps zu Typografie auf Webseiten im Responsive Design

Published in: Internet
0 Kommentare
1 Gefällt mir
Statistiken
Notizen
  • Hinterlassen Sie den ersten Kommentar

Keine Downloads
Views
Gesamtviews
2,109
Bei Slideshare
0
Aus Einbettungen
0
Anzahl an Einbettungen
7
Aktionen
Geteilt
0
Downloads
12
Kommentare
0
Gefällt mir
1
Einbettungen 0
No embeds

No notes for slide

Transcript of "Responsive Typography Wordcamp Hamburg-2014"

  1. 1. KIRSTEN SCHELPER · SCHELPERDESIGN.NET http://www.oldtomfoolery.bigcartel.com/product/typestache-poster-fg-1Buy the poster:
  2. 2. Typografie im Responsive Webdesign KIRSTEN SCHELPER · SCHELPERDESIGN.NET
  3. 3. WWW.SCHELPERDESIGN.NET Responsive Typography The web is 95% typography. Treat text as user interface. – Oliver Reichenstein
  4. 4. WWW.SCHELPERDESIGN.NET Responsive Typography Kirsten Schelper München @kirstenschelper www.schelperdesign.net
  5. 5. WWW.SCHELPERDESIGN.NET Responsive Typography 01 Responsive Web Design
  6. 6. WWW.SCHELPERDESIGN.NET Responsive Typography
  7. 7. WWW.SCHELPERDESIGN.NET Responsive Typography 01 Responsive Web Design • Ein HTML für alle • Die Magie passiert allein über CSS
  8. 8. WWW.SCHELPERDESIGN.NET Responsive Typography 01 Responsive Web Design • Das CSS fragt ab, wie breit ein Bildschirm ist und verändert das Layout @media screen and (max-width: 600px){ #content { width:100%;} } @media screen and (min-width: 601px){ #content { width:60%; float:right;} }
  9. 9. WWW.SCHELPERDESIGN.NET Responsive Typography 02 Typografie Kriterium #1: Lesbarkeit
  10. 10. WWW.SCHELPERDESIGN.NET Responsive Typography 02 Lesbarkeit: Schriftgröße • Kleines Display » geringer Leseabstand » kleiner Text • Großes Display » großer Leseabstand » großer Text
  11. 11. WWW.SCHELPERDESIGN.NET Responsive Typography 02 Lesbarkeit: Zeilenlänge • Zeilen mit 50 bis 70 Zeichen sind angenehm zu lesen • Bei längeren Zeilen muss sich das Auge anstrengen um die Zeile zu „halten“ Diese Zeile hat eine gut lesbare Länge, nämlich 58 Zeichen
  12. 12. WWW.SCHELPERDESIGN.NET Responsive Typography 02 Lesbarkeit: Zeilenlänge • Kleines Display » kurze Zeilen » weniger padding • Großes Display » lange Zeilen » mehr padding größere Schrift, mehr padding
  13. 13. WWW.SCHELPERDESIGN.NET Responsive Typography 03 Kriterium #1: Bedienbarkeit
  14. 14. WWW.SCHELPERDESIGN.NET Responsive Typography 03 Bedienbarkeit • Kleines Display = Touchscreen 40 x 40 Pixel
  15. 15. WWW.SCHELPERDESIGN.NET Responsive Typography 03 Bedienbarkeit • Ausreichend großer Zeilenabstand • Sicher anklickbare Buttons (40 x40 Pixel) Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada Link im Text euismod. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Etiam sem Link im Text mollis euismod. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus.» weiterlesen
  16. 16. WWW.SCHELPERDESIGN.NET Responsive Typography 04 Technik Schriftgrößen & Abstände
  17. 17. WWW.SCHELPERDESIGN.NET Responsive Typography 04 Schriftgrößen • Pixel = absolute Einheit • em und rem: relative Einheiten Ein Pixel ist ein Pixel ist ein... Braucht einen Bezug, ist relativ zum umgebenden Container
  18. 18. WWW.SCHELPERDESIGN.NET Responsive Typography 04 Schriftgrößen h1 {font-size:32px} h1 {font-size:2.0em} h1 {font-size:2.0rem}
  19. 19. WWW.SCHELPERDESIGN.NET Responsive Typography 04 Schriftgrößen: em Headline h1 3.0 em body{font-size:100%} 16 Pixel = 1 em 3 x 16Pixel = 48 Pixel
  20. 20. WWW.SCHELPERDESIGN.NET Responsive Typography 04 Schriftgrößen: rem Headline h1 3.0 rem body{font-size:50%} 3 x 16Pixel = 48 Pixel html{font-size:100%}
  21. 21. WWW.SCHELPERDESIGN.NET Responsive Typography 04 Schriftgrößen: rem Headline h1 3.0 em Headline h1 3.0 rem html{font-size:100%} 3 x 16Pixel = 48 Pixel body{font-size:50%} 3 x 8 Pixel = 24 Pixel
  22. 22. WWW.SCHELPERDESIGN.NET Responsive Typography » DEMO
  23. 23. WWW.SCHELPERDESIGN.NET Responsive Typography 05 Responsive Typography zum Mitnehmen
  24. 24. WWW.SCHELPERDESIGN.NET Responsive Typography 05 Rezept • html {font-size: 100%} + rem für Schriften • body {font-size: x%} + em für Elemente/Abstände, die über umgebende Container „gesteuert“werden sollen • px für Abstände, die in Bezug zu einem Bild (icon, bg-image) stehen, z. B. li.icon {padding-left: 25px} • % für Layoutelemente (Spalten) {html font-size:60%} wäre bad practise, überschreibt die Browser-Einstellungen des Users
  25. 25. WWW.SCHELPERDESIGN.NET Responsive Typography 05 Quellen • http://css-tricks.com/why-ems/ • http://www.elliotjaystocks.com/blog/responsive-web-typography/ • http://ia.net/blog/the-web-is-all-about-typography-period/ • http://www.smashingmagazine.com/2013/06/25/media-queries-are-not-the- answer-element-query-polyfill/ • http://die-netzialisten.de/wordpress/em-und-rem-was-ist-der-unterschied/ • http://die-netzialisten.de/wordpress/was-ist-responsive-design/
  26. 26. WWW.SCHELPERDESIGN.NET Responsive Typography Fragen!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×