SlideShare ist ein Scribd-Unternehmen logo
Typografie im Responsive
Webdesign
MobileTech 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: @maddesigns
Web: 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 be
99.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 eine
professionelle Webfont
·
·
·
·
·
/
Anything from 45 to 75 characters is widely
regarded as a satisfactory length of line for
a single-column page set in a serifed text
face in a text size […] (counting both letters
and 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 die
Schriftgröß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 of
one pixel on a device with a pixel density of
96dpi and a distance from the reader of an
arm's length.
For a nominal arm's length of 28 inches, the visual angle is therefore about 0.0213 degrees. For
reading 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
/
Test Scale & Rhythm
http://lamb.cc/typograph/
/
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%;/*calculatefrom10px*/
}
h1{
font-size:2.4em;/*24px*/
}
p{
font-size:1.4em;/*14px*/
}
/
relative Schriftgröße – em
<h1>Überschrift
<span>dienocheineSublinehat</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;}
Überschrift
dienoch eineSublinehat
/
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 von
margin/padding auf die eigene font-size
span{
font-size:0.666666667em;/*16px/24px*/
}
Überschrift
dienocheineSublinehat
In fast allen Browsern ist 16px die Default-Schriftgröße, allerdings
haben 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;}
@mediaonlyscreenand(min-width:600px){
body{font-size:1.5em;}
}
@mediaonlyscreenand(min-width:750px){
body{font-size:2em;}
}
@mediaonlyscreenand(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)
IE9/10interpretierenrem nichtinder"font"Shorthand-Notation(fixedinIE11)
/
Einfaches Sass-Mixin mit px-Fallback
$main-font-size:16px;
@mixinx-rem($property,$value){
#{$property}:$value*$main-font-size;
#{$property}:#{$value}rem;
}
//usage
.some-class{
@includex-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%ofviewportwidth
1vh=1%ofviewportheight
1vmin=1vwor1vh,whicheverissmaller
1vmax=1vwor1vh,whicheverislarger
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änderung
des 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
/*preventautotext-sizeadjusting*/
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-ren​der​ing: optimizeLegibility
Vorteil: Kerning aktivieren
h1{
text-ren​der​ing:optimizeLegibility;
}
Firefox: wenndie font-size größer als 20px ist, dannnutzt Firefox automatisch
optimizeLegibility; für kleinerenText nutzt Firefox optimizeSpeed
/
Probleme/Bugs die bei der Verwendung von 'text-ren​der​ing'
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 mobile
devices, it can negatively impact page load when applied to large
blocks 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;
}
strongem,emstrong,
strongi,istrong,
bem,emb,
bi,ib{
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 mobilen
Browsern nicht angezeigt, bis die Schrift
geladen ist um den „FOUT“ (Flash of
unstyled 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;
}
@mediaonlyscreenand(min-width:768px){
body{
font-family:"Fontname",Georgia,serif;
}
}
in modernen Browsern werden Schriften erst geladen, wenn sie
zugewiesen 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(){
varwf=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';
vars=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-activeh1,.wf-activeh2,.wf-activeh3{
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','Droidserif','TimesNewRoman',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äber​fü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 unterschiedlich
sein
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-facefont-stack
$font-weight:normal!default;
$line-height:1.65!default;
$font-size:112.5!default;//percentagevalue(16*112.5%=18px)
$font-base:16*($font-size/100)!default;//convertsourpercentagetoapixelvalue
$custom-font-family:false!default;//Customfont-facestack,ifsetwillbeaddedtot
…
http://typeplate.com/
/
FitText
Überschriften an Bildschirm anpassen
<scriptsrc="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
/

Weitere ähnliche Inhalte

Ähnlich wie Typografie im Responsive Webdesign

Design. Kantine. Web Typography. Namics.
Design. Kantine. Web Typography. Namics.Design. Kantine. Web Typography. Namics.
Design. Kantine. Web Typography. Namics.
Claus Medvesek
 
CSS Media Queries (WebTech Conference 2010)
CSS Media Queries (WebTech Conference 2010)CSS Media Queries (WebTech Conference 2010)
CSS Media Queries (WebTech Conference 2010)
Michael Jendryschik
 
CSS Media Queries (WordCamp 2010)
CSS Media Queries (WordCamp 2010)CSS Media Queries (WordCamp 2010)
CSS Media Queries (WordCamp 2010)
Michael Jendryschik
 
SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint O...
SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint O...SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint O...
SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint O...fabianmoritz
 
There and back again - Responsive Webdesign mit WordPress
There and back again - Responsive Webdesign mit WordPress There and back again - Responsive Webdesign mit WordPress
There and back again - Responsive Webdesign mit WordPress
Michael Oeser
 
Responsive Webdesign mit Bootstrap
Responsive Webdesign mit BootstrapResponsive Webdesign mit Bootstrap
Responsive Webdesign mit Bootstrap
Gregor Biswanger
 
Responsive Webdesign Process
Responsive Webdesign ProcessResponsive Webdesign Process
Responsive Webdesign Process
Sven Wolfermann
 
Responsive Images
Responsive ImagesResponsive Images
Responsive Images
Sven Wolfermann
 
121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"
Oseon
 
1&1 Frontend Workshop
1&1 Frontend Workshop1&1 Frontend Workshop
1&1 Frontend Workshop
Nico Steiner
 
Was nicht passt wird responsive gemacht - Extended Edition
Was nicht passt wird responsive gemacht - Extended EditionWas nicht passt wird responsive gemacht - Extended Edition
Was nicht passt wird responsive gemacht - Extended Edition
Christoph Reinartz
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Patrick Lauke
 
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsAber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Gregor Biswanger
 
My application as webdesigner and front-end developer
My application as webdesigner and front-end developerMy application as webdesigner and front-end developer
My application as webdesigner and front-end developerchristianschweinhardt
 
CSS3 Media Queries
CSS3 Media QueriesCSS3 Media Queries
CSS3 Media Queries
Francesco Schwarz
 
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichWebstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichPeter Rozek
 
Am Ende ist doch alles HTML (Jax 2010)
Am Ende ist doch alles HTML (Jax 2010)Am Ende ist doch alles HTML (Jax 2010)
Am Ende ist doch alles HTML (Jax 2010)
Jens Grochtdreis
 
Responsive Webdesign Vortrag vor dem ZKI Arbeitskreis Web - Uni Magdeburg
Responsive Webdesign Vortrag vor dem ZKI Arbeitskreis Web - Uni MagdeburgResponsive Webdesign Vortrag vor dem ZKI Arbeitskreis Web - Uni Magdeburg
Responsive Webdesign Vortrag vor dem ZKI Arbeitskreis Web - Uni Magdeburg
marmalade GmbH
 
Was nicht passt wird responsive gemacht
Was nicht passt wird responsive gemachtWas nicht passt wird responsive gemacht
Was nicht passt wird responsive gemacht
Christoph Reinartz
 

Ähnlich wie Typografie im Responsive Webdesign (20)

Design. Kantine. Web Typography. Namics.
Design. Kantine. Web Typography. Namics.Design. Kantine. Web Typography. Namics.
Design. Kantine. Web Typography. Namics.
 
CSS Media Queries (WebTech Conference 2010)
CSS Media Queries (WebTech Conference 2010)CSS Media Queries (WebTech Conference 2010)
CSS Media Queries (WebTech Conference 2010)
 
CSS Media Queries (WordCamp 2010)
CSS Media Queries (WordCamp 2010)CSS Media Queries (WordCamp 2010)
CSS Media Queries (WordCamp 2010)
 
SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint O...
SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint O...SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint O...
SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint O...
 
There and back again - Responsive Webdesign mit WordPress
There and back again - Responsive Webdesign mit WordPress There and back again - Responsive Webdesign mit WordPress
There and back again - Responsive Webdesign mit WordPress
 
Responsive Webdesign mit Bootstrap
Responsive Webdesign mit BootstrapResponsive Webdesign mit Bootstrap
Responsive Webdesign mit Bootstrap
 
Responsive Design Whitepaper
Responsive Design WhitepaperResponsive Design Whitepaper
Responsive Design Whitepaper
 
Responsive Webdesign Process
Responsive Webdesign ProcessResponsive Webdesign Process
Responsive Webdesign Process
 
Responsive Images
Responsive ImagesResponsive Images
Responsive Images
 
121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"121127 SouperTuesday "Responsive Webdesign"
121127 SouperTuesday "Responsive Webdesign"
 
1&1 Frontend Workshop
1&1 Frontend Workshop1&1 Frontend Workshop
1&1 Frontend Workshop
 
Was nicht passt wird responsive gemacht - Extended Edition
Was nicht passt wird responsive gemacht - Extended EditionWas nicht passt wird responsive gemacht - Extended Edition
Was nicht passt wird responsive gemacht - Extended Edition
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010
 
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsAber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
 
My application as webdesigner and front-end developer
My application as webdesigner and front-end developerMy application as webdesigner and front-end developer
My application as webdesigner and front-end developer
 
CSS3 Media Queries
CSS3 Media QueriesCSS3 Media Queries
CSS3 Media Queries
 
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichWebstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen Bereich
 
Am Ende ist doch alles HTML (Jax 2010)
Am Ende ist doch alles HTML (Jax 2010)Am Ende ist doch alles HTML (Jax 2010)
Am Ende ist doch alles HTML (Jax 2010)
 
Responsive Webdesign Vortrag vor dem ZKI Arbeitskreis Web - Uni Magdeburg
Responsive Webdesign Vortrag vor dem ZKI Arbeitskreis Web - Uni MagdeburgResponsive Webdesign Vortrag vor dem ZKI Arbeitskreis Web - Uni Magdeburg
Responsive Webdesign Vortrag vor dem ZKI Arbeitskreis Web - Uni Magdeburg
 
Was nicht passt wird responsive gemacht
Was nicht passt wird responsive gemachtWas nicht passt wird responsive gemacht
Was nicht passt wird responsive gemacht
 

Mehr von Sven Wolfermann

Responsive and Fast
Responsive and FastResponsive and Fast
Responsive and Fast
Sven Wolfermann
 
Testing Responsive Webdesign
Testing Responsive WebdesignTesting Responsive Webdesign
Testing Responsive Webdesign
Sven Wolfermann
 
Responsive Enhancement
Responsive EnhancementResponsive Enhancement
Responsive Enhancement
Sven Wolfermann
 
Fasten RWD Development with Sass
Fasten RWD Development with SassFasten RWD Development with Sass
Fasten RWD Development with Sass
Sven Wolfermann
 
RESS – Responsive Webdesign and Server Side Components
RESS – Responsive Webdesign and Server Side ComponentsRESS – Responsive Webdesign and Server Side Components
RESS – Responsive Webdesign and Server Side Components
Sven Wolfermann
 
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Sven Wolfermann
 
CSS3 im praktischen Einsatz
CSS3 im praktischen EinsatzCSS3 im praktischen Einsatz
CSS3 im praktischen Einsatz
Sven Wolfermann
 

Mehr von Sven Wolfermann (7)

Responsive and Fast
Responsive and FastResponsive and Fast
Responsive and Fast
 
Testing Responsive Webdesign
Testing Responsive WebdesignTesting Responsive Webdesign
Testing Responsive Webdesign
 
Responsive Enhancement
Responsive EnhancementResponsive Enhancement
Responsive Enhancement
 
Fasten RWD Development with Sass
Fasten RWD Development with SassFasten RWD Development with Sass
Fasten RWD Development with Sass
 
RESS – Responsive Webdesign and Server Side Components
RESS – Responsive Webdesign and Server Side ComponentsRESS – Responsive Webdesign and Server Side Components
RESS – Responsive Webdesign and Server Side Components
 
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
Webmontag karlsruhe – responsive images, maddesigns (sven wolfermann)
 
CSS3 im praktischen Einsatz
CSS3 im praktischen EinsatzCSS3 im praktischen Einsatz
CSS3 im praktischen Einsatz
 

Typografie im Responsive Webdesign

  • 1. Typografie im Responsive Webdesign MobileTech Conference, Berlin 04.09.2013 Sven Wolfermann | maddesigns
  • 2. 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: @maddesigns Web: http://maddesigns.de · · · · · /
  • 3. 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/ /
  • 4. The responsive web will be 99.9% typography — James Young (@welcomebrand) “ ” The responsive web will be 99.9% typography /
  • 5. Typography in ten minutes http://practicaltypography.com/typography-in-ten-minutes.html /
  • 6. 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 eine professionelle Webfont · · · · · /
  • 7. Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size […] (counting both letters and spaces) […]. —2.1.2 Choose a comfortable measure “ ” The Elements of Typographic Style Applied to the Web /
  • 8. 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 die Schriftgröße zu erhöhen.“ Fluid Type /
  • 9. Optimale Schriftgröße finden Wenn man „Desktop first" entwickelt, dann Schriftgrößen, anpassen /
  • 10. Leseabstand zum Bildschirm The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length. For a nominal arm's length of 28 inches, the visual angle is therefore about 0.0213 degrees. For reading at arm's length, 1px thus corresponds to about 0.26 mm (1/96 inch). “ ” http://www.w3.org/TR/css3-values/#lengths /
  • 11. 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 /
  • 12. Test Scale & Rhythm http://lamb.cc/typograph/ /
  • 13. font-size and line-height based on element width http://simplefocus.com/flowtype/ /
  • 15. relative Schriftgröße – em CSS Anweisungen bisher body{ font-size:100%;/*default=16px*/ } body{ font-size:62.5%;/*calculatefrom10px*/ } h1{ font-size:2.4em;/*24px*/ } p{ font-size:1.4em;/*14px*/ } /
  • 16. relative Schriftgröße – em <h1>Überschrift <span>dienocheineSublinehat</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;} Überschrift dienoch eineSublinehat /
  • 17. 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 von margin/padding auf die eigene font-size span{ font-size:0.666666667em;/*16px/24px*/ } Überschrift dienocheineSublinehat In fast allen Browsern ist 16px die Default-Schriftgröße, allerdings haben einige Mobile-Browser höhere Schriftgrößen. Blackberry OS 6.0 = 22px, Kindle Touch = 26px, UC-Browser = 19px. /
  • 18. Vorteil für Responsive Webdesign body{font-size:1em;} @mediaonlyscreenand(min-width:600px){ body{font-size:1.5em;} } @mediaonlyscreenand(min-width:750px){ body{font-size:2em;} } @mediaonlyscreenand(min-width:1000px){ body{font-size:2.5em;} } /
  • 19. 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 /
  • 20. 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) IE9/10interpretierenrem nichtinder"font"Shorthand-Notation(fixedinIE11) /
  • 21. Einfaches Sass-Mixin mit px-Fallback $main-font-size:16px; @mixinx-rem($property,$value){ #{$property}:$value*$main-font-size; #{$property}:#{$value}rem; } //usage .some-class{ @includex-rem(font-size,1.4); } The REM Fallback with Sass or LESS /
  • 22. 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; } /
  • 23. vw, vh, vmin, vmax Größen relativ zum Viewport 1vw=1%ofviewportwidth 1vh=1%ofviewportheight 1vmin=1vwor1vh,whicheverissmaller 1vmax=1vwor1vh,whicheverislarger h1{ font-size:5.9vw; } h2{ font-size:3.0vh; } p{ font-size:2vmin; } http://css-tricks.com/viewport-sized-typography/ /
  • 24. 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) /
  • 25. 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änderung des Browserfenster nicht angepasst. · · · · /
  • 26. line-height je länger die Zeile, desto mehr Abstand zur nächsten Zeile Type & Touch /
  • 27. line-height wenn Text umbricht, muss man noch die Zugehörigkeit erkennen links: große line-height, rechts: normale line-height +padding /
  • 29. Text-Size Anpassung auf iOS unterbinden /*preventautotext-sizeadjusting*/ 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; } /
  • 30. Vorsichtig bei text-ren​der​ing: optimizeLegibility Vorteil: Kerning aktivieren h1{ text-ren​der​ing:optimizeLegibility; } Firefox: wenndie font-size größer als 20px ist, dannnutzt Firefox automatisch optimizeLegibility; für kleinerenText nutzt Firefox optimizeSpeed /
  • 31. Probleme/Bugs die bei der Verwendung von 'text-ren​der​ing' 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 mobile devices, it can negatively impact page load when applied to large blocks of text. Windows. text-rendering: optimizeLegibility; font-variant: small-caps; small-caps are ignored · · · · · /
  • 33. @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... /
  • 34. @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; } /
  • 35. @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]--> /
  • 36. Probleme: Faux Bold „interpoliertes Fetten“ oder „doppelt gefettet“ /
  • 37. @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; } strongem,emstrong, strongi,istrong, bem,emb, bi,ib{ font-family:Fontname-bolditalic; font-style:normal; font-weight:normal; } /
  • 38. Webfonts testen – typecast.com Font auswählen und Seite an Seite mit anderen vergleichen http://typecast.com/ /
  • 42. Font-Loading Performance Text mit Webfonts werden in mobilen Browsern nicht angezeigt, bis die Schrift geladen ist um den „FOUT“ (Flash of unstyled content) zu vermeiden. /
  • 45. 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; } @mediaonlyscreenand(min-width:768px){ body{ font-family:"Fontname",Georgia,serif; } } in modernen Browsern werden Schriften erst geladen, wenn sie zugewiesen werden /
  • 46. 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 /
  • 47. Webfont Loader – Webfonts asynchron laden für Typekit, Google, Fontdeck, Fonts.com, … und selbstgehostete Fonts <script> WebFontConfig={ typekit:{id:'xxxxxx'} }; (function(){ varwf=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'; vars=document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(wf,s); })(); </script> https://github.com/typekit/webfontloader /
  • 48. 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-activeh1,.wf-activeh2,.wf-activeh3{ font-family:"webfont",sans-serif; } /
  • 50. 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','Droidserif','TimesNewRoman',Times,serif; /
  • 51. Fallback-Fonts auf mobilen Geräten http://www.jordanm.co.uk/tinytype /
  • 52. 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 /
  • 53. 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 /
  • 54. 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) /
  • 58. Wörter trennen h3 { font-size: 16px; line-height: 1.4; max-height: 46px; overflow: hidden; width: 180px; } .shy { /* use the HTML-entity ​ Kriegsgräber​fü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; } /
  • 59. 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 unterschiedlich sein 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 /
  • 60. 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 /
  • 61. 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"; } /
  • 63. Typeplate – „typographic starter kit“ //$Variable$BaseType $serif-boolean:true!default; $font-family:if($serif-boolean,serif,sans-serif)!default;//Non-font-facefont-stack $font-weight:normal!default; $line-height:1.65!default; $font-size:112.5!default;//percentagevalue(16*112.5%=18px) $font-base:16*($font-size/100)!default;//convertsourpercentagetoapixelvalue $custom-font-family:false!default;//Customfont-facestack,ifsetwillbeaddedtot … http://typeplate.com/ /
  • 64. FitText Überschriften an Bildschirm anpassen <scriptsrc="jquery.fittext.js"></script> <script> jQuery(".responsive_headline").fitText(); </script> http://fittextjs.com/ /
  • 65. SlabText A jQuery plugin for producing big, bold & responsive headlines http://freqdec.github.io/slabText/ /
  • 66. Responsive Text A jQuery plugin to set font sizes responsively http://garyhepting.com/jquery-responsive-text/ /
  • 67. Danke für die Aufmerksamkeit! Sven Wolfermann | maddesigns http://maddesigns.de/responsive-typografie/ HTML5 slideshow by Google /