designing type for user interface

@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

http://www.golivehq.co

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.

print

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

font-size: 16px;line-height: 1.6em;

Georgia, Times New Roman

ESPN.com

Gotham

Setting type

Golden ratio of type

pearsonified.com/typography

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.