Material Design 3 – 타이포그래피(번역)

Variable fonts(가변 글꼴)

Roboto Flex and Roboto Serif

가변 글꼴 및 사용자 지정 가능한 축 사용에 대한 업데이트된 고려 사항에는 등급, 너비 및 광학 크기가 포함됩니다.

Five type styles

글꼴 스타일은 다섯 가지 역할로 정의됩니다: 디스플레이, 헤드라인, 타이틀, 본문, 레이블입니다.

이러한 새로운 역할들은 보다 설명력이 뛰어나므로 더 광범위한 사용 사례에 걸쳐 더 간단하게 적용할 수 있습니다.

타이포그래피 토큰

이전 버전의 머티리얼은 타이포그래피에 하드코딩된 스타일 값에 의존했지만, 디자인 토큰은 제품에서 타이포그래피를 정의하는 개선된 방법을 제공합니다. 토큰은 설정된 값이 아닌 구성 가능한 값으로 요소의 유형 스타일을 할당합니다.

타이포그래피 역할은 소형, 중형, 대형과 같은 크기를 설명하여 디바이스나 상황에 맞게 조정하고 반응할 수 있도록 합니다.

Android의 기본 서체는 Roboto입니다.

Roboto에는 전 세계 수백 개 언어를 표현하는 3,300개 이상의 글리프가 포함되어 있습니다.

더 많은 타이포그래피 유연성을 원한다면 가변 글꼴의 후속 버전인 Roboto Flex를 사용해 보세요. 여기에는 가중치, 너비, 사용자 지정 가능한 추가 속성(예: 크기별 디자인)의 범위가 확장되었으며 라틴어, 그리스어, 키릴 문자를 지원하는 900개 이상의 글리프도 포함되어 있습니다.

로보토 세리프는 편안한 읽기 환경을 조성하도록 설계된 또 다른 가변 글꼴 모음입니다. 미니멀하고 기능성이 뛰어난 이 글꼴은 다양한 크기의 굵기와 너비를 지원하기 때문에 앱 인터페이스 등 어디에서나 사용할 수 있습니다.

Noto는 모든 현대 및 고대 언어를 위한 글로벌 글꼴 모음입니다.

각 노토 산스 제품군은 Roboto와 호환되며 노토 산스는 150개 이상의 스크립트와 수천 개의 언어를 지원합니다. 지원되지 않는 언어가 있을 때 ‘대체’ 글꼴로 사용됩니다.

타이포그래피 언어 고려 사항에 대해 자세히 알아보기

머티리얼 디자인은 14를 주요 기본 크기로 하는 메이저 세컨드 타입 스케일을 사용합니다. 이는 본문 텍스트 조판에 가장 자주 사용되는 가장 필수적인 스타일에 고정되어 있습니다.

렌더링된 유형 눈금의 크기는 작은 차이를 피하여 크기 간에 임팩트 있는 대비를 제공하는 것을 목표로 해야 합니다.

Sizes on the rendered type scale should aim to provide impactful contrast between sizes by avoiding small differences.

나만의 서체로 사용자 지정하려면 먼저 선택한 서체를 기존 스타일에 적용하고 글꼴 크기와 굵기를 일치시킵니다.

그런 다음 사용자 정의 서체의 고유한 특징에 맞게 줄 높이와 글자 간격 값을 조정합니다. 글꼴이 무거울수록 글자 간격이 넓어야 하고, 어센더와 내센더가 긴 글꼴은 줄 높이가 달라질 수 있습니다.

To customize with your own typography, begin by applying your selected typefaces to the existing styles, matching type size and weight.

From there, adjust line height and letter spacing values to accommodate the unique features of your custom typeface. Heavier fonts may require wider letter spacing, while fonts with long ascenders and descenders will require different line heights.

무게 Weight

굵기는 주어진 글꼴에서 서체의 획의 전체 두께를 정의하는 기본 속성입니다. 가장 일반적인 가중치는 일반 및 굵은 굵기이지만, 가중치는 매우 가벼운 것부터 매우 무거운 것까지 극단적인 값을 포함할 수 있습니다.

서체가 가변인 경우 획 두께의 전체 연속 범위를 제공하므로 가중치의 수는 사실상 무제한입니다.

Google 글꼴의 가중치에 대해 자세히 알아보기

등급 Grade

등급은 서체의 광학 가중치를 나타내는 보조 수정자로, 가중치 축과는 별개입니다. 무게 축과 등급 축 모두 글자의 두께에 영향을 주지만 등급으로 조정하는 것이 훨씬 더 세밀하며 글자 너비나 줄 바꿈은 변경하지 않습니다.

Google 글꼴의 등급에 대해 자세히 알아보기

너비 Width

너비는 서체의 문자가 차지하는 가로 공간의 양을 나타냅니다.

