typografie im responsive webdesign

Download Typografie im Responsive Webdesign

Post on 27-Jan-2015

116 views

Category:

Design

2 download

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.

TRANSCRIPT

  • 1. Typografie im Responsive Webdesign MobileTech Conference, Berlin 04.09.2013 Sven Wolfermann | maddesigns

2. Sven Wolfermann (36) Freelancer fr moderne Webentwicklung (HTML5, CSS3, Responsive Webdesign) aus Berlin CSS3 Adventskalender 2010/2011 schreibt Artikel fr 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 Videogren Bilder passen sich den Spalten an CSS3 um Gertegre 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 kmmern Bodytext Schriftgre: 1525 Pixel Zeilenhhe sollte bei 120145% liegen Zeilenlnge sollte zwischen 4590 Zeichen pro Zeile betragen Nach Mglichkeit 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 Zeilenlnge 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 Schriftgre zu erhhen. Fluid Type / 9. Optimale Schriftgre finden Wenn man Desktop first" entwickelt, dann Schriftgren, 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 Schriftgren-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/ / 14. relative Schriftgren / 15. relative Schriftgre 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 Schriftgre em berschrift dienocheineSublinehat 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 Schriftgre 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-Schriftgre, allerdings haben einige Mobile-Browser hhere Schriftgren. Blackberry OS 6.0 = 22px, Kindle Touch = 26px, UC-Browser = 19px. / 18. Vorteil fr 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 Schriftgre rem rem Schriftgren basierend auf dem Rootelement () span{ font-size:1rem;/*16px/16px*/ } Achtung! rem basiert auf => default meist 100% => 16px! html{font-size:16px;} body{font-size:62.5%;} Media-Querys in em Basisberechnung ist 16px, nicht was fr 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 fr fonts-size, umfangreiche Einsatzmglichkeiten 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 Gren 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 untersttzt "vm" anstatt "vmin" Chrome untersttzt die Viewport Einheiten in border-width, column- gap oder in calc() nicht. Chrome ist buggy bei vertikaler Vernderung des Browserfenster Viewport Einheiten in font-size werden in WebKit bei Vernderung des Browserfenster nicht angepasst. / 26. line-height je lnger die Zeile, desto mehr Abstand zur nchsten Zeile Type & Touch / 27. line-height wenn Text umbricht, muss man noch die Zugehrigkeit erkennen links: groe line-height, rechts: normale line-height +padding / 28. Molten Leading Flexibler Zeilendurchschuss $('.intro').moltenLeading({ minline:1.2, maxline:1.4, minwidth:320, maxwidth:750 }); Blog-Post: Molten Leading, jQuery Plugin / 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-rendering: optimizeLegibility Vorteil: Kerning aktivieren h1{ text-rendering:optimizeLegibility; } Firefox: wenndie font-size grer als 20px ist, dannnutzt Firefox automatisch optimizeLegibility; fr kleinerenText nutzt Firefox optimizeSpeed / 31. 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 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 / 32. @font-face / 33. @font-face Web-Fonts werden in allen Browsern bis zurck zum IE6 untersttzt Das klingt doch gut! zu schn 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 fr moderne Browser (fr Android zustzlich 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 fr 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 / 36. Probleme: Faux Bold interpoliertes Fetten oder doppelt gefettet / 37. @font-face fr 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 auswhlen und Seite an Seite mit anderen vergleichen http://typecast.com/ / 39. Font-Loading Performance / 40. Font-Loading Performance / 41. Font-Loading Performance / 42. Font-Loading Performance Text mit Webfonts werden in mobilen Browsern nic