Design ~ Typography Typography 101 Using Typography to Enhance Content.
Responsive Typography Wordcamp Hamburg-2014
-
Upload
kirstenschelper -
Category
Internet
-
view
1.826 -
download
0
description
Transcript of Responsive Typography Wordcamp Hamburg-2014
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 SchelperMünchen
@kirstenschelperwww.schelperdesign.net
WWW.SCHELPERDESIGN.NET
Responsive Typography
01Responsive 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 CSS
WWW.SCHELPERDESIGN.NET
Responsive Typography
01 Responsive Web Design
• Das CSS fragt ab, wie breit ein Bildschirm istund verändert das Layout
@media screen and (max-width: 600px){#content { width:100%;}}
@media screen and (min-width: 601px){#content { width:60%; float:right;}}
WWW.SCHELPERDESIGN.NET
Responsive Typography
02Typografie Kriterium #1: Lesbarkeit
WWW.SCHELPERDESIGN.NET
Responsive Typography
02 Lesbarkeit: Schriftgröße
• Kleines Display » geringer Leseabstand » kleiner Text
• Großes Display » großer Leseabstand » großer Text
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
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
WWW.SCHELPERDESIGN.NET
Responsive Typography
03Kriterium #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 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
WWW.SCHELPERDESIGN.NET
Responsive Typography
04 TechnikSchriftgrößen & Abstände
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
WWW.SCHELPERDESIGN.NET
Responsive Typography
04 Schriftgrößen
h1 {font-size:32px}h1 {font-size:2.0em}h1 {font-size:2.0rem}
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
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%}
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
WWW.SCHELPERDESIGN.NET
Responsive Typography
» DEMO
WWW.SCHELPERDESIGN.NET
Responsive Typography
05Responsive Typography zum Mitnehmen
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
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/
WWW.SCHELPERDESIGN.NET
Responsive Typography
Fragen!