너비가 좁을수록 한 줄에 더 많은 문자를 넣을 수 있고 너비가 넓을수록 개성을 더 표현할 수 있습니다.

Google 글꼴의 너비에 대해 자세히 알아보기

광학 크기 Optical size

광학 크기는 다양한 크기에 사용하도록 최적화된 서체의 여러 버전입니다.

작은 크기의 디자인은 가독성을 높이는 데 중점을 두는 반면, 큰 크기의 디자인은 글자 형태의 복잡함을 강조하고 더 많은 굵기와 너비를 제공할 수 있습니다.

광학 크기가 있는 서체 선택에 대해 알아보기

디스플레이 Display

기본 유형 스케일에는 세 가지 표시 스타일이 있습니다: 크게, 중간, 작게. 화면에서 가장 큰 텍스트로, 짧고 중요한 텍스트나 숫자를 위한 디스플레이 스타일입니다. 큰 화면에서 가장 잘 작동합니다.

디스플레이 유형의 경우 손글씨 또는 스크립트 스타일과 같이 좀 더 표현력이 풍부한 글꼴을 선택하는 것이 좋습니다.

가능한 경우 사용 용도에 맞는 광학 크기를 설정합니다.

There are three display styles in the default type scale: Large, medium, and small. As the largest text on the screen, display styles are reserved for short, important text or numerals. They work best on large screens.

For display type, consider choosing a more expressive font, such as a handwritten or script style.

If available, set the appropriate optical size to your usage.

Headline헤드라인 머리글

헤드라인은 작은 화면에서 짧고 강조도가 높은 텍스트에 가장 적합합니다. 이 스타일은 텍스트의 주요 구절이나 콘텐츠의 중요한 영역을 표시하는 데 유용합니다.

가독성을 유지하기 위해 적절한 줄 높이와 글자 간격을 유지한다면 헤드라인은 표현력이 풍부한 서체를 사용할 수도 있습니다.

Headlines are best-suited for short, high-emphasis text on smaller screens. These styles can be good for marking primary passages of text or important regions of content.

Headlines can also make use of expressive typefaces, provided that appropriate line height and letter spacing is also integrated to maintain readability.

Title제목

제목은 헤드라인 스타일보다 작으며 비교적 짧게 강조하는 중간 강조 텍스트에 사용해야 합니다. 예를 들어 텍스트의 보조 구절이나 콘텐츠의 보조 영역을 구분하는 데 제목 스타일을 사용하는 것을 고려하세요.

제목의 경우 표시, 손글씨 및 스크립트 스타일을 포함하여 표현력이 풍부한 글꼴을 사용할 때는 주의하세요.

Titles are smaller than headline styles, and should be used for medium-emphasis text that remains relatively short. For example, consider using title styles to divide secondary passages of text or secondary regions of content.

For titles, use caution when using expressive fonts, including display, handwritten, and script styles.

Body본문

본문 스타일은 긴 텍스트 구절에 사용됩니다.

Roboto Flex에는 작은 크기와 긴 텍스트 블록에서 가독성을 위해 텍스트를 최적화하는 광학 크기 조정 기능이 포함되어 있어 더 넓은 범위의 스타일을 사용할 수 있습니다.

본문 텍스트에 표현적이거나 장식적인 글꼴은 작은 크기에서는 읽기 어려울 수 있으므로 피하세요.

Body styles are used for longer passages of text.

Roboto Flex includes optical sizing to optimize text for readability at smaller sizes and longer blocks of text, opening up a wider range of styles.

Avoid expressive or decorative fonts for body text because these can be harder to read at small sizes.

Label레이블

레이블 스타일은 작고 실용적인 스타일로, 컴포넌트 내부의 텍스트나 캡션과 같은 콘텐츠 본문의 아주 작은 텍스트에 사용됩니다.

예를 들어 버튼은 레이블 큰 스타일을 사용합니다.

Label styles are smaller, utilitarian styles, used for things like the text inside components or for very small text in the content body, such as captions.

Buttons, for example, use the label large style.

웹 UI에서는 줄 높이와 바운딩 상자 높이가 동일합니다. 텍스트는 CSS에서 설정한 ‘반쪽 선행‘ 동작에 따라 바운딩 상자 내에서 세로로 중앙에 배치됩니다.

텍스트의 세로 위치는 직접 제어되지 않고 바운딩 박스와 글꼴 메트릭의 조합을 통해 제어됩니다.

In web UIs, the line height and bounding box height are the same. Text is vertically centered within the bounding box, following the “half-leading” behavior established by CSS.

The vertical position of the text isn’t controlled directly, but through the combination of the bounding box and font metrics.

패딩은 이미지와 경계 상자 사이 또는 경계 상자의 안쪽 가장자리와 텍스트 사이와 같은 UI 요소 사이의 공간입니다.

Padding is the space between UI elements, such as between an image and a bounding box, or between the inner edge of the bounding box and the text.

