대문자 텍스트 요소에 약간의 문자 간격을 사용하면 종종 이점을 얻을 수 있는 이유와 CSS를 사용하는 방법에 대해 알아보세요.
타이포그래피에서 텍스트 요소에 대문자/모두 대문자(대문자)를 사용할 때 일반적으로 글자 사이에 약간의 숨을 쉴 수 있는 공간을 추가해야 합니다. 그렇지 않으면 너무 조여서 편안하게 읽을 수 없습니다.
<블록 인용>문자 간격 추적이라고도 합니다. 동의어입니다. 둘 다 문자 그룹(단어) 사이의 간격을 나타냅니다. 통신에서 문자 간격이라는 용어는 웹에서 더 많이 사용되는 반면 추적은 인쇄 타이포그래피에서 더 많이 사용됩니다.
몇 가지 예를 살펴보겠습니다.
일반 대 대문자
다음 텍스트 요소, 일반 대소문자 및 모두 대문자/대문자를 비교합니다.
서체
서체
문제가 있습니까?
그렇지 않아도 괜찮습니다. 일반/기본 글꼴 두께를 사용할 때 문제가 되지 않는 경우가 많습니다. 서체 디자인과 사용 방식에 따라 다릅니다.
CSS에서 일반 font-weight는 font-weight: normal;을 사용하여 선언할 수 있습니다. 또는 font-weight: 400; — 동일합니다.
일반 대소문자 대 대문자(굵게)
이제 동일한 예를 비교하지만 이번에는 굵은 글꼴 두께를 추가합니다.
서체
서체
더 두꺼운 획(굵게)을 사용할 때 전체 대문자 텍스트가 얼마나 조밀하게 보이는지 보십니까? 이제 일부 글자가 서로 닿아 있음을 알 수 있습니다.
<블록 인용>
CSS에서 굵은 글꼴 두께는 font-weight: bold;를 사용하여 선언할 수 있습니다. . 숫자 값을 사용할 수도 있지만 선택한 글꼴 모음에서 사용할 수 있는 글꼴 두께 옵션의 수를 알고 있어야 합니다. 700 일반적으로 굵게 표시되지만 항상 그런 것은 아닙니다.
문자 간격(일명 추적)
이전의 대문자 텍스트 요소 예제를 복사하고 4px의 글자 간격을 지정하고 두 항목이 어떻게 비교되는지 살펴보겠습니다.
서체
서체
와우, 무슨 차이가! 첫 번째 예는 거의 밀실 공포증을 유발하는 반면, 두 번째 예는 그 반대의 효과를 나타냅니다.
<블록 인용>
CSS에서 문자 간격은 letter-spacing으로 선언됩니다. 속성, 예:letter-spacing: 4px; 하이픈을 사용하거나 사용하지 않고 철자할 수 있습니다(- ) 일반 언어로 사용되지만 CSS에서는 항상 with 하이픈.
내가 분명히 하자. 글자 간격이 추가된 두 번째 텍스트 요소 예제가 항상 더 나은 선택이라고 제안하는 것은 아닙니다. 특정 사용 사례에서 설정하려는 분위기/기분의 유형에 따라 다릅니다.
포스터에서 영화의 주제를 표현하고 강화하는 가장 강력한 도구 중 하나는 타이포그래피입니다. 숙련된 타이포그래퍼는 다음에 대해 신중하게 결정합니다.
- 서체/글꼴군
- 서체 분류(serif, sans-serif 등)
- 글꼴 크기
- 대소문자(대문자, 소문자 등)***
- 글꼴 두께(보통, 굵게 등)
- 글꼴 스타일(일반/일반/기울임꼴)
영화 포스터, 책 표지, 식품 라벨 등 어떤 작업을 하든, 타이포그래피 형식 결정은 당면한 작업의 컨텍스트를 기반으로 해야 합니다.
글자 간격은 하나일 뿐이지만 타이포그래피의 강력한 요소입니다.
잠재력
자유로움
차이가 느껴지시나요?
감정은 제쳐두고 다음을 고려하십시오. 일반적으로 대문자 텍스트는 이미 일반 케이스 텍스트보다 읽기가 더 어렵습니다. 이 대소문자 유형을 사용하여 문자가 얻는 대칭적이고 비례적인 구조로 인해 특히 문장이나 단락에서 단어의 개별 문자를 구별하기 어렵기 때문입니다.
요약:
- 독자 친화성을 위해 대문자를 적게 사용합니다. 제목이나 짧은 제목에는 적합하지만 전체 문장이나 단락에는 적합하지 않습니다.
- 일반적으로 대문자/모두 대문자로 된 텍스트는 텍스트를 이해하기 쉽게 하기 위해 글자 사이에 약간, 때로는 많은 간격을 두는 것이 좋습니다.
- 텍스트는 글자를 서로 붙인 것처럼 보이지 않을 때 더 미학적으로 보기 좋습니다. 비주얼이 중요합니다.
- 때로는 촘촘한 자간/문자 간격이 딱 맞습니다.
흑백이 아닙니다. 컨텍스트가 핵심입니다.