효과적인 타이포그래피 계층 구조를 구성하는 방법

디자인 내에서 콘텐츠를 효과적으로 구성하여 이해하고 소비하기 쉽도록 하는 것은 디자이너의 가장 중요한 작업 중 하나입니다. 그리고 디자이너가 작업하는 대부분의 콘텐츠는 텍스트 기반이므로 효과적인 타이포그래피 계층 구조를 만드는 것은 디자이너가 배울 수 있는 가장 중요한 것 중 하나입니다.

효과적인 계층 구조 생성을 연습하고 실험하는 것이 기술을 실제로 마스터하는 가장 좋은 방법이지만 디자이너가 스스로 설정하기 전에 먼저 배워야 하는 지침이 많이 있습니다. 결국 규칙이 무엇인지 먼저 알지 않고는 규칙을 효과적으로 어기는 것이 불가능합니다.

타이포그래피 계층이란 무엇입니까?

초보 디자이너는 때때로 타이포그래피의 계층 구조를 사용해야 할 필요성을 과소평가합니다. 그러나 이 예를 보십시오.

양쪽에 같은 정보가 전달되고 있지만 왼쪽에는 헤더, 서브헤더, 본문이 있는지 구분이 불가능합니다. 오른쪽에서 제공되는 정보에 계층 구조가 있음을 즉시 알 수 있습니다.

타이포그래피 계층 구조는 독자에게 어떤 정보에 초점을 맞춰야 하는지 보여줍니다. 어떤 정보가 가장 중요하고 단순히 주요 요점을 지원하는지 보여줍니다.

웹에는 타이포그래피 계층 구조를 구성하는 다양한 것들이 있습니다. 여기에는 다음이 포함됩니다.

크기. 크기는 일반적으로 새로운 디자이너가 타이포그래피 계층 구조를 만들려고 할 때 가장 먼저 확인하는 것입니다. 그리고 정당한 이유가 있습니다. 독자가 즉각적이고 쉽게 식별할 수 있습니다. 더 큰 = 더 중요, 더 작은 = 덜 중요합니다. 그러나 계층 구조를 만드는 다른 옵션이 너무 많으면 크기가 버팀목이 될 수 있습니다.

무게. 서체를 더 굵게 또는 더 얇게 만드는 것은 비 디자이너도 쉽게 식별할 수 있는 계층 구조를 만드는 또 다른 쉽게 인식할 수 있는 방법입니다.

색깔. 색상은 종종 계층 구조를 만드는 방법으로 간과되지만 환상적인 옵션입니다. 주어진 색상의 더 밝고 어두운 음영을 사용하더라도 더 뚜렷한 계층 구조를 만들 수 있습니다. 유형과 배경 간의 대비를 더 많이 만들면 인쇄상의 계층 구조에 추가될 수도 있습니다.

차이. 대비되는 색상 외에도 다양한 유형의 크기, 두께 및 스타일 간의 대비도 인쇄상의 계층 구조를 만드는 데 중요합니다. 유형 크기가 1~2점 차이만 있어도 대부분의 사용자에게 계층 구조를 명확하게 표시할 만큼 충분한 대비가 생성되지 않습니다. 대신 디자이너는 쉽게 구별할 수 있는 크기, 무게 및 스타일을 사용하여 머리글이나 본문 텍스트와 같은 항목 간의 대비를 쉽게 만들어야 합니다.

사례. 본문 텍스트를 대문자로 사용하는 것은 일반적으로 가독성 측면에서 좋은 생각이 아니지만 제목이나 부제목에 대문자를 사용하면 다른 제목이나 다른 유형을 구별하는 데 도움이 될 수 있습니다.

위치 및 정렬. 디자이너가 눈에 띄고 싶어하는 다른 유형과 함께 표제 및 부제목의 위치는 유형이 계층 구조 내에서 어디에 속하는지에 많은 영향을 미칠 수 있습니다. 예를 들어 센터링 유형은 눈에 띄게 만드는 경향이 있습니다. 페이지의 일반 여백 외부에 유형을 설정하면 해당 유형이 페이지 계층 구조 내에서 눈에 띄게 만들 수도 있습니다.

