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

• 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는 사용자 정의 템플릿에서 제거해야 함

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

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

적용 범위와 제작 도구

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