활자체 계층 구조 개선을위한 9 가지 팁
모든 프로젝트에는 텍스트 요소에 대한 시스템 및 계층 구조가 필요합니다. 헤드 라인, 본문, 탐색 요소, 법률 정보, 캡션 등 디자인 전반에 걸쳐 사용되는 모든 작은 텍스트를 생각해보십시오.
그러나 모든 텍스트 요소가 다음 텍스트로 매끄럽게 흐를 수 있도록 해당 계층 구조를 어떻게 작성합니까? 오늘은 거의 모든 디자인 프로젝트에 사용할 수있는 타이포그래피 계층 시스템을 구축하는 과정을 단계별로 안내합니다. (그리고 우리는 팁을 멋진 타이포그래피의 아름다운 예와 결합하여 약간의 영감을 얻는 데 도움을줍니다.)
Envato Elements 살펴보기
1. 편안한 바디 카피로 시작
멋진 헤드 라인 치료로 시작하고 싶을 수도 있지만 실제로 시작해야 할 곳은 실제로 중간입니다. 먼저 본문에 편안한 서체, 크기 및 간격을 설정하십시오.
이것은 디자인에서 대부분의 텍스트이기 때문에 의미가 있습니다. 웹 사이트 또는 브로셔를 구축하든이 개념은 동일합니다. Baymard Institute에 따르면 본문 복사의 이상적인 가독성은 한 줄 (또는 열) 당 50 자에서 60 자 사이입니다. 이 지침은 읽을 수 있고 다양한 종류의 서체 (예 : 일반 대 압축 대 슬래브)를 설명하는 텍스트의 배율을 설정하는 데 도움이됩니다.
2. 스케일 구축
본문 사본의 모양을 알고 나면 디자인의 다른 모든 텍스트 요소에 대해 눈금을 설정할 수 있습니다. 특정 텍스트 블록을 간과하기 쉽습니다. 프로젝트에서 텍스트의 각기 다른 사용법 목록을 작성하십시오.
- 본문
- 헤드 라인
- 소제목
- 캡션
- 따옴표
- 탐색 요소
- 바닥 글 정보
- 법적 사본 또는 면책
이제 이러한 각 요소의 서체, 크기 범위 및 사용법을 지시하는 축척을 만듭니다. 작업 문서 용 웹 사이트 또는 스타일 파일의 경우 CSS로 빌드하십시오. 배율을 만드는 방법에는 여러 가지가 있지만 크기의 백분율은 좋은 출발점이 될 수 있습니다. 기준 그리드 뒤 또는 시각적으로 수학을 기반으로 스케일을 설정할 수도 있습니다.
시작하는 간단한 스케일은 다음과 같습니다.
- 본문 사본 크기
- 헤드 라인은 본문 사본 크기의 220 %
- 소제목은 본문 사본 크기에 150 % 곱하기
- 탐색 요소는 본문 사본 크기의 80 %입니다.
- 바닥 글 / 법적 사본의 크기는 80 %입니다.
3. 가장 큰 것부터 가장 작은 것까지
이 규칙은 매우 간단합니다. 가장 크고 가장 중요한 텍스트가 맨 위에 표시되고 페이지 나 화면을 읽을 때 크기가 줄어 듭니다.
그렇다고해서 항상이 규칙을 어길 수는 없다고해서 디자인상의 세밀한 부분이 있지만 항상 활판 인쇄 계층을 개발하기위한 출발점이되어야합니다. (제목을 위해 웹 페이지 끝으로 스크롤 한 다음 맨 위로 돌아가서 읽기를 시작하는 사람은 누구입니까?)
4. 우주 규칙
글자 크기만큼이나 그 사이의 간격이 중요합니다. 공간을 결정하는 요소로는 선행 (또는 라인 높이), 들여 쓰기 (또는 들여 쓰기), 랩 및 거터 및 정렬이 있습니다.
텍스트 크기 조정에 사용되는 배율을 반영하는 간격 비율을 고려하십시오. 캔버스의 크기도 여기에서 매우 중요합니다. 큰 캔버스는 작은 캔버스보다 좁은 간격으로 읽을 수 있습니다. (따라서 많은 프로젝트가 휴대폰과 같은 장치의 간격 사양이 훨씬 느슨하고 데스크탑의 규칙이 더 엄격한 이유입니다.)
서체 크기와 마찬가지로 전체 디자인 프레임 워크에 대해 간격 규칙을 미리 설정해야합니다. 일관되고 깨끗한 간격은 디자인을 만들거나 끊을 수있는 작은 것 중 하나입니다.
5. 굵게 및 기울임 꼴 규칙 설정
굵은 기울임 꼴과 기울임 꼴은 다른 유형 요소 나 크기가 아니지만 사용법이 중요합니다. (다른 모든 단어가 굵은 글씨로 표시 될 경우 디자인이 어떻게 보이는지 이미지로 나타내십시오.)
이것은 대담하고 이탤릭체에 대한 지침을 특히 중요하게 만듭니다. 크기 나 공간을 보지 않고 고려하는 것이 훨씬 문맥 적입니다. 사용 사양에는 너무 많은 단어 나 구 (또는 특정 단어 나 구) 만이 처리를 할 수 있다고 명시되어있을 수 있습니다. 대담하고 이탤릭체를 과도하게 사용하는 것은 흔한 실수입니다. 의심 스러우면 사용하지 마십시오.
6.“Z”생성
일반적인 읽기 패턴은 Z 모양입니다. 왼쪽에서 오른쪽으로 또는 오른쪽에서 왼쪽으로 읽는 언어를 디자인 할 때 (Z 플립) 사용자는 한 모서리에서 한 줄에서 끝까지 읽고 다시 읽습니다. 반복되는 패턴으로 시작 코너와 선을 가로지 릅니다.
화면에 텍스트 요소를 배치 할 때이 자연스러운 흐름을 사용하십시오. 이 Z 모양은 대부분의 브랜드가 로고를 왼쪽 상단에 배치하는 이유입니다. 읽을 때 눈이 가장 먼저 닿는 지점입니다.
7. 시각적 무게를 고려하십시오
화면에서 텍스트 요소의 크기가 커질 때 크기가 유일한 요소는 아닙니다. 시각적 무게도 중요하며 활판 인쇄 배율을 만드는 방식에 영향을 줄 수 있습니다.
다음과 같은 경우 서체가 더 크게 보입니다.
- 그들은 두꺼운 스트로크 가중치를 포함
- 그것은 번창이나 장식을 포함합니다
- 그들은 넓다
- 그들은 참신 기본 서체입니다
- 그들은 키가 더 큰 x 높이를 가지고 있습니다
- 그들은 모든 모자로 사용됩니다
다음과 같은 경우 서체가 작게 보입니다.
- 그들은 응축
- 가볍거나 얇은 스트로크 폭을 포함
- 배경과의 대비가 거의 없습니다
- 소문자와 함께 사용됩니다.
8. 악센트 만들기
일반 활판 인쇄 비율을 약간 벗어난 강조 표시하려는 단어가 있습니다. 글자에 악센트를 추가하면 실제 크기 나 서체를 조정하지 않고도 눈에 띄게 만들 수 있습니다.
일반적인 악센트는 다음과 같습니다.
- 색깔
- 밑줄
- 가장 밝은 부분
- 버튼 또는 모양의 텍스트
- 간단한 애니메이션
- 동일한 크기의 다른 유형의 경우 변경
유형 계층 구조 내의 악센트에 대한 좋은 점은 즉각적인 관심을 끌기 때문입니다. 이러한 요소는 디자인에서 가장 큰 영향을 주거나 핵심 요소를 위해 드물게 사용해야합니다.
9.“눈 테스트”사용
마지막으로 모든 규칙에는 예외가 있습니다. 그곳에서“시력 검사”가 시작됩니다. 화면의 눈금을 보면됩니다. 텍스트는 어떻게 생겼습니까? 논리적 흐름이 있습니까? 읽기 쉬운가요?
어떤 식 으로든 느낌이 들지 않으면 스케일 조정을 고려하십시오. 사용하는 서체와 디자인의 다른 요소 (그림부터 색상까지)에 따라 스케일을 조정해야합니다. 무엇을하고 싶은지 확실하지 않은 경우에만 시작점입니다.
그리고 다른 눈도 요청하십시오. 서로 다른 계층 구조로 하나 또는 두 개의 버전을 만들어 어떤 버전이 가장 적합한 지 확인하십시오. 디자인은 시각 예술이며, “시력 검사”를 부정확하지만 상당히 신뢰할 수있는 옵션으로 만듭니다.
결론
프로젝트의 인쇄 체계 계층을 설정 한 후에는 문서를 작성하는 것이 가장 좋습니다. 웹 사이트 용 CSS를 사용하여 스케일을 설정하거나 인쇄 된 프로젝트에서 작업 할 때 스타일 파일을 작성하십시오.
더 큰 규모의 디자인 또는 브랜딩을 위해 스타일 가이드에 규모와 사양을 서면으로 기입하십시오. 유형 계층 구조를 작성하려면 백엔드에 대한 약간의 작업이 필요하지만 후속 프로젝트를 진행함에 따라 프로젝트 완료가 더 빠르고 쉽고 일관되게 언급되지 않습니다.
