Download - Designing Type for User Interface
![Page 1: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/1.jpg)
@andigalpern #designtype @cascadesf
![Page 2: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/2.jpg)
@andigalpern#designtype @cascadesf
Andi Galpern
![Page 3: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/3.jpg)
What is Typography?
![Page 4: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/4.jpg)
Why is it important?
![Page 5: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/5.jpg)
Typography95%
of design is
![Page 6: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/6.jpg)
The main goal of design is to improve comprehension.
![Page 7: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/7.jpg)
The Anatomy of a Typeface
![Page 8: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/8.jpg)
Let’s start with the basics.
![Page 9: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/9.jpg)
Serif Sans-Serif
![Page 10: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/10.jpg)
The Serif Traditional purposes, long reading,
storytelling
![Page 11: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/11.jpg)
Serifs were designed to improve reading comprehension. They connect letters and words in large paragraphs of printed text.
![Page 12: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/12.jpg)
Sans-serif neutral, clean simple, modern
![Page 13: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/13.jpg)
Serif Sans-Serif
![Page 14: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/14.jpg)
![Page 15: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/15.jpg)
Pay attention to the x-height.
![Page 16: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/16.jpg)
Learn about the anatomy of a typeface
![Page 17: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/17.jpg)
![Page 18: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/18.jpg)
Classifications of Type
![Page 19: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/19.jpg)
http://www.fonts.com/content/learning/fontology/level-1/type-anatomy/type-classifications
![Page 20: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/20.jpg)
http://www.fonts.com/content/learning/fontology/level-1/type-anatomy/type-classifications
![Page 21: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/21.jpg)
http://www.fonts.com/content/learning/fontology/level-1/type-anatomy/type-classifications
![Page 22: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/22.jpg)
font vs. typeface
![Page 23: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/23.jpg)
Digital file that contains the typeface .ttf, .otf
Font
![Page 24: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/24.jpg)
Design of the alphabetTypeface
![Page 25: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/25.jpg)
To develop your gut instinct for typography, start by learning the language of type. It will take your typography from mere words on a page to something that resonates. Learn what a
descender and an ear are; recognize the differences between pixels, percentages, and ems when sizing type; know when to use small caps, an em dash, and more. Get the basic principles, or the stuff that works most of the time, under your belt and then take the leap on your own.
jason santa maria “on web typography”
![Page 26: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/26.jpg)
Pairing Typefaces
![Page 27: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/27.jpg)
When combining fonts ALWAYS think about
Contrast
![Page 28: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/28.jpg)
http://www.typography.com/techniques/
![Page 29: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/29.jpg)
http://www.typography.com/techniques/
![Page 30: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/30.jpg)
Selecting Typefaces for your Brand
![Page 32: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/32.jpg)
Branding for print + screen are very similar.
![Page 33: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/33.jpg)
How would you describe your brand?
![Page 34: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/34.jpg)
Adventurous
Business-like
Fun
Cutting Edge
Functional
Reliable
Stable
Secure
Daring
Trustworthy
Describe your brand
![Page 35: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/35.jpg)
Find typefaces that represent your description.
![Page 36: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/36.jpg)
![Page 37: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/37.jpg)
![Page 38: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/38.jpg)
![Page 39: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/39.jpg)
![Page 40: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/40.jpg)
web
![Page 41: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/41.jpg)
Sans-serif is easier to read for the screen.
![Page 42: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/42.jpg)
Sans-Serif is easier to read at smaller sizes.
![Page 43: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/43.jpg)
Humanist typefacesThe best choice for setting type
for the screen.
![Page 44: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/44.jpg)
Futura
Proxima Nova
Avenir
Gotham
Franklin Gothic
Brandon Grotesque
Helvetica Neue
![Page 45: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/45.jpg)
Type libraries
![Page 46: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/46.jpg)
Typekit, Google, H&J
![Page 47: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/47.jpg)
![Page 48: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/48.jpg)
![Page 49: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/49.jpg)
![Page 50: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/50.jpg)
![Page 51: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/51.jpg)
![Page 52: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/52.jpg)
![Page 53: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/53.jpg)
Google Fonts has a new interface and it’s useful!
![Page 54: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/54.jpg)
Dear Future Andi, This is your cue to open up Google Fonts and show off the new features!https://fonts.google.com
![Page 55: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/55.jpg)
![Page 56: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/56.jpg)
![Page 57: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/57.jpg)
![Page 58: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/58.jpg)
Other Google fonts include
![Page 59: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/59.jpg)
![Page 60: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/60.jpg)
Jessica Hische’s guide to choosing a sans-serif typeface
![Page 61: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/61.jpg)
il1il1il1
il1il1il1
il1
il1il1
![Page 62: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/62.jpg)
Tip: If you are set on a particular typeface which lacks contrast, select a different
typeface for numbers
![Page 63: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/63.jpg)
Always use smart quotes
![Page 64: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/64.jpg)
![Page 65: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/65.jpg)
![Page 66: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/66.jpg)
![Page 67: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/67.jpg)
![Page 68: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/68.jpg)
![Page 69: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/69.jpg)
iOS and App Design
![Page 70: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/70.jpg)
Mixing several different fonts can make your app seem fragmented and sloppy.
iOS Typography Rules
Not recommended —->
![Page 71: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/71.jpg)
Instead, use one font and just a few styles and sizes.
iOS Typography Rules
Better —->
![Page 72: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/72.jpg)
Text should never be smaller than 11 points, even at the
extra small size.
iOS Typography Rules
![Page 73: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/73.jpg)
Body text default is 17pt.
iOS Typography Rules
![Page 74: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/74.jpg)
At the smallest three text sizes, tracking values are relatively wide; at the largest three text sizes, tracking values are relatively tight.
iOS Typography Rules
![Page 75: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/75.jpg)
Tip: Always Test!
![Page 76: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/76.jpg)
pixels for web points for native & mobile
How do we measure type?
![Page 77: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/77.jpg)
![Page 78: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/78.jpg)
Dear Andi, This is where you open Principle and demo how to preview type on a mobile prototype.
![Page 79: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/79.jpg)
System fonts
• These already installed on your computer.
• Some are better than others.
• Made for the screen
• AKA “browser safe” fonts
![Page 80: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/80.jpg)
System fontsTimes
Verdana
Arial
Georgia
Lucida Grande
![Page 81: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/81.jpg)
System fonts
Comic Sans Papyrus
![Page 82: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/82.jpg)
System fonts
For a list of which system fonts you should use, visit
http://practicaltypography.com/system-fonts.html
![Page 83: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/83.jpg)
System fonts
San Francisco
San Francisco UI Display
![Page 84: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/84.jpg)
What are others doing?
![Page 85: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/85.jpg)
Dear Andi, This is where you open the interface dissections.
![Page 86: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/86.jpg)
![Page 87: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/87.jpg)
“Sterling” custom typeface
![Page 88: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/88.jpg)
font-family: Archer
![Page 89: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/89.jpg)
font-family: Archer
Gotham
![Page 90: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/90.jpg)
Gotham, Helvetica, Sans-serif
![Page 91: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/91.jpg)
Benton Sans
![Page 92: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/92.jpg)
Benton Sans
![Page 94: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/94.jpg)
Gotham
![Page 95: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/95.jpg)
Setting type
![Page 96: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/96.jpg)
Golden ratio of type
![Page 98: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/98.jpg)
Optimal line-length = 45-90 characters
![Page 99: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/99.jpg)
Line-length refers to the width of a line.
![Page 100: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/100.jpg)
Standard sizes of body, p, h1- h6
https://medium.com/@lukejonesme/3-typography-tips-for-a-more-comfortable-read-fed478affa8d#.msy0xzt81
![Page 101: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/101.jpg)
Choose your body text wisely.
http://practicaltypography.com/typography-in-ten-minutes.html
![Page 102: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/102.jpg)
Body copy should be sized 15-25px.
http://practicaltypography.com/typography-in-ten-minutes.html
![Page 103: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/103.jpg)
Line-height should be 120-145% of the text size.
http://practicaltypography.com/typography-in-ten-minutes.html
![Page 104: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/104.jpg)
![Page 105: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/105.jpg)
![Page 106: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/106.jpg)
![Page 107: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/107.jpg)
![Page 108: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/108.jpg)
![Page 109: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/109.jpg)
Kerning
http://type.method.ac/
![Page 110: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/110.jpg)
Legibility
![Page 111: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/111.jpg)
Readability
![Page 112: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/112.jpg)
Make the scale obvious.
![Page 113: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/113.jpg)
Contrast is key.
![Page 114: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/114.jpg)
How do people read information?
![Page 115: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/115.jpg)
Most people don’t read. They skim and scan.
![Page 116: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/116.jpg)
Useful sites
![Page 117: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/117.jpg)
![Page 118: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/118.jpg)
![Page 119: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/119.jpg)
![Page 120: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/120.jpg)
CSS3
![Page 121: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/121.jpg)
rotate, add shadows, embed any typeface you want.
![Page 122: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/122.jpg)
We’ve come a long way with web typography.
![Page 123: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/123.jpg)
In conclusion
![Page 124: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/124.jpg)
Typography is an art.
![Page 125: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/125.jpg)
Learn (or re-learn) the basic art principles and elements
![Page 126: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/126.jpg)
Trace typefaces
![Page 127: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/127.jpg)
Have fun with it!
![Page 128: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/128.jpg)
Explore.
![Page 129: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/129.jpg)
Always design with intent.
![Page 130: Designing Type for User Interface](https://reader036.vdocument.in/reader036/viewer/2022062316/589c6e301a28abe96c8b5c79/html5/thumbnails/130.jpg)