타이포그래피

타이포그래피 (Typography)

타이포그래피는 UI에서 시각적 계층을 만드는 핵심이에요. 일관되고 논리적인 계층을 만들면 사용자가 페이지의 정보를 더 빠르게 훑고 이해할 수 있어요. 글꼴 선택, 크기 토큰, 헤딩과 본문 텍스트 규칙을 이 문서에서 정리해 드릴게요.

출처: 문서

본문

타이포그래피를 사용해 UI에서 시각적 계층을 만들 수 있어요. 일관되고 논리적인 계층을 만들면 사용자가 페이지의 정보를 더 빠르게 훑고 이해할 수 있어요.

이 페이지는 토큰 값과 사용 정보를 포함한 PatternFly의 타이포그래피 원칙과 표준을 설명해요.

content(콘텐츠) 또는 title(제목) 컴포넌트를 사용해 페이지에 텍스트 콘텐츠를 배치할 수 있어요:

  • Content 컴포넌트: 서식이 지정된 텍스트 콘텐츠 블록을 만드는 데 사용해요. Content는 헤딩, 단락, 목록 스타일을 포함한 모든 일반 HTML 텍스트 서식 태그를 받아들여요.

  • Title 컴포넌트: 컴포넌트에서 헤딩 또는 제목 텍스트에 특별히 사용해요. Title은 유연하며 텍스트 크기와 헤딩 레벨을 독립적으로 설정할 수 있게 해 줘요.

PatternFly 글꼴 (PatternFly fonts)

PatternFly에서는 3가지 글꼴을 사용해요:

  • Red Hat Display: 헤딩 같은 더 큰 텍스트에 사용해요.

  • Red Hat Text: 더 작은 텍스트, 소제목, 본문 텍스트에 사용해요. 장문 텍스트에서 더 읽기 좋아요.

  • Red Hat Mono: 텍스트를 코드로 서식화하는 데 사용하는 tabular(등간격) 글꼴이에요. tabular 글꼴 스타일 사용에 대해 더 알아보세요.

PatternFly의 글꼴은 GitHub에서 다운로드하세요.

글꼴 크기: rem 대 픽셀 (Font sizing: rem vs pixel)

글꼴 크기 토큰은 픽셀이 아니라 rem을 사용해요. Rem은 웹페이지의 HTML 문서 루트 요소 크기에 따라 글꼴 크기를 조정하는 상대 단위예요. 예를 들어 루트 크기가 10px이면, rem 크기 1.5는 15px이에요.

PatternFly의 기본 루트 요소 크기는 16px이에요. 이 기본 크기를 변경하면 다음 표에서 더 이상 정확한 픽셀 측정값이 표시되지 않는다는 점(rem 값은 그대로 유지되지만)에 주의하세요.

헤딩 (Headings)

모든 헤딩은 Red Hat Display bold를 사용해요.

예시 (Example) 토큰 (Tokens) 크기 (Size) 줄 높이 (Line height) 사용 (Usage)
Aa --pf-t--global--font--size--heading--h1 1.5rem (24px) 1.3 Super hero headings, H1, 페이지 제목
Aa --pf-t--global--font--size--heading--h2 1.25rem (20px) 1.3 Hero headings, H2
Aa --pf-t--global--font--size--heading--h3 1.125rem (18px) 1.3 H3
Aa --pf-t--global--font--size--heading--h4, --pf-t--global--font--size--heading--h5, --pf-t--global--font--size--heading--h6 1rem (16px) 1.3 H4, H5, H6

헤딩 레벨 커스터마이징 (Customizing heading levels)

title 컴포넌트를 사용하면 페이지에서 텍스트의 시각적 계층을 커스터마이징하면서, 접근성을 위한 시맨틱 계층은 기대치와 일관되게 유지할 수 있어요.

다음 표는 PatternFly 헤딩 레벨과 텍스트 크기의 기본 매핑을 보여 줘요.

헤딩 레벨 (Heading level) 기본 크기 (Default size)
H1 2xl (1.5rem, 24px)
H2 xl (1.25rem, 20px)
H3 lg (1.125rem, 18px)
H4 md (1 rem, 16px)
H5 md (1 rem, 16px)
H6 md (1 rem, 16px)

