애플 휴먼 인터페이스 가이드라인(30) Visual Design -9 Typography

Typography
타이포그래피

Apple provides two type families you can use in your iOS apps.

Apple에선 iOS 앱에서 사용할 수 있는 두가지 종류의 폰트 패밀리를 제공합니다.

 

San Francisco (SF). San Francisco is a sans serif type family that includes SF Pro, SF Pro Rounded, SF Mono, SF Compact, and SF Compact Rounded. SF Pro is the system font in iOS, macOS, and tvOS; SF Compact is the system font in watchOS. Designed to match the visual clarity of the platform UIs, the system fonts are legible and neutral.

샌프란시스코 (SF). 샌프란시스코는 산세리프 타입의 서체로, SF Pro, SF Pro Rounded, SF Mono, SF Compact, SF Compact Rounded로 구성되어 있습니다. SF Pro는 iOS, macOS, tvOS의 시스템 폰트이며, SF Compact는 watchOS의 시스템 폰트입니다. 플랫폼 UI의 시각적 명확성을 위해 디자인되었으며, 이 시스템 폰트는 읽기 쉽고 중립적입니다.

 

 

New York (NY). New York is a serif typeface that provides a unique tone designed to complement the SF fonts. NY works as well in a graphic display context (at large sizes) as it does in a reading context (at text sizes).

뉴욕 (NY). 뉴욕은 세리프 타입의 서체로 독특한 톤을 가지고 있으며, 샌프란시스코 서체를 보완하기 위해 디자인 되었습니다. 뉴욕은 그래픽 디스플레이용 (큰 사이즈에서)이든 텍스트 읽기용 (일반 텍스트 사이즈에서)이든 잘 어울립니다.

You can download the San Francisco and New York fonts here.

 

Beginning in iOS 14, the system provides the San Francisco and New York fonts in the variable font format. This format combines different font styles together in one file, and supports interpolation between styles to create intermediate ones. With interpolation, typefaces can adapt to all sizes while appearing specifically designed for each size.

iOS 14의 시작과 함께 시스템은 샌프란시스코와 뉴욕 폰트를 여러가지 포맷으로 제공합니다. 이 포맷은 서로 다른 폰트 스타일을 한 파일에 묶었고, 다양한 웨이트를 지원하며 사이글꼴을 만들었습니다. 모든 사이즈 각각 세심히 디자인된 이 사이글꼴들은 모든 사이즈에 적용할 수 있습니다.

Font Interpolation 개념

 

Interpolation also enables optical sizing, which refers to the creation of different typographic designs to fit different sizes. Both San Francisco and New York provide specific optical size variants to ensure that text can look great at any size: Text and Display for SF Pro and SF Compact, and Small, Medium, Large, and Extra Large for New York. In iOS 14 and later, the system fonts support dynamic optical sizes, merging the discrete optical sizes like Text and Display into a single, continuous design. This design allows each glyph or letterform to be interpolated to produce a structure that’s precisely adapted to the point size.

다양한 사이글꼴은 광학 사이징을 지원해 서로 다른 사이즈에 각각 알맞는 타이포그래피 디자인을 할 수 있도록 합니다. 샌프란시스코와 뉴욕 둘 다 광학 사이징을 지원하며 어떤 사이즈에서도 텍스트가 좋아보이도록 만듭니다: SF Pro와 SF Compact의 Text와 Display, New York의 Small, Medium, Large, Extra Large 모두요. iOS 14이후부터, 시스템 폰트는 다이나믹 광학 사이즈를 제공하는데, Text나 Display같은 별개의 광학 사이즈를 단일하고 지속적인 디자인으로 합칩니다. 이러한 디자인은 각각의 글리프나 레터폼을 포인트 사이즈에 정확히 적용시키는 구조에 맞춥니다. 

 

참고_

이번 단 번역이 너무 어렵다...

요약 : 원래는 읽는 환경을 고려해서 디자인하기 위해 SF Text나 Display 버전의 폰트가 각각 있었다.

근데 광학사이징 덕분에 굳이 나눌 필요 없어졌고, 모양만 정하면 됨. (Pro, compact...) 왜냐면 20pt이상 넘어가면 알아서 Display로 변경됨. (19pt이하는 text)

다이나믹 광학 사이징이 적용된 SF나 NY를 사용하면, 어떤 크기나 환경에서도 깨끗하고 가독성 좋게 읽을 수 있는 디자인 가능하다.

 

광학 사이징은 아래의 헬베티카 광학 사이징 버전 아티클을 읽으면 더 도움이 될 것이다.

