Grand Serif Statement
오프화이트 화면을 초대형 디스플레이 세리프 한 단어가 풀블리드로 가득 채우는 빅타이포 웹 스타일 — 활자가 곧 콘텐츠다.
설명
무채 잉크의 오프화이트 캔버스 위에, 음수 자간으로 압축된 거대한 디스플레이 세리프(Playfair Display) 단어 한둘이 화면 폭에 닿을 만큼 크게 놓여 콘텐츠 자체가 된다. 본문은 극도로 작은 산세리프(Inter)로 화면 한 모서리에만 좁게 배치되고, 강조색은 전혀 없이 위계는 오로지 활자 크기·굵기·헤어라인으로만 만든다. 스크롤 시 거대 단어가 다음 단어로 부드럽게 크로스페이드된다. 산세리프 빅타이포가 아니라 반드시 디스플레이 세리프인 점이 이 스타일의 핵심 구분점이다.
타입 스케일
display Ag 스타일 견본 Style Specimen
display-alt Ag 스타일 견본 Style Specimen
h2 Ag 스타일 견본 Style Specimen
body Ag 스타일 견본 Style Specimen
label Ag 스타일 견본 Style Specimen
주인공은 오버사이즈 디스플레이 세리프(Playfair Display, weight 600, 음수 자간 -0.04em, line-height 0.92) — clamp+vw로 뷰포트에 스케일해 화면 폭을 채운다. 세컨더리 디스플레이는 Fraunces italic(display-alt) 허용. 대비를 위해 본문·라벨은 반드시 작은 산세리프(Inter): 본문 0.8125rem, 라벨은 0.7rem 대문자 넓은 자간(0.14em). 세리프 대형과 산세리프 극소의 극단 대비가 스타일의 골격이다.
골든 예제 (exemplar)
Do
- 거대 활자는 반드시 디스플레이 세리프(Playfair/Fraunces)로, clamp 하한 4.5rem 이상 화면을 채우게
- 음수 자간으로 글자를 압축하고 line-height 0.92로 눌러라
- 위계는 활자 크기·굵기·헤어라인으로만 — 색으로 강조하지 말 것
- 본문은 한 모서리의 작은 산세리프 컬럼(≤420px) 하나로만
- 단어 전환은 오직 크로스페이드(600ms)
Don't
- 강조색·그라디언트·그라디언트 텍스트 절대 금지 — 잉크 무채만
- 산세리프 빅타이포 금지 — 거대 활자는 세리프여야 한다(빅타입 팩과의 갈림)
- 양수·헐거운 자간 금지, 거대 세리프를 작게(4rem 미만) 쓰기 금지
- 카드 그리드·3카드 반복·아이콘·일러스트·이모지·blob 금지
- 박스 섀도·둥근 모서리 금지, 화면당 거대 단어 3개 이상 금지
- 슬라이드·바운스·패럴랙스·회전 금지
컴포넌트 노트
- giant_word
- 주인공. font-serif(Playfair) weight 600, clamp(4.5rem,17vw,16rem), letter-spacing -0.04em, line-height 0.92, radius 0, 호버 반응 없음(정적). 화면 폭에 닿게.
- body_column
- 최대 420px 폭, font-sans(Inter) 0.8125rem/1.6, muted-foreground. 화면 한 모서리에만. 상단에 1px 헤어라인 룰.
- kicker
- 라벨 스텝(0.7rem 대문자 0.14em 자간, muted-foreground). 화면 모서리 키커·번호.
- link
- 본문 링크만 잉크 밑줄이 페이드로 나타남. accent 색 사용 금지.
- image
- 원칙적으로 이미지 없음. 필요 시 흑백 grayscale(1) contrast(1.05) 풀블리드 1점, 그 위에 거대 세리프 겹침. radius 0.