Upload
sven-wolfermann
View
138
Download
2
Embed Size (px)
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.
Citation preview
Typografie im ResponsiveWebdesignMobileTech Conference, Berlin 04.09.2013
Sven Wolfermann | maddesigns
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
·
·
·
·
·
/
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/
/
The responsive web will be99.9% typography
— James Young (@welcomebrand)
“”
The responsive web will be 99.9% typography
/
Typography in ten minutes
http://practicaltypography.com/typography-in-ten-minutes.html
/
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
·
·
·
·
·
/
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
/
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
/
Optimale Schriftgröße finden
Wenn man „Desktop first" entwickelt, dann Schriftgrößen, anpassen
/
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
/
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
/
font-size and line-height based on element width
http://simplefocus.com/flowtype/
/
relative Schriftgrößen
/
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 */}
/
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
/
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.
/
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; }}
/
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
/
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)
/
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
/
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;}
/
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/
/
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)
/
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.
·
·
·
·
/
line-height
je länger die Zeile, desto mehr Abstand zur nächsten Zeile
Type & Touch
/
line-height
wenn Text umbricht, muss man noch die Zugehörigkeit erkennen
links: große line-height,
rechts: normale line-height + padding
/
Molten Leading
Flexibler Zeilendurchschuss
$('.intro').moltenLeading({ minline: 1.2, maxline: 1.4, minwidth: 320, maxwidth: 750});
Blog-Post: Molten Leading, jQuery Plugin
/
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;}
/
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
/
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
·
·
·
·
·
/
@font-face
/
@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...
/
@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; }
/
@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]-->
/
Probleme: Faux Bold
„interpoliertes Fetten“ oder „doppelt gefettet“
/
@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;}
/
Webfonts testen – typecast.com
Font auswählen und Seite an Seite mit anderen vergleichen
http://typecast.com/
/
Font-Loading Performance
/
Font-Loading Performance
/
Font-Loading Performance
/
Font-Loading Performance
Text mit Webfonts werden in mobilenBrowsern nicht angezeigt, bis die Schriftgeladen ist um den „FOUT“ (Flash ofunstyled content) zu vermeiden.
/
Font-Loading Performance – Google Fonts
/
Font-Loading Performance – Google Fonts
/
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
/
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
/
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
/
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;}
/
Fallback-Fonts
/
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;
/
Fallback-Fonts auf mobilen Geräten
http://www.jordanm.co.uk/tinytype
/
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
/
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
/
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)
/
text-overflow: ellipsis
/
text-overflow: ellipsis
Vorsichtig mit text-overflow
/
Wörter trennen
/
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;}
/
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
/
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
/
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"; }
/
Face detection
Quelle: TNW
http://webdesign.maratz.com/lab/responsivetypography/realtime/
/
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/
/
FitText
Überschriften an Bildschirm anpassen
<script src="jquery.fittext.js"></script><script> jQuery(".responsive_headline").fitText();</script>
http://fittextjs.com/
/
SlabText
A jQuery plugin for producing big, bold & responsive headlines
http://freqdec.github.io/slabText/
/
Responsive Text
A jQuery plugin to set font sizes responsively
http://garyhepting.com/jquery-responsive-text/
/
Danke für die Aufmerksamkeit!Sven Wolfermann | maddesigns
http://maddesigns.de/responsive-typografie/
HTML5 slideshow by Google
/