타이포그래피
타이포그래피
스케일은 밀도에 대한 결정이며, 얼굴은 글꼴에 관한 것입니다: 이 페이지는 형태가 어떻게 읽히는지를 보여주며, 오늘날의 가치는 보여주지 않습니다. 디버그 패널에서 글꼴 축을 전환하면 아래의 모든 것이 규칙이 변경되지 않고 다른 얼굴로 설정됩니다.
패밀리
세 가지, 왜냐하면 페이지가 구별하는 것은 무엇이 쓰여지고, 무엇이 제목이 붙여지며, 무엇이 말해지는 것보다 타이핑된 것으로 읽혀져야 하는지를 보여주기 때문입니다. 하나의 세트가 세 가지 모두에 같은 얼굴을 줄 수 있습니다 — 시스템 하나가 그렇습니다.
--font-family-base
빠른 갈색 여우가 게으른 개를 뛰어넘습니다 — 0123456789
--font-family-heading
빠른 갈색 여우가 게으른 개를 뛰어넘습니다 — 0123456789
--font-family-mono
빠른 갈색 여우가 게으른 개를 뛰어넘습니다 — 0123456789
두께
얼마나 강조되는지에 따라 이름이 붙여지며, 숫자로는 표현되지 않습니다. 500이 존재하지 않는 얼굴은 그것이 가지고 있는 것에 맞추어 매핑되고, 중간을 요청하는 형태는 계속해서 중간을 요청합니다.
--font-weight-normal — 빠른 갈색 여우가 게으른 개를 뛰어넘습니다 — 0123456789
--font-weight-medium — 빠른 갈색 여우가 게으른 개를 뛰어넘습니다 — 0123456789
--font-weight-strong — 빠른 갈색 여우가 게으른 개를 뛰어넘습니다 — 0123456789
--font-weight-bold — 빠른 갈색 여우가 게으른 개를 뛰어넘습니다 — 0123456789
글꼴 크기
디자인 시스템 — 훌륭한 인터페이스를 위한 구성 요소
페이지당 한 번 사용됩니다. 기본 맥락을 설정합니다. 짧은 리드 문단과 함께 쌍을 이룹니다.
타이포그래피는 위계와 리듬을 설정합니다
섹션 수준 제목. 관련 콘텐츠를 그룹화합니다. 일반적으로 본문 텍스트나 하위 섹션이 뒤따릅니다.
간격과 비율이 가독성을 형성합니다
하위 섹션 제목. 섹션 내에서 집중된 주제를 소개합니다.
색상과 대비가 시선을 안내합니다
카드 제목, 사이드바 섹션 또는 소규모 그룹화에 사용됩니다.
상호작용 상태는 명확해야 합니다
레이블, 메타데이터 헤더, 소규모 그룹화. 미세하지만 본문 텍스트와 구별됩니다.
접근성은 기능이지 후속 작업이 아닙니다
가장 작은 제목 수준. 발췌, 법률 블록 또는 보조 레이블에 사용합니다.