Responsive Web Typography @ WebExpo

RESPONSIVE WEB
TYPOGRAPHY
Marko Dugonjić
@markodugonjic
!
Prague, 2014

View Slide

@markodugonjic
[email protected]

View Slide

View Slide

Creative Nights

View Slide

View Slide

MENU
—
Variables
Tools
Experiments
Process

View Slide

— THE PROBLEM —

View Slide

View Slide

:/

View Slide

media queries
ﬂexible layouts
ﬂexible images
Responsive Experience

View Slide

VARIABLES of the
RESPONSIVE READING
EXPERIENCE
—
reading distance
viewport width (and height)
content hierarchy
information density
pixel density
device orientation
screen aspect ratio

View Slide

NARROW WIDE
BIG
SMALL
TIM BROWN
vimeo.com/56276418
FINE
COARSE

View Slide

NARROW WIDE
FINE
COARSE
BIG
SMALL
TIM BROWN
vimeo.com/56276418

View Slide

1
READING DISTANCE

View Slide

0,26mm 1,3mm
71cm 350cm

View Slide

Y
X
?

View Slide

View Slide

// concept code
!
if (distance < 30) {
body.className = 'close';
}
!
if (distance > 30 && distance < 50) {
body.className = 'medium';
}
!
if (distance > 50) {
body.className = 'far';
}

View Slide

2
VIEWPORT WIDTH

View Slide

Anything from 45 to 75 characters is
widely regarded as a satisfactory length
of line for a single-column page set in a
serifed text face in a text size. The 66-
character line (counting both le ers and
spaces) is widely regarded as ideal. For
multiple column work, a be er average is
40 to 50 characters.
!
ROBERT BRINGHURST
webtypography.net/Rhythm_and_Proportion/Horizontal_Motion/2.1.2/
“

View Slide

ideal 66
max 75
min 45
< 40 chars
screen width:
320px

View Slide

Breakpoints should not be dictated by
devices, but by content. Let the content
decide when to expand and then adjust
your designs.
!
JEREMY KEITH
lukew.com/ﬀ/entry.asp?1393
“

View Slide

Breakpoints should not be dictated by
devices*, but by content. Let the cont*ent
decide when to expand and then adjust
your designs.
!
HAT TIP TRENT WALTON
trentwalton.com/2012/06/19/ﬂuid-type/
“

View Slide

Line height for each breakpoint
is adjusted according to the line
length rendered at that
breakpoint. Short line lengths
require tighter line spacing,
because the reader’s eye
doesn’t have to travel much to
reach the next line of text. As
line length gets longer, more
line spacing is required.
Line height for each breakpoint is adjusted
according to the line length rendered at that
breakpoint. Short line lengths require tighter line
spacing, because the reader’s eye doesn’t have
to travel much to reach the next line of text. As
line length gets longer, more line spacing is
required.
Line height for each breakpoint is adjusted according to the line length
rendered at that breakpoint. Short line lengths require tighter line
spacing, because the reader’s eye doesn’t have to travel much to reach
the next line of text. As line length gets longer, more line spacing is
required.

View Slide

Line height for each breakpoint is
adjusted according to the line
because the reader’s eye doesn’t
have to travel much to reach the
next line of text. As line length
gets longer, more line spacing is
required.
required.
•
•
•
•
•
•
•
•
•
•

View Slide

required.
!
qqqqqqqqqqqqqqqqqqqqqqqqqq
dddddddddddddddddddddddddd
required.
!
jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj
ŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠ
q
d
j
Š

View Slide

/* under 45 chars */
body { line-height: 1.4 }
p { margin-bottom: 1.4em }
!
/* 45–60 chars */
!
/* 60–75 chars */

View Slide

View Slide

body {
background: url(stripe-pattern.gif);
}

View Slide

