In addition to ensuring legible text, your typographic choices can help you clarify an information hierarchy, communicate important content, and express your brand.
읽기 쉬운 텍스트를 제공하는 것 외에도 좋은 타이포그래피는 정보의 계층 구조를 명확히 하고 중요한 콘텐츠를 전달하며 브랜드를 표현하는 데 도움을 줍니다
Strive to maintain a minimum font size that most people can read easily. Differences in device displays, including pixel density and brightness, can influence the appropriate minimum font size. Other factors — such as the reader’s proximity to the display, their eyesight and whether they’re in motion, and environmental lighting conditions — all impact legibility. When you support Dynamic Type — a feature that lets people choose the size of onscreen text in iOS, iPadOS, tvOS, and watchOS — your app or game can respond appropriately when people adjust text to a size that works for them. For developer guidance, see Text input and output; for available sizes, see Specifications.
대부분의 사람들이 쉽게 읽을 수 있는 최소한의 글꼴 크기를 제공하는 것이 좋습니다. 다양한 디스플레이에서 발생할 수 있는 픽셀 및 밝기 등의 차이에 따라 최소 지원 글꼴의 크기가 달라질 수 있습니다. 디스플레이에 대한 근접성, 시력 및 움직임, 환경 조명과 같은 요인은 모두 사용자의 가독성에 영향을 미칩니다. 사람들이 iOS, iPadOS, tvOS 및 watchOS에서 화면에서 텍스트의 크기를 선택할 수 있는 동적 타입(dynamic type)을 지원하면 사람들이 텍스트를 자신에게 맞는 크기로 조정해서 앱이나 게임이 적절하게 적용시킬 수 있습니다. 개발자 지침은 Text input and output을 참고하세요. 사용 가능한 크기는 Specifications을 참고하세요.
→ 글꼴 크기를 정할 때, 대부분의 사람들이 쉽게 읽을 수 있는 크기로 정하라
Adjust font weight, size, and color as needed to emphasize important information and help people visualize hierarchy. Be sure to maintain the relative hierarchy and visual distinction of text elements when people adjust text sizes.
중요한 정보를 강조하고 사람들이 계층 구조를 이해하는데 도움이 되도록 필요에 따라 글꼴 두께, 크기 및 색상을 조정합니다. 사람들이 텍스트 크기를 조정할 때 상대적인 계층 구조와 텍스트 요소의 시각적 구분을 유지해야 합니다.
→ 메크로타이포그래피와 마이크로타이포그래피, 두 가지를 둘 다 사용해라
역자 첨언
Minimize the number of typefaces you use in your interface. Mixing too many different typefaces can obscure your information hierarchy and hinder readability.
인터페이스에서 사용하는 서체의 수를 최소화하는 것이 좋습니다. 서로 다른 서체를 너무 많이 혼합하면 정보 계층 구조가 모호해지고 가독성이 떨어질 수 있습니다.
→ hierachy와 가독성을 위해서 서체의 수를 최소화해라
Test legibility in different contexts. For example, in addition to adjusting text size, people may view your content outside in bright sunlight, glance at it while they’re in motion, or view it from a distance. If testing shows that some of your text is difficult to read, consider modifying the text or background colors to increase contrast, using a larger type size, or using typefaces designed for optimized legibility, like the system fonts.
다양한 상황에서 가독성을 테스트합니다. 예를 들어 사람들은 밝은 빛 아래에서 콘텐츠를 보거나 움직이거나 멀리서 텍스틀 볼 수 있습니다. 테스트를 통해 사용자의 가독성을 확인하고, 문제가 있다면 대비를 높이거나 배경색은 수정 또는 텍스트 크기를 조정해 시스템 글꼴과 같이 가독성을 최적화하도록 설계해야 합니다.
→ 다양한 상황에서 가독성을 테스트해라
In general, avoid light font weights to help maintain readability. For example, if you’re using system-provided fonts, use Regular, Medium, Semibold, or Bold font weights, and avoid Ultralight, Thin, and Light font weights, which can be difficult to see, especially when text is small.
가독성을 유지하기 위해 가벼운 글꼴 두께(light font weights)를 사용하지 않는 것이 좋습니다. 예를 들어 시스템 제공 글꼴을 사용하는 경우 일반(Regular), 중간(Medium), 세미볼드(Semibold) 또는 볼드(Bold), 글꼴 두께를 사용하고 특히 텍스트가 작을 때 보기 어려울 수 있는 초경량(Ultralight), 가벼운 글꼴 두께(Light font weights)는 지양해서 사용하세요.
→ 텍스트의 크기가 작을 때 보기 어려운 글꼴 두께 사용 지양해라
Prioritize important content when responding to text-size changes. Not all content is equally important. When someone chooses a larger text size, they typically want to make the content they care about easier to read; they don’t always want to increase the size of every word on the screen. For example, when people choose a large accessibility text size, Mail displays the subject and body of the message in the large size, but leaves less important text — such as the date and the sender — in a smaller size.
텍스트 크기가 변경될 때 적용될 콘텐츠의 우선순위를 정해야 합니다. 모든 콘텐츠가 똑같이 중요하지는 않습니다. 사람들이 더 큰 크기의 텍스트 선택할 때 관심 있는 콘텐츠에 적용되기를 원합니다. 사람들은 화면에 있는 모든 텍스트의 크기가 커지는 것을 원하지 않습니다. 예를 들어 사람들이 큰 텍스트 접근성이 좋은 크기를 선택하면 Mail은 메시지의 제목과 본문을 큰 게 표시하지만 덜 중요한 텍스트(예: 날짜 및 보낸 사람)는 작은 크기 그대로 남겨둡니다.
→ hierarchy를 고려해서 디자인해라
Apple provides two typeface families that support an extensive range of weights, sizes, styles, and languages.
Apple은 다양한 두께, 크기, 스타일 및 언어를 지원하는 두 가지 서체 패밀리를 제공합니다.
San Francisco (SF) is a sans serif typeface family that includes the SF Pro, SF Compact, SF Arabic, and SF Mono variants.
San Francisco (SF)는 SF Pro, SF Compact, SF Arabic 및 SF Mono을 포함하는 산세리프 서체 패밀리입니다.
The system also offers the SF Pro Rounded, SF Arabic Rounded, and SF Compact Rounded variants you can use to coordinate text with the appearance of soft or rounded UI elements, or to provide an alternative typographic voice.
또한 이 서체는 부드러운 또는 둥근 UI 요소의 모양으로 텍스트를 조정하거나 대체 타이포그래피 음성(alternative typographic voice)을 제공하는 데 사용할 수 있는 SF Pro Rounded, SF Arabic Rounded 및 SF Compact Rounded를 제공합니다.
*alternative typographic voice: 대체 타이포그래피 음성은 다른 시각적 스타일이나 표현을 제공하기 위해 서체 내에서 대체 문자 형태나 디자인 변형을 사용하는 것을 말한다. 이것은 타이포그래퍼나 디자이너들이 독특한 모양을 만들거나 그들의 타이포그래피 구성에서 특정한 분위기를 불러일으키기 위해 대체적인 글리프나 글자 모양을 선택할 수 있게 한다.
New York (NY) is a serif typeface family designed to work well by itself and alongside the SF fonts.
New York (NY) 은 SF 글꼴과 함께 단독으로 잘 적용되도록 설계된 세리프 서체 패밀리입니다.
The system provides the SF and NY fonts in the variable font format, which combines different font styles together in one file, and supports interpolation between styles to create intermediate ones.
여기에서 San Francisco 및 New York 글꼴을 다운로드할 수 있습니다.
시스템은 SF 및 NY 글꼴을 가변 글꼴 형식(variable font format)으로 제공합니다. 이를 통해 서로 다른 글꼴 스타일을 하나의 파일에 결합하고 스타일 간 보간을 지원하여 중간 글꼴을 만들 수 있습니다.
To help you define visual hierarchies and create clear and legible designs in many different sizes and contexts, the system fonts are available in a variety of weights, ranging from Ultralight to Black, and — in the case of SF — several widths, including Condensed and Expanded. Because SF Symbols use equivalent weights, you can achieve precise weight matching between symbols and adjacent text, regardless of the size or style you choose.
시각적 계층을 정의하고 다양한 크기와 콘텍스트에서 명확하고 읽기 쉬운 디자인을 만드는 데 도움이 되도록 시스템 글꼴은 Ultralight에서 Black까지 다양한 두께로 제공되며 SF의 경우 Condensed 및 Condensed를 비롯한 여러 너비로 제공됩니다. SF 기호는 동등한 가중치를 사용하기 때문에 선택한 크기나 스타일에 관계없이 기호와 인접한 텍스트 간에 일관성을 제공할 수 있습니다.
Note
Variable fonts support optical sizing, which refers to the adjustment of different typographic designs to fit different sizes. On all platforms, the system fonts support dynamic optical sizes, which merge discrete optical sizes (like Text and Display) and weights into a single, continuous design, letting the system interpolate each glyph or letterform to produce a structure that’s precisely adapted to the point size. With dynamic optical sizes, you don’t need to use discrete optical sizes unless you’re working with a design tool that doesn’t support all the features of the variable font format.
가변 글꼴(variable font)을 사용하면 다양한 크기에 맞게 다양한 타이포그래피 디자인을 조정할 수 있습니다. 모든 플랫폼에서 시스템 글꼴은 개별 광학 크기(optical size 예: 텍스트 및 디스플레이)와 가중치를 하나의 연속적인 디자인으로 병합하는 동적 광학 크기를 지원하여 시스템이 각 글리프 또는 글자 형태를 보간하여 적절히 적용됩니다. 크기 및 동적 광학 크기를 사용하면 가변 글꼴 형식(variable font format)의 모든 기능을 지원하지 않는 디자인 도구로 작업하지 않는 한 개별 광학 크기를 사용할 필요가 없습니다.
The system defines a set of typographic attributes — called text styles — that work with both typeface families. A text style specifies a combination of font weight, point size, and leading values for each text size. For example, the body text style uses values that support a comfortable reading experience over multiple lines of text, while the headline style assigns a font size and weight that help distinguish a heading from surrounding content. Taken together, the text styles form a typographic hierarchy you can use to express the different levels of importance in your content. Text styles also allow text to scale proportionately when people change the system’s text size or make accessibility adjustments, like turning on Larger Text in Accessibility settings.
시스템은 두 서체 패밀리 모두에서 적용되는 텍스트 스타일인 타이포그래피 속성 집합을 제공합니다. 텍스트 스타일은 각 텍스트 크기에 대한 글꼴 두께, 포인트 크기 및 행간 값의 조합을 제공합니다. 예를 들어 본문 텍스트 스타일은 여러 줄의 텍스트를 편안하게 읽을 수 있는 값을 사용하는 반면 헤드라인 스타일은 제목을 주변 콘텐츠와 구분하는 데 도움이 되는 글꼴 크기와 두께를 제공합니다. 한마디로 텍스트 스타일은 콘텐츠의 다양한 중요도를 표현하는 데 사용할 수 있는 타이포그래피 계층 구조를 제공합니다. 또한 텍스트 스타일을 사용하면 사람들이 시스템의 텍스트 크기를 변경하거나 접근성 설정에서 큰 텍스트(large text)를 사용하는 것과 같이 접근 설정을 사용할 때 텍스트 크기를 비례적으로 조정할 수 있습니다.
→ 시스템에서 Sf pro와 New York 둘 다에 적용되는 텍스트 스타일인 타이포그래피 속성 집합을 제공한다.
Consider using the built-in text styles. The system-defined text styles give you a convenient and consistent way to convey your information hierarchy through font size and weight. Using text styles with the system fonts also supports Dynamic Type and the larger accessibility type sizes (where available), which let people choose the text size that works for them.
기본적으로 제공되는 텍스트 스타일을 사용하는 것이 좋습니다. 시스템 정의된 텍스트 스타일은 글꼴 크기와 무게를 통해 정보 계층 구조를 전달하는 편리한 방법을 제공합니다. 시스템 글꼴과 함께 텍스트 스타일을 사용하면 Dynamic Type 및 더 큰 접근 가능 유형의 크기(사용 가능한 경우)도 지원되므로 사람들이 자신에게 맞는 텍스트 크기를 선택할 수 있습니다.
→ 기본적으로 제공되는 텍스트 스타일을 사용하는 것이 안전하다. (사용자가 직접 설정하는 것보다 이미 잘 디자인됨)
Modify the built-in text styles if necessary. System APIs define font adjustments — called symbolic traits — that let you modify some aspects of a text style. For example, the bold trait adds weight to text, letting you create another level of hierarchy. You can also use symbolic traits to adjust leading if you need to improve readability or conserve space. For example, 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 multiple 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. For developer guidance, see leading(_:).
필요한 경우 기본적으로 제공된 텍스트 스타일을 수정합니다. 시스템 API는 텍스트 스타일의 일부 측면을 수정할 수 있는 기호 특성이라고 하는 글꼴 조정을 정의합니다. 예를 들어 대담한 특성은 텍스트에 가중치를 추가하여 다른 수준의 계층 구조를 만들 수 있도록 합니다. 가독성을 높이거나 공간을 절약해야 하는 경우 기호 특성을 사용하여 행간을 조정할 수도 있습니다. 예를 들어 넓은 열이나 긴 구절에 텍스트를 표시할 때 줄 사이에 더 많은 공간( 느슨한 행간 )을 사용하면 사람들이 한 줄에서 다음 줄로 이동할 때 위치를 더 쉽게 유지할 수 있습니다. 반대로, 높이가 제한된 영역(예: 목록 행)에 여러 줄의 텍스트를 표시해야 하는 경우 줄 사이의 간격을 줄입니다.) 텍스트가 잘 맞도록 도와줄 수 있습니다. 3줄 이상의 텍스트를 표시해야 하는 경우 높이가 제한된 영역에서도 줄을 너무 좁게 만들지 마십시오. 개발자 지침은 leading(_:)를 참고하세요.
Adjust tracking as needed in interface mockups. In a running app, the system font dynamically adjusts tracking at every point size. To produce an accurate interface mockup of an interface 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 Specifications.
인터페이스 모형에서 필요에 따라 추적(tracking)을 조정합니다. 앱이 실행중일 때 시스템 글꼴은 모든 크기에서 동적으로 추적(tracking)을 텍스트의 크기를 조정할 수 있습니다. 가변 시스템 글꼴(variable font fonts)을 사용하는 인터페이스의 정확한 인터페이스 목업을 생성하기 위해 특정 포인트 크기에서 개별 광학 크기를 선택할 필요는 없지만 추적(tracking)을 조정해야 할 수도 있습니다. 지침은 Specifications. 을 참고하세요.
Developer note
You can use the constants defined in Font.Design to access all system fonts — don’t embed system fonts in your app or game. For example, use Font.Design.default to get the system font on all platforms; use Font.Design.serif to get the New York font.
앱이나 게임에 시스템 글꼴을 임베드하지 말고 Font.Design에 정의된 상수를 사용하여 모든 시스템 글꼴에 액세스할 수 있습니다. 예를 들어 모든 플랫폼에서 시스템 글꼴을 가져오려면 Font.Design.default를 사용하고, 뉴욕 글꼴을 가져오려면 Font.Design.serif를 사용합니다.
Make sure custom fonts are legible. Unless your app has a compelling need for a custom font — such as for branding purposes or to create an immersive gaming experience — prefer the system fonts. If you do use a custom font, make sure people can read it easily at various viewing distances and under a variety of conditions.
사용자 정의 글꼴을 사람들이 읽기 쉬운지 확인하세요. 브랜딩 목적이나 몰입형 게임 환경과 같이 앱에 맞춤 글꼴이 꼭 필요한 경우가 아니면 시스템 글꼴을 사용하는 것이 좋습니다. 사용자 지정 글꼴을 사용하는 경우 사람들이 다양한 상황, 조건에서 쉽게 읽을 수 있도록 해야 합니다.
→ Custom Font 사용하려면, 판독성을 고려해야 한다.
Implement accessibility features for custom fonts. System fonts automatically support Dynamic Type (where available) and respond when people turn on accessibility features, such as Bold Text. If you use a custom font, make sure it implements the same behaviors. For developer guidance, see Applying custom fonts to text.
사용자 지정 글꼴에 대한 접근성 기능을 제공해야 합니다. 시스템 글꼴은 동적 유형(dynamic type)을 자동으로 지원하고 사람들이 굵은(bold) 텍스트와 같은 접근성 기능을 사용하면 자동으로 적용됩니다. 사용자 정의 글꼴을 사용하는 경우 동일한 동작을 구현할 수 있어야 합니다. 개발자 지침은 Applying custom fonts to text을 참고하세요.
→ Accessibility를 고려해서, 시스템 글꼴처럼 접근성 기능을 제공해야 한다.
SF Pro is the system font in iOS and iPadOS. iOS and iPadOS apps can also use NY.
SF Pro는 iOS 및 iPadOS의 시스템 글꼴입니다. iOS 및 iPadOS 앱도 NY를 사용할 수 있습니다.
SF Pro is the system font in macOS. NY is available for Mac apps built with Mac Catalyst. macOS doesn’t support Dynamic Type.
SF Pro는 macOS의 시스템 글꼴입니다. NY는 Mac Catalyst로 구축된 Mac 앱에서 사용할 수 있습니다. macOS는 동적 유형(dynamic type)을 지원하지 않습니다.
When necessary, use dynamic system font variants to match the text in standard controls. Dynamic system font variants give your text the same look and feel of the text that appears in system-provided controls. Use the variants listed below to achieve a look that’s consistent with other apps on the platform.
필요한 경우 동적 시스템 글꼴 변형(dynamic system font variants)을 사용하여 표준 텍스트와 맞게 제공해야 하세요. 동적 시스템 글꼴 변형(dynamic system font variants)은 시스템 제공 컨트롤의 텍스트와 동일한 형태가 느낌을 텍스트에 제공합니다. 아래 표를 통해 플랫폼의 다른 앱과 일관된 형태를 제공하세요.
Dynamic font variant | API |
Control content | |
Label | |
Menu | |
Menu bar | |
Message | |
Palette | |
Title | |
Tool tips | |
Document text (user) | |
Monospaced document text (user fixed pitch) | |
Bold system font | |
System font |
SF Pro is the system font in tvOS, and apps can also use NY.
SF Pro는 tvOS의 시스템 글꼴이며 앱에서도 NY를 사용할 수 있습니다.
SF Pro is the system font in visionOS. If you use NY, you need to specify the type styles you want.
SF Pro는 비전OS의 시스템 글꼴입니다. NY를 사용하는 경우 원하는 유형 스타일을 지정해야 합니다.
visionOS uses bolder versions of the Dynamic Type body and title styles and it introduces Extra Large Title 1 and Extra Large Title 2 for wide, editorial-style layouts. For guidance using vibrancy to indicate hierarchy in text and symbols, see Materials > visionOS.
비전OS는 더 굵은 버전의 동적 유형 본문 및 제목 스타일을 사용하며, 넓은 편집 스타일 레이아웃을 위해 초대형 제목 1 및 초대형 제목 2를 도입했습니다. 텍스트 및 심볼의 계층을 표시하기 위해 생동감을 사용하는 방법에 대한 지침은 자료 > visionOS를 참조하세요.
In general, prefer 2D text. The more visual depth characters have, the more difficult they can be to read. Although a small amount of 3D text can provide a fun visual element that draws people’s attention, if you’re going to display content that people need to read and understand, prefer using text that has little or no visual depth.
일반적으로 2D 텍스트를 선호합니다. 문자의 시각적 깊이가 깊을수록 읽기가 더 어려울 수 있습니다. 소량의 3D 텍스트는 사람들의 관심을 끄는 재미있는 시각적 요소를 제공할 수 있지만, 사람들이 읽고 이해해야 하는 콘텐츠를 표시하려는 경우 시각적 깊이가 거의 없거나 전혀 없는 텍스트를 사용하는 것이 좋습니다.
Make sure text looks good and remains legible when people scale it. Use a text style that makes the text look good at full scale, then test it for legibility at different scales.
텍스트가 보기 좋게 표시되고 사람들이 크기를 조정해도 가독성이 유지되는지 확인하세요. 전체 크기에서 텍스트가 보기 좋게 보이는 텍스트 스타일을 사용한 다음 다양한 크기에서 가독성을 테스트합니다.
Maximize the contrast between text and the background of its container. By default, the system displays text in white, because this color tends to provide a strong contrast with the default system background material, making text easier to read. If you want to use a different text color, be sure to test it in a variety of contexts.
텍스트와 컨테이너 배경의 대비를 최대화합니다. 기본적으로 시스템은 텍스트를 흰색으로 표시하는데, 이는 이 색상이 기본 시스템 배경 소재와 강한 대비를 제공하여 텍스트를 더 쉽게 읽을 수 있도록 하기 때문입니다. 다른 텍스트 색상을 사용하려면 다양한 컨텍스트에서 테스트해 보세요.
If you need to display text that’s not on a background, consider making it bold to improve legibility. In this situation, you generally want to avoid adding shadows to increase text contrast. The current space might not include a visual surface on which to cast an accurate shadow, and you can’t predict the size and density of shadow that would work well with a person’s current Environment.
배경이 아닌 텍스트를 표시해야 하는 경우 가독성을 높이기 위해 텍스트를 굵게 표시하는 것이 좋습니다. 이 상황에서는 일반적으로 텍스트 대비를 높이기 위해 그림자를 추가하지 않는 것이 좋습니다. 현재 공간에 정확한 그림자를 드리울 수 있는 시각적 표면이 없을 수 있으며, 사람의 현재 환경에 적합한 그림자의 크기와 밀도를 예측할 수 없기 때문입니다.
Keep text facing people as much as possible. If you display text that’s associated with a point in space, such as text that labels a 3D object, you generally want the text to face the wearer regardless of how they or the object move. For example, if you display a label that’s parallel to a visible line, you probably want the text to rotate around that line. If you display a label for a 3D object, you might want to make the label look like it’s printed on the object or parallel to its surface.
텍스트가 가능한 한 사람을 향하도록 유지합니다. 3D 객체에 레이블을 지정하는 텍스트와 같이 공간의 한 지점과 연관된 텍스트를 표시하는 경우 일반적으로 사용자나 객체의 움직임에 관계없이 텍스트가 착용자를 향하도록 하는 것이 좋습니다. 예를 들어, 보이는 선에 평행한 레이블을 표시하는 경우 텍스트가 해당 선을 중심으로 회전하는 것이 좋습니다. 3D 객체에 대한 레이블을 표시하는 경우 레이블이 객체에 인쇄된 것처럼 보이거나 표면과 평행하게 보이게 하고 싶을 수 있습니다.
SF Compact is the system font in watchOS, and apps can also use NY. In complications, watchOS uses SF Compact Rounded.
SF Compact는 watchOS의 시스템 글꼴이며, 앱에서는 NY도 사용할 수 있습니다. 컴플리케이션에서 watchOS는 SF Compact Rounded를 사용합니다.
Style | Weight | Size (points) | Leading (points) |
Large Title | Regular | 31 | 38 |
Title 1 | Regular | 25 | 31 |
Title 2 | Regular | 19 | 24 |
Title 3 | Regular | 17 | 22 |
Headline | Semibold | 14 | 19 |
Body | Regular | 14 | 19 |
Callout | Regular | 13 | 18 |
Subhead | Regular | 12 | 16 |
Footnote | Regular | 12 | 16 |
Caption 1 | Regular | 11 | 13 |
Caption 2 | Regular | 11 | 13 |
Point size based on image resolution of 144 ppi for @2x and 216 ppi for @3x designs.
포인트 크기는 @2배 디자인의 경우 144ppi, @3배 디자인의 경우 216ppi의 이미지 해상도를 기준으로 합니다.
Style | Weight | Size (points) | Leading (points) |
Large Title | Regular | 44 | 52 |
Title 1 | Regular | 38 | 46 |
Title 2 | Regular | 34 | 41 |
Title 3 | Regular | 31 | 38 |
Headline | Semibold | 28 | 34 |
Body | Regular | 28 | 34 |
Callout | Regular | 26 | 32 |
Subhead | Regular | 25 | 31 |
Footnote | Regular | 23 | 29 |
Caption 1 | Regular | 22 | 28 |
Caption 2 | Regular | 20 | 25 |
Point size based on image resolution of 144 ppi for @2x and 216 ppi for @3x designs.
포인트 크기는 @2배 디자인의 경우 144ppi, @3배 디자인의 경우 216ppi의 이미지 해상도를 기준으로 합니다.
Size (points) | Tracking (1/1000em) | Tracking (points) |
6 | +41 | +0.24 |
7 | +34 | +0.23 |
8 | +26 | +0.21 |
9 | +19 | +0.17 |
10 | +12 | +0.12 |
11 | +6 | +0.06 |
12 | 0 | 0.0 |
13 | -6 | -0.08 |
14 | -11 | -0.15 |
15 | -16 | -0.23 |
16 | -20 | -0.31 |
17 | -26 | -0.43 |
18 | -25 | -0.44 |
19 | -24 | -0.45 |
20 | -23 | -0.45 |
21 | -18 | -0.36 |
22 | -12 | -0.26 |
23 | -4 | -0.10 |
24 | +3 | +0.07 |
25 | +6 | +0.15 |
26 | +8 | +0.22 |
27 | +11 | +0.29 |
28 | +14 | +0.38 |
29 | +14 | +0.40 |
30 | +14 | +0.40 |
31 | +13 | +0.39 |
32 | +13 | +0.41 |
33 | +12 | +0.40 |
34 | +12 | +0.40 |
35 | +11 | +0.38 |
36 | +10 | +0.37 |
37 | +10 | +0.36 |
38 | +10 | +0.37 |
39 | +10 | +0.38 |
40 | +10 | +0.37 |
41 | +9 | +0.36 |
42 | +9 | +0.37 |
43 | +9 | +0.38 |
44 | +8 | +0.37 |
45 | +8 | +0.35 |
46 | +8 | +0.36 |
47 | +8 | +0.37 |
48 | +8 | +0.35 |
49 | +7 | +0.33 |
50 | +7 | +0.34 |
51 | +7 | +0.35 |
52 | +6 | +0.33 |
53 | +6 | +0.31 |
54 | +6 | +0.32 |
56 | +6 | +0.30 |
58 | +5 | +0.28 |
60 | +4 | +0.26 |
62 | +4 | +0.24 |
64 | +4 | +0.22 |
66 | +3 | +0.19 |
68 | +2 | +0.17 |
70 | +2 | +0.14 |
72 | +2 | +0.14 |
76 | +1 | +0.07 |
80 | 0 | 0 |
84 | 0 | 0 |
88 | 0 | 0 |
92 | 0 | 0 |
96 | 0 | 0 |
Not all apps express tracking values as 1/1000em. Point size based on image resolution of 144 ppi for @2x and 216 ppi for @3x designs.
모든 앱이 추적 값을 1/1000em으로 표시하지는 않습니다. 포인트 크기는 @2배 디자인의 경우 144ppi, @3배 디자인의 경우 216ppi의 이미지 해상도를 기준으로 합니다.
Text style | Weight | Size (points) | Line height (points) | Emphasized weight |
Large Title | Regular | 26 | 32 | Bold |
Title 1 | Regular | 22 | 26 | Bold |
Title 2 | Regular | 17 | 22 | Bold |
Title 3 | Regular | 15 | 20 | Semibold |
Headline | Bold | 13 | 16 | Heavy |
Body | Regular | 13 | 16 | Semibold |
Callout | Regular | 12 | 15 | Semibold |
Subheadline | Regular | 11 | 14 | Semibold |
Footnote | Regular | 10 | 13 | Semibold |
Caption 1 | Regular | 10 | 13 | Medium |
Caption 2 | Medium | 10 | 13 | Semibold |
Point size based on image resolution of 144 ppi for @2x designs.
2배 디자인의 경우 이미지 해상도 144ppi를 기준으로 한 포인트 크기입니다.
Size (points) | Tracking (1/1000em) | Tracking (points) |
6 | +41 | +0.24 |
7 | +34 | +0.23 |
8 | +26 | +0.21 |
9 | +19 | +0.17 |
10 | +12 | +0.12 |
11 | +6 | +0.06 |
12 | 0 | 0.0 |
13 | -6 | -0.08 |
14 | -11 | -0.15 |
15 | -16 | -0.23 |
16 | -20 | -0.31 |
17 | -26 | -0.43 |
18 | -25 | -0.44 |
19 | -24 | -0.45 |
20 | -23 | -0.45 |
21 | -18 | -0.36 |
22 | -12 | -0.26 |
23 | -4 | -0.10 |
24 | +3 | +0.07 |
25 | +6 | +0.15 |
26 | +8 | +0.22 |
27 | +11 | +0.29 |
28 | +14 | +0.38 |
29 | +14 | +0.40 |
30 | +14 | +0.40 |
31 | +13 | +0.39 |
32 | +13 | +0.41 |
33 | +12 | +0.40 |
34 | +12 | +0.40 |
35 | +11 | +0.38 |
36 | +10 | +0.37 |
37 | +10 | +0.36 |
38 | +10 | +0.37 |
39 | +10 | +0.38 |
40 | +10 | +0.37 |
41 | +9 | +0.36 |
42 | +9 | +0.37 |
43 | +9 | +0.38 |
44 | +8 | +0.37 |
45 | +8 | +0.35 |
46 | +8 | +0.36 |
47 | +8 | +0.37 |
48 | +8 | +0.35 |
49 | +7 | +0.33 |
50 | +7 | +0.34 |
51 | +7 | +0.35 |
52 | +6 | +0.31 |
53 | +6 | +0.33 |
54 | +6 | +0.32 |
56 | +6 | +0.30 |
58 | +5 | +0.28 |
60 | +4 | +0.26 |
62 | +4 | +0.24 |
64 | +4 | +0.22 |
66 | +3 | +0.19 |
68 | +2 | +0.17 |
70 | +2 | +0.14 |
72 | +2 | +0.14 |
76 | +1 | +0.07 |
80 | 0 | 0 |
84 | 0 | 0 |
88 | 0 | 0 |
92 | 0 | 0 |
96 | 0 | 0 |
Not all apps express tracking values as 1/1000em. Point size based on image resolution of 144 ppi for @2x and 216 ppi for @3x designs.
Text style | Weight | Size (points) | Leading (points) | Emphasized weight |
Title 1 | Medium | 76 | 96 | Bold |
Title 2 | Medium | 57 | 66 | Bold |
Title 3 | Medium | 48 | 56 | Bold |
Headline | Medium | 38 | 46 | Bold |
Subtitle 1 | Regular | 38 | 46 | Medium |
Callout | Medium | 31 | 38 | Bold |
Body | Medium | 29 | 36 | Bold |
Caption 1 | Regular | 25 | 32 | Medium |
Caption 2 | Medium | 23 | 30 | Bold |
Point size based on image resolution of 72 ppi for @1x and 144 ppi for @2x designs.
1배 디자인의 경우 72ppi, 2배 디자인의 경우 144ppi의 이미지 해상도를 기준으로 한 포인트 크기입니다.
Size (points) | Tracking (1/1000em) | Tracking (points) |
6 | +41 | +0.24 |
7 | +34 | +0.23 |
8 | +26 | +0.21 |
9 | +19 | +0.17 |
10 | +12 | +0.12 |
11 | +6 | +0.06 |
12 | 0 | 0.0 |
13 | -6 | -0.08 |
14 | -11 | -0.15 |
15 | -16 | -0.23 |
16 | -20 | -0.31 |
17 | -26 | -0.43 |
18 | -25 | -0.44 |
19 | -24 | -0.45 |
20 | -23 | -0.45 |
21 | -18 | -0.36 |
22 | -12 | -0.26 |
23 | -4 | -0.10 |
24 | +3 | +0.07 |
25 | +6 | +0.15 |
26 | +8 | +0.22 |
27 | +11 | +0.29 |
28 | +14 | +0.38 |
29 | +14 | +0.40 |
30 | +14 | +0.40 |
31 | +13 | +0.39 |
32 | +13 | +0.41 |
33 | +12 | +0.40 |
34 | +12 | +0.40 |
35 | +11 | +0.38 |
36 | +10 | +0.37 |
37 | +10 | +0.36 |
38 | +10 | +0.37 |
39 | +10 | +0.38 |
40 | +10 | +0.37 |
41 | +9 | +0.36 |
42 | +9 | +0.37 |
43 | +9 | +0.38 |
44 | +8 | +0.37 |
45 | +8 | +0.35 |
46 | +8 | +0.36 |
47 | +8 | +0.37 |
48 | +8 | +0.35 |
49 | +7 | +0.33 |
50 | +7 | +0.34 |
51 | +7 | +0.35 |
52 | +6 | +0.31 |
53 | +6 | +0.33 |
54 | +6 | +0.32 |
56 | +6 | +0.30 |
58 | +5 | +0.28 |
60 | +4 | +0.26 |
62 | +4 | +0.24 |
64 | +4 | +0.22 |
66 | +3 | +0.19 |
68 | +2 | +0.17 |
70 | +2 | +0.14 |
72 | +2 | +0.14 |
76 | +1 | +0.07 |
80 | 0 | 0 |
84 | 0 | 0 |
88 | 0 | 0 |
92 | 0 | 0 |
96 | 0 | 0 |
Not all apps express tracking values as 1/1000em. Point size based on image resolution of 144 ppi for @2x and 216 ppi for @3x designs.
모든 앱이 추적 값을 1/1000em으로 표시하지는 않습니다. 포인트 크기는 @2배 디자인의 경우 144ppi, @3배 디자인의 경우 216ppi의 이미지 해상도를 기준으로 합니다.
Style | Weight | Size (points) | Leading (points) |
Large Title | Regular | 30 | 32.5 |
Title 1 | Regular | 28 | 30.5 |
Title 2 | Regular | 24 | 26.5 |
Title 3 | Regular | 17 | 19.5 |
Headline | Semibold | 14 | 16.5 |
Body | Regular | 14 | 16.5 |
Caption 1 | Regular | 13 | 15.5 |
Caption 2 | Regular | 12 | 14.5 |
Footnote 1 | Regular | 11 | 13.5 |
Footnote 2 | Regular | 10 | 12.5 |
Style | Weight | Size (points) | Leading (points) |
Large Title | Regular | 44 | 46.5 |
Title 1 | Regular | 42 | 44.5 |
Title 2 | Regular | 34 | 41 |
Title 3 | Regular | 24 | 26.5 |
Headline | Semibold | 21 | 23.5 |
Body | Regular | 21 | 23.5 |
Caption 1 | Regular | 18 | 20.5 |
Caption 2 | Regular | 17 | 19.5 |
Footnote 1 | Regular | 16 | 18.5 |
Footnote 2 | Regular | 15 | 17.5 |
Size (points) | Tracking (1/1000em) | Tracking (points) |
6 | +50 | +0.29 |
7 | +30 | +0.21 |
8 | +30 | +0.23 |
9 | +30 | +0.26 |
10 | +30 | +0.29 |
11 | +24 | +0.26 |
12 | +20 | +0.23 |
13 | +16 | +0.20 |
14 | +14 | +0.19 |
15 | +4 | +0.06 |
16 | 0 | 0.00 |
17 | -4 | -0.07 |
18 | -8 | -0.14 |
19 | -12 | -0.22 |
20 | 0 | 0.00 |
21 | -2 | -0.04 |
22 | -4 | -0.09 |
23 | -6 | -0.13 |
24 | -8 | -0.19 |
25 | -10 | -0.24 |
26 | -11 | -0.28 |
27 | -12 | -0.30 |
28 | -12 | -0.34 |
29 | -14 | -0.38 |
30 | -14 | -0.42 |
31 | -15 | -0.45 |
32 | -16 | -0.50 |
33 | -17 | -0.55 |
34 | -18 | -0.60 |
35 | -18 | -0.63 |
36 | -20 | -0.69 |
37 | -20 | -0.72 |
38 | -20 | -0.74 |
39 | -20 | -0.76 |
40 | -20 | -0.78 |
41 | -20 | -0.80 |
42 | -20 | -0.82 |
43 | -20 | -0.84 |
44 | -20 | -0.86 |
45 | -20 | -0.88 |
46 | -20 | -0.92 |
47 | -20 | -0.94 |
48 | -20 | -0.96 |
49 | -21 | -1.00 |
50 | -21 | -1.03 |
51 | -21 | -1.05 |
52 | -21 | -1.07 |
53 | -22 | -1.11 |
54 | -22 | -1.13 |
56 | -22 | -1.20 |
58 | -22 | -1.25 |
60 | -22 | -1.32 |
62 | -22 | -1.36 |
64 | -23 | -1.44 |
66 | -24 | -1.51 |
68 | -24 | -1.56 |
70 | -24 | -1.64 |
72 | -24 | -1.69 |
76 | -25 | -1.86 |
80 | -26 | -1.99 |
84 | -26 | -2.13 |
88 | -26 | -2.28 |
92 | -28 | -2.47 |
96 | -28 | -2.62 |
Not all apps express tracking values as 1/1000em. Point size based on image resolution of 144 ppi for @2x designs.
모든 앱이 추적 값을 1/1000em으로 표현하는 것은 아닙니다. 포인트 크기는 @2배 디자인의 경우 144ppi의 이미지 해상도를 기준으로 합니다.
Font — SwiftUI
UIFont — UIKit
NSFont — AppKit
Change log
작성 날짜 | 작성자 | 수정사항 |
2023/06/13 | 조엘 | 초기 번역 |
2023/12/26 | 조엘 | 배포 |