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