/* vendor prefix omitted code */
!
body {
background-image: linear-gradient(top,
#fff 0, #fff 95%, #f00 95%, #f00 100%);
!
background-repeat: repeat;
background-size: 24px 24px;
}

View Slide

/* short line lengths */
body {
line-height: 1.4em;
background-size: 100% 1.4em;
}
!
/* medium line lengths */
body {
line-height: 1.45em;
}
!
/* long line lengths */
body {
line-height: 1.5em;
}

View Slide

LINE SPACE
letter space, word
spac, line space
LETTER SPACE WORD SPACE
LINE SPACE

View Slide

letter space, word
spac, line space
LETTER SPACE WORD SPACE
LINE SPACE

View Slide

View Slide

@media only screen
and (min-device-pixel-ratio: 1.5) {

p {
letter-spacing: .01em;
word-spacing: .01em;
}
}
!
/* vendor prefix omitted code */

View Slide

View Slide

3
HIERARCHY

View Slide

w
e
b t
y
p
o
g
r
p
h
y
T
h
a
n
k y
o
u f
o
r t
h
e l
o
v
e
l
y i
n
t
r
o
d
u
c
t
i
o
n
, R
a
f
a
l
! P
l
e
a
s
e g
i
v
e a w
a
r
m
r
o
u
n
d o
f a
p
p
l
a
u
s
e t
o t
h
e o
r
g
a
n
i
z
e
r
s
.
L
e
t m
e a
s
k y
o
u s
o
m
e
t
h
i
n
g
… H
a
v
e y
o
u e
v
e
r s
a
v
e
d a
n a
r
t
i
c
l
e w
i
t
h
t
h
e i
n
t
e
n
t
i
o
n t
o r
e
a
d i
t l
a
t
e
r o
n a m
o
b
i
l
e d
e
v
i
c
e i
n t
h
e p
a
r
k
a
s
s
u
m
i
n
g t
h
a
t i
t
s r
e
s
p
o
n
s
i
v
e w
e
b d
e
s
i
g
n i
s a
l
l i
t t
a
k
e
s f
o
r t
h
e
b
e
s
t p
o
s
s
i
b
l
e r
e
a
d
i
n
g e
x
p
e
r
i
e
n
c
e
? H
a
v
e y
o
u e
v
e
r b
e
e
n d
i
s
a
p
p
o
i
n
t
e
d w
h
e
n
y
o
u r
e
a
l
i
z
e
d t
h
a
t a
r
t
i
c
l
e
s o
n m
o
b
i
l
e a
r
e h
a
r
d t
o r
e
a
d b
e
c
a
u
s
e
o
f t
h
e p
o
o
r
l
y c
h
o
s
e
n l
e
t
t
e
r s
i
z
e a
n
d l
a
y
o
u
t t
h
a
t a
p
p
e
a
r t
o b
e
d
i
s
p
r
o
p
o
r
t
i
o
n
a
l t
o t
h
e s
c
r
e
e
n
?
S
o
, w
h
y i
s t
h
i
s h
a
p
p
e
n
i
n
g
? H
o
w d
o s
u
c
h
, o
t
h
e
r
w
i
s
e b
e
a
u
t
i
f
u
l r
e
s
p
o
n
s
i
v
e
d
e
s
i
g
n
s
, e
n
d u
p b
e
i
n
g s
o p
o
o
r
l
y e
x
e
c
u
t
e
d o
n m
o
b
i
l
e
?
T
h
e a
n
s
w
e
r i
s i
n f
a
c
t q
u
i
t
e c
l
e
a
r — s
u
c
h w
e
b
s
i
t
e
s w
e
r
e d
e
v
e
l
o
p
e
d
o
n t
h
e d
e
s
k
t
o
p c
o
m
p
u
t
e
r
, w
i
t
h d
e
s
k
t
o
p r
e
a
d
i
n
g d
i
s
t
a
n
c
e
, w
i
t
h a
_
d
e
s
k
t
o
p d
o
w
n
_
, r
a
t
h
e
r t
h
a
n a _
m
o
b
i
l
e u
p
_ a
p
p
r
o
a
c
h
. I
t
’
s o
b
v
i
o
u
s t
h
a
t
t
h
e c
o
r
e r
e
s
p
o
n
s
i
v
e w
e
b d
e
s
i
g
n a
r
s
e
n
a
l o
f m
e
d
i
a q
u
e
r
i
e
s
, f
l
e
x
i
b
l
e
l
a
y
o
u
t
s a
n
d f
l
e
x
i
b
l
e i
m
a
g
e
s i
s n
o
t s
u
f
f
i
c
i
e
n
t
.
w
e
b t
y
p
o
g
r
p
h
y
a
j
s
d
h
j
a
h
s
g
d
T
h
a
n
k y
o
u f
o
r t
h
e l
o
v
e
l
y i
n
t
r
o
d
u
c
t
i
o
n
, R
a
f
a
l
! P
l
e
a
s
e g
i
v
e a w
a
r
m
r
o
u
n
d o
f a
p
p
l
a
u
s
e t
o t
h
e o
r
g
a
n
i
z
e
r
s
.
L
e
t m
e a
s
k y
o
u s
o
m
e
t
h
i
n
g
… H
a
v
e y
o
u e
v
e
r s
a
v
e
d a
n a
r
t
i
c
l
e w
i
t
h
t
h
e i
n
t
e
n
t
i
o
n t
o r
e
a
d i
t l
a
t
e
r o
n a m
o
b
i
l
e d
e
v
i
c
e i
n t
h
e p
a
r
k
a
s
s
u
m
i
n
g t
h
a
t i
t
s r
e
s
p
o
n
s
i
v
e w
e
b d
e
s
i
g
n i
s a
l
l i
t t
a
k
e
s f
o
r t
h
e
b
e
s
t p
o
s
s
i
b
l
e r
e
a
d
i
n
g e
x
p
e
r
i
e
n
c
e
? H
a
v
e y
o
u e
v
e
r b
e
e
n d
i
s
a
p
p
o
i
n
t
e
d w
h
e
n
y
o
u r
e
a
l
i
z
e
d t
h
a
t a
r
t
i
c
l
e
s o
n m
o
b
i
l
e a
r
e h
a
r
d t
o r
e
a
d b
e
c
a
u
s
e
o
f t
h
e p
o
o
r
l
y c
h
o
s
e
n l
e
t
t
e
r s
i
z
e a
n
d l
a
y
o
u
t t
h
a
t a
p
p
e
a
r t
o b
e
d
i
s
p
r
o
p
o
r
t
i
o
n
a
l t
o t
h
e s
c
r
e
e
n
?
S
o
, w
h
y i
s t
h
i
s h
a
p
p
e
n
i
n
g
? H
o
w d
o s
u
c
h
, o
t
h
e
r
w
i
s
e b
e
a
u
t
i
f
u
l r
e
s
p
o
n
s
i
v
e
d
e
s
i
g
n
s
, e
n
d u
p b
e
i
n
g s
o p
o
o
r
l
y e
x
e
c
u
t
e
d o
n m
o
b
i
l
e
?
T
h
e a
n
s
w
e
r i
s i
n f
a
c
t q
u
i
t
e c
l
e
a
r — s
u
c
h w
e
b
s
i
t
e
s w
e
r
e d
e
v
e
l
o
p
e
d
o
n t
h
e d
e
s
k
t
o
p c
o
m
p
u
t
e
r
, w
i
t
h d
e
s
k
t
o
p r
e
a
d
i
n
g d
i
s
t
a
n
c
e
, w
i
t
h a
_
d
e
s
k
t
o
p d
o
w
n
_
, r
a
t
h
e
r t
h
a
n a _
m
o
b
i
l
e u
p
_ a
p
p
r
o
a
c
h
. I
t
’
s o
b
v
i
o
u
s t
h
a
t
t
h
e c
o
r
e r
e
s
p
o
n
s
i
v
e w
e
b d
e
s
i
g
n a
r
s
e
n
a
l o
f m
e
d
i
a q
u
e
r
i
e
s
, f
l
e
x
i
b
l
e
l
a
y
o
u
t
s a
n
d f
l
e
x
i
b
l
e i
m
a
g
e
s i
s n
o
t s
u
f
f
i
c
i
e
n
t
.
#
# M
A
N
Y M
O
R
E V
A
R
I
A
B
L
E
S
A
p
a
r
t f
r
o
m t
h
e o
b
v
i
o
u
s v
a
r
i
a
b
l
e
s — v
i
e
w
p
o
r
t w
i
d
t
h a
n
d v
i
e
w
p
o
r
t
h
e
i
g
h
t — t
h
e
r
e a
r
e o
t
h
e
r
s
, s
u
c
h a
s r
e
a
d
i
n
g d
i
s
t
a
n
c
e
, p
i
x
e
l d
e
n
s
i
t
y
(
o
r s
c
r
e
e
n c
r
u
d
e
n
e
s
s
)
, d
e
v
i
c
e o
r
i
e
n
t
a
t
i
o
n a
n
d v
i
e
w
p
o
r
t a
s
p
e
c
t r
a
t
i
o
, b
u
t
a
l
s
o t
h
e c
o
n
t
e
n
t h
i
e
r
a
r
c
h
y a
n
d i
n
f
o
r
m
a
t
i
o
n d
e
n
s
i
t
y
. B
e
f
o
r
e I
e
l
a
b
o
r
a
t
e e
a
c
h
, l
e
t m
e b
r
i
e
f
l
y e
x
p
l
a
i
n t
h
e r
u
l
e
s o
f t
h
e p
a
r
a
g
r
a
p
h
.
#
#
# R
e
a
d
i
n
g d
i
s
t
a
n
c
e
T
h
e
r
e a
r
e t
h
r
e
e w
h
i
t
e s
p
a
c
e
s i
n
s
i
d
e t
h
e p
a
r
a
g
r
a
p
h t
h
a
t a
r
e
i
n
t
e
r
d
e
p
e
n
d
e
n
t — t
h
e l
e
t
t
e
r s
p
a
c
e
, t
h
e w
o
r
d s
p
a
c
e a
n
d t
h
e l
i
n
e
s
p
a
c
e
. I
f a
n
y o
f t
h
e t
h
r
e
e i
s c
h
a
n
g
e
d
, a
l
l t
h
e o
t
h
e
r
s s
h
o
u
l
d
b
e r
e
a
s
s
e
s
s
e
d
, t
o
o
. B
y p
r
e
s
e
r
v
i
n
g t
h
e w
h
i
t
e s
p
a
c
e h
i
e
r
a
r
c
h
y
, w
e c
a
n

View Slide

16 18 21 24 36 48 60 72

View Slide

16 18 21 24 36 48

View Slide

/* short reading distance */
p { font-size: 1rem; /* 16px */ }
h3 { font-size: 1.125rem; /* 18px */ }
h2 { font-size: 1.312rem; /* 21px */ }
h1 { font-size: 1.5rem; /* 24px */ }
!
/* medium reading distance */
p { font-size: 1.125rem; /* 18px */ }
h3 { font-size: 1.312rem; /* 21px */ }
h2 { font-size: 1.5rem; /* 24px */ }
h1 { font-size: 2.25rem; /* 36px */ }
!
/* long reading distance */
p { font-size: 1.312rem; /* 21px */ }
h3 { font-size: 1.5rem; /* 24px */ }
h2 { font-size: 2.25rem; /* 36px */ }
h1 { font-size: 3rem; /* 48px */ }

View Slide

modularscale.com

View Slide

STYLE OPTIONS
!
!
ALL CAPS SUBHEAD H2
!
SMALL CAPS SUBHEAD H3
!
Italic Subhead H4

View Slide

SUBHEAD ONE
Subhead Two
SUBHEAD THREE On the opposite
side, instead of progressively
increasing font size for each
heading level, especially as we
now have such a vast selection of
web fonts available and fonts are
rendered with much more detail
than before, we can use italics,
small caps and all caps at the
same letter size to establish text
hierarchy. Add bolds into the mix,
and you have a palette of at least

View Slide

/* alternative small caps rules */
!
h3 {
font-family: small-caps-typeface;
text-transform: lowercase;
}
h3 {
font-feature-settings: "smcp"; /* OpenType */
text-transform: lowercase;
}
h3 {
font-weight: 500; /* if the weight exists */
font-size: 80%; /* give or take */
text-transform: uppercase;
}

View Slide

Se ing Subheads with CSS
blog.typekit.com/2013/07/25/se ing-subheads-with-css/

View Slide

webdesign.maratz.com/lab/subheads/

View Slide

4
INFORMATION DENSITY

View Slide

1 1 2 1 2

View Slide

R
e
s
p
o
n
s
i
v
e W
e
b
T
y
p
o
g
r
a
p
h
y
T
h
a
n
k y
o
u f
o
r t
h
e
l
o
v
e
l
y i
n
t
r
o
d
u
c
t
i
o
n
,
R
a
f
a
l
! P
l
e
a
s
e g
i
v
e a
w
a
r
m r
o
u
n
d o
f
a
p
p
l
a
u
s
e t
o t
h
e
o
r
g
a
n
i
z
e
r
s
.
R
e
s
p
o
n
s
i
v
e W
e
b T
y
p
o
g
r
a
p
h
y
T
h
a
n
k y
o
u f
o
r t
h
e
l
o
v
e
l
y i
n
t
r
o
d
u
c
t
i
o
n
, R
a
f
a
l
!
P
l
e
a
s
e g
i
v
e a w
a
r
m
r
o
u
n
d o
f a
p
p
l
a
u
s
e t
o
t
h
e o
r
g
a
n
i
z
e
r
s
.
L
e
t m
e a
s
k y
o
u
s
o
m
e
t
h
i
n
g
… H
a
v
e y
o
u
e
v
e
r s
a
v
e
d a
n a
r
t
i
c
l
e
w
i
t
h t
h
e i
n
t
e
n
t
i
o
n t
o
r
e
a
d i
t l
a
t
e
r o
n a
m
o
b
i
l
e d
e
v
i
c
e i
n t
h
e
p
a
r
k a
s
s
u
m
i
n
g t
h
a
t i
t
s
r
e
s
p
o
n
s
i
v
e w
e
b d
e
s
i
g
n i
s
a
l
l i
t t
a
k
e
s f
o
r
t
h
e b
e
s
t p
o
s
s
i
b
l
e r
e
a
d
i
n
g
e
x
p
e
r
i
e
n
c
e
? H
a
v
e y
o
u
e
v
e
r b
e
e
n d
i
s
a
p
p
o
i
n
t
e
d
w
h
e
n y
o
u r
e
a
l
i
z
e
d t
h
a
t
a
r
t
i
c
l
e
s o
n m
o
b
i
l
e
org
izers
izer
izmn
kjla9
jsf
lkfo
jfa
R
e
s
p
o
n
s
i
v
e W
e
b T
y
p
o
g
r
a
p
h
y
T
h
a
n
k y
o
u f
o
r t
h
e l
o
v
e
l
y i
n
t
r
o
d
u
c
t
i
o
n
,
R
a
f
a
l
! P
l
e
a
s
e g
i
v
e a w
a
r
m r
o
u
n
d o
f
a
p
p
l
a
u
s
e t
o t
h
e o
r
g
a
n
i
z
e
r
s
.
L
e
t m
e a
s
k y
o
u
s
o
m
e
t
h
i
n
g
… H
a
v
e y
o
u e
v
e
r s
a
v
e
d a
n
a
r
t
i
c
l
e w
i
t
h t
h
e i
n
t
e
n
t
i
o
n t
o r
e
a
d
i
t l
a
t
e
r o
n a m
o
b
i
l
e d
e
v
i
c
e i
n
t
h
e p
a
r
k a
s
s
u
m
i
n
g t
h
a
t i
t
s r
e
s
p
o
n
s
i
v
e
w
e
b d
e
s
i
g
n i
s a
l
l i
t t
a
k
e
s f
o
r
t
h
e b
e
s
t p
o
s
s
i
b
l
e r
e
a
d
i
n
g e
x
p
e
r
i
e
n
c
e
?
H
a
v
e y
o
u e
v
e
r b
e
e
n d
i
s
a
p
p
o
i
n
t
e
d w
h
e
n
y
o
u r
e
a
l
i
z
e
d t
h
a
t a
r
t
i
c
l
e
s o
n
m
o
b
i
l
e a
r
e h
a
r
d t
o r
e
a
d b
e
c
a
u
s
e o
f
t
h
e p
o
o
r
l
y c
h
o
s
e
n l
e
t
t
e
r s
i
z
e a
n
d
l
a
y
o
u
t t
h
a
t a
p
p
e
a
r t
o b
e
d
i
s
p
r
o
p
o
r
t
i
o
n
a
l t
o t
h
e s
c
r
e
e
n
?
S
o
, w
h
y i
s t
h
i
s h
a
p
p
e
n
i
n
g
? H
o
w d
o
s
u
c
h
, o
t
h
e
r
w
i
s
e b
e
a
u
t
i
f
u
l r
e
s
p
o
n
s
i
v
e
d
e
s
i
g
n
s
, e
n
d u
p b
e
i
n
g s
o p
o
o
r
l
y
e
x
e
c
u
t
e
d o
n m
o
b
i
l
e
?
T
h
e a
n
s
w
e
r i
s i
n f
a
c
t q
u
i
t
e c
l
e
a
r
— s
u
c
h w
e
b
s
i
t
e
s w
e
r
e d
e
v
e
l
o
p
e
d o
n
1 1 2 1 2
organizersj
hjhgorganiz
ersorga
organizersj
hjhgorganiz
ersorga
organizersj
hjhgorganiz
ersorga
organizersj
hjhgorganiz
ersorga
organizersj
hjhgorganiz
ersorga
organizersj
hjhgorganiz
ersorga
organizersj
hjhgorganiz
ersorga

View Slide

LESS
INFORMATION
!
– style variations
– indented paragraphs
– white space
MORE
INFORMATION
!
– typographic scale
– block paragraphs
– graphic elements

View Slide

View Slide

5
PIXEL DENSITY

View Slide

fontbureau.com/ReadingEdge/

View Slide

typography.com/cloud/welcome/

View Slide

View Slide

typonine.com

View Slide

iA
ALL, EXCEPT RETINA
RETINA LANDSCAPE
RETINA PORTRAIT
ia.net/blog/responsive-typography/

View Slide

@font-face {
font-family: 'Typeface Name';
src: url('Grade-A.woff') format('woff');
}
@media ... and (min-device-pixel-ratio: 1.5) {
@font-face {
src: url('Grade-B.woff') format('woff');
}
}
@media ... and (min-device-pixel-ratio: 1.5)
and (orientation: portrait) {
@font-face {
src: url('Grade-C.woff') format('woff');
}
}

View Slide

Comprehensive list of graded fonts
typophile.com/node/81483

View Slide

6
DEVICE ORIENTATION

View Slide

HEY, HANDSOME!
HOW YOU DOIN’?
HEY, HANDSOME!
HOW YOU DOIN’?

View Slide

HEY, HANDSOME!
HOW YOU DOIN’?
HEY, HANDSOME! HOW YOU
DOIN’?

View Slide

HEY, HANDSOME!
HOW YOU DOIN’?
HEY, HANDSOME! HOW YOU DOIN’?

View Slide

View Slide

HEY, HANDSOME! HOW YOU DOIN’? HEY, HANDSOME! HOW YOU DOIN’?

View Slide

HEY, HANDSOME!
HOW YOU DOIN’?
HEY, HANDSOME!
HOW YOU DOIN’?

View Slide

HEY, HANDSOME!
HOW YOU DOIN’?
HEY, HANDSOME! HOW YOU DOIN’?

View Slide

HANDSOME! HANDSOME!

View Slide

/* Illustration purpose code */
!
@media ... and (orientation: portrait) {
h1 {
font-family: 'Typeface Width Variant';
letter-spacing: -.1em;
}
}
!
@media ... and (orientation: landscape) {
h1 {
font-family: 'Typeface Width Variant';
}
}

View Slide

font-to-width.com

View Slide

View Slide

!
!
– DIN
– Franklin Gothic
– Frutiger
– Futura
– Georgia Pro
– Gill Sans
– Helvetica
– JAF Bernino
!
!
– Minion Pro
– Myriad Pro
– Nimbus Sans
– Open Sans
– Proxima Nova
– Roboto
– Univers
– …
WEB FONTS available in multiple widths:

View Slide

7
SCREEN ASPECT RATIO

View Slide

View Slide

A0
A1
A2
A3
A4
A5
A6

View Slide

bradfrost.github.io/this-is-responsive/index.html

View Slide

— ALMOST DONE —

View Slide

reading distance
width and height
content hierarchy
information density
pixel density
device orientation
screen aspect ratio

View Slide

View Slide

!
!
– reading distance
– screen width
– content hierarchy
– information density
– pixel density
– device orientation
– screen aspect ratio
!
!
– device
– environment
– time
– activity
– individual
– location
– social
CONTEXT IS MULTIFACETED
CENNYDD BOWLES
cennydd.co.uk/2013/designing-with-context

View Slide

View Slide

DĚKUJI!
!
Marko Dugonjić
@markodugonjic
[email protected]

View Slide

Credits
!
Rhythm and Proportion, Robert Bringhurst,
h p://webtypography.net/Rhythm_and_Proportion/Horizontal_Motion/2.1.2/
!
Inside Paragraphs, Cyrus Highsmith,
h p://insideparagraphs.com
!
Graded fonts, Typophile,
h p://typophile.com/node/81483
!
Responsive Typography, The Basics, Information Architects,
h p://informationarchitects.net/blog/responsive-typography-the-basics/
!
Wrist, Palm, Lap, Desk, Wall, Luke Wroblewski,
h ps://twi er.com/lukew/status/273453112902172672
!
The EMs have it: Proportional Media Queries FTW!, Lyza Gardner,
h p://blog.cloudfour.com/the-ems-have-it-proportional-media-queries- w/
!
Photo: Empty park bench
h p://www.ﬂickr.com/photos/jonasb/21755140/
!
Photo: Golden wedding
h p://www.ﬂickr.com/photos/crabchick/4056045781/

View Slide

Responsive Web Typography @ WebExpo

Responsive Web Typography @ WebExpo

Marko Dugonjić

More Decks by Marko Dugonjić

Other Decks in Design

Featured

Transcript