title 컴포넌트를 사용하면 이 기본 동작을 넘어 헤딩 레벨의 텍스트 크기를 변경해 커스터마이징할 수 있어요.

예를 들어 보조 헤딩의 기본 크기 20px이 너무 크다고 판단해서 20px(xl)에서 18px(lg)로 줄이기로 했다고 해요. 보조 헤딩을 크기를 설정하기 위해 H3로 만들지 말고, title 컴포넌트를 사용해 H2 헤딩으로 유지하면서 size 프로퍼티를 xl에서 lg로 변경해야 해요.

예시:

<Title headingLevel="h2"> Aa </Title> — 기본 "xl" H2

<Title headingLevel="h2" size='lg'> Aa </Title> — 커스터마이즈된 "lg" H2

헤딩 레벨과 텍스트 크기 사이의 좋은 시각적 계층과 매핑을 유지해야 해요. 대부분의 경우 H1은 항상 가장 큰 헤딩이어야 하며, 계층을 내려갈수록 소제목은 점점 작아져야 해요. 이 규칙의 드문 예외도 있지만, 중요한 데이터를 강조할 때만 사용해야 해요. 예를 들어 카드 제목이 H1 페이지 제목보다 큰 텍스트 크기를 사용하는 시나리오가 있을 수 있어요.

커스터마이징 옵션의 범위를 이해하려면 title 컴포넌트 예시를 참고하세요.

본문 텍스트 (Body text)

모든 본문 텍스트는 Red Hat Text를 사용해요.

예시 (Example) 토큰 (Tokens) 크기 (Size) 줄 높이 (Line height) 사용 (Usage)
Aa --pf-t--global--font--size--body--lg 1rem (16px) 1.5 xl 빈 상태(empty states)처럼 더 큰 본문 텍스트에 사용해요.
Aa --pf-t--global--font--size--body--default 0.875rem (14px) 1.5 표준 본문 텍스트에 사용해요.
Aa --pf-t--global--font--size--body--sm 0.75rem (12px) 1.5 헬퍼 텍스트처럼 더 작은 본문 텍스트에 사용해요.

Tabular 글꼴 스타일 (Tabular font styling)

PatternFly에서 사용하는 주요 글꼴(Red Hat Display와 Red Hat Text)은 비례 글꼴(proportional)로서, 표준 텍스트 블록에 더 나은 가독성을 제공하는 경우가 많아요. 긴 텍스트 본문 안에 숫자가 텍스트의 일부로 배치될 때는 비례 글꼴을 사용하는 것이 좋아요.

때로는 숫자가 대신 tabular 글꼴을 사용할 때 이점을 얻기도 해요. Tabular 글꼴은 숫자에 균일한 너비와 간격을 적용해 숫자의 정렬이 제대로 유지되도록 도와줘요. 이는 특히 화면에서 숫자가 동적으로 변해 거칠고 튀는 움직임이 생기는 것을 방지할 때 유용해요.

Tabular 글꼴 스타일은 slider와 progress를 포함한 몇몇 PatternFly 컴포넌트에서 사용되지만, 직접 tabular 스타일을 적용할 수 있는 수정자 .pf-v6-m-tabular-nums도 제공하며, 이는 font-variant-numeric: tabular-nums;를 설정해요.

줄 높이와 간격 (Line height and spacing)

텍스트의 줄 높이는 디자인에서 스페이서를 어떻게 사용해야 하는지에 영향을 미쳐요.

전체 줄 높이는 글꼴의 내장 줄 높이에 텍스트 크기를 곱해 계산할 수 있어요.

예를 들어 글꼴의 줄 높이가 1.5이고 크기가 16px이면, 한 줄 텍스트의 최종 높이는 24px이에요(16px * 1.5 = 24px). 이 예에서 디자인을 만들 때 최종 줄 높이 24px을 고려하게 돼요.

줄 길이 (Line length)

줄 길이는 공백을 포함한 한 줄 텍스트의 문자 수를 측정해요. 가독성을 높이고 화면에서 균형 잡힌 간격을 만드는 데 기여하려면 20~100자 사이의 줄 길이를 사용하세요.

너무 긴 줄은 따라가기 어려울 수 있고, 줄마다 몇 단어만 포함된 줄은 공간을 비효율적으로 사용할 수 있어요.

더 알아보기 (Learn more)