타이포그래피 계층을 만드는 방법(디자인을 시각적으로 구성하는 방법)

디자이너는 타이포그래피 계층 구조를 생성할 때 많은 옵션을 사용할 수 있습니다. 그러나 계층 구조를 만드는 데 필요한 사항을 아는 것만으로는 디자이너가 효과적인 계층 구조를 만드는 데 반드시 도움이 되지는 않습니다.

가장 먼저 고려해야 할 사항 중 하나는 설계에 몇 개의 계층 구조 수준이 있어야 하는지입니다. 일반적으로 모든 디자인에는 표제, 부제목, 본문의 세 가지 계층 구조가 포함되어야 합니다. 거기에서 필요할 수 있는 추가 수준을 고려하는 것은 디자이너의 몫입니다. 여기에는 캡션, 추가 부제목, 인용문 및 메타 정보(예: 기사의 작성자 또는 날짜)가 포함될 수 있습니다.

여기에서 계층 구조의 여러 부분을 구별하는 방법을 파악하는 것이 중요합니다. 당연하겠지만 소제목보다 헤딩이 더 눈에 띄어야 하고 본문보다 더 눈에 띄어야 합니다. 캡션은 일반적으로 본문보다 덜 눈에 띄어야 하며 인용문은 본문과 부제목 사이에 있어야 합니다.

유형 크기

디자이너가 시작하는 데 도움이 되도록 전통적인 활자체 척도가 존재합니다. 그러나 이것은 시작점일 뿐이며 디자이너는 이러한 전통적인 척도에서 벗어나 다양한 무게와 스타일을 자유롭게 실험해야 합니다. 대부분은 본문 텍스트의 크기에 따라 크기를 조정하고 거기에서 확장합니다.

Elements of Typographic Style 의 고전적인 타이포그래피 스케일은 글꼴 크기를 선택할 때 대부분의 워드 프로세싱 프로그램이 제공하는 기본값인 경향이 있기 때문에 대부분의 디자이너에게 친숙합니다. 규모는 다음과 같습니다.

6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 30, 36, 48, 60, 72입니다.

증가하는 크기를 계산하기 위한 다양한 수학적 방정식을 따르는 추가적인 인쇄상의 척도 예가 있습니다.

디자이너는 기본적으로 12포인트 본문 텍스트 크기를 사용하는 경향이 있지만, 이를 14 또는 16(또는 최대 24)으로 늘리면 사용 중인 서체에 따라 가독성이 향상될 수 있습니다. 예를 들어, Jeffrey Zeldman의 개인 웹사이트는 본문에 24px 글꼴 크기를 사용하는 반면 Vogue.com은 19px 본문 텍스트 크기를 사용합니다.

그러나 실제 크기를 완성하기 전에 디자이너는 디자인에 사용되는 서체가 완성되었는지 확인해야 합니다. 서로 다른 서체는 기술적으로 "동일한" 크기일지라도 훨씬 더 크거나 작게 나타날 수 있습니다.

조화로운 서체 선택하기

더 아마추어적인 노력과 종종 "전문적인" 디자인을 구별하는 것은 서체의 조합입니다. 서체를 효과적으로 결합하는 것은 본능과 과학의 일부이지만 디자이너가 다른 제품군의 서체를 결합하기 위해 따를 수 있는 몇 가지 지침이 있습니다.

첫째, 세리프체와 산세리프체를 혼합하는 것이 두 개의 세리프체 또는 두 개의 산세리프체를 결합하는 것보다 훨씬 쉽습니다. 그러나 세리프체와 산세리프체를 하나의 디자인에 함께 던지는 것만큼 간단하지 않습니다.

서체가 사용될 컨텍스트를 고려하십시오. 예를 들어, 디자인이 가볍고 재미있어야 한다면 서체가 그 분위기에 맞는지 확인하십시오. 디자인이 더 진지하다면 서체에 이를 반영해야 합니다. 즉, 어떤 서체를 조합하든 분위기가 맞아야 합니다.

