introducing the new system fonts - apple inc. · family tree san francisco sf sf compact text...

311
© 2015 Apple Inc. All rights reserved. Redistribution or public display not permitted without written permission from Apple. #WWDC15 Session 804 Introducing the New System Fonts Antonio Cavedoni Type Designer Design

Upload: others

Post on 25-Aug-2020

22 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

© 2015 Apple Inc. All rights reserved. Redistribution or public display not permitted without written permission from Apple.

#WWDC15

Session 804

Introducing the New System Fonts

Antonio Cavedoni Type Designer

Design

Page 2: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Agenda

Page 3: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Agenda

San Francisco Fonts

Page 4: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Agenda

San Francisco FontsDesign Principles

Page 5: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Agenda

San Francisco FontsDesign PrinciplesNew Features, Changes, and Code

Page 6: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Agenda

San Francisco FontsDesign PrinciplesNew Features, Changes, and CodePotential API Pitfalls

Page 7: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc
Page 8: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc
Page 9: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc
Page 10: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc
Page 11: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc
Page 12: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc
Page 13: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc
Page 14: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc
Page 15: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc
Page 16: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc
Page 17: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc
Page 18: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

San Francisco

Page 19: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

aaaaaaaaa

Page 20: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

////////// / / / / / / / /

/ / / / / / / / /

Page 21: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

aaaaaa

aa

aa

aa

1 2 3 4 5 6 7 8 9A

AA

AA

AA

AAA

AA

Page 22: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

AAA

Page 23: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

San Francisco

ABCDEFGHIJKLMNO PQRSTUVWXYZ abcdefghijklmn opqrstuvwxyz 123456789&0

Page 24: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Family TreeSan Francisco

Page 25: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Family TreeSan Francisco

SF SF Compact

Page 26: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Family TreeSan Francisco

SF SF Compact

Text Display Text Display

Page 27: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Family TreeSan Francisco

SF SF Compact

Text Display Text Display

ABC abcABC abcABC abcABC abcABC abcABC abc

ABC abcABC abcABC abcABC abcABC abcABC abcABC abcABC abcABC abc

ABC abcABC abcABC abcABC abcABC abcABC abc

ABC abcABC abcABC abcABC abcABC abcABC abcABC abcABC abcABC abc

Page 28: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

SF

Page 29: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

SF Compact

Page 30: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

SF and SF Compact

San Francisco

SF SF Compact

Page 31: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

abcdefghijklmnopqrstuvwxyz

abcdefghijklmnopqrstuvwxyz

SF and SF Compact

Page 32: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

abcdefghijklmnopqrstuvwxyz

abcdefghijklmnopqrstuvwxyz

oesoes

SF and SF Compact

Page 33: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

abcdefghijklmnopqrstuvwxyz

abcdefghijklmnopqrstuvwxyz

oesoes

SF and SF Compact

Page 34: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

abcdefghijklmnopqrstuvwxyz

abcdefghijklmnopqrstuvwxyz

oesoes

SF and SF Compact

Page 35: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

abcdefghijklmnopqrstuvwxyz

abcdefghijklmnopqrstuvwxyz

oesoes

SF and SF Compact

Page 36: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

abcdefghijklmnopqrstuvwxyz

abcdefghijklmnopqrstuvwxyz

oesoes

SF and SF Compact

Page 37: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

oesoes

Texture

Page 38: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

To be the first to enter the cosmos, to engage, single-handed, in an unprecedented duel with nature—could one dream of anything more? We choose to go to the moon in this decade and do the other things, not because they are easy,

Texture

To be the first to enter the cosmos, to engage, single-handed, in an unprecedented duel with nature—could one dream of anything more? We choose to go to the moon in this decade and do the other things, not because they are easy,

oesoes

Page 39: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

To be the first to enter the cosmos, to engage, single-handed, in an unprecedented duel with nature—could one dream of anything more? We choose to go to the moon in this decade and do the other things, not because they are easy, but because they are hard, because that goal will serve to organize and measure the best of our energies and skills, because that challenge is one that we are willing to accept, one we are unwilling to postpone, and one which we intend to win. Here men from the planet Earth first set foot upon the Moon. July 1969 AD. We came in peace for all mankind. Here men from the planet Earth first set foot upon the Moon.

Texture

To be the first to enter the cosmos, to engage, single-handed, in an unprecedented duel with nature—could one dream of anything more? We choose to go to the moon in this decade and do the other things, not because they are easy, but because they are hard, because that goal will serve to organize and measure the best of our energies and skills, because that challenge is one that we are willing to accept, one we are unwilling to postpone, and one which we intend to win. Here men from the planet Earth first set foot upon the Moon. July 1969 AD. We came in peace for all mankind. Here men from the planet Earth first set foot upon the Moon.

oesoes

Page 40: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

