typografie im responsive webdesign

67
Typografie im Responsive Webdesign MobileTech Conference, Berlin 04.09.2013 Sven Wolfermann | maddesigns

Upload: sven-wolfermann

Post on 27-Jan-2015

136 views

Category:

Design


2 download

DESCRIPTION

Ein großer Bestandteil von Webseiten ist nach wie vor Text. Die weitreichende Unterstützung von Webfonts in modernen Browsern gibt uns die Möglichkeit, Schriftarten unserer Wahl für die Auszeichnung von Text zu nutzen. Allerdings gibt es auch Fallen bei der Verwendung von Webfonts, die gerade auf mobilen Geräten auftreten können. Lösungswege und Tipps für die Verwendung von Schrift im Responsive Webdesign. Zudem zeigt der Vortrag neue Möglichkeiten in CSS3.

TRANSCRIPT

Page 1: Typografie im Responsive Webdesign

Typografie im ResponsiveWebdesignMobileTech Conference, Berlin 04.09.2013

Sven Wolfermann | maddesigns

Page 2: Typografie im Responsive Webdesign

Sven Wolfermann (36)

Freelancer für moderne Webentwicklung (HTML5, CSS3, Responsive Webdesign) aus Berlin

CSS3 Adventskalender 2010/2011

schreibt Artikel für das T3N-, PHP- und Webstandards-Magazin (new: Screengui.de)

mobile Geek

Wer ist die Flitzpiepe da überhaupt?

Twitter: @maddesignsWeb: http://maddesigns.de

·

·

·

·

·

/

Page 3: Typografie im Responsive Webdesign

Responsive Webdesign

Flexible Spaltenraster, die auf Prozentwerte basieren

Variable Bilder- und Videogrößen – Bilder passen sich den Spalten an

CSS3 um Gerätegröße abzufragen und Inhalte anzupassen

·

·

·

Quelle Bild: http://macrojuice.com/

/

Page 4: Typografie im Responsive Webdesign

The responsive web will be99.9% typography

— James Young (@welcomebrand)

“”

The responsive web will be 99.9% typography

/

Page 5: Typografie im Responsive Webdesign

Typography in ten minutes

http://practicaltypography.com/typography-in-ten-minutes.html

/

Page 6: Typografie im Responsive Webdesign

Typography in ten minutes

Wichtigste Fakten

Bodytext gut aussehen lassen, dann um den Rest kümmern

Bodytext Schriftgröße: 15–25 Pixel

Zeilenhöhe sollte bei 120–145% liegen

Zeilenlänge sollte zwischen 45–90 Zeichen pro Zeile betragen

Nach Möglichkeit keine Systemfont verwenden, sondern eineprofessionelle Webfont

·

·

·

·

·

/

Page 7: Typografie im Responsive Webdesign

Anything from 45 to 75 characters is widelyregarded as a satisfactory length of line fora single-column page set in a serifed textface in a text size […] (counting both lettersand spaces) […].

—2.1.2 Choose a comfortable measure

The Elements of Typographic Style Applied to the Web

/

Page 8: Typografie im Responsive Webdesign

optimal Zeilenlänge 45 - 75 Zeichen

Trent Walton nutzt einen einfachen Trick mit * Sternchen

Lorem ipsum dolor sit amet, consectetur adip*isicing elit, sed do

eiusmod *tempor incididunt ut labore et dolore magna aliqua.

„Wenn die zwei Sternchen in einer Textzeile sind, ist es Zeit dieSchriftgröße zu erhöhen.“

Fluid Type

/

Page 9: Typografie im Responsive Webdesign

Optimale Schriftgröße finden

Wenn man „Desktop first" entwickelt, dann Schriftgrößen, anpassen

/

Page 10: Typografie im Responsive Webdesign

Leseabstand zum Bildschirm

The reference pixel is the visual angle ofone pixel on a device with a pixel density of96dpi and a distance from the reader of anarm's length.

For a nominal arm's length of 28 inches, the visual angle is therefore about 0.0213 degrees. Forreading at arm's length, 1px thus corresponds to about 0.26 mm (1/96 inch).

http://www.w3.org/TR/css3-values/#lengths

/

Page 11: Typografie im Responsive Webdesign

Typographic scale

Schriftgrößen-Empfehlung von Marko Dugonjić

kurze Leseentfernung: 16px, 18px, 21px, 24px

mittlere Leseentfernung: 18px, 21px, 24px, 36px

lange Leseentfernung: 21px, 24px, 36px, 48px

