나는 최근에 웹 디자인에서 좋은 타이포그래피를 위해 좋은 수직 리듬의 중요성에 대한 기사를 읽었습니다. 나는 현재 작업중 인 웹 디자인 / 워드 프레스 테마의 배경 이미지로 아래 그림과 같은 960 그리드와 같은 기준 그리드를 사용하기로 결정했습니다.
그리드 내에 모든 것을 올바르게 정렬하는 것이 매우 어렵다는 것을 알게되었습니다. 기본 텍스트 크기 (16px)에서 세로 격자 선의 모든 것을 얻을 수 있었지만 제목 크기를 엉망으로 만들고 이미지를 추가하는 등 항목이 격자에 올바르게 정렬되지는 않습니다.
세로 리듬을 사용하여 타이포그래피를 개선하는 방법을 알고 싶습니다. 누구든지 사용해야 할 팁이나 기술이 있습니까?
답변:
웹 디자인의베이스 라인 그리드는 학업 퍼즐이 필요하지만 하드 코딩 된 수학 관점에서는 비실용적입니다. CSS에는 유형에 대한 기준선 개념이 없으므로 기준선을 맞추는 것은 기술적으로 불가능합니다.
간격에 가깝게 접근 할 수는 있지만 결국 숫자를 볼 때 의미가있는 것으로 보이지만 시각적으로 보이지 않을 수 있으며 수식에서 벗어나 제대로 표시되도록합니다.
요약하면 시각적 리듬이 중요하지만 웹에서 제대로 구현하는 데 도움이되는 몇 가지 방정식이 아닌 내장에서 리듬을 구축하십시오.
따로,베이스 라인 그리드의 개념은 인쇄 디자인의 세계, 특히 신문에서 열과 열을 기본 설정으로 정렬하려는 다중 열 레이아웃에서 비롯됩니다. 이러한 종류의 게시를 쉽게 조판 할 수 있도록 기준 그리드는 의미가 있으며 DTP 응용 프로그램의 세계에서 구현하기가 비교적 쉽습니다.
수직 리듬은 특히 CSS reset으로 시작하는 경우 구현하기 어렵지 않습니다 . 나는 얼마 전에이 링크 http://24ways.org/2006/compose-to-a-vertical-rhythm를 우연히 발견 한 후 모든 디자인 에서이 기술을 사용하고 있습니다.
내가 찾은 것은 CSS 파일 (h1-h6, p 등-특히 크기, 줄 높이, 아래쪽 여백)에서 "통조 된"유형 선언 세트로 작업 한 후 배포가 매우 쉽다는 것입니다.
여기에 이미지가 좀 더 명확 해졌습니다. 특히 vert 리듬을 처음 사용할 때의 배경 이미지입니다.
보기 어려울 수 있지만 배경 이미지로 반복하면 20x20 격자가 표시됩니다.
HTH
참고 :이 기술을 사용하지 않은 사이트보다 타이포그래피가 더 좋습니다. 그러나 두 경우 모두, "올바른"것으로 보이기 위해 "시스템을 속이는"요소가 항상있는 것 같습니다. 또한 전체 줄 높이 (12px 글꼴 기반의 경우 18px)에주의를 기울이면 이미지, 그래픽 헤더 등의 주변에 여백과 패딩을 설정하는 것이 매우 간단하다는 것을 알았습니다 (18px). 또한 ... 모든 것을 계산하려는 욕구가 사라집니다 ... 레이아웃에 대한 "수직 리듬"을 발견하고 매우 짧은 값 목록에서 올바른 패딩 / 여백 / 선 높이를 가져올 수 있습니다 당신의 머리에.
기준선 및 수직 리듬에 대한 Smashing Magazine의이 멋진 기사를 통해 웹 디자인에서 기준선의 중요성과 CSS에서이를 구현하는 방법에 대한 통찰력을 얻을 수 있습니다. 기본 html 요소에서 글꼴 크기, 줄 높이, 패딩 및 여백을 사용하여 모든 것을 기준선 그리드와 정렬합니다.
Dawson이 제안한 것처럼 모든 것을 그리드에 일치시키기 위해 배경 이미지가 매우 유용합니다.
나는 최근 몇 가지 디자인을 위해이 기술을 따르고 있으며 실제로 그 가치가 있다고 생각합니다.