큐레이션 · 오픈 · 무료

Hoefler&Co

에디토리얼 스토리텔링과 우아한 시편 전시를 통해 서체를 소개하는 프리미엄 타이포그래피 파운드리.

01

디자인 DNA

서체를 위한 하이엔드 디자인 아틀리에이자 에디토리얼 쇼케이스

02

컬러

다크 인터페이스와 밝은 콘텐츠 영역 간의 높은 대비, 링크와 UI 요소를 위한 밝은 파란색 기능적 강조 사용.

03

타이포그래피

transitional-serif · humanist-sans · monospace

• display56px · 400
• heading21px · 400
• body15px · 400
• caption10px · 400

디스플레이 및 헤드라인 타이포그래피에 에디토리얼적 우아함을 불러일으키는 트랜지셔널 세리프를 사용 · 본문 텍스트와 UI 요소에 가독성과 현대적 느낌을 주는 휴머니스트 산스를 사용 · 정제된, 잘 다듬어진 느낌을 위해 디스플레이 텍스트의 자간을 좁게 유지

04

여백

일관된 4px 베이스와 콘텐츠 영역의 넉넉한 패딩으로 타이포그래피를 위한 숨결 공간을 생성

05

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

테두리의 최소한 사용; 배경 대비와 간격에 의존하여 분리

rgba(255, 255, 255, 0.15) 0px 1px 0px 0px

06

레이아웃

타이포그래피 시편을 위한 넓은 비주얼 영역과 명확한 콘텐츠 계층 구조를 갖춘 그리드 기반 레이아웃

07

모션과 인터랙션

인터랙티브 요소에서의 부드러운 채우기 전환 · hover 상태에서의 색상 전환 · 콘텐츠 표시를 위한 불투명도 페이드

인터랙티브 요소에서의 섬세한 색상 변화와 채우기 전환 · 부드러운 전환 피드백을 동반한 즉각적인 반응

08

컴포넌트

• button 미니멀한 스타일링, 주로 텍스트 기반에 섬세한 hover 전환 적용
• card 오버레이 텍스트가 있는 풀블리드 이미지 블록 또는 비주얼과 콘텐츠 영역 간의 깔끔한 분리
• chip 두드러지게 사용되지 않음; 인터페이스는 깔끔한 네비게이션 링크에 의존
• input 미니멀한 밑줄만 있는 입력 필드와 섬세한 플레이스홀더 텍스트
• hero 강렬한 비주얼 임팩트로 뷰포트를 채우는 대형 타이포그래피 시편

09

보이스와 금지 목록

• 톤 지식이 풍부하고 정제된, 에디토리얼적인 톤; 타이포그래피와 디자인에 대해 권위 있게 말함
• 헤드라인 타이포그래피 시편과 디자인 철학을 선보이는 대담하고 자신감 있는 진술
• CTA 절제되고 우아함; 공격적인 전환보다는 탐험을 유도함

• 콘텐츠 블록에 둥근 모서리를 사용하지 마세요 — 모든 컨테이너가 날카롭고 깔끔한 모서리를 보여줍니다
• 카드 또는 콘텐츠 영역에 드롭 섀도우를 추가하지 마세요 — 플랫하고 테두리 없는 디자인을 보여줍니다
• 본문 텍스트에 볼드 웨이트를 사용하지 마세요 — 전체적으로 일관된 400 웨이트를 보여줍니다
• 장식적 요소로 인터페이스를 어지럽히지 마세요 — 여백을 충분히 남긴 절제된 모습을 보여줍니다
• 디스플레이 헤드라인에 산스세리프를 사용하지 마세요 — 두드러진 타이포그래피에 트랜지셔널 세리프를 사용합니다
• 섹션을 분리하기 위해 무거운 테두리를 적용하지 마세요 — 배경색 대비에 의존합니다
• 피하기: 지나치게 캐주얼하거나 유행을 따르는 언어
• 피하기: 공격적인 판매 메시지
• 피하기: 맥락 없는 복잡한 기술 용어

10

팩 안의 실제 스크린샷

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

11

System Prompt

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