웹상의 타이포그래피에 대한 표준 비율은 무엇입니까?


25

웹 디자인을 배치 할 때 종종 타이포그래피가 비례적이고 일관성이 있는지 확인하려고합니다. 그러나 어떤 비율과 크기를 사용해야하는지에 대한 결정적인 기사 나 자료를 찾을 수 없었습니다. 특히 다음에 권장되는 표준 관행은 무엇입니까?

  • 폰트 크기
  • 선 높이
  • 선폭
  • 줄 간격

답변에서 단락과 머리글 텍스트를 모두 고려하십시오. 또한 다양한 비율 또는 메트릭의 효과에 대한 연구는 매우 유용합니다.

답변:


18

Robert Bringhurst의 인쇄 스타일 요소는 이와 같은 것들에 대한 철저하고 훌륭한 참고 자료입니다. 길지만 매우 귀중합니다.

많은 디자이너들이 표준 그리드 라인을 권장하므로 라인 + 패딩은 항상 16 픽셀 안에 들어갑니다. 그보다 작은 것은 선 높이가 16이고, 그 위의 모든 선 높이는 32입니다.

텍스트를 읽기위한 이상적인 줄 길이는 45 자, 다른 소스는 55-75 자입니다.

여기에는 일반적인 웹 사이트 평균이 있습니다 : 활판 인쇄 디자인 패턴 및 모범 사례


1

16px에서 단락으로 시작하고 피보나치 시퀀스를 사용하여 나머지를 계산한다고 말하고 싶습니다. 주요 브라우저가이 논리를 사용하고있는 것 같습니다. 수년에 걸쳐 (Robert Bringhurst, Hartley and Marks의“Typographic Style : Version 4.0”을 사용하여 향후 연구를 위해) 10pt 글꼴의 경우 12pt로 설정되었습니다.

12pt를 픽셀로 변환하면 기본 글꼴은 16px입니다.

대부분의 브라우저 기본 스타일 시트는 DOM에서 직접 검사하거나 https://www.w3.org/TR/CSS21/sample.htmlhttp : // lists를 읽을 수 있으므로 단락 텍스트에 16 픽셀을 사용 합니다. w3.org/Archives/Public/www-style/2008Jul/att-0124/defaultstyles.html

오늘날 우리가 겪고있는 문제는 정확하게 새로운 종류의 타이포그래피에 대해 이야기하고 있다는 것입니다. 다른 장치에 적합해야하는 현재 웹 타이포그래피는 Robert Bringhurst의 타이포그래피 스타일 요소에 묘사 된 것과 같은 과거의 개념과 완전히 다릅니다. 이것은 훌륭한 책임에도 불구하고 현실은 현대 디자이너가 코드를 필요로한다는 것입니다. 나는 일반적으로 기본 h1, h2, h3, h4, h5, h6, 단락, 바닥 글이있는 HTML 파일의 골격을 만들어 주요 브라우저 스타일 시트의 표준 행렬을 고려합니다. 브라우저 스타일 시트를 검사하여 제목의 행 높이 및 계층 구조를 사용하는 표준 픽셀 크기의 크기를 이해합니다. 웹 타이포그래피 크기가 금속 / 목재 이동 가능 유형에 의해 규제되기 전에 1985 년부터는 Adobe와 Apple의 계약이 바뀌기 시작했습니다. 오늘 타이포그래피 개념의 주요 규제 기관은 Apple, Safari, Windows, Internet Explorer, Chrome, Firefox 등입니다. 타이포그래피를 실제로 렌더링하고 렌더링 할 내용에 맞게 브라우저 스타일 시트를 살펴 봐야합니다. 다른 장치. 당신은 여전히 ​​훌륭한 책인 Robert Bringhurst의 타이포 그래픽 스타일 요소의 관행을 따르거나 피보나치 시퀀스 시스템을 따라야합니다. 나는 일반적으로 브라우저 스타일 시트의 변경 사항을 최신 상태로 유지하고 여기에서 w3 사양을 읽습니다. 당신은 여전히 ​​훌륭한 책인 Robert Bringhurst의 타이포 그래픽 스타일 요소의 관행을 따르거나 피보나치 시퀀스 시스템을 따라야합니다. 나는 일반적으로 브라우저 스타일 시트의 변경 사항을 최신 상태로 유지하고 여기에서 w3 사양을 읽습니다. 당신은 여전히 ​​훌륭한 책인 Robert Bringhurst의 타이포 그래픽 스타일 요소의 관행을 따르거나 피보나치 시퀀스 시스템을 따라야합니다. 나는 일반적으로 브라우저 스타일 시트의 변경 사항을 최신 상태로 유지하고 여기에서 w3 사양을 읽습니다.https://www.w3.org/TR/html401/struct/global.html#h-7.5.5 그래도 디자인 필드는이를 고려해야하며 연습에 대한 교육이 업데이트되지 않았다는 것을 알았습니다. 현재 현실. 내 블로그에서 더 많은 내용을 읽을 수도 있습니다 : https://road-to-resilience.blog/2019/11/21/the-typographic-thing/


@EstelaG 님 안녕하세요. GD.SE에 오신 것을 환영합니다! 우리는 링크에 스팸 및 답변에 대한 엄격한 규칙이 있습니다. 나는 당신의 대답이 표시되는 것을 싫어합니다. 기사의 요점을 요약하기 위해 질문을 편집해야합니다.
호기심
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.