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

Kirsten Schelper
München
@kirstenschelper
www.schelperdesign.net

01
Responsive Web Design

01 Responsive Web Design
• Ein HTML für alle
• Die Magie passiert allein über CSS

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;}
}

02
Typografie Kriterium #1:
Lesbarkeit

02 Lesbarkeit: Schriftgröße
• Kleines Display » geringer Leseabstand » kleiner Text
• Großes Display » großer Leseabstand » großer Text

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

02 Lesbarkeit: Zeilenlänge
• Kleines Display » kurze Zeilen » weniger padding
• Großes Display » lange Zeilen » mehr padding
größere Schrift,
mehr padding

03
Kriterium #1: Bedienbarkeit

03 Bedienbarkeit
• Kleines Display = Touchscreen
40 x 40 Pixel

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

04 Technik
Schriftgrößen & Abstände

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

04 Schriftgrößen
h1 {font-size:32px}
h1 {font-size:2.0em}
h1 {font-size:2.0rem}

04 Schriftgrößen: em
Headline h1 3.0 em
body{font-size:100%} 16 Pixel = 1 em
3 x 16Pixel = 48 Pixel

04 Schriftgrößen: rem
Headline h1 3.0 rem
body{font-size:50%}
html{font-size:100%}

04 Schriftgrößen: rem
Headline h1 3.0 em
Headline h1 3.0 rem
html{font-size:100%}
body{font-size:50%}
3 x 8 Pixel = 24 Pixel

» DEMO

05
zum Mitnehmen

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

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/

Fragen!

Responsive Typography Wordcamp Hamburg-2014

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (20)

Responsive Typography Wordcamp Hamburg-2014