큐레이션 · 오픈 · 무료

Typotheque

글로벌 폰트 시스템과 에디토리얼 프로젝트를 깔끔하고 이미지가 풍부한 인터페이스로 소개하는 프리미엄 폰트 파운드리입니다.

01

디자인 DNA

타이포그래피 공예와 언어적 다양성을 보여주는 디지털 전시회

02

컬러

고대비 흰색과 검정색 기반에 선명하고 채도 높은 포인트 블록으로 포인트를 줍니다

03

타이포그래피

humanist-sans · monospace

• display40px · 700
• headline20px · 400
• body16px · 400

본문 텍스트는 16px 기본 크기와 1.0 줄 간격을 사용합니다 · 제목은 40px 굵은 크기와 1.1의 여유로운 줄 간격을 사용합니다 · UI 레이블과 보조 텍스트는 약간 작은 13px 크기를 사용합니다 · 대문자나 레이블의 경우 자간을 약간 넓게 설정합니다

04

여백

주요 섹션 주위에 넉넉한 여백을 두고, 표준 콘텐츠 블록에는 일관된 20px padding을 적용합니다

05

표면 (라운드 / 그림자 / 경계선)

미세한 회색의 얇은 1px 테두리를 주로 구조적 구분에 사용합니다

06

레이아웃

폰트 컬렉션을 탐색하기 위한 다중 열 그리드로, 상단에 전체 너비 히어로 이미지, 하단에 크고 선명한 카드 블록이 배치됩니다

07

모션과 인터랙션

인터랙티브 요소의 부드러운 배경색 전환 (0.25s) · hover 시 미세한 투명도 및 transform 변화 (0.2s)

배경색 전환과 미세한 투명도 조정 · 즉각적인 시각적 반응 또는 연결된 섹션으로의 부드러운 전환

08

컴포넌트

• button 9999px border-radius의 알약 형태로, 솔리드와 투명한 스타일 모두 제공합니다
• card 둥근 모서리(24px 반경)와 굵고 채도 높은 배경색을 가진 큰 직사각형 블록입니다
• chip 데이터 시각화 그리드 내에서 사용되는 높고 수직적인 텍스트 레이블입니다
• input 단순한 돋보기 아이콘으로 표현되는 미니멀리스트 검색 인터페이스입니다
• hero 하단에 미세한 어두운 그라데이션 오버레이를 적용한 전체 너비의 고해상도 사진 풍경으로, 텍스트 가독성을 높입니다

09

보이스와 금지 목록

• 톤 권위 있고, 교육적이며, 글로벌 포용성에 깊이 초점을 맞춥니다
• 헤드라인 직관적이고 묘사적이며 가독성이 높습니다 (예: '글로벌 폰트', '모든 폰트')
• CTA 미세하고 행동 지향적이며, 종종 화살표 아이콘이 동반됩니다 (예: '자세히 알아보기 →')

• 일반적인 sans-serif 폰트를 사용하지 마세요 — 스크린샷은 특정한 특징을 가진 인간주의적 sans-serif를 보여줍니다
• 엄격한 8px 그리드를 사용하지 마세요 — 스크린샷은 10, 20, 30, 80px과 같은 값을 사용한 유연한 간격을 보여줍니다
• 버튼을 직사각형으로 만들지 마세요 — 스크린샷은 일관되게 9999px 반경의 알약 형태 버튼을 보여줍니다
• 큰 drop shadow를 사용하지 마세요 — 스크린샷은 그림자 깊이가 전혀 없는 완전히 평평한 표면을 보여줍니다
• 작고 밀집된 텍스트를 사용하지 마세요 — 스크린샷은 넉넉한 줄 간격(1.0에서 1.3)과 명확한 폰트 크기를 보여줍니다
• 하나의 배경색에만 의존하지 마세요 — 스크린샷은 순수 흰색, 순수 검정색, 선명한 채도 블록의 혼합을 보여줍니다
• 피하기: 지나치게 공격적인 마케팅 용어나 과장
• 피하기: 지저분하거나 시각적으로 시끄러운 UI 요소
• 피하기: 섹션 간 일관되지 않은 타이포그래피

10

팩 안의 실제 스크린샷

실제 페이지에서 캡처 · 실 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko