Typografie & Ästhetik im responsive web design
Typografie & Ästhetik
https://www.rijksmuseum.nl/
responsive web design
Horizontale Choreografie

Typografie
Lesbarkeit

Kommunikation

Lesbarkeit

Lesbarkeit

Lesbarkeit
Horizontale Choreografie

Typografie

Kommunikation

Ästhetische Bewegungen

Lesbarkeit
Horizontale Choreografie

Typografie

Kommunikation

Lesbarkeit

form follows function
Ästhetische Bewegungen
form follows...
Skalierung mit % und em

browser & device default

http://www.smashingmagazine.com/

<meta name=“viewport“ content=“width=...
Skalierung mit % und em

mobile first

http://alistapart.com/

body {
	 font-size: 100%;			 /*	 100% ~ 16px */
								/*	...
Skalierung mit % und em

mobile first
Skalierung mit % und em

line-height

1.66

body {
	 font-size: 100%;		 /*	 100% ~ 16px */
	line-height: 1.4;		 /*	 Web > ...
Skalierung mit % und em

line-height

1.08

body {
	 font-size: 100%;		 /*	 100% ~ 16px */
	line-height: 1.4;		 /*	 Web > ...
Skalierung mit % und em
When we design we generally do so in two dimensions –
length and width. They are the physical cons...
Skalierung mit % und em

Schriftform

When we design we generally do so in two dimensions –
length and width. They are the...
Typographische Tonleiter
Typo Typo

Typo Typo

Typo

Typo

http://lamb.cc/typograph / Iain Lamb

/* base font size = 112.5...
Typographische Tonleiter
Typo Typo

Typo Typo

Typo

Typo

Überschrift 1			54px
Überschrift 2					41px
Überschrift 3						...
Typographische Tonleiter
https://medium.com/product-design/70e9a4839adf
MODULOR von LeCorbusier
Typo

Typo Typo

Typo Typo

Typo

/* base font size = 112.5% ~ 18px */
h1 { font-size: 3.4231em; }...
MODULOR von LeCorbusier
Typo

Typo Typo

Typo Typo

Typo

Überschrift 1		 62px
Überschrift 2				47px
Überschrift 3						38...
Typographische Tonleiter
http://brian.teeman.net/
http://freqdec.github.io/slabText/
Skalierung für mobile Ansicht
Typo Typo

Überschrift 1			32px
Überschrift 2			28px
Überschrift 3				24px
Überschrift 4				...
Skalierung für mobile Ansicht
Typo Typo

Typo Typo

Typo Typo

http://www.guggenheim-bilbao.es
/*	 bei body = 100% ~ 16px ...
http://askos.fi/resume/ | Viljami Salminen
Absätze
http://www.jordanm.co.uk/page/2
article {
	 p{
		margin-bottom: @paragraph-val;
	}
}
Absätze
article {
	 p{
	 	 // margin-bottom: @paragraph-val;
		 & + p {
			// Erstzeileneinzug
			text-indent: @indent-val...
When we design we generally do so in two 32
dimensions — length and width. They are
the physical constraints of what our t...
Absätze

Zeilenlänge
http://simplefocus.com/flowtype/
Zeilenlänge
http://www.maxdesign.com.au/2013/05/25/ideal-line-length-in-ems/

Column width in ems

Average characters per ...
Sans Slab Serif
Alegreya (serif)
Andada (slab)
Bitter (slab)
Droid Sans
Droid Serif
Gentium (serif)
Yanone Kaffeesatz (san...
Sans Slab Serif
Alegreya (serif)
Andada (slab)
Bitter (slab)
Droid Sans
Droid Serif
Gentium (serif)
Yanone Kaffeesatz (san...
http://typecast.com/blog/type-on-screen-superhero-superfamilies
Sans Slab Serif

Typen mit Charakter
Modern Art Museum

Computertechnik

Floristik Studio
3 x Fonts einbinden
1. Adobe Edge Web Fonts

2. Google Fonts

https://edgewebfonts.adobe.com/fonts#/?nam
eFilter=Lato&coll...
3 x Fonts einbinden
3. Fonts mit template „hosten“
http://www.fontsquirrel.com/fonts/
PT-Sans?q%5Bterm%5D=pt+sans
&q%5Bsea...
3 x Fonts einbinden
3.2. @font-face bearbeiten

3.2.1. 	alle font-family Namen angleichen
3.2.2. 	alle url aktualisieren
3...
Fläche & Komposition

Symmetrie <> Asymmetrie
http://laurakalbag.com/graphic-design/
Fläche & Komposition

Statik <> Dynamik
http://www.yootheme.com/themes
Fläche & Komposition

Ordnung <> Unordnung
http://tympanus.net/codrops/
Weißraum

http://www.lenbachhaus.de/index.php?id=20

Fläche & Komposition
Vertikale Choreografie
D
yn
am
isc
he
In
ha
lte

Vertikale Choreografie

Horizontale Choreografie
Horizontale Choreografie

Vertikale Choreografie

http://ami.responsivedesign.is/
Vertikale Choreografie

Horizontale Choreografie

the medium is the message
fin
/*! Copyright (c) David Bushell | http://dbushell.com/ */
(function (g, h, c) {
var d = function (m) {
return m.trim ? m.t...
about
1961
geboren in München-Pasing

Akademie der Bildenden Künste München
Prof. Sir Eduardo Paolozzi
Prof. Heribert Stur...
seit 2009 > Joomla!
e-learning Plattform für den Kunstunterricht
www.kunstimunterricht.de
seit 2013 powered by tec-promoti...
Upcoming SlideShare
Loading in …5
×

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

1,412 views

Published on

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

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,412
On SlideShare
0
From Embeds
0
Number of Embeds
113
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×