Typografie im Responsive Webdesign

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 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/ /
14. relative Schriftgrößen /
15. relative Schriftgröße – em CSS Anweisungen bisher b o d y { f o n t - s i z e : 1 0 0 % ; / * d e f a u l t = 1 6 p x * / } b o d y { f o n t - s i z e : 6 2 . 5 % ; / * c a l c u l a t e f r o m 1 0 p x * / } h 1 { f o n t - s i z e : 2 . 4 e m ; / * 2 4 p x * / } p { f o n t - s i z e : 1 . 4 e m ; / * 1 4 p x * / } /
16. relative Schriftgröße – em < h 1 > Ü b e r s c h r i f t < s p a n > d i e n o c h e i n e S u b l i n e h a t < / s p a n > < / h 1 > b o d y { f o n t - s i z e : 1 0 0 % ; } / * 1 6 p x * / h 1 { f o n t - s i z e : 1 . 5 e m ; / * 2 4 p x / 1 6 p x * / l i n e - h e i g h t : 1 ; } s p a n { f o n t - s i z e : 1 e m ; / * 1 6 p x / 1 6 p x * / d i s p l a y : b l o c k ; } Überschrift die noch eine Subline hat /
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 s p a n { f o n t - s i z e : 0 . 6 6 6 6 6 6 6 6 7 e m ; / * 1 6 p x / 2 4 p x * / } Überschrift die noch eine Subline hat 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 b o d y { f o n t - s i z e : 1 e m ; } @ m e d i a o n l y s c r e e n a n d ( m i n - w i d t h : 6 0 0 p x ) { b o d y { f o n t - s i z e : 1 . 5 e m ; } } @ m e d i a o n l y s c r e e n a n d ( m i n - w i d t h : 7 5 0 p x ) { b o d y { f o n t - s i z e : 2 e m ; } } @ m e d i a o n l y s c r e e n a n d ( m i n - w i d t h : 1 0 0 0 p x ) { b o d y { f o n t - s i z e : 2 . 5 e m ; } } /
19. relative Schriftgröße – rem rem Schriftgrößen basierend auf dem Rootelement (<html>) s p a n { f o n t - s i z e : 1 r e m ; / * 1 6 p x / 1 6 p x * / } Achtung! rem basiert auf <html> => default meist 100% => 16px! h t m l { f o n t - s i z e : 1 6 p x ; } b o d y { f o n t - s i z e : 6 2 . 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) IE 9 / 10 interpretieren rem nicht in der "font" Shorthand-Notation (fixed in IE11) /
21. Einfaches Sass-Mixin mit px-Fallback $ m a i n - f o n t - s i z e : 1 6 p x ; @ m i x i n x - r e m ( $ p r o p e r t y , $ v a l u e ) { # { $ p r o p e r t y } : $ v a l u e * $ m a i n - f o n t - s i z e ; # { $ p r o p e r t y } : # { $ v a l u e } r e m ; } / / u s a g e . s o m e - c l a s s { @ i n c l u d e x - r e m ( f o n t - s i z e , 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: . s o m e - c l a s s { @ i n c l u d e x - r e m ( 1 4 p x ) ; / / @ i n c l u d e x - r e m ( 1 4 p x , f o n t - s i z e ) ; @ i n c l u d e x - r e m ( 0 1 2 p x 2 1 . 2 , m a r g i n ) ; @ i n c l u d e x - r e m ( 1 . 5 2 4 p x , p a d d i n g ) ; } CSS: . s o m e - c l a s s { f o n t - s i z e : 0 . 8 7 5 r e m ; m a r g i n : 0 0 . 7 5 r e m 2 r e m 1 . 2 r e m ; p a d d i n g : 1 . 5 r e m 1 . 5 r e m ; } /
23. vw, vh, vmin, vmax Größen relativ zum Viewport 1 v w = 1 % o f v i e w p o r t w i d t h 1 v h = 1 % o f v i e w p o r t h e i g h t 1 v m i n = 1 v w o r 1 v h , w h i c h e v e r i s s m a l l e r 1 v m a x = 1 v w o r 1 v h , w h i c h e v e r i s l a r g e r h 1 { f o n t - s i z e : 5 . 9 v w ; } h 2 { f o n t - s i z e : 3 . 0 v h ; } p { f o n t - s i z e : 2 v m i n ; } 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 /
28. Molten Leading Flexibler Zeilendurchschuss $ ( ' . i n t r o ' ) . m o l t e n L e a d i n g ( { m i n l i n e : 1 . 2 , m a x l i n e : 1 . 4 , m i n w i d t h : 3 2 0 , m a x w i d t h : 7 5 0 } ) ; Blog-Post: Molten Leading, jQuery Plugin /
29. Text-Size Anpassung auf iOS unterbinden / * p r e v e n t a u t o t e x t - s i z e a d j u s t i n g * / h t m l { - w e b k i t - t e x t - s i z e - a d j u s t : 1 0 0 % ; - m s - t e x t - s i z e - a d j u s t : 1 0 0 % ; } letter-spacing letter-spacing im Web ist oft zu eng p { l e t t e r - s p a c i n g : 0 . 0 1 e m ; w o r d - s p a c i n g : 0 . 0 1 e m ; } /
30. Vorsichtig bei text-ren​ der​ ing: optimizeLegibility Vorteil: Kerning aktivieren h 1 { t e x t - r e n ​ d e r ​ i n g : o p t i m i z e L e g i b i l i t y ; } Firefox: wenn die font-size größer als 20px ist, dann nutzt Firefox automatisch optimizeLegibility; für kleineren Text 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 · · · · · /
32. @font-face /
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... @ f o n t - f a c e { f o n t - f a m i l y : ' D I N B o l d ' ; s r c : u r l ( " d i n - b o l d - w e b f o n t . e o t " ) ; s r c : u r l ( " d i n - b o l d - w e b f o n t . e o t ? # i e f i x " ) f o r m a t ( " e m b e d d e d - o p e n t y p e " ) , u r l ( " d i n - b o l d - w e b f o n t . w o f f " ) f o r m a t ( " w o f f " ) , u r l ( " d i n - b o l d - w e b f o n t . t t f " ) f o r m a t ( " t r u e t y p e " ) , u r l ( " d i n - b o l d - w e b f o n t . s v g # D I N B o l d " ) f o r m a t ( " s v g " ) ; } um Gottes Willen... /
34. @font-face WOFF Font-Einbindung für moderne Browser (für Android zusätzlich TTF einbinden) @ f o n t - f a c e { f o n t - f a m i l y : F o n t n a m e ; / * r e g u l a r f o n t * / s r c : u r l ( " / f o n t s / F o n t n a m e - R e g u l a r . w o f f " ) f o r m a t ( " w o f f " ) ; f o n t - w e i g h t : n o r m a l ; f o n t - s t y l e : n o r m a l ; } @ f o n t - f a c e { f o n t - f a m i l y : F o n t n a m e ; / * b o l d f o n t * / s r c : u r l ( " / f o n t s / F o n t n a m e - B o l d . w o f f " ) f o r m a t ( " w o f f " ) ; f o n t - w e i g h t : b o l d ; f o n t - s t y l e : n o r m a l ; } @ f o n t - f a c e { f o n t - f a m i l y : F o n t n a m e ; / * i t a l i c f o n t * / s r c : u r l ( " / f o n t s / F o n t n a m e - I t a l i c . w o f f " ) f o r m a t ( " w o f f " ) ; f o n t - w e i g h t : n o r m a l ; f o n t - s t y l e : i t a l i c ; } @ f o n t - f a c e { f o n t - f a m i l y : F o n t n a m e ; / * b o l d i t a l i c f o n t * / s r c : u r l ( " / f o n t s / F o n t n a m e - B o l d I t a l i c . w o f f " ) f o r m a t ( " w o f f " ) ; f o n t - w e i g h t : b o l d ; f o n t - s t y l e : i t a l i c ; } /
35. @font-face für Old-IE (6-8) / * i e - s p e c i f i c . c s s * / @ f o n t - f a c e { f o n t - f a m i l y : F o n t n a m e - r e g u l a r ; / * r e g u l a r I E f o n t * / s r c : u r l ( " / f o n t s / F o n t n a m e - R e g u l a r . e o t " ) ; } @ f o n t - f a c e { / * b o l d I E f o n t * / f o n t - f a m i l y : F o n t n a m e - b o l d ; s r c : u r l ( " / f o n t s / F o n t n a m e - B o l d . e o t " ) ; } @ f o n t - f a c e { / * i t a l i c I E f o n t * / f o n t - f a m i l y : F o n t n a m e - i t a l i c ; s r c : u r l ( " / f o n t s / F o n t n a m e - I t a l i c . e o t " ) ; } @ f o n t - f a c e { / * b o l d i t a l i c I E f o n t * / f o n t - f a m i l y : F o n t n a m e - b o l d i t a l i c ; s r c : u r l ( " / f o n t s / F o n t n a m e - B o l d I t a l i c . e o t " ) ; } Conditional Comments < ! - - [ i f l t I E 9 ] > < l i n k r e l = " s t y l e s h e e t " h r e f = " i e - s p e c i f i c . c s s " t y p e = " t e x t / c s s " m e d i a = " s c r e e n " / > < ! [ e n d i f ] - - > /
36. Probleme: Faux Bold „interpoliertes Fetten“ oder „doppelt gefettet“ /
37. @font-face für Old-IE (6-8) / * i e - s p e c i f i c . c s s * / s t r o n g , b { f o n t - f a m i l y : F o n t n a m e - b o l d ; f o n t - w e i g h t : n o r m a l ; } e m , i { f o n t - f a m i l y : F o n t n a m e - i t a l i c ; f o n t - s t y l e : n o r m a l ; } s t r o n g e m , e m s t r o n g , s t r o n g i , i s t r o n g , b e m , e m b , b i , i b { f o n t - f a m i l y : F o n t n a m e - b o l d i t a l i c ; f o n t - s t y l e : n o r m a l ; f o n t - w e i g h t : n o r m a l ; } /
38. Webfonts testen – typecast.com Font auswählen 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 nicht angezeigt, bis die Schrift geladen ist um den „FOUT“ (Flash of unstyled content) zu vermeiden. /
43. Font-Loading Performance – Google Fonts /
44. Font-Loading Performance – Google Fonts /
45. Font-Loading Performance Webfonts nur für große Bildschirme (impliziert schnellere Verbindung) @ f o n t - f a c e { f o n t - f a m i l y : " F o n t n a m e " ; s r c : u r l ( " / f o n t s / F o n t n a m e - R e g u l a r . w o f f " ) f o r m a t ( " w o f f " ) ; f o n t - w e i g h t : n o r m a l ; f o n t - s t y l e : n o r m a l ; } @ m e d i a o n l y s c r e e n a n d ( m i n - w i d t h : 7 6 8 p x ) { b o d y { f o n t - f a m i l y : " F o n t n a m e " , G e o r g i a , s e r i f ; } } 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 < s c r i p t > W e b F o n t C o n f i g = { t y p e k i t : { i d : ' x x x x x x ' } } ; ( f u n c t i o n ( ) { v a r w f = d o c u m e n t . c r e a t e E l e m e n t ( ' s c r i p t ' ) ; w f . s r c = ( ' h t t p s : ' = = d o c u m e n t . l o c a t i o n . p r o t o c o l ? ' h t t p s ' : ' h t t p ' ) + ' : / / a j a x . g o o g l e a p i s . c o m / a j a x / l i b s / w e b f o n t / 1 . 4 . 7 / w e b f o n t . j s ' ; w f . t y p e = ' t e x t / j a v a s c r i p t ' ; w f . a s y n c = ' t r u e ' ; v a r s = d o c u m e n t . g e t E l e m e n t s B y T a g N a m e ( ' s c r i p t ' ) [ 0 ] ; s . p a r e n t N o d e . i n s e r t B e f o r e ( w f , s ) ; } ) ( ) ; < / s c r i p t > https://github.com/typekit/webfontloader /
48. Webfont Loader CSS Klassen für Font-Events . w f - l o a d i n g . w f - a c t i v e . w f - i n a c t i v e . w f - < f a m i l y n a m e > - < f v d > - l o a d i n g . w f - < f a m i l y n a m e > - < f v d > - a c t i v e . w f - < f a m i l y n a m e > - < f v d > - i n a c t i v e h 1 , h 2 , h 3 { f o n t - f a m i l y : s a n s - s e r i f ; } . w f - a c t i v e h 1 , . w f - a c t i v e h 2 , . w f - a c t i v e h 3 { f o n t - f a m i l y : " w e b f o n t " , s a n s - s e r i f ; } /
49. Fallback-Fonts /
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 f o n t - f a m i l y : ' M i n i o n ' , ' D r o i d s e r i f ' , ' T i m e s N e w R o m a n ' , T i m e s , s e r i f ; /
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 Charis Improved type on Firefox for Android /
54. text-overflow: ellipsis Textlängen beschneiden . c l a s s { o v e r f l o w : h i d d e n ; t e x t - o v e r f l o w : e l l i p s i s ; w h i t e - s p a c e : n o w r a p ; } Demo: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab e… "Problem": geht nur bei einzeiligen Texten (white-space: nowrap) /
55. text-overflow: ellipsis /
56. text-overflow: ellipsis Vorsichtig mit text-overflow /
57. Wörter trennen /
58. Wörter trennen h 3 { f o n t - s i z e : 1 6 p x ; l i n e - h e i g h t : 1 . 4 ; m a x - h e i g h t : 4 6 p x ; o v e r f l o w : h i d d e n ; w i d t h : 1 8 0 p x ; } . s h y { / * u s e t h e H T M L - e n t i t y ​ K r i e g s g r ä b e r ​ f ü r s o r g e * / } . h y p h e n s { - w e b k i t - h y p h e n s : a u t o ; - m o z - h y p h e n s : a u t o ; h y p h e n s : a u t o ; } . w o r d - b r e a k { / * N o n s t a n d a r d f o r w e b k i t * / w o r d - b r e a k : b r e a k - w o r d ; - m s - w o r d - b r e a k : b r e a k - a l l ; w o r d - b r e a k : b r e a k - a l l ; } /
59. hyphenation – automatische Trennung wenn Text zentriert wird, hyphenation aktivieren - w e b k i t - h y p h e n s : a u t o ; - m o z - h y p h e n s : a u t o ; h y p h e n s : a u t o ; } 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 h y p h e n a t e - l i m i t - l i n e s : 2 ; / * s u p p o r t i n I E 1 0 * / h y p h e n a t e - l i m i t - c h a r s : 6 3 2 ; / * l o n g e r t h a n 6 c h a r a c t e r s , 3 o r m o r e b e f o r e b r e a k , 2 o r m o r e a f t e r b r e a k * / 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 k e r n Kerning l i g a Standard ligatures d l i g Discretionary ligatures s m c p Small capitals s u b s Subscript s u p s Superscript s w s h Swashes s s 0 1 , s s 0 2 , …, s s 2 0 Stylistic sets 1 to 20 OpenType features in web browsers /
61. Font-Features Small Caps aktivieren (10% vergrößerte Kapitälchen) p . s m a l l c a p s { f o n t - f e a t u r e - s e t t i n g s : " s m c p " 1 ; } Ligaturen aktivieren p . l i g a t u r e s { f o n t - f e a t u r e - s e t t i n g s : " l i g a " o n ; } mehrere Zuweisungen . e l e m e n t { - w e b k i t - f o n t - f e a t u r e - s e t t i n g s : " k e r n " , " l i g a " , " c a s e " ; - m o z - f o n t - f e a t u r e - s e t t i n g s : " k e r n " , " l i g a " , " c a s e " ; f o n t - f e a t u r e - s e t t i n g s : " k e r n " , " l i g a " , " c a s e " ; } /
62. Face detection Quelle: TNW http://webdesign.maratz.com/lab/responsivetypography/realtime/ /
63. Typeplate – „typographic starter kit“ / / $ V a r i a b l e $ B a s e T y p e $ s e r i f - b o o l e a n : t r u e ! d e f a u l t ; $ f o n t - f a m i l y : i f ( $ s e r i f - b o o l e a n , s e r i f , s a n s - s e r i f ) ! d e f a u l t ; / / N o n - f o n t - f a c e f o n t - s t a c k $ f o n t - w e i g h t : n o r m a l ! d e f a u l t ; $ l i n e - h e i g h t : 1 . 6 5 ! d e f a u l t ; $ f o n t - s i z e : 1 1 2 . 5 ! d e f a u l t ; / / p e r c e n t a g e v a l u e ( 1 6 * 1 1 2 . 5 % = 1 8 p x ) $ f o n t - b a s e : 1 6 * ( $ f o n t - s i z e / 1 0 0 ) ! d e f a u l t ; / / c o n v e r t s o u r p e r c e n t a g e t o a p i x e l v a l u e $ c u s t o m - f o n t - f a m i l y : f a l s e ! d e f a u l t ; / / C u s t o m f o n t - f a c e s t a c k , i f s e t w i l l b e a d d e d t o t … http://typeplate.com/ /
64. FitText Überschriften an Bildschirm anpassen < s c r i p t s r c = " j q u e r y . f i t t e x t . j s " > < / s c r i p t > < s c r i p t > j Q u e r y ( " . r e s p o n s i v e _ h e a d l i n e " ) . f i t T e x t ( ) ; < / s c r i p t > 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 /