Vortrag über Typografie und Ästhetik im responsive web design auf dem JUG Fulda Treffen 21.11.2013
-
Upload
adhocgrafx -
Category
Business
-
view
103 -
download
1
description
Transcript of Vortrag über Typografie und Ästhetik im responsive web design auf dem JUG Fulda Treffen 21.11.2013
Typografie & Ästhetik im responsive web design
https://www.rijksmuseum.nl/
Typografie & Ästhetik
responsive web design
Typografie
Kommunikation
Horizontale Choreografie
Lesbarkeit
Lesbarkeit
Lesbarkeit
Lesbarkeit
Typografie
Kommunikation
Horizontale Choreografie
Ästhetische Bewegungen
Lesbarkeit
the medium is the message
Horizontale Choreografie
Ästhetische Bewegungen
Typografie
Kommunikation
form follows function
form follows fantasy
Lesbarkeit
Skalierung mit % und em
html { font-size: 100%; /* 100% ~ 16px */}
browser & device default
<meta name=“viewport“ content=“width=device-width, initial-scale=1“ />
http://www.smashingmagazine.com/
Skalierung mit % und em
body { font-size: 100%; /* 100% ~ 16px */ /* 1em ~ 16px */}
@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
http://alistapart.com/
Skalierung mit % und em mobile first
Skalierung mit % und em
body { font-size: 100%; /* 100% ~ 16px */ line-height: 1.4; /* Web > Print */ /* p eingeschlossen */}
( 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.66
Skalierung mit % und em
body { font-size: 100%; /* 100% ~ 16px */ line-height: 1.4; /* Web > Print */ /* p eingeschlossen */}
( 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
Skalierung mit % und em 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 }}
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
Skalierung mit % und em Schriftform
body { font-size: 100%; line-height: 1.4 }
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
Typographische Tonleiter
/* base font size = 112.5% ~ 18px */
h1 { font-size: 3em; } /* 54px */h2 { font-size: 2.25em; } /* 41px */h3 { font-size: 1.5em; } /* 27px */h4 { font-size: 1.3125em; } /* 24px */h5 { font-size: 1.125em; } /* 20px */h6 { font-size: 1em; } /* 18px */
Typo Typo Typo Typo Typo Typo
http://lamb.cc/typograph / Iain Lamb
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; } /* 54px */h2 { font-size: 2.25em; } /* 41px */h3 { font-size: 1.5em; } /* 27px */h4 { font-size: 1.3125em; } /* 24px */h5 { font-size: 1.125em; } /* 20px */h6 { font-size: 1em; } /* 18px */
Typographische Tonleiter
https://medium.com/product-design/70e9a4839adf
MODULOR von LeCorbusier
/* base font size = 112.5% ~ 18px */
h1 { font-size: 3.4231em; } /* 62px */h2 { font-size: 2.6154em; } /* 47px */h3 { font-size: 2.1154em; } /* 38px */h4 { font-size: 1.6154em; } /* 29px */h5 { font-size: 1.3077em; } /* 24px */h6 { font-size: 1em; } /* 18px */
Typo Typo Typo Typo Typo Typo
MODULOR von LeCorbusier
/* base font size = 112.5% ~ 18px */
h1 { font-size: 3.4231em; } /* 62px */h2 { font-size: 2.6154em; } /* 47px */h3 { font-size: 2.1154em; } /* 38px */h4 { font-size: 1.6154em; } /* 29px */h5 { font-size: 1.3077em; } /* 24px */h6 { font-size: 1em; } /* 18px */
Typo Typo Typo Typo Typo Typo
Überschrift 1 62pxÜberschrift 2 47px
Überschrift 3 38px
Überschrift 4 29px
Überschrift 5 24px
Überschrift 6 18px
Typographische Tonleiter
http://brian.teeman.net/
http://freqdec.github.io/slabText/
Skalierung für mobile Ansicht
/* bei body = 100% ~ 16px *//* sehr flache Schrift-Skalierung - für mobile Ansicht */
h1 { font-size: 2.00em; } /* 32px */h2 { font-size: 1.66em; } /* 28px */h3 { font-size: 1.50em; } /* 24px */h4 { font-size: 1.33em; } /* 21px */h5 { font-size: 1.16em; } /* 19px */h6 { font-size: 1.00em; } /* 16px */
Typo Typo Typo Typo Typo Typo
Überschrift 1 32pxÜberschrift 2 28px
Überschrift 3 24px
Überschrift 4 21px
Überschrift 5 19px
Überschrift 6 16px
Skalierung für mobile Ansicht
/* bei body = 100% ~ 16px *//* sehr flache Schrift-Skalierung - für mobile Ansicht */
h1 { font-size: 2.00em; } /* 32px */h2 { font-size: 1.66em; } /* 28px */h3 { font-size: 1.50em; } /* 24px */h4 { font-size: 1.33em; } /* 21px */h5 { font-size: 1.16em; } /* 19px */h6 { font-size: 1.00em; } /* 16px */
Typo Typo Typo Typo Typo Typo
http://www.guggenheim-bilbao.es
http://askos.fi/resume/ | Viljami Salminen
article { p { margin-bottom: @paragraph-val; }}
Absätze
http://www.jordanm.co.uk/page/2
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; } }}
Absätze
45 - 75 Zeichen pro Zeile
When we design we generally do so in two dimensions — length and width. They are the physical constraints of what our tech-nology is currently capable of. Our dimen-
sional 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 di-mensions) — the physical space in which our designs ex-
ist 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 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 idea in his Testing One Thumb, One Eyeball article detailing the test procedure for Po-lar. 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 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
32
49
61
77
86
Zeilenlänge
Absätze Zeilenlänge
http://simplefocus.com/flowtype/
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
http://www.maxdesign.com.au/2013/05/25/ideal-line-length-in-ems/
<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;}
Zeilenlänge
Alegreya (serif)Andada (slab)Bitter (slab)Droid SansDroid SerifGentium (serif)Yanone Kaffeesatz (sans)Lato (sans)
Open Sans CondensedOpen SansPT Sans NarrowPT SansPT SerifSource Code Pro (slab mono)Source Sans ProUbuntu Condensed (sans)Ubuntu (sans)Vollkorn (serif)
Joomla! TestingThanks 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 in-
stalling! While we're working we turn …
Joomla! TestingThanks 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 …
Sans Slab Serif
Joomla! TestingThanks 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 prob-lems as we work.
If you haven't done testing before here are some tips.• Don't delete the installation folder when you …
Joomla! TestingThanks 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 fin-
ish installing! While we're working we turn …
Alegreya (serif)Andada (slab)Bitter (slab)Droid SansDroid SerifGentium (serif)Yanone Kaffeesatz (sans)Lato (sans)
Open Sans CondensedOpen SansPT Sans NarrowPT SansPT SerifSource Code Pro (slab mono)Source Sans ProUbuntu Condensed (sans)Ubuntu (sans)Vollkorn (serif)
Sans Slab Serif
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
2. Google Fonts
http://www.google.com/fonts#QuickUsePlace:quickUse/Family:
Lato: regular, italic, bold, bold italic
1. template index.php<link href=‘http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic‘ rel=‘stylesheet‘ type=‘text/css‘>
2. template css body { font-family: ‚Lato‘, sans-serif; font-weight: 400 /* normal */ }
(font-weight: 700 /* bold */)
1. Adobe Edge Web Fonts
https://edgewebfonts.adobe.com/fonts#/?nameFilter=Lato&collection=lato:n4,i4,n7,i7,i9
Lato: regular, italic, bold, bold italic
1. template index.php<script src=“//use.edgefonts.net/lato:n4,i4,n7,i7,i9.js“></script>
2. template cssbody { font-family: ‚Lato‘, sans-serif; font-weight: 400 /* normal */ } h1, h2, h3, h4 { font-family: ‚Lato‘, sans-serif; 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 Unter-verzeichnis des templates speichernz.B.: my-template/fonts
3. font in css einbinden:3.1. @font-face 3.2. @font-face bearbeiten3.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;
}
3.2. @font-face bearbeiten
@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; font-style: 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‘), url(‚../fonts/PTS75F-webfont.svg#pt_sansbold‘) format(‚svg‘); font-weight: bold; font-style: normal;
}
3 x Fonts einbinden
3.2.1. alle font-family Namen angleichen3.2.2. alle url aktualisieren3.2.3. font-weight und font-style anpassen, falls nötig
3.3. template css body { font-family: ‚pt-sans‘, sans-serif; font-weight: normal; }
h1, h2, h3, h4 { font-family: ‚pt-sans‘, sans-serif; font-weight: bold; }
Symmetrie <> AsymmetrieFläche & Komposition
http://laurakalbag.com/graphic-design/
Statik <> DynamikFläche & Komposition
http://www.yootheme.com/themes
Ordnung <> UnordnungFläche & Komposition
http://tympanus.net/codrops/
Fläc
he
& K
om
po
siti
on
Wei
ßrau
m
http
://w
ww.
lenb
achh
aus.
de/i
ndex
.php
?id=
20
Ver
tikal
e C
ho
reo
gra
fie
Ver
tikal
e C
ho
reo
gra
fie
Horizontale Choreografie
Dynam
ische
Inhalt
e
Ver
tikal
e C
ho
reo
gra
fie
Horizontale Choreografie
http://ami.responsivedesign.is/
Ver
tikal
e C
ho
reo
gra
fie
Horizontale Choreografie
the medium is the message
fin
/*!
Copy
right
(c)
Dav
id B
ushe
ll |
http
://d
bush
ell.c
om/
*/(f
unct
ion
(g, h,
c)
{ va
r d
= fu
ncti
on (
m)
{ re
turn
m.t
rim
? m
.tri
m()
: m
.rep
lace
(/^\
s+|\
s+$/
g, "
") };
va
r e
= fu
ncti
on (
m,
n) {
re
turn
(" "
+ m
.cla
ssNa
me
+ "
").in
dexO
f("
" +
n +
" ")
!==
-1
};
va
r f
= fu
ncti
on (
m,
n) {
if
(!e
(m,
n))
{ m
.cla
ssNa
me
= (m
.cla
ssNa
me
===
"")
? n
: m
.cla
ssNa
me
+ "
" +
n }
};
va
r k
= fu
ncti
on (
m,
n) {
m
.cla
ssNa
me
= d(
(" "
+ m
.cla
ssNa
me
+ "
").r
epla
ce("
" +
n +
" "
, "
"))
};
va
r l =
fun
ctio
n (m
, n)
{ if
(m
) {
do
{
if
(m
.id =
== n
) {
re
turn
tru
e
}
if
(m
.nod
eTyp
e ==
= 9)
{
br
eak
}
}
whi
le (
(m =
m.p
aren
tNod
e))
}
re
turn
fal
se };
va
r j =
h.d
ocum
entE
lem
ent;
va
r i =
g.M
oder
nizr
.pre
fixed
("tr
ansf
orm
"),
b =
g.M
oder
nizr
.pre
fixed
("tr
ansi
tion
"),
a =
(fun
ctio
n ()
{ va
r m
= {
Web
kitT
rans
itio
n: "
web
kitT
rans
itio
nEnd
", M
ozTr
ansi
tion
: "t
rans
itio
nend
", O
Tran
siti
on:
"oTr
an-
siti
onEn
d ot
rans
itio
nend
", m
sTra
nsit
ion:
"M
STra
nsit
ionE
nd",
tra
nsit
ion:
"tr
ansi
tion
end"
}; re
turn
m.h
asOw
nPro
pert
y(b)
? m
[b]
: fa
lse
})
();
g.
App
= (f
unct
ion
() {
va
r p
= fa
lse,
q =
{};
va
r m
= h
.get
Elem
entB
yId(
"inn
er-w
rapp
er")
, o
= fa
lse,
n =
"js
-nav
"; q.
init
= f
unct
ion
() {
if
(p)
{
re
turn
}
p
= tr
ue;
va
r r
= fu
ncti
on (
s) {
if
(s
&&
s.t
arge
t ==
= m
) {
h.
rem
oveE
vent
List
ener
(a,
r, fa
lse)
}
o
= fa
lse
};
q.
clos
eNav
= f
unct
ion
() {
if
(o)
{
va
r s
= (a
&&
b)
? pa
rseF
loat
(g.g
etCo
mpu
tedS
tyle
(m,
"")[
b +
"Dur
atio
n"])
: 0
;
if
(s
> 0)
{
h.
addE
vent
List
ener
(a,
r, fa
lse)
}
else
{
r(
null)
}
}
k(
j, n)
};
q.
open
Nav
= fu
ncti
on (
) {
if
(o)
{
re
turn
}
f(
j, n)
;
o
= tr
ue };
q.
togg
leNa
v =
func
tion
(s)
{
if
(o
&&
e(j
, n)
) {
q.
clos
eNav
()
}
else
{
q.
open
Nav(
)
}
if
(s)
{
s.
prev
entD
efau
lt()
}
};
h.
getE
lem
entB
yId(
"nav
-ope
n-bt
n").
addE
vent
List
ener
("cl
ick"
, q.
togg
leNa
v, f
alse
); h.
getE
lem
entB
yId(
"nav
-clo
se-b
tn")
.add
Even
tLis
tene
r("c
lick"
, q.
togg
leNa
v, f
alse
); h.
addE
vent
List
ener
("cl
ick"
, fu
ncti
on (
s) {
if
(o
&&
!l(
s.ta
rget
, "n
av")
) {
s.
prev
entD
efau
lt()
;
q.
clos
eNav
()
}
},
tru
e);
f(
j, "j
s-re
ady"
) };
re
turn
q })
();
if
(g.
addE
vent
List
ener
) {
g.
addE
vent
List
ener
("DO
MCo
nten
tLoa
ded"
, g.
App.
init
, fa
lse)
}
})(w
indo
w, w
indo
w.do
cum
ent)
;
1961 geboren in München-Pasing
Akademie der Bildenden Künste München Prof. Sir Eduardo PaolozziProf. Heribert Sturm
about
seit 1990 Kunstlehrer am Gymnasium
1996–2003Deutsche Schule Lima / Peru
www.adhocgrafx.de@adhocgrafx
seit 2009 > Joomla!
e-learning Plattform für den Kunstunterrichtwww.kunstimunterricht.de
seit 2013 powered by tec-promotions.de
seit 2011 > responsive web design
JoomSkeleton, JoomFluid und JoomFlexhttps://github.com/adhocgraFX