As denizens of the digital age, we are surrounded by typography. The purpose of typography in user interface design is not to provide decoration or unique brand value, but rather to display legible information and to communicate with the user. Learn about the history of digital typography and the bespoke typography used by industry heavyweights in their products today. Gain practical insights for selecting type for your own product and understand emerging trends for consistent cross-device experiences.

1. Rachel McClung / Senior Visual Designer, Workiva
TYPE
TRIALS

2. The purpose of typography in user
interface design is

3. The purpose of typography in user
interface design is to communicate.

6. Newer isn’t always better.

7. Print Screen Web

8. A

11. Garamond / Claude Garamond, 16th c.

12. Bodoni / Giambattista Bodoni, 18th c.

13. Century / Linn Boyd Benton & Morris Fuller Benton, 1894

14. Gill Sans / Eric Gill, 1926

15. Futura / Paul Renner, 1927

16. Univers / Adrian Frutiger, 1957

17. Helvetica / Max Miedinger & Eduard Hoffmann, 1957

18. Good type endures.

19. Print Screen Web

23. Chicago / Susan Kare, 1984

26. Refit and repurpose what works.

27. MS Sans Serif / Microsoft, 1990

29. Georgia / Matthew Carter, 1993
Georgia is a serif font
designed specifically for
low resolution screens.

30. VERDANA
sans-serif.
is a modern classic

32. Simplicity has
universal appeal.

33. Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj
Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt
Uu Vv Ww Xx Yy Zz
1234567890
Arial / Robin Nicholas & Patricia Saunders, 1982

34. R 1a G
R 1a G
Arial
Helvetica

35. Ideas beget other ideas.

36. Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj
Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt
Uu Vv Ww Xx Yy Zz
1234567890
Tahoma / Matthew Carter, 1994

38. Lucida Grande / Charles Bigelow & Kris Holmes, 2000
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj
Kk Ll Mm Nn Oo Pp Qq Rr Ss
Tt Uu Vv Ww Xx Yy Zz
1234567890

40. Type reflects the tech and
trends of its day.

41. monospace
for code
suitable
Consolas / Lucas de Groot, 2005

42. Cambria / Jelle Bosma, 2004
serif
scalable
LEGIBLE

43. Corbel / Jeremy Tankard, 2005
sans-serif
type
humanist

44. Calibri / Lucas de Groot, 2004
rounded
condensed
OFFICE DEFAULT

45. Consider more than a single
use case.

46. Segoe UI / Steve Matteson, 2004

51. Type can unify platforms
and experiences.

52. Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj
Kk Ll Mm Nn Oo Pp Qq Rr Ss
Tt Uu Vv Ww Xx Yy Zz
1234567890
Helvetica Neue / updated 1983

53. Light

54. Regular

56. Don’t lose sight of legibility.

57. San Francisco / Apple, 2015

61. Evolve with your product.

62. Print Screen Web

63. Arial
Courier New
Georgia
Impact
Times New Roman
Trebuchet MS
Verdana

65. Arial and images

66. Arial and images

67. Verdana, Arial, and Times New Roman

68. Verdana and Times New Roman

69. Times New Roman and images

70. Trends fade.
Good type endures.

71. 2009

76. Hail side project
experimentation.

77. 2016

81. Make sure usability and aesthetics
run parallel.

83. Noto Sans / Google, 2012

84. no more tofu

85. Consider the implications of an
international product.

86. Roboto / Christian Robertson, 2011

89. Type can be agile, too!

90. HARD
WORKING
UX PRO

93. Research the pedigree of your
proposed web font.

94. Unique Letterforms
CancelOK
Customer Data
Sales Figures
Internal Costs
Market Data
Import Settings
Include these sections in the quick data import ABOUT US
Our clients range from FTSE 300 companies, to large
charitable organisations and some small local businesses
who are striving to expand. Use our Data Analysis service to
inform their strategic decision making and their targets for
the immediate, mid-term and long-term future.
Learn more

95. High contrast serifs
CancelOK
Customer Data
Sales Figures
Internal Costs
Market Data
Import Settings
Include these sections in the quick data import
ABOUT US
Our clients range from FTSE 300 companies,
to large charitable organisations and some small
local businesses who are striving to expand.
Use our Data Analysis service to inform their
strategic decision making and their targets for the
immediate, mid-term and long-term future.
Learn more

96. Condensed Type / Extended Type
CancelOK
Customer Data
Sales Figures
Internal Costs
Market Data
Import Settings
Include these sections in the quick data import
ABOUT US
Our clients range from FTSE 300 companies, to
large charitable organisations and some small local
businesses who are striving to expand. Use our Data
Analysis service to inform their strategic decision
making and their targets for the immediate, mid-term
and long-term future.
Learn more

97. Geometric letterforms
CancelOK
Customer Data
Sales Figures
Internal Costs
Market Data
Import Settings
Include these sections in the quick data import
ABOUT US
Our clients range from FTSE 300 companies,
to large charitable organisations and some
small local businesses who are striving to
expand. Use our Data Analysis service to
inform their strategic decision making and
their targets for the immediate, mid-term
and long-term future.
Learn more

98. Small x-height paired with tall ascenders
CancelOK
Customer Data
Sales Figures
Internal Costs
Market Data
Import Settings
Include these sections in the quick data import
ABOUT US
Our clients range from FTSE 300 companies,
to large charitable organisations and some small
local businesses who are striving to expand.
Use our Data Analysis service to inform their
strategic decision making and their targets for
the immediate, mid-term and long-term future.
Learn more

99. Designed for screen use
CancelOK
Customer Data
Sales Figures
Internal Costs
Market Data
Import Settings
Include these sections in the quick data import
ABOUT US
Our clients range from FTSE 300 companies, to
large charitable organisations and some small
local businesses who are striving to expand.
Use our Data Analysis service to inform their
strategic decision making and their targets for
the immediate, mid-term and long-term future.
Learn more

100. Good user interface type is often
unremarkable. And that’s the point.

101. icon-24x24
icon-24x24 icon-24x24

104. Icon fonts offer rapid
prototyping opportunities and
reduce maintenance.

105. IN THE
WILD

112. Be intentional.

113. THE FUTURE

115. Type as interface:
what options do our users have?

117. Hello there!

118. MAKE
GREATNESS.