디자인 아틀라스
EN
Aa 타이포그래피

세로쓰기

Vertical writing mode

문장을 왼쪽→오른쪽이 아니라 위→아래로 흘리고, 줄은 오른쪽에서 왼쪽으로 쌓는 조판 방향. CSS `writing-mode: vertical-rl`로 구현합니다.

다른 이름: 세로짜기writing-mode: vertical-rl
···
html
<div class="stage">
  <div class="block" id="block">전통 세로쓰기 1234</div>
  <div class="readout">writing-mode: <span id="mode">vertical-rl</span></div>
</div>
css
.stage{display:grid;justify-items:center;gap:12px}
.block{font:600 clamp(14px,4vmin,20px)/1.7 -apple-system,system-ui,"Apple SD Gothic Neo",sans-serif;color:var(--fg);writing-mode:vertical-rl;text-orientation:mixed;height:clamp(110px,32vmin,190px)}
.block.horiz{writing-mode:horizontal-tb;height:auto;text-align:center}
.readout{font:11px ui-monospace,Menlo,monospace;color:var(--muted)}
#mode{color:var(--accent);font-weight:700}
js
const block = document.getElementById('block');
const mode = document.getElementById('mode');
let vertical = true;
function apply(){
  block.classList.toggle('horiz', !vertical);
  mode.textContent = vertical ? 'vertical-rl' : 'horizontal-tb';
  vertical = !vertical;
}
apply();
setInterval(apply, 1900);

한자문화권(한국·중국·일본)의 전통 조판은 세로쓰기였습니다. 두루마리·족자처럼 세로로 긴 매체에 자연스럽게 맞았고, 붓글씨의 필순과도 어울렸습니다. 지금도 일본 소설·신문 일부, 한국의 병풍·현판·전통 서예, 세로형 간판 등에서 여전히 쓰입니다.

CSS `writing-mode` 속성이 이 방향을 제어합니다. `vertical-rl`은 세로로 쓰고 줄이 오른쪽에서 왼쪽으로 진행(전통 동아시아 방식), `vertical-lr`은 줄이 왼쪽에서 오른쪽으로 진행(몽골 문자 등에 씀)합니다. 세로쓰기 모드에서는 `width`·`height`, `margin-top/bottom`과 `margin-left/right`의 논리적 의미가 뒤바뀌므로, `margin-block`·`margin-inline` 같은 논리 속성을 쓰면 가로/세로 전환에도 코드를 그대로 재사용할 수 있습니다.

라틴 문자·숫자를 세로쓰기 안에 섞으면 기본적으로 90도 돌아간 채로 세로로 흐르는데, `text-orientation: upright`를 주면 알파벳도 똑바로 세운 채 위에서 아래로 쌓입니다. 문장부호(따옴표·쉼표)의 방향도 세로쓰기에 맞춰 자동으로 회전합니다.

언제 쓰나

전통 서예·간판 느낌의 브랜딩, 일본어 콘텐츠, 좁고 긴 세로 배너에. 일반 UI·본문에는 가로쓰기가 여전히 기본값입니다.