타이포그래피 디자인 시스템

모든 규모에서 명확한 콘텐츠 계층 구조를 구축하세요.

확인 항목 8개 · 그룹 3개

체크리스트 내용

검토 진행 상황

구조와 의미

사용 맥락에 따라 정보와 프레젠테이션을 비교합니다.

일관된 글꼴 크기 배율 사용캡션부터 제목까지 수준을 정의하고 각 화면에 새 크기를 추가하지 마세요.제목을 더 긴 콘텐츠로 바꾸고 장치의 글꼴 크기를 늘립니다. 콘텐츠를 자르지 않고도 계층 구조, 베트남어 악센트, 줄 간격 및 관련 작업을 쉽게 읽을 수 있도록 유지하세요.예시 카드에는 두 줄의 제목, 설명, 열기 버튼이 있습니다. 글자가 커지면 버튼을 덮거나 베트남 마크가 잘리는 대신 태그의 높이가 높아집니다.역할별 스타일 설정제목, 콘텐츠, 라벨, 캡션을 구별하여 의미에 따라 스타일을 선택하세요.서체에는 본문이나 라벨과 동일한 역할을 하는 이름이 있어야 합니다. 역할 변경은 각 화면을 편집하는 대신 동시에 업데이트되어야 합니다.베트남어 글꼴 및 악센트 확인사용할 두께를 선택하고, 글꼴을 백업하고, 글꼴 다운로드가 실패할 경우 강조 표시된 텍스트를 확인하세요.실제 탑재된 문자의 길이, 베트남어 억양, 무게 등을 확인하세요. 레이아웃 점프를 방지하려면 백업 글꼴의 크기가 가까워야 합니다.

상호 작용 및 유용성

작업을 시도하고 상태를 변경한 후 작업을 계속하세요.

문자 간격 조정제목과 긴 내용을 읽을 때 적절한 줄 높이와 문자 간격을 설정하세요.단순한 샘플 문장이 아닌 여러 줄로 된 단락을 사용해 보세요. 줄이 너무 빡빡하면 읽기가 어렵고 문자 간격이 넓으면 작은 크기의 단어와 구두점이 손상될 수 있습니다.크기를 조정할 때 텍스트를 읽을 수 있도록 유지텍스트가 잘리거나 콘텐츠가 겹치는 것을 방지하려면 좁은 화면과 200% 확대/축소 수준을 확인하세요.글꼴 크기를 늘리거나 확대/축소할 때 버튼과 태그는 콘텐츠에 따라 늘어나야 합니다. 두 번째 선을 자르는 고정된 높이를 피하세요.콘텐츠의 대비를 충분히 유지하세요.작은 텍스트도 읽기 쉬운지 확인하고 의미를 나타내는 유일한 지표로 색상을 사용하지 마세요.하위 텍스트, 자리 표시자 및 밝음/어두움 비활성화 상태도 확인하세요. 컬러 배경의 작은 글자는 종종 놓치기 쉽습니다.

경험을 완성하세요

디자인을 활용하면서 놓치기 쉬운 디테일을 확인해보세요.

역할별 최소 텍스트 크기 정의본문 텍스트, 레이블 및 캡션에 대해 읽을 수 있는 최소값을 문서화하고 텍스트를 텍스트에 맞게 축소하는 대신 더 큰 스타일이 필요한 경우를 설명합니다.기기의 실제 디스플레이 크기로 시도해 보세요. 확대된 미리보기 이미지의 텍스트는 전체 크기에서 가독성 문제를 모호하게 만들 수 있습니다.반응형 유형 스케일 정의계층 구조를 유지하고 급격한 크기 변경을 피하면서 뷰포트 너비에 따라 제목과 본문 텍스트가 어떻게 변경되는지 문서화합니다.유연한 글꼴 크기를 사용하는 경우 최소 및 최대 제한을 설정하세요. 긴 라벨이 한 줄만 유지되도록 축소되지 않았는지 확인하세요.

진행 상황은 이 브라우저에 자동으로 저장됩니다.

안내

검토 방법

텍스트가 길고 확대된 경우 계층 구조를 확인하세요.

제목을 더 긴 콘텐츠로 바꾸고 장치의 글꼴 크기를 늘립니다. 콘텐츠를 자르지 않고도 계층 구조, 베트남어 악센트, 줄 간격 및 관련 작업을 쉽게 읽을 수 있도록 유지하세요.

예시

활용 예시

하나의 태그에 긴 제목

카드에는 두 줄의 제목, 설명, 열기 버튼이 있습니다. 글자가 커지면 버튼을 덮거나 베트남 마크가 잘리는 대신 태그의 높이가 높아집니다.