컨테이너 가장자리와 같은 고정 기준점으로부터 UI 요소의 거리를 지정합니다. 웹의 경우 Sass 또는 CSS를 사용하여 이 계산을 자동화하세요.

Specify the distance of UI elements from fixed reference points, such as the container edge. For the web, automate this calculation using Sass or CSS.

Vertical alignment using padding and bounding boxes:

패딩과 경계 상자를 사용하여 세로로 정렬합니다:

1. 선 높이Line height
   바운딩 박스의 높이를 측정합니다.
   Measure the height of the bounding box
2. 중심 맞추기 Centering
   중앙 정렬을 사용하여 바운딩 상자의 안쪽 가장자리 주위에 동일한 위쪽과 아래쪽 패딩이 있는지 확인합니다.
   Ensure equal top and bottom padding around the inner edge of the bounding box by using center align
3. 간격Spacing
   바운딩 상자의 높이와 상단 및 하단 패딩을 사용하여 간격을 결정합니다.
   Use the height of the bounding box, and top and bottom padding to determine spacing

기준선은 텍스트 줄이 놓이는 보이지 않는 선입니다. 머티리얼 디자인에서 기준선은 텍스트와 요소 사이의 수직 거리를 측정하는 데 중요한 사양입니다.

The baseline is the invisible line upon which a line of text rests. In Material Design, the baseline is an important specification in measuring the vertical distance between text and an element.

Android의 경우 기준선을 기준으로 거리를 지정하면 정확한 구현이 가능합니다.

기준선은 플랫폼이나 디자인 도구에 구애받지 않고 디자이너 간에 텍스트 위치를 전달하는 데에도 사용할 수 있습니다.

For Android, specifying distances relative to baseline enables accurate implementation.

The baseline can also be used to communicate text position between designers in a way that’s agnostic to the platform or design tool.

기준선을 사용하여 세로로 정렬합니다:

Vertical alignment using the baseline:

1. 줄 높이Line height
   한 줄의 텍스트 기준선에서 다음 줄의 텍스트 기준선까지의 거리를 측정합니다.
   Measure distance from the text baseline of one line to the text baseline of the next line
2. 중앙 맞춤Centering
   텍스트 기준선까지의 거리를 측정하는 대신 중앙 정렬을 기준으로 지정합니다.
   Specify center alignment as a reference instead of measuring the distance to the text baseline
3. 간격Spacing
   기준점에서 텍스트 기준선까지의 거리를 사용합니다.
   Use the distance from a reference point to the text baseline

줄 높이 Line height

줄 높이는 텍스트의 각 줄 사이의 간격으로, 글자 크기와 직접적으로 연관되어 있습니다.

머티리얼의 유형 토큰은 의도된 크기와 용도에 맞게 최적화됩니다.

Line height is the space between each line of text and is directly connected to type size.

Material’s type tokens are optimized for intended size and use.

**표 형식 숫자 Tabular numbers**

표나 시계처럼 값이 자주 바뀔 수 있는 곳에서는 비례 숫자 대신 표 형식의 숫자(단일 간격 숫자라고도 함)를 사용하세요.

공백이 없는 표 형식의 숫자를 사용하면 값을 광학적으로 정렬하여 더 잘 스캔할 수 있습니다.

Use tabular figures (also known as monospaced numbers) rather than proportional digits in tables or places where values may change often, such as clocks.

Use monospaced tabular numbers to keep values optically aligned for better scanning.

색상 및 대비 Color & contrast

제품의 텍스트와 배경 간에 적절한 색상 대비를 선택하여 시각적 접근성을 지원하세요. 대비는 두 색상의 밝기 또는 어두움 사이의 인지된 차이로, 대비 비율로 정량화됩니다. 주요 대비 비율은 접근성을 위해 충분한 대비 수준을 나타냅니다.

대비 및 접근성에 대해 자세히 알아보기

텍스트의 색상과 배경의 색상 간에 충분한 대비가 이루어져야 합니다. 충분한 대비는 텍스트의 크기와 필요한 접근성 수준에 따라 달라집니다.

텍스트의 대비 요구 사항에 대해 자세히 알아보기

타이포그래피의 기본 색상은 온 표면이지만, 강조하지 않는 텍스트에는 온 표면 변형을 사용할 수 있습니다.

The default color for typography is on surface, but on surface variant can be used for less-emphasized text.

표면색** 위에 하이퍼링크된 텍스트가 표시되는 경우 1차를 사용합니다. 그러나 3차를 사용하여 링크를 덜 눈에 띄게 만들 수 있습니다.

하이퍼링크된 텍스트에는 밑줄을 그어야 합니다.

For hyperlinked text appearing on top of a surface color, use primary. However, ** tertiary** can be used to make links less prominent.

Hyperlinked text must also be underlined.