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

Typografie & Ästhetik im responsive web design

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

Horizontale Choreografie

Typografie
Lesbarkeit

Kommunikation

Lesbarkeit

Lesbarkeit

Lesbarkeit


Typografie

Kommunikation

Ästhetische Bewegungen

Lesbarkeit


Typografie

Kommunikation

Lesbarkeit

form follows function
Ästhetische Bewegungen
form follows fantasy
the medium is the message

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 */


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 */
}
}


mobile first


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 */
}


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 */
}

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
}
}


Schriftform




body {
font-size: 100%;
line-height: 1.4
}

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; }

/* 54px */
/* 41px */
/* 27px */
/* 24px */
/* 20px */
/* 18px */

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 */

/* 54px */
/* 41px */
/* 27px */
/* 24px */
/* 20px */
/* 18px */

https://medium.com/product-design/70e9a4839adf

MODULOR von LeCorbusier
Typo

Typo Typo

Typo Typo

Typo

/* base font size = 112.5% ~ 18px */

/* 62px */
/* 47px */
/* 38px */
/* 29px */
/* 24px */
/* 18px */

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 */

/* 62px */
/* 47px */
/* 38px */
/* 29px */
/* 24px */
/* 18px */

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 21px
Überschrift 5 19px
Überschrift 6 16px

Typo Typo

Typo Typo

/* bei body = 100% ~ 16px */
/* sehr flache Schrift-Skalierung für mobile Ansicht */

/* 32px */
/* 28px */
/* 24px */
/* 21px */
/* 19px */
/* 16px */

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 */

/* 32px */
/* 28px */
/* 24px */
/* 21px */
/* 19px */
/* 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;
}
&.bild + p,
&.lead + p,
&.bildlegende + p,
&.img_caption + p,
&.autor + p {
text-indent: 0 !important;
}
}
}

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

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 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;
}

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
we appreciate you helping us find and fix problems as
we work.
• Don't delete the installation folder when you finish
installing! While we're working we turn …

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
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
we appreciate you helping us find and fix problems as
we work.
• Don't delete the installation folder when you finish installing! While we're working we turn …

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&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-weight: 700 /* bold */
}

regular, italic, bold, bold italic

2. template css
body {
font-weight: 400 /* normal */
}

(font-weight: 700 /* bold */)

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-style: normal;
}

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‘);

3.3. template

font-style: normal;
}
body {

css

font-family: ‚pt-sans‘, sans-serif;
}

@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;
}

}

Fläche & Komposition

Symmetrie <> Asymmetrie
http://laurakalbag.com/graphic-design/


Statik <> Dynamik
http://www.yootheme.com/themes


Ordnung <> Unordnung
http://tympanus.net/codrops/

Weißraum

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


D
yn
am
isc
he
In
ha
lte

Vertikale Choreografie




http://ami.responsivedesign.is/



the medium is the message

/*! 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);

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

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

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

Recommandé

Recommandé

Contenu connexe

Dernier

Dernier (20)

En vedette

En vedette (20)

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