디자이너는 자신의 장점과 대조를 사용해야 합니다. 얇은 서체와 두꺼운 서체를 결합하는 것이 무게가 매우 유사한 두 서체를 결합하는 것보다 더 잘 작동하는 경우가 많습니다.

비슷한 x 높이의 서체를 찾으십시오(서체에서 기준선과 소문자의 평균 선 사이의 거리). 이는 서체 간의 충돌을 방지하는 데 도움이 됩니다. 충돌을 방지하는 데 도움이 되는 다른 요소로는 유사한 커닝 및 문자 모양이 있습니다. 매우 둥근 서체의 서체는 더 많은 정사각형 서체와 결합되어서는 안 됩니다.

지침은 서체 조합을 만드는 데 도움이 될 수 있지만 실험과 연습을 대체할 수 있는 것은 없습니다. 디자이너는 서체를 실험하는 데 시간을 할애하고 가능한 한 자주 서체를 결합하는 연습을 해야 합니다. 다양한 상황에서 작동할 수 있는 몇 가지 대체 서체 조합을 찾는 것도 사용 가능한 예산과 리소스가 시행착오를 허용하지 않는 프로젝트에 유용합니다.

이러한 지침을 통해 디자이너는 웹 타이포그래피 소스 Better Web Type이 효과적인 조합을 만들기 위해 설정한 4단계 프로세스를 따를 수 있습니다.

1. 본문 텍스트의 앵커 글꼴 찾기
2. 가능한 조합에 대한 몇 가지 보조 글꼴 찾기
3. 조합 평가
4. 글꼴 조합 제거/선택

추가 고려 사항

최종 서체를 선택한 후 다양한 스타일과 두께로 실험하면 초대형 메인 제목을 만들지 않고도 계층 구조의 추가 수준을 만들 수 있습니다. 서체를 거의 같은 크기로 유지하되 더 중요한 제목은 굵게 만들고 덜 중요한 제목은 기울임꼴로 지정하면 명확한 시각적 계층 구조가 만들어집니다.

색상도 마찬가지입니다. 강조 색상의 부제목은 본문과 같은 색상의 부제목보다 더 눈에 띕니다. 디자이너는 글자 크기에만 의존하지 않고 더 중요한 텍스트를 구분하기 위해 부제목의 색상을 사용해야만 합니다.

간격을 사용하여 중요한 제목과 부제목을 구분할 수도 있습니다. 제목 주위에 더 많은 공간을 만들어 수반되는 본문 텍스트에서 눈에 띄도록 하면 제목이 더욱 두드러집니다. 대조적으로, 본문 텍스트와 같은 간격을 갖는 부제목은 덜 중요합니다.

문자 사이의 간격도 계층 구조를 만드는 데 사용할 수 있습니다. 문자 간격을 지정하면 특정 행을 더 두드러지게 만들 수 있습니다. 이는 해당 문자를 대문자로 사용할 때 특히 효과적입니다. 그러나 디자이너는 이를 과도하게 사용하지 않으면 아마추어처럼 보일 수 있으므로 이를 과도하게 사용하지 않도록 주의해야 합니다.

결론

실험과 연습은 타이포그래피 계층 구조를 마스터하는 가장 좋은 방법이지만 이러한 지침을 배우면 디자이너가 올바른 발판에서 시작하는 데 도움이 됩니다. 크기, 색상, 간격, 무게 및 기타 요소가 효과적인 계층 구조에 기여하는 방법을 배우는 것이 첫 번째 단계입니다.

이러한 기본 사항이 디자이너의 마음(및 실습)에 설정되면 사용자에게 영감을 주고 유쾌한 고유한 디자인을 만들기 위해 필요에 따라 "규칙"을 따르거나 깨는 시각적 계층을 보다 직관적으로 만들 수 있습니다.

• • •

Toptal Design 블로그에 대한 추가 정보:

• 가독성을 위한 디자인 – 웹 타이포그래피 가이드(인포그래픽 포함)
• 서체 분류의 뉘앙스 이해하기
• 디자인 기초 – 시각적 계층 구조 가이드(인포그래픽 포함)
• 웹 및 인쇄 디자인을 위한 서체 스타일
• 명확한 시각적 계층 구조로 UX 향상