www.monotype.com/resources/articles/what-is-optical-sizing-and-how-can-it-help-your-brand

What is optical sizing and how can it help your brand?

 

NOTE
Using variable fonts in a design tool that’s running on an earlier version of iOS may produce unexpected results. In this case, continue using Text and Display.

iOS 이전 버전의 디자인 툴에서 여러가지 폰트를 사용하면 예상치 못한 결과를 낳을 수 있습니다. 이런 경우, Text와 Display를 그냥 계속 사용하세요.

 

Because SF Pro and NY are compatible, there are many ways you can incorporate typographic contrast and diversity into your iOS interfaces while maintaining a consistent look and feel. For example, using both typefaces can help you create stronger visual hierarchies or highlight semantic differences in content.

샌프란시스코와 뉴욕이 서로 잘 어울리기 때문에, 같이 사용하면 일관성을 유지하면서도 서체의 대비나 다양성을 iOS 화면에서 보여줄 수 있습니다. 예를 들어, 두 서체를 모두 사용하면 확실한 시각적 위계나 콘텐츠의 주요한 역할의 차이를 드러낼 수 있죠.

음 이거 한번 해보고싶다!

 

Apple-designed typefaces support an extensive range of weights, sizes, styles, and languages, so you can design comfortable and beautiful reading experiences throughout your app. When you use text styles with the system fonts, you also get support for Dynamic Type and the larger accessibility type sizes, which let people choose the text size that works for them. For specific values, see Dynamic Type Sizes and Larger Accessibility Type Sizes. Size information, including tracking values, is also available in the Sketch, Photoshop, and Adobe XD Apple Design Resources for iOS.

Apple사가 디자인한 이 서체들은 다양한 웨이트와 사이즈, 스타일, 언어를 지원하기 때문에, 편안하고 아름다운 읽기 경험을 앱 전반에 디자인할 수 있습니다. 시스템 폰트로 텍스트 스타일을 만들면, 다이나믹 타입 지원을 통해 더 많은 접근성을 갖게 되고, 사용자들이 자신들이 원하는 텍스트 사이즈를 지정할 수 있게 합니다. 이러한 특정 값을 보고싶으면, Dynamic Type Sizes 와 Larger Accessibility Type Sizes 를 참고하세요. 자간값을 포함한 크기 정보는 iOS를 위한 Apple Design Resources 를 스케치, 포토샵, 어도비 XD에서 열어 확인할 수 있습니다.

 

The system defines APIs that make it easy to use the SF and NY typefaces; for developer guidance, see the withDesign method and SystemDesign structure of UIFontDescriptor.

시스템에선 샌프란시스코와 뉴욕을 쉽게 사용할 수 있는 API를 정의해두었습니다;

SF Pro and SF Compact

The flexibility of the system fonts helps you achieve optimal legibility at every point size and gives you the breadth and depth you need for precision typesetting throughout your app.

SF Pro and SF Compact support:

• Over one hundred languages using Latin, Greek, and Cyrillic scripts
• Nine weights — from Ultralight to Black — in both uprights and italics
• Variable letter spacing that automatically adjusts based on the size of the text
• Small capitals, fractions, and inferior and superior numerals
• Dynamic optical sizes, in addition to the Text and Display discrete optical sizes

시스템 폰트의 유연성은 어떤 사이즈의 폰트든 가독성을 높게 유지할 수 있게 돕고, 앱의 정확한 서체 선정에 넓고 깊은 선택지를 줄 것입니다.

SF Pro와 SF Compact는 아래를 지원합니다:

• 라틴, 그리스어, 키릴 문자를 사용하는 백여개의 언어
• 울트라라이트부터 블랙까지 9개의 웨이트 (일반체과 이탤릭체 각각)
• 텍스트에 사이즈에 맞춰 자동으로 조정되는 가변 자간
• 작은 대문자, 분수, 위첨자 혹은 아래첨자용 숫자
• Text와 Display가 하나로 합쳐진 서체를 포함한 다이나믹 광학 사이즈의 서체

 

For developer guidance, see the default property of the SystemDesign structure.

SF Pro Rounded and SF Compact Rounded

The rounded variant of the system fonts can help you coordinate your text style with the appearance of soft or rounded UI elements, or to provide an alternative typographic voice.

SF Pro Rounded and SF Compact Rounded support:

• Over one hundred languages using Latin, Greek, and Cyrillic scripts
• Uprights in nine weights — from Ultralight to Black
• Variable letter spacing that automatically adjusts based on the size of the text
• Small capitals, fractions, and inferior and superior numerals
• Dynamic optical sizes

