responsive typography wordcamp hamburg-2014

Post on 22-Nov-2014

1.828 Views

Category:

Internet

0 Downloads

Preview:

Click to see full reader

DESCRIPTION

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

TRANSCRIPT

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!

top related