To be the first to enter the cosmos, to engage, single-handed, in an unprecedented duel with nature—could one dream of anything more? We choose to go to the moon in this decade and do the other things, not because they are easy, but because they are hard, because that goal will serve to organize and measure the best of our energies and skills, because that challenge is one that we are willing to accept, one we are unwilling to postpone, and one which we intend to win. Here men from the planet Earth first set foot upon the Moon. July 1969 AD. We came in peace for all mankind. Here men from the planet Earth first set foot upon the Moon. July 1969 AD. We came in peace for all mankind. Never in all their history have men been able truly to conceive of the world as one: a single sphere, a globe, having the qualities of a globe, a round earth in which all the directions eventually meet, in which there is no center because every point, or none, is center — an equal earth which all men occupy as equals. The airman's earth, if free men make it, will be truly round: a globe in practice, not in theory.

Texture

To be the first to enter the cosmos, to engage, single-handed, in an unprecedented duel with nature—could one dream of anything more? We choose to go to the moon in this decade and do the other things, not because they are easy, but because they are hard, because that goal will serve to organize and measure the best of our energies and skills, because that challenge is one that we are willing to accept, one we are unwilling to postpone, and one which we intend to win. Here men from the planet Earth first set foot upon the Moon. July 1969 AD. We came in peace for all mankind. Here men from the planet Earth first set foot upon the Moon. July 1969 AD. We came in peace for all mankind. Never in all their history have men been able truly to conceive of the world as one: a single sphere, a globe, having the qualities of a globe, a round earth in which all the directions eventually meet, in which there is no center because every point, or none, is center — an equal earth which all men occupy as equals. The airman's earth, if free men make it, will be truly round: a globe in practice, not in theory.

oesoes

Page 41: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Proportions

5Hlpx

Page 42: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

5HlpxBaseline

Page 43: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

5Hlpxx-Height

Page 44: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

5HlpxCap-Height

Page 45: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

5HlpxDescender

Page 46: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

5HlpxAscender

Page 47: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Proportions

5Hlpx

Page 48: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

5HlpxCompatible Overall Vertical Metrics

Page 49: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Cap-Height Lower Than Ascenders

5Hlpx

Page 50: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Large x-Height

5Hlpx

Page 51: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Numbers Align with Uppercase

5Hlpx

Page 52: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Latin

A B C D E F G H I J K L M N O P Q R S T U V W X Y Za b c d e f g h i j k l m n

o p q r s t u v w x y z

Page 53: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Polishktóre wstrząsnęły sumieniem ludzkości, i że

ogłoszono uroczyście jako najwznioślejszy cel ludzkości dążenie do zbudowania takiego świata, w

którym ludzie korzystać będą z wolności słowa i przekonań oraz z wolności od strachu i nędzy,

zważywszy, że konieczne jest zawarowanie praw człowieka przepisami prawa, aby nie musiał –

doprowadzony do ostateczności – uciekać się do buntu przeciw tyranii i uciskowi, zważywszy, że

Page 54: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Icelandicæðsta markmið almennings um heim allan sé að skapa veröld, þar sem menn fái notið málfrelsis,

trúfrelsis og óttaleysis um einkalíf afkomu. Mannréttindi á að vernda með lögum. Að öðrum

kosti hljóta menn að grípa til þess örþrifaráðs að rísa upp gegn kúgun og ofbeldi. Það er mikilsvert að efla

vinsamleg samskipti þjóða í milli. Í stofnskrá sinni hafa Sameinuðu þjóðdirnar lýst yfir trú sinni á grundvallaratriði mannréttinda, á göfgi og gildi

Page 55: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Hungarianfellázító barbár cselekményekhez vezetett, és hogy az ember legfőbb vágya egy olyan világ eljövetele,

amelyben az elnyomástól, valamint a nyomortól megszabadult emberi lények szava és

meggyőződése szabad lesz, tekintettel annak fontosságára, hogy az emberi jogokat a jog uralma védelmezze, nehogy az ember végső szükségében

a zsarnokság és az elnyomás elleni lázadásra kényszerüljön, tekintettel arra, hogy igen lényeges a

Page 56: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Vietnamesecả các nước và tất cả các dân tộc đánh giá việc

thực hiện mục tiêu mà mọi cá nhân và mọi tổ chức trong xã hội, trên cơ sở luôn ghi nhớ Bản tuyên ngôn

này, sẽ phấn đấu thúc đẩy sự tôn trọng các quyền và tự do cơ bản của con người thông qua truyền bá

và giáo dục, cũng như sẽ phấn đấu đảm bảo cho mọi người dân, ở chính các nước thành viên của

Liên Hợp Quốc và ở các lãnh thổ thuộc quyền quản lý của mình, công nhận và thực hiện những quyền

Page 57: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Cyrillic

А Б В ГД ЕЖЗИЙ К ЛМНО П Р СТ УФХЦ ЧШЩЬЮЯа б в гд е ж з и й к л м н о п р с т у ф х ц ч шщ ью я

Page 58: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

RussianВсеобщую декларацию прав человека в

качестве задачи, к выполнению которой должны стремиться все народы и все государства с тем,

чтобы каждый человек и каждый орган общества, постоянно имея в виду настоящую

Декларацию, стремились путем просвещения и образования содействовать уважению этих прав и свобод и обеспечению, путем национальных и международных прогрессивных мероприятий

Page 59: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Greek

Α Β ΓΔ Ε Ζ ΗΘ Ι Κ ΛΜΝ Ξ Ο Π Ρ Σ Τ ΥΦΧΨΩα β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ σ ς τ υ φχ ψω

Page 60: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Greekοποίο πρέπει να κατατείνουν όλοι οι λαοί και όλα τα έθνη, έτσι ώστε κάθε άτομο και κάθε όργανο της κοινωνίας, με τη διακήρυξη αυτή διαρκώς

στη σκέψη, να καταβάλλει, με τη διδασκαλία και την παιδεία, κάθε προσπάθεια για να αναπτυχθεί ο σεβασμός των ανθρώπινων δικαιωμάτων και των ελευθεριών αυτών, και να εξασφαλιστεί

προοδευτικά, με εσωτερικά και διεθνή μέσα, η παγκόσμια και αποτελεσματική εφαρμογή τους

Page 61: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

San Francisco

Page 62: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

San Francisco

New typeface called San Francisco

Page 63: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

San Francisco

New typeface called San FranciscoiOS and OS X make use of a new font family called SF

Page 64: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

San Francisco

New typeface called San FranciscoiOS and OS X make use of a new font family called SFWatch family renamed to SF Compact

Page 65: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

San Francisco

New typeface called San FranciscoiOS and OS X make use of a new font family called SFWatch family renamed to SF CompactFamilies have similar proportions

Page 66: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

San Francisco

New typeface called San FranciscoiOS and OS X make use of a new font family called SFWatch family renamed to SF CompactFamilies have similar proportionsSF and SF Compact are related but different designs

Page 67: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc
Page 68: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Download Info

Apple Fonts and Text Pagedeveloper.apple.com/fonts

Page 69: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Download Info BETA

Apple Fonts and Text Pagedeveloper.apple.com/fonts

Page 70: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Principles

Page 71: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Visual perception islargely about illusion

Page 72: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Equalizing Height

Page 73: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Equalizing Height

Page 74: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Equalizing Height

Page 75: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Equalizing Height

Page 76: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Equalizing Height

Page 77: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Equalizing HeightOvershoot

Page 78: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Equalizing HeightOvershoot

Page 79: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

To make two shapes look similar, they often have to be made dissimilar

Page 80: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

To make two shapes look similar, they often have to be made dissimilar

Page 81: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

To make two shapes look similar, they often have to be made dissimilar

Page 82: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

To make two shapes look similar, they often have to be made dissimilar

Page 83: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

#Bonus

Page 84: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

#Bonus: Octothorpe

Page 85: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

#Bonus: Octothorpe

Page 86: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

#

Bonus: Octothorpe

Page 87: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Bonus: Octothorpe

#

Page 88: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Bonus: Octothorpe

#

Page 89: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Bonus: Octothorpe

#

Page 90: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

#Bonus: Octothorpe

Page 91: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

#Bonus: Octothorpe

Page 92: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Visual perception islargely about illusion

Page 93: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Optical Sizes

Page 94: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Optical Sizes

San Francisco

SF SF Compact

Text Display Text Display

Page 95: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

hamburgefonstiv120pt

Same Font, Different Sizes

Page 96: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Same Font, Different Sizes

hamburgefonstiv

hamburgefonstiv120pt

15pt

Page 97: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

hamburgefonstiv

hamburgefonstiv

Same Font, Different Sizes

Page 98: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

hamburgefonstiv

Display Versus Text

hamburgefonstiv

Same Font, Different Sizes

Page 99: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

hamburgefonstiv

hamburgefonstiv

Display Versus Text

Page 100: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

hamburgefonstiv

Display Versus Text

hamburgefonstiv

Page 101: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

hamburgefonstivhamburgefonstiv

Negative Space

Page 102: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

hamburgefonstivhamburgefonstiv

Negative Space

Page 103: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

hamburgefonstivhamburgefonstiv

Negative Space

Page 104: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Negative Space

hamburgefonstivhamburgefonstiv

Page 105: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Negative Space

Page 106: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

aesConfusable Shapes

Page 107: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

aesConfusable Shapes

Page 108: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

aesConfusable Shapes

Page 109: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

easConfusable Shapes

Page 110: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

aesConfusable Shapes

Page 111: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

aesConfusable Shapes

Page 112: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

hamburghamburgeDisplay Versus Text

Page 113: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

hamburgefonstivhamburgefonstiv

Display Versus Text

Page 114: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

hamburgefonstivhamburgefonstiv

Display Versus Text

Page 115: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

hamburgefonstivhamburgefonstiv

Display Versus Text

Page 116: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

hamburgefonstivhamburgefonstiv

Display Versus Text

Page 117: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

hamburgefonstivhamburgefonstiv

Display Versus Text

Page 118: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

hamburgefonstivhamburgefonstiv

Display Versus Text

Page 119: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

hamburgefonstivhamburgefonstiv

Display Versus Text

Page 120: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

hamburgefonstivhamburgefonstiv

Display Versus Text

Page 121: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

hamburgefonstivhamburgefonstiv

Display Versus Text

Page 122: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

hamburgefonstivhamburgefonstiv

Display Versus Text

Page 123: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

hamburgefonstivhamburgefonstiv

Display Versus Text

Page 124: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

hamburgefonstivhamburgefonstiv