이 둥근 버전의 시스템 폰트는 부드럽고 둥그런 UI 요소와 잘 어울리고, 다른 서체 목소리를 낼 수 있게 해줍니다.

SF Pro Rounded와 SF Compact Rounded는 아래를 지원합니다.

• 라틴, 그리스어, 키릴 문자를 사용하는 백여개의 언어
• 울트라라이트부터 블랙까지 9개의 웨이트 (일반체과 이탤릭체 각각)
• 텍스트에 사이즈에 맞춰 자동으로 조정되는 가변 자간
• 작은 대문자, 분수, 위첨자 혹은 아래첨자용 숫자
• 다이나믹 광학 사이즈

For developer guidance, see the rounded property of the SystemDesign structure.

SF Mono

SF Mono is a monospaced variant of San Francisco — that is, a typeface in which all characters are equal in width. You typically use a monospaced typeface when you want to align columns of text, such as in a coding environment. For example, Xcode and Swift Playgrounds use SF Mono by default.

NOTE

SF Pro uses the OpenType tabular lining feature to support the display of monospaced numbers and currencies.

 

SF Mono supports:

• Over one hundred languages using Latin, Greek, and Cyrillic scripts
• Six weights — from Light to Heavy — in both uprights and italics
• Monospacing across all weights (that is, changing the font weight doesn’t cause the text to reflow)
• Dynamic optical sizes

 

*tabular lining (우)

SF Mono는 샌프란시스코 서체의 고정폭 버전입니다. 즉, 모든 글자가 동일한 너비를 갖고있다는 뜻이죠. 고정폭 글꼴은 보통 코딩 환경같이 텍스트의 세로단을 고정시키고 싶을 때 사용합니다. 예를 들어, Xcode와 Swift는 기본 서체로 SF Mono를 사용합니다.

알아두기

SF Pro는 오픈타입 tabular lining* 기능을 사용하여 고정폭 숫자와 통화를 보여줍니다.

 

SF Mono는 아래를 지원합니다:

• 라틴, 그리스어, 키릴 문자를 사용하는 백여개의 언어
• 라이트부터 헤비까지 6개의 웨이트 (일반체과 이탤릭체 각각)
• 모든 웨이트에 고정폭 지원 (즉, 서체의 웨이트를 바꿔도 가로길이는 늘어나지 않음)
• 다이나믹 광학 사이즈

For developer guidance, see the monospaced property of the SystemDesign structure.

New York

New York is a classical serif typeface you can use in the interface or to provide a traditional reading experience.

 

NY supports:

• Over one hundred languages using Latin, Greek, and Cyrillic scripts
• Six weights — from Regular to Black — in both uprights and italics
• Variable letter spacing that automatically adjusts based on the size of the text
• Dynamic optical sizes, in addition to the Small, Medium, Large, and Extra Large discrete optical sizes

뉴욕은 클래식한 세리프 서체로 전통적인 읽기 경험을 지원하거나 인터페이스에 사용할 수 있습니다.

NY는 아래를 지원합니다:

• 라틴, 그리스어, 키릴 문자를 사용하는 백여개의 언어
• 레귤러부터 블랙까지 6개의 웨이트 (일반체과 이탤릭체 각각)
• 텍스트에 사이즈에 맞춰 자동으로 조정되는 가변 자간
• Small, Medium, Large, Extra Large 모두 합친 다이나믹 광학 사이즈

 

For developer guidance, see the serif property of the SystemDesign structure.

Choosing Fonts to Enhance Your App
더 나은 앱을 위한 서체 고르기

Use built-in text styles whenever possible. The built-in text styles let you express content in ways that are visually distinct, while retaining optimal legibility. These styles — including headline, body, callout, and several sizes of title — are based on the system fonts and let you take advantage of key typographic features, such as Dynamic Type, which automatically adjusts tracking and leading for every font size. For developer guidance, see UIFontTextStyle.

가능하다면 미리 만들어진 텍스트 스타일을 사용하세요. 미리 짜여진 텍스트 스타일은 콘텐츠를 시각적으로 잘 구분지으며, 동시에 가독성 좋게 보여줍니다. 헤드라인, 바디, 콜아웃, 그외 타이틀의 여러 사이즈를 포함, 이러한 스타일들은 시스템 폰트에 근거해 만들어졌으며, 모든 폰트 사이즈에 맞춰 자동조절되는 다이나믹 타입같은 주요 타이포그래피 기능을 사용할 수 있게 합니다.

 

