디자인 시스템

대규모 타이포그래피 — 타입 시스템 구축, 토큰 아키텍처, 반응형 전략, 플랫폼 간 일관성을 다룹니다.

디자인 시스템

디자인 시스템을 위한 타이포그래피 테스트와 QA

브라우저, 기기, 화면 크기 전반에서 타이포그래피를 테스트하는 방법입니다 — 텍스트 잘림, 오버플로우, 다국어, 시각적 회귀 테스트까지 다룹니다.

디자인 시스템

수직 리듬: 텍스트를 베이스라인 그리드에 정렬하기

수직 리듬은 모든 텍스트와 간격을 일관된 베이스라인 그리드에 정렬해 시각적 조화를 만듭니다 — 웹에서는 까다롭지만 충분히 구현할 수 있습니다.

디자인 시스템

디자인 시스템을 위한 기본 폰트 선택하기

기본 폰트는 시스템에서 가장 눈에 띄는 디자인 결정입니다. 시스템 폰트를 위해 문자 세트, 웨이트, 가변 축, 라이선스를 평가하는 방법입니다.

디자인 시스템

최고의 디자인 시스템들은 타이포그래피를 어떻게 다룰까

Apple HIG, Material Design, IBM Carbon, Shopify Polaris 등이 타이포그래피를 다루는 방식을 분석합니다 — 폰트 선택, 스케일 시스템, 가이드라인을 다룹니다.

디자인 시스템

디자인 시스템에서의 반응형 타이포그래피

브레이크포인트 전반에 걸친 타이포그래피 스케일링 — 반응형 타입 스케일, clamp()를 이용한 유동적 크기 조정, 모바일부터 데스크톱까지 위계 유지까지 다룹니다.

디자인 시스템

타이포그래피 디자인 토큰: Figma에서 CSS까지

디자인 토큰은 디자인과 개발을 연결합니다 — 폰트 패밀리, 크기, 굵기, 줄 높이, 간격을 구조화되고 플랫폼에 독립적인 값으로 다룹니다.

디자인 시스템

디자인 시스템을 위한 타입 스케일 구축하기

잘 정의된 타입 스케일은 일관된 디자인의 기초입니다. 비율을 선택하고, 단계를 정의하고, 여러 플랫폼에 적용하는 방법을 배웁니다.