Display Versus Text

Page 125: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

hamburgefonstivhamburgefonstiv

hamburgefonstivhamburgefonstiv

hamburgefonstivhamburgefonstiv

hamburgefonstiv

Text

Display

40pt

16pt

17pt

18pt

19pt

20pt

30pt

Display Versus Text

Page 126: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Optical Sizes

Page 127: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Optical Sizes

Two optical, size-specific families—Text and Display

Page 128: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Optical Sizes

Two optical, size-specific families—Text and DisplayThe system automatically switches at 20pt

Page 129: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Optical Sizes

Two optical, size-specific families—Text and DisplayThe system automatically switches at 20ptNo adoption necessary

Page 130: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Optical Sizes

Two optical, size-specific families—Text and DisplayThe system automatically switches at 20ptNo adoption necessaryApp designers need to be aware of the difference

Page 131: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Tracking

Page 132: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Tracking

hamburgefonstiv

Page 133: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Tracking

ha m b urg efon st iv

Page 134: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

H OHH OOHHHH OHH OOHHH

Tracking Versus KerningTracking

Page 135: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

OOO HHHH H HO HOOHHH H H

PositiveTracking

Page 136: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Tracking

H OHH OOHHHH OHH OOHHH

Page 137: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

TrackingNegative

H OHH OOHHHH OHH OOHHH

Page 138: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

TrackingNegative

H OHH OOHHHH OHH OOHHH

Page 139: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

TrackingNegative

H OHH OOHHH

Page 140: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

H OHH OOHHH

Kerning

Page 141: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

HHHHLTHHH

Kerning

H OHH OOHHH

Page 142: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

HHHHLTHHHTHHHHHHHL

Kerning

H OHH OOHHH

Page 143: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

HHHHLTHHHTHHHHHHHL

Kerning

H OHH OOHHH

Page 144: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

HHHHLTHHHTHHHHHHHL

KerningNegative

H OHH OOHHH

Page 145: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

H OHH OOHHH

Tracking Versus Kerning

HHHHLTHHHTHHHHHHHLH OHH OOHHH

Page 146: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Tracking Versus Kerning

HHHO HHHOOHHHHLTHHHTHHHHHHHL

H OHH OOHHH

Page 147: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Tracking Is Size-Specific

Point size

Trac

king

val

ue

180

0

-60

9 18 20 40

90

60 80

Page 148: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

hamburgefonstivhamburgefonstiv

hamburgefonstivhamburgefonstiv

hamburgefonstivhamburgefonstiv

hamburgefonstivTracking Is Size-Specific

Text

Display

40pt

16pt

17pt

18pt

19pt

20pt

30pt

-25T

-24T

-24T

-20T

19T

11T

10T

Page 149: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Tracking Summary

Page 150: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Tracking Summary

Tracking is automatically enabled for System Font

Page 151: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Tracking Summary

Tracking is automatically enabled for System FontFor designers, we provide the tracking tables that System Font supports

Page 152: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Weights

Page 153: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Font Weight

n

Page 154: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

nFont Weight

Page 155: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Font Weight

n

Page 156: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Text Weights

Light Regular Medium Semibold Bold Heavy

Page 157: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Light Italic Regular Italic Medium Italic Semibold Italic Bold Italic Heavy Italic

Light Regular Medium Semibold Bold Heavy

Text Weights

Page 158: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Display Weights

Light Regular Medium Semibold Bold HeavyBlack

ThinUltralight

Page 159: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Light Regular Medium Semibold Bold HeavyBlack

ThinUltralight

?Display Weights

Page 160: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Display WeightsTo be the first to enter the cosmos, to engage, single-handed, in an unprecedented duel with nature—could one dream of anything more? We choose to go to the moon in this decade and do the other things, not because they are easy, but because they are hard, because that goal will serve to organize and measure the best of our energies and skills, because that challenge is one that we are willing to accept, one we are unwilling to postpone, and one which we intend to win. Here men from the planet Earth first set foot upon the Moon. July 1969 AD. We came in peace for all mankind. Here men from the planet Earth first set foot upon the Moon. July 1969 AD. We came in peace for all mankind. Never in all their history have men been able truly to conceive of the world as one: a single sphere, a globe, having the qualities of a globe, a round earth in which all the directions eventually meet, in which there is no center because every point, or none, is center — an equal earth which all men occupy as equals. The airman's earth, if free men make it, will be truly round: a globe in practice, not in theory.

To be the first to enter the cosmos, to engage, single-handed, in an unprecedented duel with nature—could one dream of anything more? We choose to go to the moon in this decade and do the other things, not because they are easy, but because they are hard, because that goal will serve to organize and measure the best of our energies and skills, because that challenge is one that we are willing to accept, one we are unwilling to postpone, and one which we intend to win. Here men from the planet Earth first set foot upon the Moon. July 1969 AD. We came in peace for all mankind. Here men from the planet Earth first set foot upon the Moon. July 1969 AD. We came in peace for all mankind. Never in all their history have men been able truly to conceive of the world as one: a single sphere, a globe, having the qualities of a globe, a round earth in which all the directions eventually meet, in which there is no center because every point, or none, is center — an equal earth which all men occupy as equals. The airman's earth, if free men make it, will be truly round: a globe in practice, not in theory.