Emphasize important information. Use font weight, size, and color to highlight the most important information in your app.

중요한 정보를 강조하세요. 웨이트, 사이즈, 컬러를 사용해 앱의 가장 중요한 정보들을 강조하세요.

 

Prioritize content when responding to text-size changes. Not all content is equally important. When someone chooses a larger size, they want to make the content they care about easier to read; they don’t always want every word on the screen to be larger.

텍스트 사이즈 변경에 대응하여 콘텐츠의 우선순위를 매기세요. 모든 콘텐츠가 동일하게 중요하진 않습니다. 누군가 더 큰 사이즈의 폰트를 선택했다는 것은, 그가 특정 콘텐츠를 중요하게 생각하고 쉽게 읽고자 한다는 것입니다; 단순히 화면의 모든 단어가 크게 보이는 것을 원하는 것만은 아닙니다.

 

Minimize the number of typefaces you use in your interface. Mixing too many different typefaces can make your app seem fragmented and sloppy.

화면에서 사용하는 서체의 수는 최소화하세요. 너무 많은 종류의 서체를 섞어버리면 앱이 분열되보이거나 엉성해보입니다.

 

Modify leading to improve readability or conserve space. Leading is the space between lines of text. In some cases, text layouts work better when you increase or decrease this space. When you display text in wide columns or long passages, more space between lines (loose leading) can make it easier for people to keep their place while moving from one line to the next. Conversely, if you need to display two lines of text in an area where height is constrained — for example, in a list row — decreasing the space between lines (tight leading) can help the text fit well. If you need to display three or more lines of text, avoid tight leading even in areas where height is limited. The system defines API that lets you increase or decrease the space between lines by two points; for developer guidance, see loose and tight (SwiftUI), and traitLooseLeading and traitTightLeading (UIKit).

행간을 조절해 가독성을 높이거나 공간을 절약하세요. 행간은 텍스트의 줄 사이 간격입니다. 때때로 텍스트 레이아웃은 그 간격을 늘리거나 줄일 때 더 좋아보이죠. 텍스트를 넓은 단에 배치하거나 긴 문단을 보여준다면, 행간을 넓히세요. 이는 사용자들이 텍스트를 읽고 그 다음줄로 넘어갈 때 자신의 현재위치를 놓치지 않게 해줍니다.

반대로, 높이가 제한된 영역에 두줄의 텍스트를 보여줘야 한다면, 행간을 줄이는 것이 텍스트가 딱 맞도록 하는 방법일 것입니다. 세줄 이상의 텍스트를 보여줘야 한다면, 좁은 행간은 피하세요. 높이가 제한되어있다 하더라도요. 시스템은 행간을 2포인트 간격으로 조절할 수 있도록 API를 정의해두었습니다;

 

Make sure custom fonts are legible. Custom typefaces are supported on iOS, but may be tough to read, especially if they have stylistic attributes* that make letterforms hard to discern when displayed at small sizes. Unless your app has a compelling need for a custom font — such as for branding purposes or to create an immersive gaming experience — it’s usually best to stick with the system fonts. Consider using a custom font for display text only; if you do use it for reading or interface text, make sure it’s legible, even at small sizes.

커스텀 폰트를 사용한다면, 가독성에 신경쓰세요. 커스텀된 서체를 iOS에 사용할 수는 있지만, 작은 사이즈로 보여졌을 때 알아보기 어려운 기교부린 서체라면 읽기 어려울 것입니다. 브랜딩 목적이나 게임같이 몰입형 경험을 만드는 것 같이 앱에서 커스텀 서체를 꼭 사용해야만 하는 이유가 없다면, 그냥 시스템 폰트를 사용하는게 가장 좋습니다. 커스텀 폰트는 디스플레이를 위한 서체로만 사용하세요; 만약 텍스트들을 읽는 환경에서 사용한다면, 작은 사이즈에서도 잘 읽히도록 하세요.

* typefaces which have stylistic attrbutes

 

Implement accessibility features for custom fonts. System fonts automatically react to accessibility features like bold text and larger type. Implement the same behavior in apps that use custom fonts by making sure accessibility features are enabled and registering for notifications when they change. For guidance, see Text Size and Weight.

커스텀 폰트에도 접근성(손쉬운 사용) 기능을 넣으세요. 시스템 폰트는 볼드체 텍스트나 더 큰 텍스트같은 기능에 자동으로 대응합니다. 커스텀 폰트를 사용하는 앱도 접근성 설정 여부를 확인하고, 변경 시 알림을 등록해 이러한 대응 기능을 지원해야 합니다. 가이드는 Text Size and Weight 에서 확인하세요.

 

