웹사이트에서 타이포그래피가 중요한 이유

콘텐츠 마케팅은 좋아요, 구독, 리드 또는 판매의 형태로 신규 고객을 유치하고 고객을 유지하며 전환을 생성하는 핵심 전략입니다.

콘텐츠는 그 자체로 메시지로 존재할 수 있습니다. 우리 모두는 메시지가 어떤 글꼴로, 또는 어떻게 포장되어 있든 메시지가 변경되지 않는다고 생각하는 경향이 있기 때문입니다.

아니면 합니까?

메시지가 어떻게 만들어졌는지 생각해 봅시다. 언어적 및 의미론적 관점에서 주요 아이디어가 떠오른 다음 메시지를 구성하기 위해 단어를 신중하게 선택합니다. 효과적으로 의사소통하려면 청중을 알아야 하고 그들이 선택한 단어에 어떻게 반응할지 예상할 수 있어야 합니다.

이 단어는 나중에 이해되고 처리되고 소화되기 위해 읽어야 합니다. 그러나 청중이 읽게 하려면 적절하고 효과적인 방식으로 메시지를 전달해야 합니다.

프레젠테이션은 매우 중요합니다. 대부분의 사람들은 다이아몬드 반지가 구겨진 갈색 종이 봉지가 아니라 보석상이 보낸 상자 안에 들어 있을 거라고 예상할 것이며, 누구도 단지 하나를 찾기 위해 후자를 찾는 것을 귀찮게 여기지 않을 것입니다. 타이포그래피는 콘텐츠, 즉 청중에게 전달하려는 메시지를 제시하고 패키징하는 것입니다.

타이포그래피란?

타이포그래피는 단순히 텍스트가 문서에 배열되는 방식이거나 이 기사의 목적을 위해 웹 페이지에 표시되는 방식입니다. 특히 타이포그래피는 창의성과 혁신과 밀접하게 관련되어 있기 때문에 종종 예술로 간주됩니다. 타이포그래피는 주제 강조, 개성 정의, 아이디어 강조, 감정 표현, 관심 유발, 전반적인 디자인 미학 구축 등 다양한 목적을 수행합니다. 레이아웃과 콘텐츠의 교차점이며 모든 웹 사이트의 웹 디자인에서 없어서는 안될 부분입니다.

고려할 가치가 있는 타이포그래피 요소

타이포그래피는 글꼴 선택, 색상 팔레트, 크기, 선 길이, 레이아웃 및 디자인과의 통합을 포함하여 웹 디자인에 영향을 미치고 영향을 받는 여러 요소를 포함합니다. 타이포그래피를 효과적으로 사용하려면 이러한 모든 요소를 ​​숙지하는 것이 중요합니다.

1. 서체: 우리가 타이포그래피를 생각할 때 가장 먼저 떠오르는 것입니다. 어떤 사람들은 "글꼴"과 "타이포그래피"라는 용어를 같은 의미로 사용하기도 하지만 글꼴은 타이포그래피를 구성하는 부분 집합에 불과합니다. 서체는 단순히 사용 중인 텍스트 스타일의 이름을 나타냅니다. 예로는 Helvetica, Times, Papyrus 및 Arial이 있습니다.
2. 글꼴: 대부분의 사람들은 "글꼴"과 "서체"도 같은 의미로 사용하지만, 구체적으로 말하면 글꼴은 크기, 높이, 너비 및 스타일을 나타내는 특정 스타일의 서체를 나타냅니다. Arial Narrow, 크기 14, 기울임꼴 글꼴입니다. 미리어드 프로 레귤러 사이즈 12도 마찬가지입니다.
3. 자간: 텍스트 블록의 문자 또는 문자 그룹 사이의 공백입니다. 추적은 비교적 표준적인 경향이 있지만 텍스트 밀도에 영향을 미치도록 조정할 수 있습니다.
4. 커닝: 자간이 보다 일반적인 용어인 반면 커닝은 특히 일반적으로 수평면에서 개별 문자와 문자 사이의 거리를 나타냅니다.
5. 줄 길이: 페이지를 가로질러 왼쪽에서 오른쪽으로 이어지는 텍스트의 길이를 나타냅니다. 여백, 커닝 및 글꼴 크기를 조정하여 변경할 수 있습니다. 줄 길이가 길수록 읽기가 더 어려워집니다.
6. 행간: 행간은 바로 위와 아래에 있는 텍스트 줄과 관련하여 문자가 있는 위치 사이의 간격을 측정한 것입니다.

이러한 요소는 페이지 읽기 방식에 영향을 미치는 데 중요합니다. 대부분의 사람들은 자간, 커닝, 행 길이 및 행간을 약간만 조정해도 극적이고 가치 있는 결과를 얻을 수 있다는 사실을 무시하고 글꼴과 서체에만 집중합니다.

왜

웹사이트의 시각적 개성을 강조하는 타이포그래피

