▲

readable.css

 (readable-css.freedomtowrite.org)
2P by GN⁺ | ★ favorite | 댓글 1개
  • readable.css는 사이트 전체 디자인 시스템이 아니라, 시맨틱 HTML에 합리적이고 보기 좋은 기본 스타일을 더하는 CSS 프레임워크임
  • 핵심 원칙은 일관성이며 색상, 글꼴 스타일, 테두리 두께, 줄 높이가 사이트 전반에 맞춰 적용됨
  • 라이트/다크 모드, 반응형 디자인, 세로 리듬, 헤더·푸터·내비게이션·테이블·버튼·폼 스타일을 제공함
  • 화려한 애니메이션, 커스텀 글꼴, 유틸리티 클래스, 사용자 브라우저 설정을 덮어쓰는 요소는 포함하지 않음
  • 시맨틱 HTML을 전제로 의도를 해석하며 Firefox 84+, Chromium 88+, Edge 88+, Safari 10+를 지원하고 IE는 제외됨

주요 기능과 설계 범위

  • readable.css는 사이트 전체 디자인 시스템을 만드는 프레임워크가 아니라, 기본 HTML을 합리적이고 보기 좋게 만드는 CSS 프레임워크임
  • 라이트/다크 모드를 수동 또는 prefers-color-scheme으로 지원하고, 반응형 디자인과 세로 리듬을 제공함
  • 헤더, 푸터, 내비게이션 바, 이미지, 인용문, aside, 테이블, 버튼, 폼을 스타일링함
  • 텍스트 양쪽 정렬은 기본 비활성화 상태이며, serif, sans-serif, monospace 같은 네이티브 글꼴을 지원함
  • 화려한 애니메이션, 커스텀 글꼴, 유틸리티 클래스, 사용자 브라우저 설정을 덮어쓰는 요소는 의도적으로 제외함

사용법과 지원 범위

  • 최신 CSS 파일은 릴리스 페이지에서 다운로드해 사이트에 추가함 
    <link rel="stylesheet" type="text/css" href="/path/to/readable.css">
  • readable.css는 시맨틱 HTML 사용 방식에 따라 사이트 의도를 해석하므로, 스타일시트를 제대로 활용하려면 시맨틱 HTML을 올바르게 써야 함
  • 사용 가이드와 readable.css에 맞는 HTML 작성법은 위키에서 확인 가능함
  • Firefox 84+, Chromium 88+, Edge 88+, Safari 10+를 지원하며, IE는 지원하지 않음
  • Chromium, Firefox, Edge의 제한 요인은 :not()과 :is() 지원이고, Safari의 제한 요인은 CSS 변수 지원임
  • 소스 코드는 Codeberg에 있으며, 문서는 Docs에서 제공됨
  • readable.css와 사이트 코드는 0BSD 라이선스이며, 필수 저작자 표시 없이 원하는 용도로 사용할 수 있음
  • Freedom to Write는 글쓰기 산업을 위한 자유·오픈소스 소프트웨어 솔루션을 만들고 지원하는 운동임

함께 보면 좋은 글 β

