Responsive Web Typography @ Krakow 2013

RESPONSIVE WEB
TYPOGRAPHY
Marko Dugonjić
@markodugonjic
Krakow, 2013

View Slide

:/

View Slide

media queries
ﬂexible layouts
ﬂexible images
Responsive Experience

View Slide

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

View Slide

— PARAGRAPHS —

View Slide

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

View Slide

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 a
c
h
i
e
v
e t
h
e b
e
s
t
r
e
a
d
i
n
g e
x
p
e
r
i
e
n
c
e f
o
r v
a
r
i
o
u
s s
c
e
n
a
r
i
o
s
.
H
o
w
e
v
e
r
, t
h
e s
a
t
i
s
f
a
c
t
o
r
y l
i
n
e l
e
n
g
t
h
o
f 4
5 t
o 7
5 c
h
a
r
a
c
t
e
r
s p
e
r l
i
n
e
l
i
m
i
t
s a n
u
m
b
e
r o
f a
c
c
e
p
t
a
b
l
e
c
o
m
b
i
n
a
t
i
o
n
s
, n
o
t t
o c
h
a
r
a
c
t
e
r
s
…
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
a
c
h
i
e
v
e t
h
e b
e
s
t r
e
a
d
i
n
g e
x
p
e
r
i
e
n
c
e f
o
r v
a
r
i
o
u
s
s
c
e
n
a
r
i
o
s
. H
o
w
e
v
e
r
, t
h
e s
a
t
i
s
f
a
c
t
o
r
y l
i
n
e l
e
n
g
t
h o
f
4
5 t
o 7
5 c
h
a
r
a
c
t
e
r
s p
e
r l
i
n
e l
i
m
i
t
s a n
u
m
b
e
r o
f
a
c
c
e
p
t
a
b
l
e c
o
m
b
i
n
a
t
i
o
n
s
, n
o
t t
o m
e
n
t
i
o
n
75
45

View Slide

View Slide

— READING DISTANCE —

View Slide

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

View Slide

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 a
c
h
i
e
v
e
t
h
e b
e
s
t r
e
a
d
i
n
g e
x
p
e
r
i
e
n
c
e f
o
r v
a
r
i
o
u
s s
c
e
n
a
r
i
o
s
. H
o
w
e
v
e
r
,
t
h
e s
a
t
i
s
f
a
c
t
o
r
y l
i
n
e l
e
n
g
t
h o
f 4
5 t
o 7
5 c
h
a
r
a
c
t
e
r
s p
e
r
l
i
n
e l
i
m
i
t
s a n
u
m
b
e
r o
f a
c
c
e
p
t
a
b
l
e c
o
m
b
i
n
a
t
i
o
n
s
, n
o
t t
o
m
e
n
t
i
o
n a
s
d
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 a
c
h
i
e
v
e
t
h
e b
e
s
t r
e
a
d
i
n
g e
x
p
e
r
i
e
n
c
e f
o
r v
a
r
i
o
u
s s
c
e
n
a
r
i
o
s
. H
o
w
e
v
e
r
,
t
h
e s
a
t
i
s
f
a
c
t
o
r
y l
i
n
e l
e
n
g
t
h o
f 4
5 t
o 7
5 c
h
a
r
a
c
t
e
r
s p
e
r
l
i
n
e l
i
m
i
t
s a n
u
m
b
e
r o
f a
c
c
e
p
t
a
b
l
e c
o
m
b
i
n
a
t
i
o
n
s
, n
o
t t
o
m
e
n
t
i
o
n a
s
d
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 a
c
h
i
e
v
e
t
h
e b
e
s
t r
e
a
d
i
n
g e
x
p
e
r
i
e
n
c
e f
o
r v
a
r
i
o
u
s s
c
e
n
a
r
i
o
s
. H
o
w
e
v
e
r
,
t
h
e s
a
t
i
s
f
a
c
t
o
r
y l
i
n
e l
e
n
g
t
h o
f 4
5 t
o 7
5 c
h
a
r
a
c
t
e
r
s p
e
r
l
i
n
e l
i
m
i
t
s a n
u
m
b
e
r o
f a
c
c
e
p
t
a
b
l
e c
o
m
b
i
n
a
t
i
o
n
s
, n
o
t t
o
m
e
n
t
i
o
n a
s
d
18
24
36

View Slide

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

View Slide

CONTENT HIERARCHY
+
INFORMATION DENSITY

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

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

HEADLINE ONE
Headline Two
HEADLINE 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 le er size to establish text
hierarchy. Add bolds into the mix, and
you have a pale e of at least 6 styles.

View Slide

— CSS —

View Slide

View Slide

— DEFAULTS —

View Slide

* { margin: 0; padding: 0; }
html {
font: 100%/1.5 Georgia, serif;
}
p {
margin-bottom: 1.5em; /* = line-height */
max-width: 38em;
}

View Slide

— BREAKPOINTS —

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
http://www.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
http://trentwalton.com/2012/06/19/ﬂuid-type/

View Slide

@media only screen and (min-width: 37.5em) { }
/* 600px */
@media only screen and (min-width: 50em) { }
/* 800px */
@media only screen and (min-width: 62.5em) { }
/* 1000px */

View Slide

— TYPOGRAPHIC SCALE —
16 18 21 24 36 48

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

View Slide

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

View Slide

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

— PARAGRAPH SPACING —

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.
jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj
ŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠ
q
d
j
Š

View Slide

/* short line lenghts (under 45 chars) */
p {
font-size: 1rem; /* 16px */
line-height: 1.4;
}

View Slide

/* medium line lenghts (45–60 chars) */
p {
font-size: 1.125rem; /* 18px */
line-height: 1.45;
}

View Slide

/* long line lenghts (60–75 chars) */
p {
font-size: 1.312rem; /* 21px */
line-height: 1.5;
}

View Slide

View Slide

@media only screen
and (min-device-pixel-ratio: 1.5) {
p {
font-size: 1rem;
line-height: 1.5;
letter-spacing: .01em;
word-spacing: .01em;
}
}
/* vendor prefix omitted code */

View Slide

View Slide

— FUTURE? —

View Slide

RESPONSIVE TYPOGRAPHY WITH WEBRTC
http://webdesign.maratz.com/lab/responsivetypography/

View Slide

View Slide

FM

View Slide

DZIĘKUJĘ!
Marko Dugonjić
@markodugonjic

View Slide

Credits
Rhythm and Proportion, Robert Bringhurst,
http://webtypography.net/Rhythm_and_Proportion/Horizontal_Motion/2.1.2/
Inside Paragraphs, Cyrus Highsmith,
http://insideparagraphs.com
Graded fonts, Typophile,
http://typophile.com/node/81483
Responsive Typography, The Basics, Information Architects,
http://informationarchitects.net/blog/responsive-typography-the-basics/
Wrist, Palm, Lap, Desk, Wall, Luke Wroblewski,
https://twitter.com/lukew/status/273453112902172672
The EMs have it: Proportional Media Queries FTW!, Lyza Gardner,
http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/http://blog.cloudfour.com/the-ems-have-it-proportional-
media-queries-ftw/

View Slide

Responsive Web Typography @ Krakow 2013

Responsive Web Typography @ Krakow 2013

Marko Dugonjić

More Decks by Marko Dugonjić

Other Decks in Design

Featured

Transcript