기준선 그리드와 가독성


23

소금의 가치가있는 디자이너라면 그리드의 중요성에 대해 이야기 할 것입니다. 그러나 거래를 계속하면서 특히 기준선이 항상 실용적이지 않다는 것을 알았습니다.

예를 들어 글 머리 기호 목록이있는 많은 마케팅 시트를 사용합니다. 나의 첫 번째 성향은 모든 것을 고르게 배치하고 기준 그리드를 유지하는 것입니다.

기준선 그리드 간격이있는 정렬되지 않은 목록

그러나 많은 경우 총알이 항목을 분리하더라도 행과 목록 항목 사이의 간격이 점을 시각적으로 구분하기가 더 어렵다는 결론에 도달합니다. 그래서 우리는 다음과 같이 끝납니다 :

기준 그리드 간격이없는 비 순차 목록

각 목록 항목은 더 잘 구별되지만 이제 기준선 그리드가 사라지고 모든 것이 조금 더 지저분 해집니다.

더 작은 수준에서 다음은 또 다른 예입니다.

다른 간격 예

적절한 기준선 격자를 유지하면 두 줄짜리 제목이 별도의 것처럼 보이지만 간격을 수정하여 흐름에 해를 끼치도록 수정합니다 (일부 사람들에게 한 줄짜리 제목 만있는 경우).

케이크를 먹는 방법을 알지 못해서 여기서도 먹을 수있을 정도로 경험이 부족할 수도 있습니다. 그러나 이것이 다른 우선 순위를 다루기 위해 설계 규칙이 유연해야하는 시나리오 일 수 있다고 생각합니다.

그러나 나는 다음과 관계없이 물을 것이다. 어느 것이 더 중요한가-이런 상황에서 기준선을 유지하거나 가독성을 높이기 위해 격자를 손상 시키는가?


1
+1 기준선 그리드에서 이러한 문제가 발생하는 것이 일반적이지 않다고 생각했습니다. 내가 종종하는 일은 정상적인 선 간격보다 두 배 (또는 때로는 세 번) 기준선 격자를 사용하는 것입니다. 오프 그리드를 사용하여 더 단단한 리드가 필요한 경우 평소의 2/3에 맞추거나 첫 번째 줄을 정렬하십시오 절반 간격으로 그리드에 각 청크의 선을 배치하여 추악한 간격을 피하기에 충분한 유연성을 제공합니다. 그것은 때때로 내가하는 일이지만, 좋은 습관인지 아닌지는 전혀 모른다.
user56reinstatemonica8

1
선행을 동일하게 유지하고 (두 번째의 값을 사용합니다) 단락 간격을 추가하면 처음 두 그림에서 비슷하게 비교하기가 더 쉬울 것이라고 생각합니다.
e100

또한 단일 텍스트 상자에 대한 그리드의 엄격한 준수는 주장하기 어렵습니다. 그러나 인접한 열에 다른 격자 요소가있는 마케팅 시트에 대해 이야기하고 있습니다. 더 복잡한 문제입니다. 아마도 더 많은 페이지를 표시해야합니까?
e100

답변:


14

이 우선 순위 규칙을 명심하면 기준선 그리드 문제를 쉽게 해결할 수 있습니다. 그래픽 디자인의 유일한 목적은 커뮤니케이션을 용이하게하는 것입니다. 그것이 당신이 고용 한 것, 당신이 지불 한 것, 그리고 당신이해야 할 일입니다. 그리드 (또는 다른 디자인 요소)는 해당 목적을 달성 한 경우에만 유용합니다.

페이지의 정보는 시각적 계층 구조 (헤드 라인, 부제목, 본문 사본, 사이드 바)가 양호하고 적절하게 그룹화되어 있고 (함께 속해있는 것이 실제로 함께 있음) 적절하게 간격이 설정되어 있으면 접근하고 이해하기가 더 쉽습니다. 여백 및 기타 공백을 포함합니다.

