Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

Vortrag über Typografie und Ästhetik im responsive web design auf dem JUG Fulda Treffen 21.11.2013

Ad

Typografie & Ästhetik im responsive web design

Ad

Typografie & Ästhetik
https://www.rijksmuseum.nl/

Ad

responsive web design

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Wird geladen in …3
×

Hier ansehen

1 von 47 Anzeige
1 von 47 Anzeige
Anzeige

Weitere Verwandte Inhalte

Anzeige

Vortrag über Typografie und Ästhetik im responsive web design auf dem JUG Fulda Treffen 21.11.2013

  1. 1. Typografie & Ästhetik im responsive web design
  2. 2. Typografie & Ästhetik https://www.rijksmuseum.nl/
  3. 3. responsive web design
  4. 4. Horizontale Choreografie Typografie Lesbarkeit Kommunikation Lesbarkeit Lesbarkeit Lesbarkeit
  5. 5. Horizontale Choreografie Typografie Kommunikation Ästhetische Bewegungen Lesbarkeit
  6. 6. Horizontale Choreografie Typografie Kommunikation Lesbarkeit form follows function Ästhetische Bewegungen form follows fantasy the medium is the message
  7. 7. Skalierung mit % und em browser & device default http://www.smashingmagazine.com/ <meta name=“viewport“ content=“width=device-width, initial-scale=1“ /> html { font-size: 100%; } /* 100% ~ 16px */
  8. 8. Skalierung mit % und em mobile first http://alistapart.com/ body { font-size: 100%; /* 100% ~ 16px */ /* ~ 16px */ 1em } @media screen and (min-width: 768px / 48em) { body { font-size: 112.5%; /* 112,5% ~ 18px */ } } @media screen and (min-width: 1280px / 80em) { body { font-size: 125%; /* 125% ~ 20px */ } }
  9. 9. Skalierung mit % und em mobile first
  10. 10. Skalierung mit % und em line-height 1.66 body { font-size: 100%; /* 100% ~ 16px */ line-height: 1.4; /* Web > Print */ /* eingeschlossen p */ } ( p { font-size: 1.125em; /* 100% ~ 18px */ line-height: 1.5; /* p != body */ } ) h1, h2, h3, h4, h5, h6 { line-height: 1.2; /* h < p */ }
  11. 11. Skalierung mit % und em line-height 1.08 body { font-size: 100%; /* 100% ~ 16px */ line-height: 1.4; /* Web > Print */ /* eingeschlossen p */ } ( p { font-size: 1.125em; /* 100% ~ 18px */ line-height: 1.5; /* p != body */ } ) h1, h2, h3, h4, h5, h6 { line-height: 1.2; /* h < p */ }
  12. 12. Skalierung mit % und em When we design we generally do so in two dimensions – length and width. They are the physical constraints of what our technology is currently capable of. Our dimensional restraints are then realised on the devices used to experi When we design we generally do so in two dimensions – length and width. They are the physical constraints of what our technology is currently capable of. Our dimensional restraints are then realised on the devices used to experi When we design we generally do so in two dimensions – length and width. They are the physical constraints of what our technology is currently capable of. Our dimensional restraints are then realised on the devices used to experi line-height body { line-height: 1.4 } @media screen and (min-width: 48em) { body { line-height: 1.5 } } @media screen and (min-width: 80em) { body { line-height: 1.6 } }
  13. 13. Skalierung mit % und em Schriftform When we design we generally do so in two dimensions – length and width. They are the physical constraints of what our technology is currently capable of. Our dimensional restraints are then realised on the devices used to experi When we design we generally do so in two dimensions – length and width. They are the physical constraints of what our technology is currently capable of. Our dimensional restraints are then realised on the devices used to experi When we design we generally do so in two dimensions – length and width. They are the physical constraints of what our technology is currently capable of. Our dimensional restraints are then realised on the devices used to experi body { font-size: 100%; line-height: 1.4 }
  14. 14. Typographische Tonleiter Typo Typo Typo Typo Typo Typo http://lamb.cc/typograph / Iain Lamb /* base font size = 112.5% ~ 18px */ h1 { font-size: 3em; } h2 { font-size: 2.25em; } h3 { font-size: 1.5em; } h4 { font-size: 1.3125em; } h5 { font-size: 1.125em; } h6 { font-size: 1em; } /* 54px */ /* 41px */ /* 27px */ /* 24px */ /* 20px */ /* 18px */
  15. 15. Typographische Tonleiter Typo Typo Typo Typo Typo Typo Überschrift 1 54px Überschrift 2 41px Überschrift 3 27px Überschrift 4 24px Überschrift 5 20px Überschrift 6 18px /* base font size = 112.5% ~ 18px */ h1 { font-size: 3em; } h2 { font-size: 2.25em; } h3 { font-size: 1.5em; } h4 { font-size: 1.3125em; } h5 { font-size: 1.125em; } h6 { font-size: 1em; } /* 54px */ /* 41px */ /* 27px */ /* 24px */ /* 20px */ /* 18px */
  16. 16. Typographische Tonleiter https://medium.com/product-design/70e9a4839adf
  17. 17. MODULOR von LeCorbusier Typo Typo Typo Typo Typo Typo /* base font size = 112.5% ~ 18px */ h1 { font-size: 3.4231em; } h2 { font-size: 2.6154em; } h3 { font-size: 2.1154em; } h4 { font-size: 1.6154em; } h5 { font-size: 1.3077em; } h6 { font-size: 1em; } /* 62px */ /* 47px */ /* 38px */ /* 29px */ /* 24px */ /* 18px */
  18. 18. MODULOR von LeCorbusier Typo Typo Typo Typo Typo Typo Überschrift 1 62px Überschrift 2 47px Überschrift 3 38px Überschrift 4 29px Überschrift 5 24px Überschrift 6 18px /* base font size = 112.5% ~ 18px */ h1 { font-size: 3.4231em; } h2 { font-size: 2.6154em; } h3 { font-size: 2.1154em; } h4 { font-size: 1.6154em; } h5 { font-size: 1.3077em; } h6 { font-size: 1em; } /* 62px */ /* 47px */ /* 38px */ /* 29px */ /* 24px */ /* 18px */
  19. 19. Typographische Tonleiter http://brian.teeman.net/
  20. 20. http://freqdec.github.io/slabText/
  21. 21. Skalierung für mobile Ansicht Typo Typo Überschrift 1 32px Überschrift 2 28px Überschrift 3 24px Überschrift 4 21px Überschrift 5 19px Überschrift 6 16px Typo Typo Typo Typo /* bei body = 100% ~ 16px */ /* sehr flache Schrift-Skalierung für mobile Ansicht */ h1 { font-size: 2.00em; } h2 { font-size: 1.66em; } h3 { font-size: 1.50em; } h4 { font-size: 1.33em; } h5 { font-size: 1.16em; } h6 { font-size: 1.00em; } /* 32px */ /* 28px */ /* 24px */ /* 21px */ /* 19px */ /* 16px */
  22. 22. Skalierung für mobile Ansicht Typo Typo Typo Typo Typo Typo http://www.guggenheim-bilbao.es /* bei body = 100% ~ 16px */ /* sehr flache Schrift-Skalierung für mobile Ansicht */ h1 { font-size: 2.00em; } h2 { font-size: 1.66em; } h3 { font-size: 1.50em; } h4 { font-size: 1.33em; } h5 { font-size: 1.16em; } h6 { font-size: 1.00em; } /* 32px */ /* 28px */ /* 24px */ /* 21px */ /* 19px */ /* 16px */
  23. 23. http://askos.fi/resume/ | Viljami Salminen
  24. 24. Absätze http://www.jordanm.co.uk/page/2 article { p{ margin-bottom: @paragraph-val; } }
  25. 25. Absätze article { p{ // margin-bottom: @paragraph-val; & + p { // Erstzeileneinzug text-indent: @indent-val; } &.bild + p, &.lead + p, &.bildlegende + p, &.img_caption + p, &.autor + p { text-indent: 0 !important; } } }
  26. 26. When we design we generally do so in two 32 dimensions — length and width. They are the physical constraints of what our technology is currently capable of. Our dimensional restraints are then realised on the devices used to 49 experience our design. Beyond the two dimensional screen exists the third dimension (and many other theorised di45 mensions) — the physical space in which our designs ex- Zeilenlänge - 75 Zeichen pro Zeile ist beyond the canvas. Here, all sorts of physical parameters affect how 61 a person uses our design. Consider the user’s physical space around them — perhaps they are lying on their side on the sofa or in bed and holding a mobile device with one hand. Can the design be enjoyed when a user’s is physically restricted from using two hands? Luke Wroblewski further elaborates on this 77 idea in his Testing One Thumb, One Eyeball article detailing the test procedure for Polar. When we design we generally do so in two dimensions — length and width. They are the physical constraints of what our technology is currently capable of. Our dimensional 86 restraints are then realised on the devices used to experience our design. Beyond the two dimensional screen exists the third dimension (and many other theorised dimensions) — the physical space in which our designs exist beyond the canvas. Here, all sorts of physical parameters affect how a person uses our design. Consider the user’s physical space around them — perhaps they are lying on their side on the
  27. 27. Absätze Zeilenlänge http://simplefocus.com/flowtype/
  28. 28. Zeilenlänge http://www.maxdesign.com.au/2013/05/25/ideal-line-length-in-ems/ Column width in ems Average characters per line 21 49 22 52 23 54 24 57 25 59 26 61 27 64 28 66 29 69 30 71 <div class=“wrapper“> <section role=“main“ > <jdoc:include type=“component“ /> </section> <aside role=“complementary“ > <jdoc:include type=“modules“ … /> </aside> </div> .wrapper { width: 40em; } section[role =“main“] { width: 28em; } aside[role=“complementary“] { width: 12em; }
  29. 29. Sans Slab Serif Alegreya (serif) Andada (slab) Bitter (slab) Droid Sans Droid Serif Gentium (serif) Yanone Kaffeesatz (sans) Lato (sans) Open Sans Condensed Open Sans PT Sans Narrow PT Sans PT Serif Source Code Pro (slab mono) Source Sans Pro Ubuntu Condensed (sans) Ubuntu (sans) Vollkorn (serif) Joomla! Testing Thanks for helping us to test Joomla! We're getting ready for the release of Joomla 3.0 and we appreciate you helping us find and fix problems as we work. If you haven't done testing before here are some tips. • Don't delete the installation folder when you finish installing! While we're working we turn … Joomla! Testing Thanks for helping us to test Joomla! We're getting ready for the release of Joomla 3.0 and we appreciate you helping us find and fix problems as we work. If you haven't done testing before here are some tips. • Don't delete the installation folder when you finish installing! While we're working we turn …
  30. 30. Sans Slab Serif Alegreya (serif) Andada (slab) Bitter (slab) Droid Sans Droid Serif Gentium (serif) Yanone Kaffeesatz (sans) Lato (sans) Open Sans Condensed Open Sans PT Sans Narrow PT Sans PT Serif Source Code Pro (slab mono) Source Sans Pro Ubuntu Condensed (sans) Ubuntu (sans) Vollkorn (serif) Joomla! Testing Thanks for helping us to test Joomla! We're getting ready for the release of Joomla 3.0 and we appreciate you helping us find and fix problems as we work. If you haven't done testing before here are some tips. • Don't delete the installation folder when you … Joomla! Testing Thanks for helping us to test Joomla! We're getting ready for the release of Joomla 3.0 and we appreciate you helping us find and fix problems as we work. If you haven't done testing before here are some tips. • Don't delete the installation folder when you finish installing! While we're working we turn …
  31. 31. http://typecast.com/blog/type-on-screen-superhero-superfamilies
  32. 32. Sans Slab Serif Typen mit Charakter Modern Art Museum Computertechnik Floristik Studio
  33. 33. 3 x Fonts einbinden 1. Adobe Edge Web Fonts 2. Google Fonts https://edgewebfonts.adobe.com/fonts#/?nam eFilter=Lato&collection=lato:n4,i4,n7,i7,i9 http://www.google.com/ fonts#QuickUsePlace:quickUse/Family: Lato: regular, italic, bold, bold italic Lato: 1. template index.php <script src=“//use.edgefonts.net/ lato:n4,i4,n7,i7,i9.js“></script> 1. template index.php <link href=‘http://fonts.googleapis.com/ css?family=Lato:400,700,400italic,700i talic‘ rel=‘stylesheet‘ type=‘text/css‘> 2. template css body { font-family: ‚Lato‘, sans-serif; font-weight: 400 /* normal */ } h1, h2, h3, h4 { font-family: ‚Lato‘, sans-serif; font-weight: 700 /* bold */ } regular, italic, bold, bold italic 2. template css body { font-family: ‚Lato‘, sans-serif; font-weight: 400 /* normal */ } (font-weight: 700 /* bold */)
  34. 34. 3 x Fonts einbinden 3. Fonts mit template „hosten“ http://www.fontsquirrel.com/fonts/ PT-Sans?q%5Bterm%5D=pt+sans &q%5Bsearch_check%5D=Y PT Sans: regular, italic, bold, bold italic 1. download Webfont Kit 2. benötigte Dateien in einem Unterverzeichnis des templates speichern z.B.: my-template/fonts 3. font in css einbinden: 3.1. @font-face 3.2. @font-face bearbeiten 3.3. css Stile angeben 3.1. Beispiel: regular und bold @font-face { font-family: ‚pt_sansregular‘; src: url(‚PTS55F-webfont.eot‘); src: url(‚PTS55F-webfont.eot?#iefix‘) format(‚embedded-opentype‘), url(‚PTS55F-webfont.woff‘) format(‚woff‘), url(‚PTS55F-webfont.ttf‘) format(‚truetype‘), url(‚PTS55F-webfont.svg#pt_sansregular‘) format(‚svg‘); font-weight: normal; font-style: normal; } @font-face { font-family: ‚pt_sansbold‘; src: url(‚PTS75F-webfont.eot‘); src: url(‚PTS75F-webfont.eot?#iefix‘) format(‚embedded-opentype‘), url(‚PTS75F-webfont.woff‘) format(‚woff‘), url(‚PTS75F-webfont.ttf‘) format(‚truetype‘), url(‚PTS75F-webfont.svg#pt_sansbold‘) format(‚svg‘); font-weight: normal; font-style: normal; }
  35. 35. 3 x Fonts einbinden 3.2. @font-face bearbeiten 3.2.1. alle font-family Namen angleichen 3.2.2. alle url aktualisieren 3.2.3. font-weight und font-style anpassen, falls nötig @font-face { font-family: ‚pt-sans‘; src: url(‚../fonts/PTS55F-webfont.eot‘); src: url(‚../fonts/PTS55F-webfont.eot?#iefix‘) format(‚embedded-opentype‘), url(‚../fonts/PTS55F-webfont.woff‘) format(‚woff‘), url(‚../fonts/PTS55F-webfont.ttf‘) format(‚truetype‘), url(‚../fonts/PTS55F-webfont.svg#pt_sansregular‘) format(‚svg‘); font-weight: normal; 3.3. template font-style: normal; } body { css font-family: ‚pt-sans‘, sans-serif; font-weight: normal; } @font-face { font-family: ‚pt-sans‘; src: url(‚../fonts/PTS75F-webfont.eot‘); src: url(‚../fonts/PTS75F-webfont.eot?#iefix‘) format(‚embedded-opentype‘), url(‚../fonts/PTS75F-webfont.woff‘) format(‚woff‘), url(‚../fonts/PTS75F-webfont.ttf‘) format(‚truetype‘), h1, h2, h3, h4 { url(‚../fonts/PTS75F-webfont.svg#pt_sansbold‘) format(‚svg‘); font-family: ‚pt-sans‘, sans-serif; font-weight: bold; font-weight: bold; font-style: normal; } }
  36. 36. Fläche & Komposition Symmetrie <> Asymmetrie http://laurakalbag.com/graphic-design/
  37. 37. Fläche & Komposition Statik <> Dynamik http://www.yootheme.com/themes
  38. 38. Fläche & Komposition Ordnung <> Unordnung http://tympanus.net/codrops/
  39. 39. Weißraum http://www.lenbachhaus.de/index.php?id=20 Fläche & Komposition
  40. 40. Vertikale Choreografie
  41. 41. D yn am isc he In ha lte Vertikale Choreografie Horizontale Choreografie
  42. 42. Horizontale Choreografie Vertikale Choreografie http://ami.responsivedesign.is/
  43. 43. Vertikale Choreografie Horizontale Choreografie the medium is the message
  44. 44. fin
  45. 45. /*! Copyright (c) David Bushell | http://dbushell.com/ */ (function (g, h, c) { var d = function (m) { return m.trim ? m.trim() : m.replace(/^s+|s+$/g, "") }; var e = function (m, n) { return(" " + m.className + " ").indexOf(" " + n + " ") !== -1 }; var f = function (m, n) { if (!e(m, n)) { m.className = (m.className === "") ? n : m.className + " " + n } }; var k = function (m, n) { m.className = d((" " + m.className + " ").replace(" " + n + " ", " ")) }; var l = function (m, n) { if (m) { do { if (m.id === n) { return true } if (m.nodeType === 9) { break } } while ((m = m.parentNode)) } return false }; var j = h.documentElement; var i = g.Modernizr.prefixed("transform"), b = g.Modernizr.prefixed("transition"), a = (function () { var m = {WebkitTransition: "webkitTransitionEnd", MozTransition: "transitionend", OTransition: "oTransitionEnd otransitionend", msTransition: "MSTransitionEnd", transition: "transitionend"}; return m.hasOwnProperty(b) ? m[b] : false })(); g.App = (function () { var p = false, q = {}; var m = h.getElementById("inner-wrapper"), o = false, n = "js-nav"; q.init = function () { if (p) { return } p = true; var r = function (s) { if (s && s.target === m) { h.removeEventListener(a, r, false) } o = false }; q.closeNav = function () { if (o) { var s = (a && b) ? parseFloat(g.getComputedStyle(m, "")[b + "Duration"]) : 0; if (s > 0) { h.addEventListener(a, r, false) } else { r(null) } } k(j, n) }; q.openNav = function () { if (o) { return } f(j, n); o = true }; q.toggleNav = function (s) { if (o && e(j, n)) { q.closeNav() } else { q.openNav() } if (s) { s.preventDefault() } }; h.getElementById("nav-open-btn").addEventListener("click", q.toggleNav, false); h.getElementById("nav-close-btn").addEventListener("click", q.toggleNav, false); h.addEventListener("click", function (s) { if (o && !l(s.target, "nav")) { s.preventDefault(); q.closeNav() } }, true); f(j, "js-ready") }; return q })(); if (g.addEventListener) { g.addEventListener("DOMContentLoaded", g.App.init, false) } })(window, window.document);
  46. 46. about 1961 geboren in München-Pasing Akademie der Bildenden Künste München Prof. Sir Eduardo Paolozzi Prof. Heribert Sturm seit 1990 Kunstlehrer am Gymnasium 1996–2003 Deutsche Schule Lima / Peru www.adhocgrafx.de @adhocgrafx
  47. 47. seit 2009 > Joomla! e-learning Plattform für den Kunstunterricht www.kunstimunterricht.de seit 2013 powered by tec-promotions.de seit 2011 > responsive web design JoomSkeleton, JoomFluid und JoomFlex https://github.com/adhocgraFX

×