Typography for Developers Rijeka 2015

Typography for
Developers
Marko Dugonjić
@markodugonjic
Rijeka, 2015

View Slide

@markodugonjic
speakerdeck.com/maratz

View Slide

View Slide

preview.typetester.org

View Slide

Creative Nights

View Slide

View Slide

WE NEED TO TALK

View Slide

View Slide

Preparation
Selecting a typeface
Paragraphs
Text hierarchy
Tabular data
THE PLAN

View Slide

PREPARATION

View Slide

Browser
wars

View Slide

Reset Everything™
#protip

View Slide

* { margin: 0; padding: 0; }

View Slide

HIGH CONTRAST

View Slide

.white-on-black {
color: #ccc;
background: #000;
}
.black-on-white {
color: #444;
background: #fff;
}

View Slide

HIGH CONTRAST

View Slide

SELECTING a TYPEFACE

View Slide

View Slide

Afrikaans Albanian Asturian Baraba Tatar Bislama Bokmal Norwegian Breton
Catalan Chamorro Danish Dutch English Estonian Faeroese Finnish Franco-
Provencal French Friulian Galician German Icelandic Irish Italian Ladin
Luxembourgian Manx Gaelic Nynorsk Norwegian Occitan Portuguese Rhaeto-
Romance Romansch Sco ish Gaelic Southern Sami Spanish Swedish Ume Sami
Walloon West Frisian Balk Basque Bosnian Bulgarian Croatian Czech Erzya
Esperanto Hungarian Inari Sami Karachay-Balkar Karaim Kashubian Kazan Tatar
Kumyk Kurdish Lak Latvian (Le ish) Lithuanian Lule Sami Macedonian Maltese
Moksha Moldavian Nogay Polish Romanian Russian Slovak Slovenian Sorbian
Lower Sorbian Upper Turkish Ubykh Vamhusmal

View Slide

keming. (kěm'-ĭng).
n. The result of
improper kerning.
h p://bit.ly/Nabf4X

View Slide

View Slide

h p://type.method.ac

View Slide

serif
— OR —
sans-serif

View Slide

View Slide

Because there’s a lot going on visually on SM —
screenshots, bu ons and noisy ads — a sans-serif felt
like a more sensible, unclu ered route for body copy.
— ELLIOT JAY STOCKS + VITALY FRIEDMAN
“
”

View Slide

PARAGRAPHS

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
“
”

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

L
i
n
e h
e
i
g
h
t f
o
r e
a
c
h b
r
e
a
k
p
o
i
n
t i
s a
d
j
u
s
t
e
d
a
c
c
o
r
d
i
n
g t
o t
h
e l
i
n
e l
e
n
g
t
h r
e
n
d
e
r
e
d a
t t
h
a
t
b
r
e
a
k
p
o
i
n
t
. S
h
o
r
t l
i
n
e l
e
n
g
t
h
s r
e
q
u
i
r
e t
i
g
h
t
e
r l
i
n
e
s
p
a
c
i
n
g
, b
e
c
a
u
s
e t
h
e r
e
a
d
e
r
’
s e
y
e d
o
e
s
n
’
t h
a
v
e t
o
t
r
a
v
e
l m
u
c
h t
o r
e
a
c
h t
h
e n
e
x
t l
i
n
e o
f t
e
x
t
. A
s
l
i
n
e l
e
n
g
t
h g
e
t
s l
o
n
g
e
r
, m
o
r
e l
i
n
e s
p
a
c
i
n
g i
s
r
e
q
u
i
r
e
d
. L
i
n
e h
e
i
g
h
t f
o
r e
a
c
h b
r
e
a
k
p
o
i
n
t i
s
a
d
j
u
s
t
e
d a
c
c
o
r
d
i
n
g t
o t
h
e l
i
n
e l
e
n
g
t
h r
e
n
d
e
r
e
d a
t
t
h
a
t b
r
e
a
k
p
o
i
n
t
. S
h
o
r
t l
i
n
e l
e
n
g
t
h
s r
e
q
u
i
r
e t
i
g
h
t
e
r
l
i
n
e s
p
a
c
i
n
g
, b
e
c
a
u
s
e t
h
e r
e
a
d
e
r
’
s e
y
e d
o
e
s
n
’
t
L
i
n
e h
e
i
g
h
t f
o
r e
a
c
h b
r
e
a
k
p
o
i
n
t i
s a
d
j
u
s
t
e
d
a
c
c
o
r
d
i
n
g t
o t
h
e l
i
n
e l
e
n
g
t
h r
e
n
d
e
r
e
d a
t t
h
a
t
b
r
e
a
k
p
o
i
n
t
. S
h
o
r
t l
i
n
e l
e
n
g
t
h
s r
e
q
u
i
r
e t
i
g
h
t
e
r l
i
n
e
s
p
a
c
i
n
g
, b
e
c
a
u
s
e t
h
e r
e
a
d
e
r
’
s e
y
e d
o
e
s
n
’
t h
a
v
e t
o
t
r
a
v
e
l m
u
c
h t
o r
e
a
c
h t
h
e n
e
x
t l
i
n
e o
f t
e
x
t
. A
s
l
i
n
e l
e
n
g
t
h g
e
t
s l
o
n
g
e
r
, m
o
r
e l
i
n
e s
p
a
c
i
n
g i
s
r
e
q
u
i
r
e
d
. L
i
n
e h
e
i
g
h
t f
o
r e
a
c
h b
r
e
a
k
p
o
i
n
t i
s
a
d
j
u
s
t
e
d a
c
c
o
r
d
i
n
g t
o t
h
e l
i
n
e l
e
n
g
t
h r
e
n
d
e
r
e
d a
t
t
h
a
t b
r
e
a
k
p
o
i
n
t
. S
h
o
r
t l
i
n
e l
e
n
g
t
h
s r
e
q
u
i
r
e t
i
g
h
t
e
r
l
i
n
e s
p
a
c
i
n
g
, b
e
c
a
u
s
e t
h
e r
e
a
d
e
r
’
s e
y
e d
o
e
s
n
’
t

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.
qqqqqqqqqqqqqqqqqqqqqqqqqq
dddddddddddddddddddddddddd
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.
jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj
ŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠ
q
d
j
Š

View Slide

View Slide

TEXT 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
16 24 36 54 81 121

View Slide

modularscale.com

View Slide

SETTING SUBHEADS WITH CSS

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

View Slide

DATA TABLES

View Slide

View Slide

Today Week Month
123 1234 12345
345 3456 34567

View Slide

S
i
n
g
l
e r
o
w v
a
l
u
e
V
e
r
t
i
c a
l
-
a l
i
g n
-
t o
p i
s q
u
i
t
e h
a
n
d
y w i
t
h l
a
r g
e
r s
t
r
i
n
g
s o
f t
e
x
t w
i
t h
i
n e
a
c
h t
a
b
l
e
c
e
l
l
. I
m
a
g
i
n
e t
h
a
t y
o
u h
a
v
e
c
o
n
t
a
i
n
s
a s
i
n
g
l
e l
i
n
e o
f d
a
t
a
?
S
i
n
g
l
e r
o
w v
a
l
u
e V
e
r
t
i
c a
l
-
a l
i
g n
-
t o
p i
s q
u
i
t
e h
a
n
d
y w i
t
h l
a
r g
e
r s
t
r
i
n
g
s o
f t
e
x
t w
i
t h
i
n e
a
c
h t
a
b
l
e
c
e
l
l
. I
m
a
g
i
n
e t
h
a
t y
o
u h
a
v
e
c
o
n
t
a
i
n
s
a s
i
n
g
l
e l
i
n
e o
f d
a
t
a
?

View Slide

View Slide

table {
border-collapse: collapse;
table-layout: fixed;
width: 100%;
}
th, td {
border-top: .1em solid #ccc;
padding: .74em 1em .75em;
vertical-align: top;
}
td.numeric {
text-align: right;
}

View Slide

ALMOST DONE!

View Slide

Preparation
Selecting a typeface
Paragraphs
Text hierarchy
Tabular data
THE PLAN

View Slide

thinkingwithtype.com
fontfeed.com
explorationsintypography.com
typetester.org

View Slide

Hvala!
Marko Dugonjić
@markodugonjic
creativenights.com

View Slide

Typography for Developers Rijeka 2015

Typography for Developers Rijeka 2015

Marko Dugonjić

More Decks by Marko Dugonjić

Other Decks in Design

Featured

Transcript