Adjust tracking as needed in interface mockups. In a running app, the system fonts dynamically adjust tracking at every point size. To produce an accurate interface mockup of a UI that uses the variable system fonts, you don’t have to choose a discrete optical size at certain point sizes, but you might need to adjust the tracking. For guidance, see the values listed in Tracking Values and available in Apple Design Resources.

화면 목업에서 필요한 만큼 자간을 조절하세요. 사용중인 앱에서, 시스템 폰트는 다이나믹하게 모든 사이즈에 대응합니다. 다양한 시스템 폰트를 사용하는 UI의 정확한 미리보기를 만들기 위해서, 포인트 사이즈마다 별개의 광학 사이즈를 지정할 필요는 없습니다. 그냥 자간을 조절하세요. Tracking Values 에서 가이드 값을 확인하세요. 이는  Apple Design Resources 에서도 사용 가능합니다.

 

*무슨 내용인지 정확히 파악이 어렵다..;

 

In interface mockups, use text size to determine when to use SF Pro Text and Display, SF Compact Text and Display, or NY Small, Medium, Large, and Extra Large. If you use these discrete optical sizes in an interface mockup, you need to use different variants at different text sizes. Use the values listed below for guidance. For tracking values, see Apple Design Resources.

• For SF, use Text for text that’s smaller than 20 points; use Display for text that’s 20 points or larger.
• For NY, use Small for text that’s smaller than 20 points, Medium for text between 20 and 35 points, large for text between 36 and 53 points, and Extra Large for text that’s 54 points or larger.

화면 목업에선, SF Pro Text와 Display, SF Compact Text와 Display, 또는 NY Small, Medium, Large, and Extra Large를 언제 사용할건지 정하세요. 만약 별개의 광학 사이즈를 화면 목업에서 사용하려면, 각기 다른 사이즈별로 또 다른 변화를 주어야 합니다. 가이드를 위해 아래의 값을 사용하세요. 정확한 자간 값은 Apple Design Resources 에서 확인하세요.

• 샌프란시스코 서체에선, 20포인트보다 작은 텍스트엔 Text를 사용하고, 20포인트 이상에선 Display를 사용하세요.
• 뉴욕 서체에선, 20포인트보다 작은 텍스트엔 Small을, 20~35포인트의 텍스트엔 Medium을, 36~53포인트의 텍스트엔 Large를, 그리고 54포인트 이상의 텍스트엔 Extra Large를 사용하세요.

NOTE

iOS uses San Francisco as the system font for Latin, Greek and Cyrillic alphabets, and a variety of other typefaces for other scripts.

iOS는 라틴어, 그리스어, 키릴 알파벳을 사용하기 위해 샌프란시스코를 시스템폰트로 사용하며, 다른 글씨를 위해선 다른 서체를 사용합니다.

 

참고_

medium.com/@hooncho/%EC%95%A0%ED%94%8C%EC%9D%98-%EC%83%8C%ED%94%84%EB%9E%80%EC%8B%9C%EC%8A%A4%EC%BD%94-%EC%84%9C%EC%B2%B4%EC%97%90-%EB%8C%80%ED%95%9C-%EC%89%AC%EC%9A%B4-%EC%9D%B4%ED%95%B4-7bcfe159b6d2

애플의 샌프란시스코 서체에 대한 쉬운 이해

Dynamic Type Sizes
다이나믹 타입 사이즈

Dynamic Type provides additional flexibility by letting readers choose their preferred text size. Here are the weight, size, and leading values for each text style at different Dynamic Type sizes.

다이나믹 타입은 사용자들이 자신이 원하는 텍스트 사이즈를 고를 수 있게 해 유연성을 더합니다. 변화하는 다이나믹 타입 사이즈에 맞춰 웨이트, 크기, 중요한 값을 적어두었습니다.

 

그리고 그 값들은 원문에서 확인하세요:

 

Typography - Visual Design - iOS - Human Interface Guidelines - Apple Developer

 

번역 중 역대급으로 어려웠던 부분이다. 전문 용어도 많고, typeface와 font, glyph와 letterform 등의 묘한 차이도 번역에 넣진 못했다.

주된 골자는 텍스트 크기에 맞는 서체 설정/ 각 서체의 특징/ 서체 사용시 가독성에 신경쓸 것/ 다이나믹 타입 사이즈를 지원할 것.

그리고 나는 나중에 와서 다시 수정할 것..