In this talk, you will learn UI Design Theory and the Basic Principles of Typography and Spacing, create elegant Web & Mobile app design by selecting and pairing meaningful Typography and know how to use spacing effectively and balance your design. You will achieve the experience and knowledge to take UI design fundamentals and apply them in your everyday life.

3. TYPOGRAPHY INTRODUCTION
A. WHY?
B. FONT AND TYPOGRAPHY TERMS
C. TYPE CLASSIFICATION
AGENDA
T I M E & S L I D E
60 minutes
50 slides and 3 main sections
Free resources
TYPOGRAPHY SCALES AND GRIDS
A. LINE LENGTH - LEADING - KERNING
B. TEXT ALIGNMENT
C. ROLE OF TYPEFACES & TYPOGRAPHIC HIERARCHY
D. SPACING & BASELINE GRID
TYPOGRAPHY SHOWCASES
A. HOW TO SELECT FONTS TO THE WEBSITE
B. SHOWCASES

4. Website. Apps. Book. TV. Magazine.
WHY
TYPOGRAPHY?

5. W H Y
T Y P O G R A P H Y
95 % of design is Text.
A great designer is good at Typography
Text is the main part of media.
e.g Websites, Apps, TV, Blog, Magazine…
Type is a beautiful group of letters,
not a group of beautiful letters.

6. Effectively arrange it for legibility
and readability.
1A
P U R P O S E
O F T Y P O G R A P H Y
Communicate or convey your
message to the reader.
2 M A I N R E A S O N S

7. FONT,
TYPOGRAPHY
TERMS Font Family. Serif. x-height. Mean-line.

8. Font is a set of characters of specific style and
size. The specific type of font í font style.
FONT FAMILY
FONT STYLE
“
TIME NEW ROMAN.
ARIAL.
Segoe Script.
SOURCE SERIF PRO.
BOLD.
ITALIC.
REGULAR.
MEDIUM.
BLACK.
Roboto Italic style with 30pt size
Roboto Black style with 30pt size
Roboto Condensed style with 30pt size
Roboto Medium style with 30pt size
1B

9. We love Typography
Cap-line
Mean-line
Base-line
CAP, MEAN AND
BASE-LINE

10. The height of letter x
cap-height x-height
“Most efficient x-height is 67-69% of cap-height
CAP-HEIGHT
AND x-HEIGHT

11. We love TypographyMean-line
Base-line
Descender
Ascender
ASCENDER
& DESCENDER

12. We love Typography
Closed Counter
Open CounterClosed Counter
Counter can help with legibility
COUNTER
(OPEN & CLOSE)

13. serif beak
stroke ear terminal
tailloop
TYPOGRAPHY
TERMS

14. TYPE
CLASSIFICATION Font Family. Serif. x-height. Mean-line.

15. Serif typefaces are called “serifs” in reference to the
small lines that are attached to the main strokes of
characters within the face
SERIF TYPEFACES
The main characteristic of old style characters is
their diagonal stress (the thinnest parts of the letters
appear on the angled strokes, rather than the
vertical or horizontal ones).
TRANSITIONAL
The differences between thick and thin strokes in
transitional typefaces are more pronounced than
they are in old style serifs.
“
Time New Roman
1C

16. Serif typefaces are called “serifs” in reference to the
small lines that are attached to the main strokes of
characters within the face
SERIF TYPEFACES
MODERNSERIFS
Have a much more pronounced contrast between
thin and thick lines, and have a vertical stress and
minimal brackets.
SLAB SERIFS
Have little to no contrast between thick and thin
lines, and have thick, rectangular serifs, and
sometimes have fixed widths.
“
Didot
American
Typewriter
1C

17. Sans-serif typefaces are called such because they lack
serif details on characters. Sans-serif typefaces are
often more modern in appearance than serifs.
SANS-SERIF
TYPEFACES
HUMANIST SANS-SERIF
Have a much more pronounced contrast between
thin and thick lines, and have a vertical stress and
minimal brackets.
TRANSITIONAL SANS-SERIF
They have a relatively plain appearance when
compared to the grotesques.
“
Tahoma
Arial, Helvetica
1C

18. Sans-serif typefaces are called such because they lack
serif details on characters. Sans-serif typefaces are
often more modern in appearance than serifs.
SANS-SERIF
TYPEFACES
GEOMETRIC
Geometric sans-serifs are more closely based on
geometric shapes. Generally, the “O”s in
geometrics will appear circular, and the letter “a” is
almost always simple, just a circle with a tai
“
Futura
1C

19. Scripts are based upon handwriting, and offer very
fluid letter forms.
Formal scripts are often reminiscent of the
handwritten letterforms common in the 17th and
18th centuries. They’re common for very elegant
and elevated typographical designs and are
unsuitable for body copy.
“
Casual scripts more closely resemble modern
handwriting They're much less formal, often with
stronger strokes and a more brush-like appearance
1C

20. LINE LENGTH,
LEADING, KERNING Letter spacing. Line spacing. Characters

21. Line length is the distance between the left
and right edges of a text block. Number of
characters per line should be 45-85 characters
per line or 10 -17 works per line.
LINE - LENGHT
LINE LENGTH

22. Too long lines: User need to move the head
for long lines
Too short lines: The eyes need to jump up and
down many times to read.
LINE LENGTH

