Responsive Typography Wordcamp Hamburg-2014
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Responsive Typography Wordcamp Hamburg-2014

am

  • 1,765 Views

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

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

Statistiken

Views

Gesamtviews
1,765
Views auf SlideShare
831
Views einbetten
934

Actions

Gefällt mir
1
Downloads
9
Kommentare
0

5 Einbettungen 934

http://die-netzialisten.de 688
http://www.akm3.de 231
https://twitter.com 11
http://www.dienetzialisten.de 2
http://plus.url.google.com 2

Zugänglichkeit

Kategorien

Details hochladen

Uploaded via as Adobe PDF

Benutzerrechte

© Alle Rechte vorbehalten

Report content

Als unangemessen gemeldet Als unangemessen melden
Als unangemessen melden

Wählen Sie Ihren Grund, warum Sie diese Präsentation als unangemessen melden.

Löschen
  • Full Name Full Name Comment goes here.
    Sind Sie sicher, dass Sie...
    Ihre Nachricht erscheint hier
    Processing...
Kommentar posten
Kommentar bearbeiten

Responsive Typography Wordcamp Hamburg-2014 Presentation Transcript

  • 1. KIRSTEN SCHELPER · SCHELPERDESIGN.NET http://www.oldtomfoolery.bigcartel.com/product/typestache-poster-fg-1Buy the poster:
  • 2. Typografie im Responsive Webdesign KIRSTEN SCHELPER · SCHELPERDESIGN.NET
  • 3. WWW.SCHELPERDESIGN.NET Responsive Typography The web is 95% typography. Treat text as user interface. – Oliver Reichenstein
  • 4. WWW.SCHELPERDESIGN.NET Responsive Typography Kirsten Schelper München @kirstenschelper www.schelperdesign.net
  • 5. WWW.SCHELPERDESIGN.NET Responsive Typography 01 Responsive Web Design
  • 6. WWW.SCHELPERDESIGN.NET Responsive Typography
  • 7. WWW.SCHELPERDESIGN.NET Responsive Typography 01 Responsive Web Design • Ein HTML für alle • Die Magie passiert allein über CSS
  • 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. WWW.SCHELPERDESIGN.NET Responsive Typography 02 Typografie Kriterium #1: Lesbarkeit
  • 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. 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. 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. WWW.SCHELPERDESIGN.NET Responsive Typography 03 Kriterium #1: Bedienbarkeit
  • 14. WWW.SCHELPERDESIGN.NET Responsive Typography 03 Bedienbarkeit • Kleines Display = Touchscreen 40 x 40 Pixel
  • 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. WWW.SCHELPERDESIGN.NET Responsive Typography 04 Technik Schriftgrößen & Abstände
  • 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. WWW.SCHELPERDESIGN.NET Responsive Typography 04 Schriftgrößen h1 {font-size:32px} h1 {font-size:2.0em} h1 {font-size:2.0rem}
  • 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. 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. 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. WWW.SCHELPERDESIGN.NET Responsive Typography » DEMO
  • 23. WWW.SCHELPERDESIGN.NET Responsive Typography 05 Responsive Typography zum Mitnehmen
  • 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. 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. WWW.SCHELPERDESIGN.NET Responsive Typography Fragen!