Big Type Statement
초대형 디스플레이 타이포가 콘텐츠 그 자체 — 음수 자간으로 밀착된 clamp 12vw 글자가 화면을 압도하는 무채 + 강조 1색 스타일.
설명
한 뷰포트에 단어 몇 개만. Anton 초압축 헤비 디스플레이를 clamp(3.5rem, 12vw, 14rem)로 키우고 음수 자간·line-height 0.9로 글자를 서로 밀착시켜, 크기·잘림·여백만으로 위계를 만든다. 카드도 그리드도 박스도 없고 이미지도 최소한 — 오프화이트 배경 위 거의 순흑 텍스트에 강렬한 오렌지레드 강조 단 하나. 글자가 화면 가장자리를 넘쳐 잘리는 것(overflow crop)도 의도된 표현이다.
타입 스케일
display Ag 스타일 견본 Style Specimen
h2 Ag 스타일 견본 Style Specimen
body Ag 스타일 견본 Style Specimen
caption Ag 스타일 견본 Style Specimen
디스플레이는 Anton(자체가 헤비라 weight 400) + 음수 자간으로 밀착, 뷰포트 스케일(clamp 12vw). 본문은 Inter로 짧게 — 거대 텍스트의 보조 역할만. 캡션은 대문자 + 넓은 자간으로 크기 대비를 극대화.
골든 예제 (exemplar)
Do
- 한 뷰포트에 단어 몇 개만 — 각 섹션(min-height 90vh)을 거대 텍스트로 채운다
- 스테이트먼트는 반드시 clamp 상한 10rem 이상 도달, 음수 자간(-0.04em)·line-height 0.9로 밀착
- 텍스트 정렬을 섹션마다 좌/우/꽉참으로 교차한다
- 강조색은 1~2단어 또는 작은 라벨에만 — 거대 텍스트는 솔리드 foreground 유지
- 글자가 화면 폭을 넘쳐 가장자리에서 잘리는 의도적 크롭(overflow: hidden)을 활용한다
Don't
- 보라/인디고 그라디언트 금지, 그라디언트 텍스트 절대 금지 — 거대 텍스트는 솔리드 검정
- 거대 텍스트를 작게 쓰지 말 것 — 스테이트먼트가 10rem에 못 미치면 실패
- 거대 텍스트를 항상 중앙 정렬하지 말 것
- 카드 그리드·3박스 반복 금지 — 콘텐츠는 거대 타이포 흐름
- 둥근 모서리·soft shadow·이모지·blob 도형 금지
- 이미지로 화면을 채우지 말 것 — 화면을 채우는 건 글자
- 본문 텍스트가 거대 텍스트만큼 길어지지 말 것 — 본문은 보조
컴포넌트 노트
- statement
- 히어로: min-height 95vh, 좌측 정렬 2~3줄 display 타입(clamp 12vw, line-height 0.9, -0.04em). 한 단어만 accent 색. 하단에 caption 라벨 1줄.
- button
- radius 0, 배경 투명 + 4px solid foreground 보더 또는 foreground 채움, 대문자 caption 타이포, 호버 시 색 반전 200ms.
- link
- 본문 링크는 밑줄, 강조 링크만 accent. 호버: 밑줄 또는 색 반전.
- divider
- 4px solid foreground 굵은 룰 — 또는 아예 생략하고 빈 공간으로 구획.
- image
- 최소한으로. 쓰더라도 직각·흑백·작게 — 거대 텍스트의 들러리.
- footer
- 색 반전 — foreground 배경에 background색 거대 텍스트(연락처/CTA 한 문장), accent 링크.