Typography
A
A g AAABBBCCCDDEEFGHIJ
KKLLM
TU UV
MN
VW
WW
N
N
D O
X
X
X
O
3344555666777889Y9aZa0
E
eeeffgfgghhhiijijjkk8llm
q r s t k
qqrrssttuuvuvvwwxxnyoozpp
l m
wxyyzz
F
Y
F
P
P
G
Z
n
G
Q
Q
H
0
R
HR
OYPZQ0R1S2
I
S
I
S
bc1122d
9manbboccpdd
J
J
Improve your
typography
Follow @denisjeliazkov • Learn interface design at uilearn.com
Introduction
Improving your typography is
one of the fastest ways to
improve your interface
design.
You can do this by working on the following
Font pairin
Body text sizin
Readabilit
Tracking
Follow @denisjeliazkov • Learn interface design at uilearn.com
01/04
Font pairing
Try pairing your main font with a more neutral
one to establish a visual hierarchy and avoid the
attention battle.
We need to focus on We need to focus on
fixing the issue fixing the issue
Subtracting the not so Subtracting the not so
essential details can essential details can reduce
reduce friction in decison friction in decison making
making and boost overall and boost overall focus
focus across all... across all...
Follow @denisjeliazkov • Learn interface design at uilearn.com
02/04
Body text sizing
The body is the text people are going to read the
most. In most cases, the perfect size is between
16 and 18 pixels.
Subtracting the not so essential details can
reduce friction in decision making and boost
overall focus across all...
Subtracting the not so essential details can
reduce friction in decision making and
boost overall focus across all...
Subtracting the not so essential details
can reduce friction in decision making
and boost overall focus across all...
Follow @denisjeliazkov • Learn interface design at uilearn.com
03/04
Readability
In order to ensure maximum readability, the line-
height needs to fit the font size. Usually, a line-
height between 1.4 to 1.6 is enough for body text
and 1.2 to 1.4 for headers.
We need to We need to focus on
focus on x1.2
fixing the issue
fixing the
issue Subtracting the not so essential
details can reduce friction in
Subtracting the not so
essential details can x1.5 decision making and boost overall
reduce friction in focus across all team members
decision making and
boost overall focus... including, fostering a collaborative...
Follow @denisjeliazkov • Learn interface design at uilearn.com
04/04
Tracking
Not all font sizes require the same tracking.
Headings and captions require different tracking
from the body text
Headings: -0.25
Body: 0 to 0.2
Captions: 0.5 to 1%
-0.25% 0.2% 1%
Follow @denisjeliazkov • Learn interface design at uilearn.com
Visit my website
for a free course
on UX/UI Design
Available now
Become a UI Master
Learn straight-to-the point
actionable tips you can apply
in your everyday design
decisions such as
Hierarch
Typograph
Card and table desig
Colours and more
3 9
$
Get the ebook at www.uilearn.com Link in bio
That’s all
folks
Follow me
Press the FOLLOW button for daily UI, UX, and
Product design tips and tricks. Stay updated and
elevate your design skills!
