designing type for user interface
TRANSCRIPT
@andigalpern #designtype @cascadesf
@andigalpern#designtype @cascadesf
Andi Galpern
What is Typography?
Why is it important?
Typography95%
of design is
The main goal of design is to improve comprehension.
The Anatomy of a Typeface
Let’s start with the basics.
Serif Sans-Serif
The Serif Traditional purposes, long reading,
storytelling
Serifs were designed to improve reading comprehension. They connect letters and words in large paragraphs of printed text.
Sans-serif neutral, clean simple, modern
Serif Sans-Serif
Pay attention to the x-height.
Learn about the anatomy of a typeface
Classifications of Type
http://www.fonts.com/content/learning/fontology/level-1/type-anatomy/type-classifications
http://www.fonts.com/content/learning/fontology/level-1/type-anatomy/type-classifications
http://www.fonts.com/content/learning/fontology/level-1/type-anatomy/type-classifications
font vs. typeface
Digital file that contains the typeface .ttf, .otf
Font
Design of the alphabetTypeface
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”
Pairing Typefaces
When combining fonts ALWAYS think about
Contrast
http://www.typography.com/techniques/
http://www.typography.com/techniques/
Selecting Typefaces for your Brand
Branding for print + screen are very similar.
How would you describe your brand?
Adventurous
Business-like
Fun
Cutting Edge
Functional
Reliable
Stable
Secure
Daring
Trustworthy
Describe your brand
Find typefaces that represent your description.
web
Sans-serif is easier to read for the screen.
Sans-Serif is easier to read at smaller sizes.
Humanist typefacesThe best choice for setting type
for the screen.
Futura
Proxima Nova
Avenir
Gotham
Franklin Gothic
Brandon Grotesque
Helvetica Neue
Type libraries
Typekit, Google, H&J
Google Fonts has a new interface and it’s useful!
Dear Future Andi, This is your cue to open up Google Fonts and show off the new features!https://fonts.google.com
Other Google fonts include
Jessica Hische’s guide to choosing a sans-serif typeface
il1il1il1
il1il1il1
il1
il1il1
Tip: If you are set on a particular typeface which lacks contrast, select a different
typeface for numbers
Always use smart quotes
iOS and App Design
Mixing several different fonts can make your app seem fragmented and sloppy.
iOS Typography Rules
Not recommended —->
Instead, use one font and just a few styles and sizes.
iOS Typography Rules
Better —->
Text should never be smaller than 11 points, even at the
extra small size.
iOS Typography Rules
Body text default is 17pt.
iOS Typography Rules
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
Tip: Always Test!
pixels for web points for native & mobile
How do we measure type?
Dear Andi, This is where you open Principle and demo how to preview type on a mobile prototype.
System fonts
• These already installed on your computer.
• Some are better than others.
• Made for the screen
• AKA “browser safe” fonts
System fontsTimes
Verdana
Arial
Georgia
Lucida Grande
System fonts
Comic Sans Papyrus
System fonts
For a list of which system fonts you should use, visit
http://practicaltypography.com/system-fonts.html
System fonts
San Francisco
San Francisco UI Display
What are others doing?
Dear Andi, This is where you open the interface dissections.
“Sterling” custom typeface
font-family: Archer
font-family: Archer
Gotham
Gotham, Helvetica, Sans-serif
Benton Sans
Benton Sans
Gotham
Setting type
Golden ratio of type
Optimal line-length = 45-90 characters
Line-length refers to the width of a line.
Standard sizes of body, p, h1- h6
https://medium.com/@lukejonesme/3-typography-tips-for-a-more-comfortable-read-fed478affa8d#.msy0xzt81
Choose your body text wisely.
http://practicaltypography.com/typography-in-ten-minutes.html
Body copy should be sized 15-25px.
http://practicaltypography.com/typography-in-ten-minutes.html
Line-height should be 120-145% of the text size.
http://practicaltypography.com/typography-in-ten-minutes.html
Kerning
http://type.method.ac/
Legibility
Readability
Make the scale obvious.
Contrast is key.
How do people read information?
Most people don’t read. They skim and scan.
Useful sites
CSS3
rotate, add shadows, embed any typeface you want.
We’ve come a long way with web typography.
In conclusion
Typography is an art.
Learn (or re-learn) the basic art principles and elements
Trace typefaces
Have fun with it!
Explore.
Always design with intent.