▲
GN⁺   [-]
Lobste.rs 의견들

  • 기본 font-size를 건드리지 않은 점이 마음에 듦. 사용자는 브라우저 같은 사용자 에이전트에서 선호 크기를 설정할 수 있고 그래야 하며, 웹사이트는 그 설정을 존중해야 함
    12px 고정은 너무 작아서 싫고, 넓은 뷰포트에서 글자가 갑자기 커지는 것도 이미 편한 크기로 맞춰둔 상태라 원치 않음. 이런 일이 너무 흔하고 접근성을 크게 해침

    • 업무 프로젝트에서 Accept-Language 같은 표준을 지키자고 해도, 사용자가 앱 설정을 제대로 할 줄 모르니 우리가 대신 해줘야 한다는 논리로 자주 거절됨
      글꼴 크기에서도 비슷한 얘기가 나올 것 같음

  • PicoCSS나 MVP 같은 프레임워크를 늘 찾아보는데, 이건 출발점으로 쓰라고 만든 것 같아서 눈에 띔
    뭔가 쌓아 올리기 좋은 기반처럼 보이지만, 디자인을 더 잘 아는 사람들의 생각도 궁금함

  • html[data-font-family="serif"]로 CSS 변수를 바꾸는 방식은 별로 유용하지 않음. 그냥 <html style="font-family:serif">를 쓰게 하는 편이 템플릿이나 클라이언트 스크립트 양쪽에서 거의 비슷하게 쉽고, 더 짧고 덜 복잡함
    지금 방식은 <html data-font-family="some-webfont, serif">처럼 쓸 수 있다고 착각하게 만들 수 있지만 실제로는 동작하지 않음. 문서 전체 글꼴로 monospace를 쓰는 것도 가독성에 안 맞는 스타일 선택이고, “readable.css”라는 이름과도 어울리지 않음. 다만 단일 일반 글꼴군으로 제한한 절제는 좋음
    --line-width와 --line-height도 이름이 헷갈림. 하나의 “line”은 요소 사이의 선이고, 다른 하나는 텍스트 행을 뜻함
    색상 테마 쪽은 (prefers-color-scheme)과 (prefers-contrast), [data-theme], [data-high-contrast] 조합이 엉켜 있고 일부 값과 상호작용이 문서화되어 있지 않음. @media (prefers-contrast: more) and (prefers-color-scheme: dark) 조합은 <html data-*> 오버라이드가 없을 때 #fff 배경에 #000을 줘서 명백히 깨짐. color-scheme: dark와 color-scheme: light 선언도 필요함
    a { color: inherit; }에서 더 볼 마음이 없어짐. 세로 리듬 주장까지 갈 것도 없이, 링크 색을 상속시키고 내비게이션에서 밑줄까지 없애면 많은 사용자가 링크가 있다는 사실을 알아차리지 못함. 링크는 파란색이나 적어도 채도 있는 강조색으로 두고, 밑줄도 유지해야 함. 이름이 readable.css라서 더 실망스러움

    • 가독성은 수십 년 전부터 연구되어 꽤 잘 이해된 영역인데, 의외로 잘 모르는 사람이 많음. 특히 자주 잘못 다루는 건 행 길이와 글꼴 선택이고, 그 밖에도 글자 크기, 줄 간격, 대비 같은 요소가 많음
      행 길이는 대부분의 사람이 편하게 읽을 수 있는 최소·최대 범위가 있고 대략 한 줄 50~70자임. 이 Stack Exchange 스레드에 괜찮은 답변들이 있고, 접근성과도 가까워서 W3C WCAG도 시각 표현 항목에서 “너비는 80자 또는 글리프 이하(CJK는 40 이하)”라고 말함
      글꼴은 일반적으로 산세리프가 가장 넓은 범위의 화면에서 읽기 쉽고, 최신 고해상도 화면에서는 세리프도 대체로 비슷하게 평가됨. 고정폭 글꼴은 대부분의 사람에게 판독성을 낮추므로 본문에는 드물게만 좋은 선택이 됨. 예외는 터미널·코드 편집기에 익숙한 사람이나, 때때로 고정폭 글꼴을 더 쉽게 읽는 난독증 사용자일 수 있음. 의심스러우면 재미는 없지만 Arial이 가장 안전한 선택이고, 고정폭 글꼴 관련 자료로 Stack Exchange thread on monospaced fonts가 있음
      추가로 미국 정부의 typography page, BBC GEL의 typography section, Google Material Design의 typography section, 깊게 파고들기 좋은 Butterick's Practical Typography, The Elements of Typographic Style Applied to the Web도 참고할 만함

  • 솔직히 기본 글자 크기가 너무 작고 읽기 어려움. 왜 이런 크기를 택하는지 모르겠고, 내게는 접근성도 가독성도 좋지 않음

    • 웹 플랫폼의 두 가지 문제에서 비롯됨. 브라우저가 제공하는 글꼴과 크기를 따르는 건 명시한 사용자 선호를 존중한다는 점에서 좋지만, 실제로는 선호를 명시적으로 설정하는 사용자가 매우 적고, 많은 기본 구성에서 브라우저 업체가 역사적으로 굳어진 기본값을 바꾸지 않아 결과 글자 크기가 가독성 하한에 가까울 만큼 작음
      더 나쁜 건 font-size가 글꼴마다 안정적인 절대 의미를 갖지 않는다는 점임. font-size: 16px도 특정 글꼴에 따라 꽤 다르게 보일 수 있음. Safari에서 기본 sans와 sans-serif가 이렇게 다르게 보임: https://github.com/user-attachments/assets/…. 이 댓글 안에서도 monospace 글꼴 크기가 나머지와 맞지 않는 걸 볼 수 있음
      결국 제대로 고치기 어렵고, 어딘가는 깨지게 되며 웹마스터가 어떤 절충을 선호하느냐의 문제로 남음. 개인적으로는 읽기 모드를 쓸 수 있으면 웹사이트 디자인에 별로 신경 쓰지 않게 됨. 다만 font-size의 불명확성에는 요즘 쓸 만한 해결책이 있음: https://matklad.github.io/2025/07/16/font-size-adjust.html
    • 이상한 140ppi 모니터를 쓰는데, 적용해야 할 것 같은 125% 배율에서는 보기 안 좋아서 100%로 두고 기본 확대율을 조절해 읽을 수 있게 만듦
      이 사이트가 그 확대율을 우회한 건가 싶을 정도로 글자가 너무 작았음. Firefox 최소 글꼴 크기 설정을 또 한 단계 올리게 됨
답변달기