레이아웃 그리드는 페이지에 순서를 가져오고 공백, 헤드 라인 및 텍스트와 같은 그림, 그래픽 요소가 페이지에 권한 또는 "올바른"느낌을 줄 수있는 순서대로 정렬되도록합니다. 여러 가지 방법이 있습니다. 그것들이 모두 균일 한 간격의 선과 열로 구성되는 것은 아닙니다.

DA01이 지적했듯이 기준선 그리드는 다중 열 레이아웃에서 잘 작동합니다. 매우 공식적이고 통제적이거나 외과 적으로 깨끗한 외모가 적절한 상황에서도 유용합니다. 책이나 다른 텍스트가 많은 출판물 외에는 덜 공식적인 모양이 필요합니다.

특히 타이포그래피에서 디자인 선택에 관해 질문 할 수있는 질문은 "이것이 의사 소통을 이해하기 쉽고, 더 쉽게 찾거나, 더 효과적으로 만들 수 있습니까?"입니다. 대답이 "아니오"이면 잘못된 것입니다.

글 머리 기호를 기준선 격자에 강제로 적용하면 텍스트의 가독성이 떨어집니다. 커뮤니케이션은 보스이므로 그리드에 고착하는 것이 잘못되었음을 즉시 알 수 있습니다. 주소 또는 글 머리 기호 텍스트와 같은 단일 정보 항목 도 페이지의 단일 시각적 항목이어야합니다 . 따라서 별도의 정보 항목이 페이지에서 분리되어야합니다.

따라서 더 나은 커뮤니케이션을 위해 그리드를 손상시키는 것이 좋은지 여부는 중요하지 않습니다. 그것은 당신 이 통신, 기간을 타협 해서는 안된다는 것입니다. 의사 소통하도록 설계하십시오. 원하는대로 디자인의 규칙과 기술을 사용하여 훌륭하게 커뮤니케이션하십시오. 그러나 규칙이나 기술이 의사 소통을 방해하지 않도록하십시오.


13

'기준선'아이디어는 특히 웹에서 남용되는 경향이 있습니다.

기준선 그리드는 실제로 여러 열 발행물에 사용됩니다. 아이디어는 모든 열에서 일관된 수평 '선'을 갖는 것입니다.

기본적으로 사용해야하지만 사용하지 않을시기도 알아야합니다.

글 머리 기호 목록 예제는 그리드를 깨뜨리는 것이 좋은 경우입니다. 그래도 그리드에 다소 고착되도록 물건을 조정할 수 있습니다.

예를 들어 12/14 유형이있을 수 있습니다. 그런 다음 글 머리 기호 7 사이에 공간을 만들 수 있습니다. 그래도 그리드에 반 (걸음) 씩 부착됩니다.


8

첫 번째 줄만 기준선 그리드에 정렬되는 목록에 단락 스타일을 사용하는 것이 좋습니다 . 이렇게하면 목록이 지저분하지 않고 글 머리 기호가있는 모든 줄은 여전히 ​​기준선 그리드에서 실행되어 전반적인 정렬 모양을 유지하면서 다음 줄의 간격은 다릅니다. 당신이 묘사 한 것과 비슷하게 보이지만 더 많은 요소들이 그리드에 정렬되어 있습니다.


5

더 작은 숫자와 세분을 관리하기 위해 기준선 그리드를 다시 계산할 수 있으므로 모든 간격이 일치하는 소수 단위로 증분 할 수 있습니다. 기준 그리드 유닛이 9pt이면 자연 분할이 3pt임을 의미합니다. 8pt로 설정된 텍스트에서 9pt 또는 12pt를 가질 수 있고, 12pt로 설정된 텍스트에서 15pt, 18pt의 라인 높이를 가질 수 있습니다. 관련 크기의 세트를 사용하면 라인 간격의 비율을 유지합니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.