Tufte CSS 버전 비교 및 참고 자료 #

개요 #

이 사이트는 Hugo Tufte 테마를 사용하며, 반응형 디자인 개선을 위해 Jekyll Tufte 테마의 font-size 접근 방식을 채택했습니다.

버전별 차이점 #

1. 원본 Tufte CSS (Edward Tufte) #

• 저장소: https://github.com/edwardtufte/tufte-css
• 라이브 데모: https://edwardtufte.github.io/tufte-css/
• CSS 파일: https://edwardtufte.github.io/tufte-css/tufte.css
• 작성 시기: 2015년경

font-size 설정:

html {
    font-size: 15px;
}

특징:

• 고정 크기, 반응형 없음
• 데스크톱 우선 설계
• 원본 Edward Tufte의 출판물 스타일 충실 재현

2. Jekyll Tufte 테마 (clayh53) #

• 저장소: https://github.com/clayh53/tufte-jekyll
• 라이브 데모: https://clayh53.github.io/tufte-jekyll/
• CSS 파일: https://clayh53.github.io/tufte-jekyll/css/tufte.css

font-size 설정:

html { font-size: 11px; }

@media screen and (min-width: 800px)  { html { font-size: 12px; } }
@media screen and (min-width: 900px)  { html { font-size: 13px; } }
@media screen and (min-width: 1000px) { html { font-size: 14px; } }
@media screen and (min-width: 1100px) { html { font-size: 15px; } }
@media screen and (min-width: 1200px) { html { font-size: 16px; } }
@media screen and (min-width: 1300px) { html { font-size: 17px; } }

특징:

• Mobile-first 반응형 디자인
• 화면 크기에 따라 11px → 17px 점진적 증가
• 모던 웹 표준 준수
• 모든 rem 단위가 자동으로 비율 조정

3. Hugo Tufte 테마 (현재 사용) #

• 저장소: https://github.com/slashformotion/hugo-tufte (추정)
• 적용 상태: Jekyll 방식 적용 (2025-10-10)

초기 상태: 원본 Tufte CSS와 동일 (15px 고정) 개선 후: Jekyll 방식 채택 (11px → 17px 반응형)

적용 이유 #

1. UX 개선: 화면 크기에 맞는 적절한 글씨 크기
2. 가독성: 모바일에서는 작게, 데스크톱에서는 크게
3. 시각적 밀도: 화면 크기와 관계없이 일관된 읽기 경험
4. 표준 준수: 모던 반응형 웹 디자인 원칙

참고 문헌 #

• Edward Tufte, “The Visual Display of Quantitative Information” (1983)
• Tufte CSS: https://edwardtufte.github.io/tufte-css/
• Responsive Typography Best Practices (2020s)

변경 이력 #

• 2025-10-10: Jekyll 방식 반응형 font-size 적용
• 상세 내용: /log/2025-10-10-tufte-responsive-font/