ui typography

33

Upload: akio-yonekura

Post on 16-Apr-2017

464 views

Category:

Design


0 download

TRANSCRIPT

Page 1: UI Typography
Page 2: UI Typography
Page 3: UI Typography
Page 4: UI Typography
Page 5: UI Typography

Sans SerifSerif 1920

Page 6: UI Typography

20 19

Le Corbusier Villa Savoye Pablo Picasso Les_Demoiselles_d’Avignon

Page 7: UI Typography

1950 1960

Page 8: UI Typography

1896 Helvetica

Page 9: UI Typography

Braun:Dieter Rams Josef Müller-Brockmann

Page 10: UI Typography

HelveticaABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz

1957

Page 11: UI Typography

Helvetica

Lufthansa American Apparel

Page 12: UI Typography

1957 15

Page 13: UI Typography

Deutsche Bank

Page 14: UI Typography

AvenirABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz

20 Univers Frutiger 1988iOS9 Avenir Next

Page 15: UI Typography

Starbucks Blue Bottle Coffee

Page 16: UI Typography
Page 17: UI Typography

Apple iOS7 / MacOS X 10.10 Yosemite Helvetica

Apple iOS7 Apple Mac OS X Yosemite

Page 18: UI Typography

Apple Watch Apple San Francisco iOS 9 MacOS 10.11 San Francisco

Page 19: UI Typography

Apple Watch Apple San Francisco iOS 9 MacOS 10.11 San Francisco

Page 20: UI Typography

SF UI Text SF UI Display 2

Page 21: UI Typography

20pt SF UI Text SF UI Display

SF UI Text SF UI Display

https://developer.apple.com/ios/human-interface-guidelines/visual-design/typography/

Page 22: UI Typography

Display Text

Page 23: UI Typography

iOS, macOS, tvOS SanFrancisco SF UI AppleWatch SanFrancisco Compact SF Compact 2

Page 24: UI Typography

Regular Compact

Page 25: UI Typography
Page 26: UI Typography
Page 27: UI Typography
Page 28: UI Typography

Roboto

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz

Page 29: UI Typography

https://fonts.google.com/specimen/Open+Sans

http://www.aldnoahzero.com/

OpenSans

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrst

Page 30: UI Typography

https://fonts.google.com/specimen/Lato

Lato

http://pokemongo.nianticlabs.com/

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 

Page 31: UI Typography

https://typekit.com/fonts/brandon-grotesque

BrandonGrotesque

https://www.invisionapp.com/do

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz

Page 32: UI Typography

https://typekit.com/fonts/aktiv-grotesk

Aktiv Grotesk

https://sketchapp.com/

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz

Page 33: UI Typography