·

·

·

Responsive Web Typography

/

Page 12: Typografie im Responsive Webdesign

Test Scale & Rhythm

http://lamb.cc/typograph/

/

Page 13: Typografie im Responsive Webdesign

font-size and line-height based on element width

http://simplefocus.com/flowtype/

/

Page 14: Typografie im Responsive Webdesign

relative Schriftgrößen

/

Page 15: Typografie im Responsive Webdesign

relative Schriftgröße – em

CSS Anweisungen bisher

body { font-size: 100%; /* default = 16px */ }

body { font-size: 62.5%; /* calculate from 10px */}

h1 { font-size: 2.4em; /* 24px */}

p { font-size: 1.4em; /* 14px */}

/

Page 16: Typografie im Responsive Webdesign

relative Schriftgröße – em

<h1>Überschrift <span>die noch eine Subline hat</span></h1>

body { font-size: 100%; } /* 16px */h1 { font-size: 1.5em; /* 24px / 16px */ line-height: 1; }span { font-size: 1em; /* 16px / 16px */ display: block; }

Überschriftdie noch eine Subline hat

/

Page 17: Typografie im Responsive Webdesign

relative Schriftgröße – em

Bei der Berechnung von em-basierenden Schriften acht geben. Der em-Wert von font-size bezieht sich auf das Elternelement, em-Wert vonmargin/padding auf die eigene font-size

span { font-size: 0.666666667em; /* 16px / 24px */}

Überschriftdie noch eine Subline hat

In fast allen Browsern ist 16px die Default-Schriftgröße, allerdingshaben einige Mobile-Browser höhere Schriftgrößen. Blackberry OS 6.0= 22px, Kindle Touch = 26px, UC-Browser = 19px.

/

Page 18: Typografie im Responsive Webdesign

Vorteil für Responsive Webdesign

body { font-size: 1em; }

@media only screen and (min-width: 600px) { body { font-size: 1.5em; }}

@media only screen and (min-width: 750px) { body { font-size: 2em; }}

@media only screen and (min-width: 1000px) { body { font-size: 2.5em; }}

/

Page 19: Typografie im Responsive Webdesign

relative Schriftgröße – rem

rem Schriftgrößen basierend auf dem Rootelement (<html>)

span { font-size: 1rem; /* 16px / 16px */}

Achtung! rem basiert auf <html> => default meist 100% => 16px!

html { font-size: 16px; }body { font-size: 62.5%; }

Media-Querys in em – Basisberechnung ist 16px, nicht was für html {}definiert ist

/

Page 20: Typografie im Responsive Webdesign

CSS3 rem Einheit » Browser-Support

Chrome seit Version 6.0 (aktuell Version 29)

Firefox seit Version 3.6 (aktuell Version 23)

Opera / Mobile seit 11.6 / 12.0 (16 / 14)

Safari / iOS seit Version 5.0 / 4.0 (6.0 / 6.1)

Android seit Version 2.1 (4.3)

IE / mobile seit Version 9.0 / 9.0 (10.0 / 10.0)IE 9 / 10 interpretieren rem nicht in der "font" Shorthand-Notation (fixed in IE11)

/

Page 21: Typografie im Responsive Webdesign

Einfaches Sass-Mixin mit px-Fallback

$main-font-size: 16px;