To be the first to enter the cosmos, to engage, single-handed, in an unprecedented duel with nature—could one dream of anything more? We choose to go to the moon in this decade and do the other things, not because they are easy, but because they are hard, because that goal will serve to organize and measure the best of our energies and skills, because that challenge is one that we are willing to accept, one we are unwilling to postpone, and one which we intend to win. Here men from the planet Earth first set foot upon the Moon. July 1969 AD. We came in peace for all mankind. Here men from the planet Earth first set foot upon the Moon. July 1969 AD. We came in peace for all mankind. Never in all their history have men been able truly to conceive of the world as one: a single sphere, a globe, having the qualities of a globe, a round earth in which all the directions eventually meet, in which there is no center because every point, or none, is center — an equal earth which all men occupy as equals. The airman's earth, if free men make it, will be truly round: a globe in practice, not in theory.

from the planet Earth d. Never in all their hist sphere, a globe, having meet in which there is

the other things, not becaus easure the best of our ener g to postpone, and one which We come in peace for all manre? We choose to go to the re hard, because that goal s one that we are willing to the planet Earth first set to

Page 161: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

New System Font weight APIs in AppKit and UIKit

New Weights Adoption

Page 162: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

New System Font weight APIs in AppKit and UIKitNSFont.systemFontOfSize(SIZE, weight: WEIGHT) UIFont.systemFontOfSize(SIZE, weight: WEIGHT)

New Weights Adoption

Page 163: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

New System Font weight APIs in AppKit and UIKitNSFont.systemFontOfSize(SIZE, weight: WEIGHT) UIFont.systemFontOfSize(SIZE, weight: WEIGHT)

New Weights Adoption

UIFontWeightUltralight UIFontWeightThin UIFontWeightLight UIFontWeightRegular UIFontWeightMedium UIFontWeightSemibold UIFontWeightHeavy UIFontWeightBlack

NSFontWeightUltralight NSFontWeightThin NSFontWeightLight NSFontWeightRegular NSFontWeightMedium NSFontWeightSemibold NSFontWeightHeavy NSFontWeightBlack

Page 164: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

How to Use Weights

Page 165: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

How to Use Weights

Differentiation and hierarchy

Page 166: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

How to Use Weights

Differentiation and hierarchySimilitude

Page 167: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

How to Use Weights

Differentiation and hierarchySimilitudeVoice

Page 168: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Weight-Use in Differentiation and Hierarchy

Page 169: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Today’s weather is great.

Weight-Use in Differentiation and Hierarchy

Page 170: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Today’s weather is great.

Weight-Use in Differentiation and Hierarchy

Page 171: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Weather forecasts Monday Tuesday Wednesday Thursday Friday Saturday Sunday

Weight-Use in Differentiation and Hierarchy

Page 172: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Weather forecasts Monday Tuesday Wednesday Thursday Friday Saturday Sunday

Weight-Use in Differentiation and Hierarchy

Page 173: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Weight Used for Similitude

Page 174: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Weight Used for Similitude

Page 175: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Weight Used for Similitude

Page 176: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Weight Used for Similitude

Page 177: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Larger size = Lighter weightSmaller size = Heavier weight

Weight Used for Similitude

Page 178: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Weight Used for Voice

Page 179: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Weight Used for Voice

Bee Weather

Tuesday 37°CWednesdayThursdayFridaySaturdaySunday

39°C38°C37°C38°C40°C

Monday 39°C37°C39°C38°C37°C38°C40°C

39°C

Page 180: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Weight Used for Voice

Bee Weather

Tuesday 37°CWednesdayThursdayFridaySaturdaySunday

39°C38°C37°C38°C40°C

Monday 39°C37°C39°C38°C37°C38°C40°C

39°CDove WeatherMonday 20°CTuesday 23°CWednesdayThursdayFridaySaturdaySunday

20°C22°C23°C22°C20°C

Page 181: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Weight Used for Voice

Zebra Weather

Tuesday 37°CWednesdayThursdayFridaySaturdaySunday

39°C38°C37°C38°C40°C

Monday 39°C37°C39°C38°C37°C38°C40°C

39°CDove WeatherMonday 20°CTuesday 23°CWednesdayThursdayFridaySaturdaySunday

20°C22°C23°C22°C20°C

Page 182: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

How to Use Weights

Page 183: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

How to Use Weights

Legibility first

Page 184: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

How to Use Weights

Legibility first• Establish hierarchy with consistency and clarity

Page 185: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

How to Use Weights

Legibility first• Establish hierarchy with consistency and clarity• On iOS, use Text Style APIs and adopt Dynamic Type

Page 186: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Settings > General > Accessibility > Bold Text

Page 187: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Settings > General > Accessibility > Bold Text

Page 188: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Settings > General > Accessibility > Bold Text

Page 189: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

How to Use Weights

Page 190: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

How to Use Weights

Relying on weights that are too bold will hit upper weight limit

Page 191: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

How to Use Weights

Relying on weights that are too bold will hit upper weight limitOn the other hand, too-light text is unreadable for many users