첫눈에 귀하의 웹 사이트 방문자는 웹 사이트가 무엇에 관한 것인지 결정할 수 있어야 합니다. 여기에는 많은 심리학이 작용하고 있으며 많은 하위 텍스트가 거의 즉시 개발됩니다.

색상, 레이아웃, 타이포그래피에서 힌트를 얻어 글의 내용을 공부하거나 그림을 보지 않고도 전체적인 톤, 분위기, 메시지 및 주제를 감지할 수 있습니다. 몇 초 안에 방문자는 대상 고객의 구성원인지 여부를 결정하거나 웹 사이트를 단순히 해당 대상이 아닌 것으로 간주합니다.

타이포그래피는 개별 시각적 요소의 상호 작용이 서로 시너지 효과를 발휘하여 원하는 감정적 반응을 이끌어내기 때문에 이러한 목표를 달성하는 데 도움이 됩니다.

타이포그래피는 브랜드를 정의하는 데 도움이 됩니다.

귀하의 브랜드는 단순한 로고 그 이상입니다. Nike의 트레이드마크인 Swoosh 또는 Starbucks의 사이렌과 마찬가지로 실제 브랜드 이름의 타이포그래피는 인식할 수 있으며 브랜드 인지도에 기여합니다.

잘 알려진 브랜드를 가져 와서 글꼴을 다른 것으로 변경하십시오. 브랜드가 다른 맥락에서 많이 사용되는 글꼴을 사용하더라도 타이포그래피와 로고의 조합은 사람들이 브랜드를 식별하고 인식하는 방식에 기여하여 둘을 분리할 수 없습니다.

아이코닉한 로고가 있고 적절한 타이포그래피로 보완된다면 그 조합이 고객의 마음에 눈에 띄어 브랜드를 발전시킬 수 있습니다.

타이포그래피는 독자의 주의를 집중시킵니다

앞서 언급했듯이 웹 사이트의 콘텐츠는 최고 수준일 수 있지만 효과적으로 표시되지 않으면 노력이 낭비됩니다. 독자가 바로 빠져들게 하는 방법 중 하나는 타이포그래피를 유리하게 사용하는 것입니다. 위에서 언급한 모든 요소는 콘텐츠가 단순히 인식되는 것이 아니라 경험하는 방식에 기여합니다.

Comic Sans에 실린 글을 읽고 진지하게 받아들였는지 누구에게나 물어보십시오. 아마도 그들은 메시지가 진부하거나 사소하다고 일축했을 것입니다. 더 나은 방법은 모든 단어가 동일한 글꼴로 되어 있고 모든 행이 정당한 "텍스트의 벽"을 제시하는 것입니다. 주제가 진정으로 관심이 있는 주제일지라도 첫 번째 단락을 이해하는 데 어려움을 겪었을 것입니다.

서체와 크기, 레이아웃 및 색상의 약간의 조정은 기사의 가독성에 큰 차이를 만들어 메시지의 요점을 강조하는 데 도움이 될 수 있으며 독자는 귀하의 노력에 감사할 것입니다.

타이포그래피는 웹사이트의 일관성을 그대로 유지합니다.

타이포그래피는 웹사이트의 다양한 요소를 하나로 묶는 접착제입니다.

웹사이트 방문자는 일관성을 찾습니다. 그리고 그것이 반드시 다른 모든 사람처럼 보이게 하는 귀하의 웹사이트에 대한 일반적인 쿠키 커터 모양을 의미하는 것은 아닙니다. 요소는 페이지 상단에서 클릭 유도문안 버튼까지 내부적으로 서로 잘 작동해야 합니다. 검색 엔진은 잘 표현된 콘텐츠를 선호하는 경향이 있으며 Analytics에서 웹사이트의 성능은 일관성을 반영합니다. 또한 사용자는 원하는 것을 찾을 수 있어야 하며 웹사이트를 방황하는 데 몇 분을 보낼 필요가 없어야 합니다.

타이포그래피는 사이트의 균일성을 강화하거나 부족함을 드러낼 수 있으며 전환율은 독자가 방문했을 때 사용자 경험을 나타냅니다.

당신을 위해 타이포그래피를 작동시키는 방법

글꼴, 서체 및 변형

사용할 수 있는 서체의 종류를 아는 것이 중요하거나 최소한 작업하려는 서체에 대해 잘 아는 것이 중요합니다. 글꼴은 매우 다양한 변형으로 제공되며 일부 차이점은 미묘합니다. 그러나 이러한 뉘앙스가 프레젠테이션에 영향을 줄 수 있으므로 웹 사이트의 개성과 존재감을 개발할 때 옵션을 파악하십시오.

소수의 카테고리에 있는 수천 개의 글꼴

