폰트 시스템
폰트 시스템 (Font)
폰트 시스템은 어떤 인터페이스 디자인에서도 가장 기본이 되는 부분 중 하나예요.
텍스트는 사용자가 애플리케이션 콘텐츠를 이해하고 작업을 완수하는 주요 통로입니다. 잘 디자인된 폰트 시스템은 사용자의 읽기 경험과 작업 효율을 크게 높여 줘요. Ant Design의 타이포그래피 시스템은 "동적 질서(dynamic order)"라는 디자인 원칙에 자연 로그와 음률(temperament)의 법칙을 결합해 만들었어요. 수많은 Ant 제품에서 검증됐기 때문에 강력히 권장합니다. 비주얼 시스템의 폰트 시스템을 정의할 때는 다음 다섯 가지 측면에서 시작하는 것을 제안해요.
- 폰트 패밀리 (Font Family)
- 기본 폰트 크기 (Base Font Size)
- 폰트 스케일과 줄 높이 (Font Scale & Line Height)
- 폰트 두께 (Font Weight)
- 폰트 색 (Font Color)
출처: 문서
본문
폰트 패밀리 (Font Family)
좋은 폰트 시스템을 구현하기 위한 첫 단계는 적절한 폰트 패밀리를 고르는 거예요. Ant Design은 시스템 기본 폰트 패밀리를 선호하면서, 서로 다른 플랫폼과 브라우저의 화면에서 가독성을 유지하고 최종 사용자에게 항상 친숙하고 안정적이며 전문적으로 보이도록 대체 폰트 라이브러리 세트도 함께 제공해요.
@font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
'Noto Color Emoji';
참고: https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/ 와 https://markdotto.com/blog/github-system-fonts/
또한 많은 애플리케이션에서 숫자를 세로로 정렬해 표시해야 할 때가 있어요. 이때 CSS 속성 font-variant-numeric을 tabular-nums로 설정해 tabular figures를 사용하는 것을 권장해요.
기본 폰트 크기 (Base Font Size)
Ant Design의 기본 폰트 크기를 기존 12에서 14로 업데이트했어요. 대부분의 일반적인 모니터에서 디스플레이 화면 읽기 거리(50cm)와 최적 읽기 각도(0.3)를 기준으로 사용자의 읽기 효율을 최대로 보장하기 위해서예요.
폰트 스케일과 줄 높이 (Font Scale & Line Height)
폰트 스케일과 줄 높이는 폰트 시스템의 동적 질서와 아름다움을 결정해요. 폰트 스케일은 크기가 다른 일련의 폰트들을 말하고, 줄 높이는 폰트 바깥을 감싸는 보이지 않는 상자로 이해하면 돼요.
Ant Design은 오음 음계(pentatonic scale)와 자연의 법칙에서 영감을 받아 10가지 서로 다른 폰트 크기와 그에对应的 줄 높이를 정의했어요.
Ant Design의 비주얼 시스템에서 권장하는 기본 폰트 크기는 14이고, 그에 해당하는 줄 높이는 22예요. 나머지 폰트 스케일의 선택은 구체적인 상황에 따라 자유롭게 정의할 수 있어요. 다만 디자인 시스템에서(디스플레이 페이지 제외) 폰트 스케일 선택은 3~5종 이내로 조절하고, 절제의 원칙을 유지하는 것을 권장해요.
폰트 두께 (Font Weight)
폰트 두께의 선택도 질서(order)·안정성(stability)·절제(restraint)의 원칙에 기반해요. 대부분의 경우 regular(400)와 medium(500)만으로 충분해요. 굵은 영어 단어의 경우 semibold(600)를 사용할 수 있어요.
폰트 색 (Font Color)
텍스트가 배경색과 너무 가까우면 읽기 어려워져요. 장벽 없는(barrier-free) 디자인을 위해 WCAG 표준을 따르는데, 본문·제목·배경색 사이에 AAA 수준의 대비율, 즉 7:1 이상을 유지해요.
고급 팁 (Advanced Tips)
폰트 시스템의 구축은 "동적 질서의 아름다움"을 이루는 첫걸음이에요. 실제 디자인에서는 세 가지 더 고급 팁이 있어요.
- 체계적인 디자인 사고를 세우세요: 같은 시스템의 UI 디자인에서는 먼저 체계적인 디자인 사고를 세워야 해요. 주·부·보조, 제목, 디스플레이 등 여러 유형의 폰트를 통일되게 계획해요. 그리고 구체적인 상황에 따라 필요한 미세 조정을 해요. 체계적인 디자인 접근을 세우면 폰트의 가로 정렬 일관성이 높아지고, 폰트 사용의 비용 효율이 좋아지며, 불필요한 스타일 낭비를 피할 수 있어요.
- 적을수록 좋다 (Less is more): 비주얼 디자인은 가능한 적은 스타일로 이루어져야 해요. 시각적 또는 대비 관계를 강조하려고 대량의 폰트 스케일·색·폰트 두께를 의미 없이 사용하는 것을 피하세요.
- 폰트 스케일이 음표처럼 춤추게 하세요: 어떤 간격을 늘려야 할 때, 폰트 스케일 표에서 서로 다른 크기의 폰트를 선택해 보세요. 그러면 단어 스케일 사이에 미묘한 리듬이 생겨요.