Page 192: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Weights Summary

Page 193: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Weights Summary

New font weights are available in OS X 10.11 and iOS 9

Page 194: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Weights Summary

New font weights are available in OS X 10.11 and iOS 9New APIs are available to make use of them

Page 195: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Weights Summary

New font weights are available in OS X 10.11 and iOS 9New APIs are available to make use of themSame guidelines about hierarchy, legibility, and taste apply to usage

Page 196: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Typographic Features

Page 197: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Features Make Fonts Active

Page 198: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Features Make Fonts Active

Features are behaviors embedded inside a font

Page 199: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Features Make Fonts Active

Features are behaviors embedded inside a fontMake complex scripts and languages possible

Page 200: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Features Make Fonts Active

Features are behaviors embedded inside a fontMake complex scripts and languages possibleAllow access to extended glyphs

Page 201: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Feature Example: Fractions

1/2

Page 202: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

1/2 ½Feature Example: Fractions

Page 203: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

1/2 ½U+00BD VULGAR FRACTION ONE HALF

Feature Example: Fractions

Page 204: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

2/9Feature Example: Fractions

Page 205: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

2/9 ?Feature Example: Fractions

Page 206: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

2/9 2

Feature Example: Fractions

Page 207: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

2/9 2/

Feature Example: Fractions

Page 208: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

2/9 29/

Feature Example: Fractions

Page 209: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

2/9 29/

Feature Example: Fractions

Page 210: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

2/9 29⁄

U+2044 FRACTION SLASH

Feature Example: Fractions

Page 211: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

2/9Feature Example: Fractions

Page 212: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

2/9 2⁄9Feature Example: Fractions

Page 213: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

65/324 65⁄324Feature Example: Fractions

Page 214: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

65/324 65⁄324Feature Example: Fractions

Page 215: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

65/324 65⁄324Feature Example: Fractions

Page 216: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

65/324 65⁄324Feature Example: Fractions

Page 217: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

65/324 65⁄324Feature Example: Fractions

Page 218: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

65/324 65⁄324Feature Example: Fractions

Page 219: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

65/324 65⁄324Feature Example: Fractions

Page 220: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Enabling Features: Typography Panel

Page 221: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

let pointSize : CGFloat = 60.0 let systemFontDesc = UIFont.systemFontOfSize(pointSize, weight: UIFontWeightLight).fontDescriptor() let fractionFontDesc = systemFontDesc.fontDescriptorByAddingAttributes( [ UIFontDescriptorFeatureSettingsAttribute: [ [ UIFontFeatureTypeIdentifierKey: kFractionsType, UIFontFeatureSelectorIdentifierKey: kDiagonalFractionsSelector, ], ] ] )

label.font = UIFont(descriptor: fractionFontDesc, size:pointSize)

Enabling Features: Code

Page 222: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

let pointSize : CGFloat = 60.0 let systemFontDesc = UIFont.systemFontOfSize(pointSize, weight: UIFontWeightLight).fontDescriptor() let fractionFontDesc = systemFontDesc.fontDescriptorByAddingAttributes( [ UIFontDescriptorFeatureSettingsAttribute: [ [ UIFontFeatureTypeIdentifierKey: kFractionsType, UIFontFeatureSelectorIdentifierKey: kDiagonalFractionsSelector, ], ] ] )

label.font = UIFont(descriptor: fractionFontDesc, size:pointSize)

Enabling Features: Code

Page 223: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

let pointSize : CGFloat = 60.0 let systemFontDesc = UIFont.systemFontOfSize(pointSize, weight: UIFontWeightLight).fontDescriptor() let fractionFontDesc = systemFontDesc.fontDescriptorByAddingAttributes( [ UIFontDescriptorFeatureSettingsAttribute: [ [ UIFontFeatureTypeIdentifierKey: kFractionsType, UIFontFeatureSelectorIdentifierKey: kDiagonalFractionsSelector, ], ] ] )

label.font = UIFont(descriptor: fractionFontDesc, size:pointSize)

Enabling Features: Code

Page 224: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

let pointSize : CGFloat = 60.0 let systemFontDesc = UIFont.systemFontOfSize(pointSize, weight: UIFontWeightLight).fontDescriptor() let fractionFontDesc = systemFontDesc.fontDescriptorByAddingAttributes( [ UIFontDescriptorFeatureSettingsAttribute: [ [ UIFontFeatureTypeIdentifierKey: kFractionsType, UIFontFeatureSelectorIdentifierKey: kDiagonalFractionsSelector, ], ] ] )

label.font = UIFont(descriptor: fractionFontDesc, size:pointSize)

Enabling Features: Code

Page 225: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

let pointSize : CGFloat = 60.0 let systemFontDesc = UIFont.systemFontOfSize(pointSize, weight: UIFontWeightLight).fontDescriptor() let fractionFontDesc = systemFontDesc.fontDescriptorByAddingAttributes( [ UIFontDescriptorFeatureSettingsAttribute: [ [ UIFontFeatureTypeIdentifierKey: kFractionsType, UIFontFeatureSelectorIdentifierKey: kDiagonalFractionsSelector, ], ] ] )

label.font = UIFont(descriptor: fractionFontDesc, size:pointSize)

