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

(owickstrom.github.io)

1P by GN⁺ 3시간전 | ★ favorite | 댓글 1개

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은 개인 블로그와 애플리케이션 인터페이스에 채택될 만큼 예상보다 널리 확산됐음
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 소스를 내려받아 프로젝트의 the-proportional-web 디렉터리에 배치함
HTML의 head에는 다음 파일을 추가함
- the-proportional-web/index.min.css
- the-proportional-web/index.js
Pandoc에서는 목차 깊이, 섹션 번호, CSS, JavaScript, 구문 강조 비활성화 등의 인자를 지정해 Markdown을 HTML로 변환할 수 있음
구문 강조가 필요하다면 이 HTML 출력에 사용한 템플릿 같은 사용자 정의 템플릿을 고려할 수 있음
이 경우 Pandoc이 기본으로 포함하는 CSS는 사용자 정의 템플릿에서 제거해야 함

적용 범위와 제작 도구

Bringhurst의 방법론 전체가 아닌 일부 아이디어만 가져와 웹에 맞게 조정함
문서 제작에는 다음 도구를 사용함
- Pandoc
- html-minifier
- esbuild
- GNU Make
디자인의 아이디어와 실제 레이아웃은 Robert Bringhurst의 《The Elements of Typographic Style》에서 크게 가져옴

GN⁺ 3시간전 [-]

Lobste.rs 의견들

다음처럼 글꼴 크기를 픽셀값으로 지정하면 접근성을 해치므로 피해야 함
```
@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를 도입했고 수년간 조정이 필요했지만 지금까지 잘 활용해 왔음. 이것이 몇몇 면에서는 더 좋아 보이지만 갈아탈 정도는 아님

답변달기

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

The Monospace Web에서 비례폭으로

글꼴 체계

상대 단위와 수직 리듬

현대 브라우저에서 구현한 양끝 맞춤

문단 들여쓰기와 색상

의미론적 HTML과 제목·강조

구분선과 접이식 세부 정보

사이드 노트와 고유명

인용문과 그림

목록과 표

코드 표현

적합한 사용처와 라이선스

설치와 Pandoc 사용법

관련 타이포그래피 프로젝트

적용 범위와 제작 도구

함께 보면 좋은 글 β

댓글과 토론

Lobste.rs 의견들