# The Proportional Web — 비례폭 타이포그래피를 위한 웹 스타일시트

> Clean Markdown view of GeekNews topic #31368. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=31368](https://news.hada.io/topic?id=31368)
- GeekNews Markdown: [https://news.hada.io/topic/31368.md](https://news.hada.io/topic/31368.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2026-07-13T09:07:07+09:00
- Updated: 2026-07-13T09:07:07+09:00
- Original source: [owickstrom.github.io](https://owickstrom.github.io/the-proportional-web/)
- Points: 1
- Comments: 1

## Topic Body

- **The Proportional Web**은 Robert Bringhurst의 《The Elements of Typographic Style》에서 일부 원칙을 가져와 브라우저에 적용한 디자인으로, The Monospace Web의 비례폭 후속작이자 재사용 가능한 스타일시트임
- 본문에는 Alegreya와 Alegreya SC, 코드에는 Courier Prime을 사용하며, 16px 루트 글꼴과 `rem`, 1.2rem 줄 높이를 바탕으로 크기와 **수직 리듬**을 일관되게 맞춤
- 현대 브라우저의 `word-break`, `text-wrap`, `hyphens`를 활용해 **양끝 맞춤**을 적용하되, 단어 간격이나 공백의 강줄기(river)가 나빠진다면 `text-align: left`를 사용하도록 권함
- 의미론적 HTML5를 중심으로 제목, 인용문, 그림, 표, 코드 블록을 스타일링하며, 넓은 화면의 **사이드 노트**는 오른쪽 여백에 두고 작은 화면에서는 장식이 있는 인라인 문단으로 전환함
- 책·저널·블로그·매뉴얼·위키 같은 **산문 중심 문서**에 적합하고 동적 웹 애플리케이션에는 권장하지 않으며, GitHub 소스를 내려받아 CSS와 JavaScript를 추가하거나 Pandoc과 함께 사용할 수 있음

---

### The Monospace Web에서 비례폭으로
- [The Monospace Web](https://owickstrom.github.io/the-monospace-web/)은 개인 블로그와 애플리케이션 인터페이스에 채택될 만큼 예상보다 널리 확산됐음
- **The Proportional Web**은 그 프로젝트의 정신적 후속작으로, 고정폭 대신 비례폭 글꼴을 사용하면서 자유롭게 재사용할 수 있도록 설계됨
- Robert Bringhurst의 《The Elements of Typographic Style》을 읽은 뒤, 책의 레이아웃과 타이포그래피를 브라우저에서 구현하는 작업으로 시작함
- 인쇄물과 달리 웹에는 고정된 페이지 크기가 없고 프로그래밍 가능한 플랫폼이라는 차이도 있어 같은 규칙을 그대로 적용하기 어려움
  - 대신 유용하거나 보기 좋다고 판단한 요소를 골라 사용할 수 있도록 공개함
- HTML 생성에는 **Pandoc**을 사용했지만, 스타일시트는 조금만 수정하면 다른 환경에서도 작동할 수 있음

### 글꼴 체계
- 여러 서체를 섞기보다 하나의 다용도 서체를 선택한다는 Bringhurst의 원칙을 디자인 기반으로 삼음
- **Alegreya 계열**은 용도에 따라 나눠 사용함
  - Alegreya Regular는 본문과 3단계 제목에 적용함
  - Alegreya SC는 타이틀 대문자 형태의 1단계 제목, 작은 대문자로 표시하는 2단계 제목, HTML 같은 인라인 약어에 사용함
- 고정폭 코드 조각에는 **Courier Prime**을 적용함

### 상대 단위와 수직 리듬
- 모든 크기는 **16px 루트 글꼴 크기**를 기준으로 `rem` 단위로 지정함
- 표준 크기는 0.75·0.875·1·1.125·1.25·1.375·1.5·2·2.5·3·4rem이며, 각각 12·14·16·18·20·22·24·32·40·48·64px에 해당함
- 루트 글꼴 크기만 바꾸면 전체 디자인을 함께 확대하거나 축소할 수 있음
  - 예를 들어 화면 너비가 480px 이하일 때 `:root`의 `font-size`를 14px로 바꿀 수 있음
- 줄 높이는 **1.2rem**이며, 모든 요소의 수직 정렬을 이 값의 배수에 맞추려 함
- The Monospace Web만큼 극단적으로 적용하지 않으면서도 문서 전체에 공통된 정렬 리듬을 유지함

### 현대 브라우저에서 구현한 양끝 맞춤
- Bringhurst의 책처럼 본문을 오른쪽 흘리기 방식이 아닌 **양끝 맞춤**으로 배치함
- 웹에서는 양끝 맞춤을 피해야 한다는 인식이 강하지만, 개선된 브라우저 기능을 바탕으로 다시 시도할 수 있다고 판단함
- 줄바꿈과 하이픈 처리는 다음 CSS 속성으로 제어함
  - `word-break`
  - `text-wrap`
  - `hyphens`
  - 하이픈 적용 범위를 제어하는 `hyphenate-limit-chars`
- 양끝 맞춤에는 단어 간격이 지나치게 벌어지거나 문단에 공백의 **강줄기(river)** 가 생길 위험이 있음
- 현재 문서는 줄 길이, 글꼴 크기, 콘텐츠의 조합에서 무난한 결과를 내며, 까다로운 일부 단어에는 소프트 하이픈을 직접 넣음
- 콘텐츠에 맞지 않는다면 `text-align: left`로 바꾸는 편이 적절함

### 문단 들여쓰기와 색상
- 연속되는 문단에는 세 개의 `0` 문자 폭에 해당하는 **3ch 들여쓰기**를 적용함
- 문단의 시작과 끝을 눈으로 더 쉽게 찾기 위한 방식으로, 인쇄물에서는 최소 500년 동안 사용돼 왔음
- 웹에서는 보통 들여쓰기 대신 문단 사이에 세로 여백을 두지만, 전통적인 들여쓰기도 여전히 유효한 선택임
- 색상은 **흰색 바탕과 검은색 텍스트**로 제한함
  - 산문 중심 문서의 기본값으로 미니멀한 구성을 선호함
  - 색상을 아껴 두면 복잡한 데이터를 전달하는 도표처럼 가장 중요한 요소에 독자의 주의를 집중시킬 수 있음

### 의미론적 HTML과 제목·강조
- 일부 추가 클래스를 제외하면 대부분 **의미론적 HTML5 마크업**만으로 구성함
- 제목은 세 단계로 스타일링함
  - `h1`: 장 단위의 최상위 제목
  - `h2`: 섹션 제목
  - `h3`: 하위 섹션 제목
- `<em>` 요소는 일반적인 기대에 맞게 **이탤릭체**로 표시함

### 구분선과 접이식 세부 정보
- Bringhurst의 책에는 가로 구분선에 관한 명확한 지침이 없어 이를 장식 요소로 활용함
- 구분선에는 Unicode Dingbats 블록의 **U+2767 Rotated Floral Heart Bullet** 기호를 사용함
- `<details>` 요소를 사용하면 레이블을 눌러 펼칠 수 있는 정보를 숨겨 둘 수 있음

### 사이드 노트와 고유명
- Bringhurst가 사용한 사이드 노트는 HTML의 `<aside>`로 구현함
- 화면이 충분히 넓으면 이전 문단의 상단에 맞춰 **오른쪽 여백**에 표시함
- 작은 화면에서는 장식이 포함된 인라인 문단으로 접어 넣어 반응형으로 처리함
- `.canonical-name` 클래스로 구분한 고유명과 정식 명칭은 Bringhurst의 예시처럼 **작은 대문자**로 렌더링함

### 인용문과 그림
- 블록 인용문은 들여쓴 블록과 본문 주위의 인용 부호로 구성함
- 푸터에는 **저자·작품·연도**를 배치함
- 이미지와 캡션은 각각 `<figure>`와 `<figcaption>` 요소에 넣음
- 그림의 저자와 작품명에는 인용문과 마찬가지로 작은 대문자와 이탤릭체를 사용하며, 동일한 들여쓰기 체계를 공유함

### 목록과 표
- 불릿 목록과 순서 목록을 지원하며, 순서 목록의 **중첩 구조**도 일반적인 형태로 표시함
- 표 헤더에는 작은 대문자 레이블과 테두리를 사용해 강하게 구분함
- 나머지 표 디자인은 장식을 줄이고 **간격**에 의존하는 단순한 구성임

### 코드 표현
- 전체 디자인은 코드 중심 기술 문서보다 **산문 중심 문서**에 맞춰져 있지만, 코드 블록과 인라인 코드도 읽기 좋게 구성함
- 코드에는 타자기 같은 향수를 주는 Courier Prime을 사용해 Alegreya 및 전체 디자인의 분위기와 조화를 이루도록 함
- 기본 스타일 변수에는 글꼴, 줄 높이, 테두리 두께, 텍스트색과 배경색이 포함됨
  - `--font-family`: `"Alegreya", serif`
  - `--line-height`: `1.2`
  - `--border-thickness`: `1.5px`
  - `--text-color`: `#000`
  - `--background-color`: `#fff`

### 적합한 사용처와 라이선스
- 책, 저널, 블로그, 매뉴얼 같은 **산문 중심 웹 문서**를 위한 디자인임
- 개인 웹사이트, 특정 프로젝트 또는 더 큰 위키의 기반으로 사용할 수 있음
- 동적으로 작동하는 웹 애플리케이션에는 적합하지 않을 가능성이 큼
- 원하는 부분을 복사하거나 포크해 수정할 수 있지만 적절한 저작자 표시가 필요함
- 소스 파일 헤더의 라이선스 정보를 유지하는 방식으로 표시 조건을 지킬 수 있음

### 설치와 Pandoc 사용법
- 빠르게 시작하려면 [GitHub 소스](https://github.com/owickstrom/the-proportional-web)를 내려받아 프로젝트의 `the-proportional-web` 디렉터리에 배치함
- HTML의 `head`에는 다음 파일을 추가함
  - `the-proportional-web/index.min.css`
  - `the-proportional-web/index.js`
- Pandoc에서는 목차 깊이, 섹션 번호, CSS, JavaScript, 구문 강조 비활성화 등의 인자를 지정해 Markdown을 HTML로 변환할 수 있음
- 구문 강조가 필요하다면 [이 HTML 출력에 사용한 템플릿](https://github.com/owickstrom/the-proportional-web/blob/main/src/demo/template.html) 같은 사용자 정의 템플릿을 고려할 수 있음
- 이 경우 Pandoc이 기본으로 포함하는 CSS는 사용자 정의 템플릿에서 제거해야 함

### 관련 타이포그래피 프로젝트
- Richard Rutter의 [The Elements of Typographic Style Applied to the Web](https://webtypography.net/)은 Bringhurst 책의 구조를 상당 부분 따르면서 조언을 웹 디자인에 맞게 조정함
  - The Proportional Web보다 범위가 훨씬 넓고 정보 전달 자체에 초점을 둠
  - 반면 The Proportional Web은 아이디어와 스타일시트를 직접 보여주는 **쇼케이스**에 가까움
  - 해당 사이트는 휴대전화에서 글꼴 크기 차이가 크게 나타나 읽기 어려웠으며, 최소 20년 전부터 존재했고 약 8년 동안 업데이트가 없었던 것으로 파악함
  - The Proportional Web은 화면 크기가 달라져도 반응성과 일관성을 함께 유지하는 데 많은 노력을 들였으며, 두 프로젝트는 목적이 달라 공존할 수 있음
- Matthew Butterick의 [Practical Typography](https://practicaltypography.com/)는 일반 사용자나 타이포그래피와 인접한 엔지니어에게 필요한 거의 모든 주제를 충분히 상세히 다루는 실용적인 자료임
- [Tufte CSS](https://edwardtufte.github.io/tufte-css/)는 영향력과 인지도가 큰 작업으로, 일부 조판 세부 사항에 동의하지 않더라도 전체적으로 견고한 결과물임

### 적용 범위와 제작 도구
- Bringhurst의 방법론 전체가 아닌 **일부 아이디어**만 가져와 웹에 맞게 조정함
- 문서 제작에는 다음 도구를 사용함
  - [Pandoc](https://hackage.haskell.org/package/pandoc-cli)
  - [html-minifier](https://github.com/kangax/html-minifier)
  - [esbuild](https://esbuild.github.io/)
  - [GNU Make](https://www.gnu.org/software/make/)
- 디자인의 아이디어와 실제 레이아웃은 Robert Bringhurst의 《The Elements of Typographic Style》에서 크게 가져옴

## Comments



### Comment 61680

- Author: neo
- Created: 2026-07-13T09:07:08+09:00
- Points: 1

###### [Lobste.rs 의견들](https://lobste.rs/s/2vsvdm/proportional_web) 
- 다음처럼 **글꼴 크기를 픽셀값으로 지정**하면 접근성을 해치므로 피해야 함  
  ```css  
  @media screen and (max-width: 480px) {  
    :root {  
      font-size: 14px;  
    }  
  }  
  ```
  - CSS의 `px` 단위는 더 이상 물리적 픽셀과 1:1로 대응하지 않으며, `max(1/96in, 1 pixel)`을 뜻함
  - 내가 선호하는 방식은 `:root`의 `font-size`를 `0.625`로 설정해 `1rem`을 `10px`에 대응시키고, `body`에는 `1.6rem`이나 `2rem`을 지정해 페이지 전체가 상속받게 하는 것임  
    글꼴에는 `px`, 특히 `wv`나 `wh`를 쓰지 말고 `rem` 또는 `em`을 사용하며, 글꼴 크기에 따라 확대할 필요가 없는 레이아웃에는 주로 `px`, `wv`, `wh` 등을 쓰면 됨  
    시력이 좋지 않은 사용자가 브라우저의 **텍스트 크기 변경 기능**을 이용할 수 있도록 글꼴에는 `px`보다 `em`이나 `rem`을 강하게 권장함  
    글꼴 크기에 `wv`나 `wh`를 쓰면 데스크톱에서 `Ctrl-+`로 확대할 때 `innerWidth`와 `innerHeight`도 같은 비율로 줄어 텍스트 크기가 그대로이므로 피해야 함. 큰 화면에서만 조금 키우는 `font-size: calc(1.6rem + 2wv)` 같은 미묘한 혼합 사용은 괜찮음
  - 브라우저의 **기본 글꼴 크기**는 바꾸지 않는 편이 좋음. 단순한 텍스트 문서에는 괜찮지만 웹 대부분에서는 레이아웃이 깨질 수 있음  
    복잡한 웹사이트가 임의의 글꼴 크기를 모두 처리하도록 설계하기는 사실상 어려우며 디자인 제약도 엄청나게 커짐  
    시각 장애 등 접근성이 필요하다면 브라우저의 **기본 확대율**을 바꿔야 함. 그러면 사이트는 임의의 뷰포트 크기를 자연스럽게 처리하는 일반적인 반응형 설계만 담당하면 되므로 현실적으로 가능함  
    과거 브라우저들은 사용자에게 글꼴 크기를 직접 조절하게 했지만 사용자 경험이 좋지 않아 수십 년 전부터 페이지 전체 확대 방식으로 전환했음

- 모바일에서도 읽을 수 있게 만든 것인지 의문임

- Bringhurst의 책에 나온 **타이포그래피**를 상당히 잘 재현해 인상적임  
  다만 줄 높이가 고정된 균일한 격자에서 가끔 벗어남. 예를 들어 Courier로 설정된 텍스트가 한 줄에 섞이면 줄 높이가 약간 커짐
  - 이를 방지하려면 `<code>`에 **`line-height: 1`** 을 지정해야 함. `0`이 나은지에 대해서는 합의가 있는지 모르겠음  
    또한 『The Elements of Typographic Style』을 따르려면 글머리표와 번호 목록의 기호를 여백에 배치해야 하지만, 이것이 명시적인 요구 사항이었는지는 기억나지 않음

- 고전적인 타이포그래피 책을 탐구한 결과가 훌륭하며, 온라인에서 이런 **제약 기반 디자인**을 더 많이 볼 수 있어 좋음

- 이 분야에서는 2009년에 나온 http://lamb.cc/typograph/ 가 아직도 내게는 최고임

- 상대적 크기 조정은 훌륭하지만 **루트 글꼴 크기를 덮어쓰는 것**은 실수라고 봄  
  사이트는 사용자의 글꼴 크기 설정을 존중해야 하며, 비율과 관계를 기준으로 설계하는 상대적 크기 체계가 이에 잘 맞음

- 텍스트가 가장 중요하고 표현 방식은 중요하지 않은 척하기 쉽지만, 세심하게 설계된 **페이지 레이아웃**은 블로그 글이나 소설, 기사를 훨씬 전문적으로 보이게 함  
  뛰어난 페이지 조판은 어느 정도 잊힌 기술이 되어가고 있어 이런 시도가 반가움  
  초기에 `tuft.css`를 도입했고 수년간 조정이 필요했지만 지금까지 잘 활용해 왔음. 이것이 몇몇 면에서는 더 좋아 보이지만 갈아탈 정도는 아님