styles
← 갤러리

Editorial Longform

잡지 기사를 웹으로 옮긴 롱폼 읽기 스타일 — 680px 세리프 단일 컬럼, 드롭캡, 컬럼을 깨고 나오는 풀퀘이트와 이미지.

print-editorial editorial-magazinelongformserif-bodydrop-capwarm-paperreading-first
⬇ AI 번들 (llms.md) DESIGN.md tokens.json
라이브 프리뷰 — 동일 샘플 UI에 이 스타일 적용

설명

따뜻한 페이퍼 화이트 위에 큰 세리프 본문(20px/1.75)을 60~68자 측정 폭의 단일 컬럼으로 흘리는 매거진 기사형 스타일. 오버사이즈 Playfair 헤드라인과 드롭캡으로 기사를 열고, 이탤릭 풀퀘이트와 이미지가 본문 컬럼을 의도적으로 깨며 읽기의 리듬을 만든다. 카드도 그리드도 그림자도 없다 — 위계는 오직 세리프 타이포그래피와 수직 여백, 그리고 단 하나의 벽돌빛 레드 강조색.

타입 스케일

display Ag 스타일 견본 Style Specimen
h2 Ag 스타일 견본 Style Specimen
body Ag 스타일 견본 Style Specimen
quote Ag 스타일 견본 Style Specimen
dropcap Ag 스타일 견본 Style Specimen
caption Ag 스타일 견본 Style Specimen

세리프가 주인공: 본문은 Source Serif 4를 20px(1.25rem)/행간 1.75로 크게, 헤드라인·풀퀘이트는 하이콘트라스트 Playfair Display(퀘이트는 italic). 산세리프 Inter는 메타·캡션·바이라인 전용 — 본문에 절대 쓰지 않는다. 드롭캡은 첫 문단 첫 글자를 float으로 3줄 높이, 강조색.

골든 예제 (exemplar)

Field Notes — Typography

The quiet luxury of a narrow column

By A. Reader  ·  July 12, 2026  ·  12 min read

When the measure stays between sixty and sixty-eight characters, the eye returns home without effort. Everything in this style serves that single promise: the paper-warm background, the twenty-pixel serif, the generous leading that lets each line breathe.

Nothing competes with the text. There are no cards, no grids, no shadows — only one brick-red accent allowed to punctuate the page, and it earns its place.

“A pull-quote is permission to pause — the one voice loud enough to interrupt the column.”

Then the column resumes, unhurried, exactly where it left off. Sections close not with a border or a box but with a single centered glyph, set in the accent red.

✦

Do

  • 본문은 반드시 세리프(Source Serif 4) 1.25rem·행간 1.75, 측정 폭 60~68자(680px 컬럼)를 지킨다
  • 첫 문단은 드롭캡으로 연다 — float, 3줄 높이, 강조색
  • 이미지와 풀퀘이트만 본문 컬럼을 깨고 1000px 또는 풀블리드까지 확장한다
  • 위계는 세리프 타이포그래피와 수직 여백(섹션 64px)으로만 만든다

Don't

  • 본문 컬럼을 760px 넘게 넓히지 말 것 — 측정 폭 68자 초과 시 가독성 붕괴
  • 본문을 산세리프로 쓰지 말 것 — Inter는 메타·캡션·바이라인 전용
  • 카드 그리드·3열 박스 반복 금지 — 콘텐츠는 단일 컬럼 흐름
  • 강조색을 2개 이상 쓰지 말 것 — 벽돌 레드 하나, 면적 5% 이하
  • 둥근 모서리·그림자·그라디언트·이모지·blob 도형 금지
  • 중앙 정렬 히어로에 거대 버튼 두 개 박는 SaaS 패턴 금지

컴포넌트 노트

hero
페이퍼 배경. 작은 대문자 카테고리 라벨(Inter, 강조색) → 좌측 정렬 오버사이즈 H1(Playfair) → 바이라인·날짜 메타 → 풀블리드 리드 이미지 순.
drop-cap
첫 문단 첫 글자: float left, 4.2rem, line-height 0.85, 강조색, 3줄 높이. ::first-letter 또는 플로트 span.
pull-quote
Playfair italic 1.6rem, 본문 컬럼(680px)보다 넓게 빠져나옴(음수 마진). 위아래 헤어라인 또는 좌측 강조색 룰 선택.
figure
이미지는 직각(radius 0), 흑백 또는 저채도 처리 권장. 컬럼을 깨고 1000px~풀블리드. 캡션은 아래 Inter 대문자 소형.
link
본문 링크는 강조색 + 밑줄. 호버 시 밑줄 두께 1px→2px.
divider
가운데 정렬 강조색 글리프(✦ 또는 —) 또는 1px 헤어라인.
footer
색 반전 없음. 상단 헤어라인, 가운데 글리프 디바이더, Inter 대문자 메타, 다음 기사 링크.