23. Leading is the distance from one baseline to the next baseline.
LINE-HEIGHT
(LEADING)
You fill an empty
space deep in my life
Cap-line
Mean-line
Mean-line
Base-line
Base-line
line-height of body: 120-160%,
line-height of heading : 100-110%
2A

24. Line height 130% (33px text)
LINE-HEIGHT
(LEADING)
You have a special way of dealing with me
and I’m sure you will always be there for
me. You are my support and I can count on
you. When troubled times face me, I feel
secure because I have you.
Line height 160% (33px text)
You have a special way of dealing with me
and I’m sure you will always be there for
me. You are my support and I can count on
you. When troubled times face me, I feel
secure because I have you.
2A

25. LETTER SPACING
(KERNING)2A

26. TEXT ALIGNMENT. Left. Right. Center. Justify.

27. B O D Y C O N T E N T
EXAMPLE
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. In vehicula est non enim. Nulla in mi eget purus
hendrerit tempus. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac
turpis egestas. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. In vehicula est non enim
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. In vehicula
est non enim. Nulla in mi eget purus
hendrerit tempus. Pellentesque est non
enim.

28. S M A L L A M O U N T O F T E X T

29. C E N T E R - A L I G N E D
Use for important lines: heading, tagline..
Use for few lines (maximum is 3 lines)
D E V D A Y 2 0 1 9

30. A L I G N M E N T
J U S T I F I E D

31. ROLE OF FONT,
TYPOGRAPHIC
HIERARCHY Heading. Body. H1, H2, H3. 1.618

32. C A P T I O N
SUB-HEADING
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. In vehicula est non enim. Nulla in mi eget purus
hendrerit tempus. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac
turpis egestas. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. In vehicula est non enim
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. In vehicula
est non enim. Nulla in mi eget purus
hendrerit tempus. Pellentesque est non
enim.

33. ROLE OF
TYPEFACES
USING THE ROLE OF FONT BY
CORRECT WAYS
Casper Bishop was thinking about Stanley
Jones again. Stanley was a gracious
volcano with pointy warts and grubby
moles.
APRIL 06,2019
Wrong Usage Of Heading Text As
Body Text
CASPER BISHOP WAS THINKING ABOUT
STANLEY JONES AGAIN. STANLEY WAS A
GRACIOUS VOLCANO WITH POINTY
WARTS AND GRUBBY MOLES.
APRIL 06,2019
2C

34. TYPOGRAPHIC
HIERARCHY
Typographic hierarchy organizing type that establishes an
order of importance within the data, easily to find what they
are looking for and navigate the content.
2C

35. TYPOGRAPHIC
HIERARCHY
STEP 1
SELECT BASE SIZE
Basically, base size is the font size of paragraph or
the font size of body text.
E.g: 18px, 16px
How much you want to scale the font for each level
of typography.
1.333(perfect fourth), 1.618 (golden section),
1.5 (perfect fifth)
STEP 2
SELECT SCALE RATIO
2C

36. TYPOGRAPHIC
HIERARCHY
Slowly title her had to farther been and lift anywhere
expenses outlines power to while of for forest of like she like
abundantly workmen. And particular, his without that
outcomes been got various know headline slept it of be copy
but little detailed instead, often hard solider
Font Roboto Black 57px
SUB HEADING, ROBOTO REGULAR 34PX
H1 Heading 57px
Small text 20px
Body 26px
H3 Heading 34px
H2 Heading 44px
BASE LINE = 26PX, SCALSE = 1.3
2C

37. TYPOGRAPHIC
HIERARCHY
H E I G H F I V E
S M A L L E R
H E A D I N G
S C A L E R A T I O
BODY TEXT
2 6 P X
BASE SIZE
1.333
R E A D A B I L I T Y A N D L E G I B I L I T Y
PERFECT FOURTH
2C

38. SPACING AND
BASELINE GRID Vertical Rhythm. Harmony.

39. Vertical rhythm or vertical spacing use to layout
the text and design the elements to create harmony
VERTICAL
RHYTHM

40. It base on base font size multiplied by line-height
VERTICAL
RHYTHM
BASE SIZE = 18px
LINE-HEIGHT = 1.5
BASE GRID SIZE = 18px * 1.5 = 27px

41. VERTICAL
RHYTHM
2C

42. SELECT FONT
FOR WEBSITE FUN. READING. BUSINESS. FASHION. ELEGANT

43. HOW MANY FONTS
TO SELECT?
Select 2 or 3 fonts
Assign each font with roles

44. They don't have very sharp edges or something like
this so this is a bit fun team a better relaxed looking
top one is sensitive for.
Funny Theme
Mohr Rounded. Yikes Railey

45. If you are writing for some marriage
ceremony or something like that you
might go for the script font.

46. Select the very modern type to show something a bit
serious and dramatic sensitive.
TECH & BUSINESS
THEME
Roboto Open Sans

47. Using the very modern type of font with business
website or design.
Accent
3A

48. FUN. READING. BUSINESS. FASHION. ELEGANT

49. BLOG POST

50. D O Y O U H A V E
QUESTIONS
nhduong29
duong.nguyen@axonactive.comAxon Active is a Swiss offshore software development
company with strong expertise in Agile IT and a large
portfolio of successful international projects, ranging
from small businesses to highly complex multi-platform
systems for large corporate clients.