Enabling Features: Code

Page 226: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

let pointSize : CGFloat = 60.0 let systemFontDesc = UIFont.systemFontOfSize(pointSize, weight: UIFontWeightLight).fontDescriptor() let fractionFontDesc = systemFontDesc.fontDescriptorByAddingAttributes( [ UIFontDescriptorFeatureSettingsAttribute: [ [ UIFontFeatureTypeIdentifierKey: kFractionsType, UIFontFeatureSelectorIdentifierKey: kDiagonalFractionsSelector, ], ] ] )

label.font = UIFont(descriptor: fractionFontDesc, size:pointSize)

Enabling Features: Code

Page 227: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

e=mc2 e=mc2

Feature Example: Superiors/Superscripts

Page 228: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

e=mc2 e=mc2

Feature Example: Superiors/Superscripts

Page 229: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

e=mc2 e=mc2

Feature Example: Superiors/Superscripts

Page 230: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Feature Example: Inferiors/Subscripts

C3H8

Page 231: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

C3H8

Feature Example: Inferiors/Subscripts

C3H8

Page 232: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

C3H8

Feature Example: Inferiors/Subscripts

C3H8

Page 233: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Feature Example: Uppercase Forms

A+3

Page 234: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Feature Example: Uppercase Forms

A+3A+3

Page 235: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Feature Example: Uppercase Forms

A+3A+3

Page 236: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Special Features

Page 237: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Special Feature: Vertically Centered Colon

Page 238: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Special Feature: Vertically Centered Colon

Page 239: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Special Feature: Vertically Centered Colon

Page 240: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

9:41Friday, June 12

Special Feature: Vertically Centered Colon

Page 241: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

9:41Friday, June 12

Wed 9:41 AM

Special Feature: Vertically Centered Colon

Page 242: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

9:41Friday, June 12

Cupertino, CA

Sunset 7:10PM9HRS 1MIN

14:59 7:00 00 46

9:41

Wed 9:41 AM

Special Feature: Vertically Centered Colon

Page 243: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

9:41Friday, June 12

Cupertino, CA

Sunset 7:10PM9HRS 1MIN

14:59 7:00 00 46

9:41

Wed 9:41 AM

00:26.2200:02.37

Special Feature: Vertically Centered Colon

Page 244: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Special Feature: Vertically Centered Colon

Page 245: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Special Feature: Vertically Centered Colon

Page 246: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Special Feature: Alternate Six and Nine

6 9

Page 247: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

6 9 6 9Special Feature: Alternate Six and Nine

Page 248: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

60

301545

300510

152025

MON 9

12 12

3

4567

8

9

1011

Special Feature: Alternate Six and Nine

Page 249: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

60

301545

300510

152025

MON 9

12 12

3

4567

8

9

1011

Special Feature: Alternate Six and Nine

Page 250: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Special Feature: Alternate Six and Nine

Page 251: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Special Feature: Alternate Six and Nine

Optional feature

Page 252: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Special Feature: Alternate Six and Nine

Optional featureAvailable with code

Page 253: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Special Feature: Alternate Six and Nine

Optional featureAvailable with codeUIFontFeatureTypeIdentifierKey: kStylisticAlternativesType

Page 254: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Special Feature: Alternate Six and Nine

Optional featureAvailable with codeUIFontFeatureTypeIdentifierKey: kStylisticAlternativesType

UIFontFeatureSelectorIdentifierKey: kStylisticAltOneOnSelector

Page 255: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Bonus: Features and Optical Sizes

Page 256: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

265⁄324Display

Bonus: Features and Optical Sizes

Page 257: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

265⁄324 265⁄324Display Text

Bonus: Features and Optical Sizes

Page 258: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Features Summary

Page 259: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Features Summary

Features are behavior-embedded inside a font

Page 260: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Features Summary

Features are behavior-embedded inside a fontSome features are automatically turned on for System Font

Page 261: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Features Summary

Features are behavior-embedded inside a fontSome features are automatically turned on for System FontOthers require opt-in

Page 262: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Numbers

Page 263: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

0123456789

Number Spacing

Page 264: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

0123456789

Number Spacing

Page 265: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Monospaced (Tabular) Numbers

0123456789

Page 266: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Monospaced (Tabular) Numbers

235,667+30,521+

1,273,313+9,831+

127,053+9,967,345+

Page 267: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

235,667+30,521+

1,273,313+9,831+

127,053+9,967,345+

Monospaced (Tabular) Numbers

Page 268: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

235,667+30,521+

1,273,313+9,831+

127,053+9,967,345+

2015/06/12 12:342014/12/03 00:332013/06/22 22:352012/10/30 04:042011/01/01 08:542011/03/12 12:382010/05/12 06:272010/09/14 09:412010/02/31 23:15

Monospaced (Tabular) Numbers

Page 269: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

235,667+30,521+

1,273,313+9,831+

127,053+9,967,345+

2015/06/12 12:342014/12/03 00:332013/06/22 22:352012/10/30 04:042011/01/01 08:542011/03/12 12:382010/05/12 06:272010/09/14 09:412010/02/31 23:15

Monospaced (Tabular) Numbers