@mixin x-rem ($property, $value) { #{$property}: $value * $main-font-size; #{$property}: #{$value}rem;}

// usage.some-class { @include x-rem(font-size, 1.4);}

The REM Fallback with Sass or LESS

/

Page 22: Typografie im Responsive Webdesign

umfangreicheres rem Sass-Mixin

https://gist.github.com/maddesigns/6415889

Vorteil: einfache Basis für fonts-size, umfangreiche Einsatzmöglichkeiten

Sass:

.some-class { @include x-rem(14px); //@include x-rem(14px, font-size); @include x-rem(0 12px 2 1.2, margin); @include x-rem(1.5 24px, padding);}

CSS:

.some-class { font-size: 0.875rem; margin: 0 0.75rem 2rem 1.2rem; padding: 1.5rem 1.5rem;}

/

Page 23: Typografie im Responsive Webdesign

vw, vh, vmin, vmax

Größen relativ zum Viewport

1vw = 1% of viewport width1vh = 1% of viewport height1vmin = 1vw or 1vh, whichever is smaller1vmax = 1vw or 1vh, whichever is larger

h1 { font-size: 5.9vw;}h2 { font-size: 3.0vh;}p { font-size: 2vmin;}

http://css-tricks.com/viewport-sized-typography/

/

Page 24: Typografie im Responsive Webdesign

CSS3 vw, vh, vmin, vmax Einheit » Browser-Support

Chrome seit Version 26.0 (aktuell Version 29)

Firefox seit Version 19 (aktuell Version 23)

Opera / Mobile seit 15 / 14 (16 / 14)

Safari / iOS seit Version 6.0 / 6.0 (6.0 / 6.1)

Android kein Support :(

IE / mobile seit Version 9.0 / 9.0 (10.0 / 10.0)

/

Page 25: Typografie im Responsive Webdesign

CSS3 vw, vh, vmin, vmax Einheit » Browser-Bugs

IE9 unterstützt "vm" anstatt "vmin"

Chrome unterstützt die Viewport Einheiten in border-width, column-gap oder in calc() nicht.

Chrome ist buggy bei vertikaler Veränderung des Browserfenster

Viewport Einheiten in font-size werden in WebKit bei Veränderungdes Browserfenster nicht angepasst.

·

·

·

·

/

Page 26: Typografie im Responsive Webdesign

line-height

je länger die Zeile, desto mehr Abstand zur nächsten Zeile

Type & Touch

/

Page 27: Typografie im Responsive Webdesign

line-height

wenn Text umbricht, muss man noch die Zugehörigkeit erkennen

links: große line-height,

rechts: normale line-height + padding

/

Page 28: Typografie im Responsive Webdesign

Molten Leading

Flexibler Zeilendurchschuss

$('.intro').moltenLeading({ minline: 1.2, maxline: 1.4, minwidth: 320, maxwidth: 750});

Blog-Post: Molten Leading, jQuery Plugin

/

Page 29: Typografie im Responsive Webdesign

Text-Size Anpassung auf iOS unterbinden

/* prevent auto text-size adjusting */html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}

letter-spacing

letter-spacing im Web ist oft zu eng

p { letter-spacing: 0.01em; word-spacing: 0.01em;}

/

Page 30: Typografie im Responsive Webdesign

Vorsichtig bei text-rendering: optimizeLegibility

Vorteil: Kerning aktivieren

h1 { text-rendering: optimizeLegibility;}

Firefox: wenn die font-size größer als 20px ist, dann nutzt Firefox automatisch

optimizeLegibility; für kleineren Text nutzt Firefox optimizeSpeed

/

Page 31: Typografie im Responsive Webdesign

Probleme/Bugs die bei der Verwendung von 'text-rendering'aufgetreten sind

text-overflow: ellipsis; wird falsch dargestellt

Fonts embedded with @font-face will not work on Android when text-rendering: optimizeLegibility is used.

letter-spacing don't work in Chrome

significant performance issues with optimizeLegibility on mobiledevices, it can negatively impact page load when applied to largeblocks of text.

Windows. text-rendering: optimizeLegibility; font-variant: small-caps;small-caps are ignored

·

·

·

·

·

/

Page 32: Typografie im Responsive Webdesign

@font-face

/

Page 33: Typografie im Responsive Webdesign

@font-face

Web-Fonts werden in allen Browsern bis zurück zum IE6 unterstützt

Das klingt doch gut!

zu schön um wahr zu sein...

@font-face { font-family: 'DINBold'; src: url("din-bold-webfont.eot"); src: url("din-bold-webfont.eot?#iefix") format("embedded-opentype"), url("din-bold-webfont.woff") format("woff"), url("din-bold-webfont.ttf") format("truetype"), url("din-bold-webfont.svg#DINBold") format("svg");}

um Gottes Willen...

/

Page 34: Typografie im Responsive Webdesign

@font-face

WOFF Font-Einbindung für moderne Browser (für Android zusätzlich TTF einbinden)

@font-face { font-family: Fontname; /* regular font */ src: url("/fonts/Fontname-Regular.woff") format("woff"); font-weight: normal; font-style: normal; }

@font-face { font-family: Fontname; /* bold font */ src: url("/fonts/Fontname-Bold.woff") format("woff"); font-weight: bold; font-style: normal; }

@font-face { font-family: Fontname; /* italic font */ src: url("/fonts/Fontname-Italic.woff") format("woff"); font-weight: normal; font-style: italic; }

@font-face { font-family: Fontname; /* bolditalic font */ src: url("/fonts/Fontname-BoldItalic.woff") format("woff"); font-weight: bold; font-style: italic; }

/

Page 35: Typografie im Responsive Webdesign

@font-face für Old-IE (6-8)

/* ie-specific.css */@font-face { font-family: Fontname-regular; /* regular IE font */ src: url("/fonts/Fontname-Regular.eot"); }

@font-face { /* bold IE font */ font-family: Fontname-bold; src: url("/fonts/Fontname-Bold.eot"); }

@font-face { /* italic IE font */ font-family: Fontname-italic; src: url("/fonts/Fontname-Italic.eot"); }

@font-face { /* bold italic IE font */ font-family: Fontname-bolditalic; src: url("/fonts/Fontname-BoldItalic.eot"); }

Conditional Comments

<!--[if lt IE 9]> <link rel="stylesheet" href="ie-specific.css" type="text/css" media="screen" /><![endif]-->

/

Page 36: Typografie im Responsive Webdesign

Probleme: Faux Bold

„interpoliertes Fetten“ oder „doppelt gefettet“

/

Page 37: Typografie im Responsive Webdesign

@font-face für Old-IE (6-8)

/* ie-specific.css */strong, b { font-family: Fontname-bold; font-weight: normal;}em, i { font-family: Fontname-italic; font-style: normal;}strong em, em strong,strong i, i strong,b em, em b,b i, i b { font-family: Fontname-bolditalic; font-style: normal; font-weight: normal;}

/

Page 38: Typografie im Responsive Webdesign

Webfonts testen – typecast.com

Font auswählen und Seite an Seite mit anderen vergleichen

http://typecast.com/

/

Page 39: Typografie im Responsive Webdesign

Font-Loading Performance

/

Page 40: Typografie im Responsive Webdesign

Font-Loading Performance

/

Page 41: Typografie im Responsive Webdesign

Font-Loading Performance

/

Page 42: Typografie im Responsive Webdesign

Font-Loading Performance

Text mit Webfonts werden in mobilenBrowsern nicht angezeigt, bis die Schriftgeladen ist um den „FOUT“ (Flash ofunstyled content) zu vermeiden.

/

Page 43: Typografie im Responsive Webdesign

Font-Loading Performance – Google Fonts

/

Page 44: Typografie im Responsive Webdesign

Font-Loading Performance – Google Fonts

/

Page 45: Typografie im Responsive Webdesign

Font-Loading Performance

Webfonts nur für große Bildschirme (impliziert schnellere Verbindung)

@font-face { font-family: "Fontname"; src: url("/fonts/Fontname-Regular.woff") format("woff"); font-weight: normal; font-style: normal;}@media only screen and (min-width: 768px) { body { font-family: "Fontname", Georgia, serif; }}

in modernen Browsern werden Schriften erst geladen, wenn siezugewiesen werden

/

Page 46: Typografie im Responsive Webdesign

Font-Loading Performance

m.guardian.co.uk lädt Webfonts nur für moderne Devices (Browser)

Cutting the mustard?

WOFF Support?

LocalStorage?

=> safe fonts to LocalStorage => load fonts

·

·

·

Cutting the mustard

/

Page 47: Typografie im Responsive Webdesign

Webfont Loader – Webfonts asynchron laden

für Typekit, Google, Fontdeck, Fonts.com, … und selbstgehostete Fonts

<script>WebFontConfig = { typekit: { id: 'xxxxxx' }};(function() { var wf = document.createElement('script'); wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js'; wf.type = 'text/javascript'; wf.async = 'true'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(wf, s);})();</script>

https://github.com/typekit/webfontloader

/

Page 48: Typografie im Responsive Webdesign

Webfont Loader

CSS Klassen für Font-Events

.wf-loading

.wf-active

.wf-inactive

.wf-<familyname>-<fvd>-loading

.wf-<familyname>-<fvd>-active

.wf-<familyname>-<fvd>-inactive

h1, h2, h3 { font-family: sans-serif;}

.wf-active h1, .wf-active h2, .wf-active h3 { font-family: "webfont", sans-serif;}

/

Page 49: Typografie im Responsive Webdesign

Fallback-Fonts

/

Page 50: Typografie im Responsive Webdesign

Fallback-Fonts auf mobilen Geräten

Samsung GT-S5830 (Android 2.3.3) Samsung GT-I9300 (Android 4.1.2)

Font-Stack-Beispiel für den 'serif' Font-Fallback

font-family: 'Minion','Droid serif','Times New Roman',Times,serif;

/

Page 51: Typografie im Responsive Webdesign

Fallback-Fonts auf mobilen Geräten

http://www.jordanm.co.uk/tinytype

/

Page 52: Typografie im Responsive Webdesign

Fallback-Fonts auf mobilen Geräten

Helvetica nur auf iOS, Arial auf iOS, WP und BB

auf Android nur Droid Sans, Droid Serif, Droid Sans Mono und Roboto

/

Page 53: Typografie im Responsive Webdesign

Fallback-Fonts auf mobilen Geräten

Helvetica-Fallback Beispiel

Firefox für Android seit Version 21 mit neuen System-Fonts

Open-Sans CharisImproved type on Firefox for Android

/

Page 54: Typografie im Responsive Webdesign

text-overflow: ellipsis

Textlängen beschneiden

.class { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

Demo: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab e…

"Problem": geht nur bei einzeiligen Texten (white-space: nowrap)

/

Page 55: Typografie im Responsive Webdesign

text-overflow: ellipsis

/

Page 56: Typografie im Responsive Webdesign

text-overflow: ellipsis

Vorsichtig mit text-overflow

/

Page 57: Typografie im Responsive Webdesign

Wörter trennen

/

Page 58: Typografie im Responsive Webdesign

Wörter trennen

h3 { font-size: 16px; line-height: 1.4; max-height: 46px; overflow: hidden; width: 180px;}

.shy { /* use the HTML-entity Kriegsgräberfürsorge */}

.hyphens {-webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto;}

.word-break {/* Non standard for webkit */ word-break: break-word;-ms-word-break: break-all; word-break: break-all;}

/

Page 59: Typografie im Responsive Webdesign

hyphenation – automatische Trennung

wenn Text zentriert wird, hyphenation aktivieren

-webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto;}

Wichtig: Dokumentensprache angeben <html lang="de">

getrennt wird anhand der im Browser integrierten Wörterbücher, Support kann unterschiedlichsein

Problem: kaum Einfluss wann getrennt wird

hyphenate-limit-lines: 2; /* support in IE10 */hyphenate-limit-chars: 6 3 2; /* longer than 6 characters, 3 or more before break, 2 or more after break */

Chrome 29 und Android 4.0 Browser unterstützen "-webkit-hyphens: none", aber nicht die "auto"Eigenschaft.

·

·

·

Finer grained control of hyphenation with CSS4 Text

/

Page 60: Typografie im Responsive Webdesign

Font-Features

OpenType Features mit CSS3 nutzen

OpenType tag Enables

kern Kerning

liga Standard ligatures

dlig Discretionary ligatures

smcp Small capitals

subs Subscript

sups Superscript

swsh Swashes

ss01, ss02, …, ss20 Stylistic sets 1 to 20

OpenType features in web browsers

/

Page 61: Typografie im Responsive Webdesign

Font-Features

Small Caps aktivieren (10% vergrößerte Kapitälchen)

p.smallcaps { font-feature-settings: "smcp" 1; }

Ligaturen aktivieren

p.ligatures{ font-feature-settings: "liga" on; }

mehrere Zuweisungen

.element { -webkit-font-feature-settings: "kern", "liga", "case"; -moz-font-feature-settings: "kern", "liga", "case"; font-feature-settings: "kern", "liga", "case"; }

/

Page 63: Typografie im Responsive Webdesign

Typeplate – „typographic starter kit“

// $Variable $BaseType$serif-boolean: true !default;$font-family: if($serif-boolean, serif, sans-serif) !default; // Non-font-face font-stack$font-weight: normal !default;$line-height: 1.65 !default;$font-size: 112.5 !default; // percentage value (16 * 112.5% = 18px)$font-base: 16 * ($font-size/100) !default; // converts our percentage to a pixel value$custom-font-family: false !default; // Custom font-face stack, if set will be added to the $font-family…

http://typeplate.com/

/

Page 64: Typografie im Responsive Webdesign

FitText

Überschriften an Bildschirm anpassen

<script src="jquery.fittext.js"></script><script> jQuery(".responsive_headline").fitText();</script>

http://fittextjs.com/

/

Page 65: Typografie im Responsive Webdesign

SlabText

A jQuery plugin for producing big, bold & responsive headlines

http://freqdec.github.io/slabText/

/

Page 66: Typografie im Responsive Webdesign

Responsive Text

A jQuery plugin to set font sizes responsively

http://garyhepting.com/jquery-responsive-text/

/

Page 67: Typografie im Responsive Webdesign

Danke für die Aufmerksamkeit!Sven Wolfermann | maddesigns

http://maddesigns.de/responsive-typografie/

HTML5 slideshow by Google

/