사용할 글꼴을 찾는 데 몇 시간, 며칠 또는 몇 주를 보낼 수 있지만 여전히 원하는 것을 찾았는지 확신할 수 없습니다. 고맙게도 글꼴은 겹치는 부분이 거의 없는 깔끔한 범주로 쉽게 분류됩니다.

1. 세리프 (Serif) : 세리프는 획의 끝 부분에 있는 약간의 투영으로 일반적으로 맨 아래에 표시되지만 글자의 맨 위나 맨 오른쪽 또는 왼쪽 가장자리에도 나타납니다. 예를 들어 이러한 글꼴의 소문자 "m" 또는 "n"에는 "feet"이 있는 것처럼 보입니다. 세리프 글꼴의 예로는 Times, Baskerville 및 Cambria가 있습니다.
2. Sans Serif : 이 글꼴에는 터미널 획 또는 "피트"가 없습니다. 그들은 깨끗하고 능률적이거나 미니멀한 모양을 가지고 있지만 때로는 더 작은 크기로 읽기가 더 어렵습니다. 이러한 글꼴의 예로는 Arial, Helvetica 및 Calibri가 있습니다.
3. 스크립트 : 이 장식용 글꼴은 우아한 외관으로 유명하며 청첩장, 인증서 및 이와 유사한 문서에서 흔히 볼 수 있습니다. 그것들을 효과적으로 사용하려면, 예술성을 감상할 수 있을 만큼 충분한 공간과 크기로 아껴서 사용하십시오.
4. 디스플레이 : 영화 포스터, 간판, 신문 헤드라인에서 흔히 볼 수 있는 글꼴입니다. 스크립트 글꼴과 유사하게, 너무 많이 사용하면 압도될 수 있으므로 강조용으로만 사용하십시오.
5. 핸드 레터링 : 이름에서 알 수 있듯이 이 글꼴은 손으로 렌더링한 모양으로 어린이의 손글씨를 시뮬레이션합니다. 또는 칠판에 비공식적이고 성급한 낙서. 이 글꼴의 장점은 다른 범주에 없는 인간적인 요소를 담고 있다는 것입니다.

읽을 수 있는 콘텐츠가 읽힙니다.

가독성에는 여러 가지 요인이 있습니다. 내용 자체를 제외하고 타이포그래피의 모든 요소, 특히 공간 활용을 고려하십시오. 커닝과 추적은 본문을 스캔하는 능력에 큰 차이를 만들 수 있습니다.

각 글자, 단어, 줄 및 섹션 사이에 충분한 거리를 두어 의미 있는 방식으로 단위를 처리할 수 있도록 서면 콘텐츠에 충분한 호흡 공간을 제공하십시오.

한 줄에 50~75자 사이의 줄 길이를 유지하십시오. 이것은 행의 정당화 여부에 관계없이 약 10-15 단어를 사용하는 것을 의미합니다.

글꼴 선택

웹 사이트, 개별 제품, 제품 라인 또는 전체 회사의 브랜딩 여부에 관계없이 프로젝트에 대해 선택한 글꼴은 청중의 행동에 영향을 미치고 프로젝트를 완전히 지지하거나 무시하도록 지시할 수 있습니다. 선택이 청중을 행동으로 이끄는 방식에 미치는 영향을 고려하십시오.

브랜드 아이덴티티가 확립되어 있고 청중이 브랜드에 사용된 글꼴로 브랜드를 알아볼 수 있다면 이는 점점 더 중요해집니다. 상황을 바꾸면 브랜드에 대한 자신감이 떨어지거나 제품 품질이 더 나빠졌다는 의심으로 인해 청중에게 부정적인 영향을 줄 수 있습니다.

미묘함을 마스터하다

타이포그래피는 단순히 모양에 다양성을 추가함으로써 캐릭터와 의미를 부여합니다. 성격의 적절한 균형을 가진 서체를 찾는 것은 매우 어려울 수 있습니다. 글꼴의 시각적 신호와 특성은 실제 단어를 흐리게 할 수 있는 감정, 어조 및 호소력 요소를 추가합니다.

웹사이트나 브랜드를 개발하기 위해 그래픽 디자이너와 협력할 때 프로젝트에 특정 글꼴을 선택한 이유를 그들에게 물어보십시오. 훌륭한 디자이너는 자신의 선택을 설명하는 데 매우 수용적이며, 그들의 사고 방식에 대한 통찰력도 얻을 수 있습니다.

결론: 효과가 있는 것 찾기(그리고 그것을 고수하기)

웹사이트에 적합한 타이포그래피를 설정하는 데는 많은 시간과 노력이 필요할 수 있으며, 그 과정에서 실수를 할 수도 있습니다. 매일 새로운 글꼴과 서체가 만들어지고 출시되고 있으며 현재 유효한 레이아웃과 테마는 결국 낡고 구식이 됩니다. 그러나 자신에게 맞는 것을 찾으면 계속 사용하고 전환율이 올라가는 것을 지켜보십시오.