Responsive Web Typography @ Awwwards Barcelona

RESPONSIVE WEB
TYPOGRAPHY
Marko Dugonjić
Barcelona, 2015

View Slide

TYPOGRAPHY
↓
CSS

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

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

1
READING DISTANCE

View Slide

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

View Slide

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

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

•
•
•
•
•
•
•
•
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.
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
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(BASELINE-24X24.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

$baseline_S: 1.4;
$baseline_M: 1.45;
$baseline_L: 1.5;
!
body { line-height: #{$baseline_S};
background-size: 100% #{$baseline_S}em }
p { margin-bottom: #{$baseline_S}em }
!
!
body { line-height: $baseline_M;
background-size: 100% #{$baseline_M}em }
p { margin-bottom: #{$baseline_M}em }
!
!
body { line-height: $baseline_L;
background-size: 100% #{$baseline_L}em }
p { margin-bottom: #{$baseline_L}em }

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

modularscale.com

View Slide

modularscale.com stats

View Slide

STYLE OPTIONS
!
!
ALL CAPS FOR THE SUBHEAD H2
!
SMALL CAPS FOR THE SUBHEAD H3
!
Italic for the 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;
letter-spacing: .125em;
}

View Slide

SETTING SUBHEADS WITH CSS

blog.typekit.com/2013/07/25/se ing-subheads-with-css/
webdesign.maratz.com/lab/subheads/

View Slide

4
INFORMATION DENSITY

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

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

6
DEVICE ORIENTATION

View Slide

View Slide

font-to-width.com

View Slide

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

View Slide

typologic.nl/news/live-font-interpolation-with-svg/

View Slide

typosansplomb.com/ResponsiveInterpolation/

View Slide

7
SCREEN ASPECT RATIO

View Slide

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

!
!
– 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

GRACIAS!
!
@markodugonjic
speakerdeck.com/maratz

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 @ Awwwards Barcelona

Responsive Web Typography @ Awwwards Barcelona

Marko Dugonjić

More Decks by Marko Dugonjić

Other Decks in Design

Featured

Transcript