Page 270: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Monospaced (Tabular) Numbers

0123456789

Page 271: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Proportional Numbers

0123456789

Page 272: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Monospaced for Animation

Page 273: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Monospaced for Animation

Page 274: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Monospaced for Animation

Page 275: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Friday,June 12th

Proportionals for Static Labels

Page 276: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Friday,June 12th

+1 (123) 300-4000

Proportionals for Static Labels

Page 277: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Friday,June 12th

Inbox (3172 messages, 2 unread)

+1 (123) 300-4000

Proportionals for Static Labels

Page 278: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Friday,June 12th

Inbox (3172 messages, 2 unread)

[email protected]

+1 (123) 300-4000

Proportionals for Static Labels

Page 279: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Friday,June 12th

Inbox (3172 messages, 2 unread)

[email protected]://www.apple.com/pr/library/2015/06/08Apple-Previews-iOS-9.html

+1 (123) 300-4000

Proportionals for Static Labels

Page 280: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Proportionals for Static Labels

Friday,June 12 th

+1 (123) 300-4000

Inbox (3172 messages, 2 unread)

[email protected]://www.apple.com/pr/library/2015/06/08Apple-Previews-iOS-9.html

Page 281: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Proportionals for Static Labels

Page 282: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Proportionals for Static Labels

Page 283: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Proportionals for Static Labels

Page 284: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Proportionals for Static Labels

Page 285: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Proportionals for Static Labels

Page 286: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Proportionals for Static Labels

Page 287: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Proportionals for Static Labels

Page 288: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Proportionals for Static Labels

Page 289: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Proportional numbers by default, opt into

monospaced

Page 290: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Numbers Summary

Page 291: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Numbers Summary

Numbers are now proportional by default

Page 292: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Numbers Summary

Numbers are now proportional by defaultApplications not linked against OS X 10.11 and iOS 9.0 get monospaced numbers

Page 293: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Numbers Summary

Numbers are now proportional by defaultApplications not linked against OS X 10.11 and iOS 9.0 get monospaced numbers New shortcut API in AppKit

Page 294: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Numbers Summary

Numbers are now proportional by defaultApplications not linked against OS X 10.11 and iOS 9.0 get monospaced numbers New shortcut API in AppKitNSFont.monospacedDigitsSystemFontOfSize(mySize weight:)

Page 295: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Font API Pitfalls

Page 296: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Don’t Access Fonts with Private Names

let myFont = UIFont.fontWithName(“.ApplePrivateFont” size:mySize)

Page 297: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Don’t Reference Font File Names

… /System/Library/Fonts/Apple Color Emoji.ttf /System/Library/Fonts/AppleSDGothicNeo-Bold.otf /System/Library/Fonts/Avenir.ttc /System/Library/Fonts/HiraKakuInterface-W2.otf /System/Library/Fonts/Monaco.dfont /System/Library/Fonts/Palatino.ttc /System/Library/Fonts/ZapfDingbats.ttf …

Page 298: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Don’t Access System Font by Name

let myFont = UIFont.systemFontOfSize(mySize)

…later in the code…

let myOtherFont = UIFont.fontWithName(myFont.familyName size:mySize)

Page 299: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Do Reuse Font Descriptors

let systemFont = UIFont.systemFontOfSize(mySize)

…later in the code…

let myOtherFont = UIFont.fontWithDescriptor(systemFont.fontDescriptor() size:mySize)

Page 300: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Don’t Draw System Font at a Different-Than-Nominal Point Size

hamburgefonstiv15pt

Page 301: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Don’t Draw System Font at a Different-Than-Nominal Point Size

hamburgefonstivhamburgefonstiv15pt

15pt scaled up

Page 302: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Don’t Draw System Font at a Different-Than-Nominal Point Size

hamburgefonstivhamburgefonstiv

hamburgefonstiv

15pt

15pt scaled up

120pt

Page 303: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Font API Pitfalls

Page 304: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Font API Pitfalls

Treat fonts as opaque objects

Page 305: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Font API Pitfalls

Treat fonts as opaque objectsFonts with optical sizes break old assumptions

Page 306: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Font API Pitfalls

Treat fonts as opaque objectsFonts with optical sizes break old assumptionsRelying on System APIs ensures correct behavior and rendering stability

Page 307: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Summary

Page 308: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

MotivationSan FranciscoOptical SizesTrackingWeightFeaturesNumbersFont API Pitfalls

Summary

Page 309: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

More Information

DocumentationApple Fonts and Text Pagedeveloper.apple.com/fonts

Designing Great Appsdeveloper.apple.com/design

Technical SupportApple Developer Forumsdeveloper.apple.com/forums

Developer Technical Supportdeveloper.apple.com/support/technical

General InquiriesCurt Rothert, App Frameworks [email protected]

Mike Stern, User Experience [email protected]

Page 310: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc

Apple Watch Design Tips and Tricks Presidio Friday 3:30PM

Text and Fonts Lab Frameworks Lab D Friday 3:30PM

Related Session and Lab

Page 311: Introducing the New System Fonts - Apple Inc. · Family Tree San Francisco SF SF Compact Text Display Text Display ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc ABC abc