Scalenut, G2 Fall Leader 2022 - 콘텐츠 제작 부문 선정

첫인상을 남길 수 있는 두 번째 기회는 없습니다.

우리는 사람들이 우리 삶의 거의 모든 측면에서 반복하고 적용하는 것을 들었습니다. 여기에는 당사 웹사이트도 포함됩니다.

귀하가 SaaS 브랜드인지 전자상거래 브랜드인지는 중요하지 않지만 방문자가 귀하의 웹사이트를 처음 방문할 때 가장 먼저 눈에 띄는 측면은 레이아웃과 글꼴입니다. 따라서 웹 사이트를 디자인하는 동안 과녁을 맞추는 것이 중요해집니다.

디자인은 서로 함께 작동하는 다양한 측면을 포함하기 때문에 강렬하고 번거로운 작업입니다.

어떤 사람들은 Google 글꼴을 선호하는 반면 다른 사람들은 타이포그래피 또는 필기체를 선택할 수 있습니다. 그러나 작동 여부는 설계 프로세스와 관련된 다른 요인에 따라 다릅니다. 탐색, 글꼴, 레이아웃, 색상 스키마, 가독성 등이 있습니다.

글꼴은 웹 페이지에 편재합니다. 헤더, 본문 텍스트 및 기타 모든 곳에서 찾을 수 있습니다. 따라서 올바른 글꼴을 선택하면 전반적인 웹 사이트 전망을 활용할 수 있습니다.

오늘은 웹사이트의 글꼴을 선택하는 방법에 대해 알아보겠습니다.

웹사이트에 가장 적합한 글꼴 선택의 중요성

당신의 글꼴은 당신의 브랜드 대사입니다

방문자가 웹 사이트 및 글꼴 선택에 대해 긍정적인 의견을 가질 수 있도록 0.5초 밖에 없습니다. 그것의 대부분, 그것의 94%는 디자인 요소에 의존합니다.

각 글꼴에는 고유한 특성이 있다는 것을 이해하는 것이 중요합니다. 따라서 방문자에게 귀하의 전문성에 대해 확신시키려면 웹사이트의 디자인 언어와 글꼴 선택을 통해 이를 수행하는 것이 필수적입니다.

전반적인 사용자 경험을 향상시키는 데 도움이 됩니다.

왜 우리는 웹사이트 구축에 시간과 자원을 소비합니까? 방문자가 편안하게 사용하기를 원하기 때문입니다.

완벽한 사용자 경험을 구축하려면 세부 사항에 대한 예리한 눈이 필요합니다. 또한 방문자의 입장이 되어 특정 디자인 선택이 그들에게 적합한지 측정하는 것을 의미합니다.

웹 디자인을 위한 좋은 글꼴을 선택하는 것은 모든 것의 필수적인 부분입니다. 더 많은 방문자, 더 높은 전환율 및 전반적인 만족도를 높이는 데 도움이 될 수 있습니다.

웹 페이지용 글꼴 분류

‍

모든 글꼴 스타일에는 고유한 스토리와 특성이 있으므로 여러 그룹으로 분류할 수 있다고 이미 언급했습니다. 또한 다양한 유료 및 무료 글꼴 중에서 선택하여 웹 페이지에 추가할 수 있습니다.

웹 사이트 글꼴을 다음 범주로 구분할 수 있습니다.

가는 장식 선

예 – Times New Roman, Garamond, MS Serif, Merriweather, Abril Fatface, Playfair Display, Georgia

Serif 글꼴은 인간에게 알려진 가장 오래된 글꼴 유형 중 하나입니다. 르네상스에서 영감을 받은 글꼴은 예전에는 높은 가독성으로 유명했습니다.

현대의 Serif 글꼴은 비록 디지털 방식이지만 동일한 유산을 가지고 있습니다. 가로 또는 대각선 끝을 확인하여 인식할 수 있습니다. 디자인 언어에 우아함을 더하고 책과 공식 웹 사이트에 탁월한 선택이 됩니다.

대부분의 디자이너는 추가 콘텐츠 요소나 웹 페이지에 나타나는 글꼴에 이러한 글꼴을 사용합니다. 따라서 제목, 자막, 로고 및 유사한 텍스트로 찾을 가능성이 더 큽니다.

산세 리프

예 – Arial, Alegreya, Open Sans, Montserrat, Comic Sans, Verdana, Oswald, Roboto, Lato, Helvetica

Sans-serif 서체는 Serif의 현대적인 반복입니다. 이름에서 알 수 있듯이 세리프가 없어 미니멀한 느낌을 더해줍니다. 초기에는 컴퓨터 디스플레이가 세리프를 원래 형태로 표시할 만큼 충분히 발전하지 못했습니다. 그래서 디자이너들은 디지털 읽기에 더 편리하게 사용할 수 있는 글꼴을 발견했습니다.

Sans-serif는 또한 독자를 지치게 하지 않으며 더 많은 청중을 수용함으로써 디자이너에게 유연성을 제공합니다. 이러한 글꼴의 가장 일반적인 사용자는 젊은 세대를 대상으로 하며 접근 방식에서 현대적이고 전문적인 것으로 인식되기를 원합니다.

기본 Windows 운영 체제 글꼴인 Segoe UI는 Sans-serif 글꼴 스타일입니다. Base 9 & 12는 접할 가능성이 가장 높은 Adobe 글꼴 유형 중 하나이며 Sans-serif 범주에 속합니다. Apple 플랫폼에서 가장 인기 있는 서체 중 하나인 SF Pro도 이 범주에 속합니다.

슬래브 세리프

예 - Sentinel, Clarendon, Adelle, Arvo

Serif 글꼴의 일종으로 이집트 글꼴로 Slab Serif라고도 합니다. 이들은 전통적인 세리프체보다 명암비가 낮은 뭉툭하고 견고해 보이는 글꼴 스타일입니다.

선택한 글꼴 스타일에 따라 구식 복고풍에서 보다 현대적인 스타일에 이르기까지 다양합니다. 일반적으로 표시 텍스트의 일부로 Slab Serif를 찾을 수 있지만 본문 텍스트를 설정하는 데 사용할 수도 있습니다.

스크립트

예 – Arizonia, Tangerine, Great Vibes

이름에서 알 수 있듯이 스크립트 글꼴은 사람의 손글씨에 가장 가까운 것입니다. 그것들은 화려하며 종종 웹사이트의 제목, 로고 ​​및 유사한 짧은 문구를 장식하는 것을 볼 수 있습니다.

또한 비공식적인 것으로 간주될 수 있습니다. 스크립트 글꼴에 대한 가장 흥미로운 사실은 높은 감정적 충전입니다. 이들은 반응(대부분의 경우 구체적)을 불러일으키고 방문자의 많은 관심을 끌 수 있습니다.

복잡성을 감안할 때 사용이 제한적입니다. 그러나 대부분의 잘 디자인된 웹사이트는 전체적인 느낌을 높이기 위해 이를 사용합니다.

장식

예 – Helios, Casandra, Cherie Bomb, Countryside

디스플레이 글꼴이라고도 하는 장식 글꼴은 반드시 공통된 특성을 공유하지는 않는 다양한 글꼴을 나타냅니다. 그들을 식별하는 유일한 공유 방법은 그들의 정교한 모양과 높은 장식을 알아차리는 것입니다.

이들은 19세기에 인기를 얻었으며 이후 웹 디자인 및 광고 목적으로 꾸준히 사용되었습니다.

다양한 상황에 동화될 수 있는 다른 글꼴 유형과 달리 장식 글꼴에는 한계가 있습니다. 즉, 각각의 특정 감정(행복, 공포 또는 기타)을 발산합니다. 표현력이 풍부하고 쉽게 알아볼 수 있는 원본 글꼴입니다.

헤더에만 사용할 수 있는 굵은 글꼴이므로 웹사이트의 본문 텍스트에는 사용하지 않는 것이 좋습니다. 웹 디자인을 위한 최소한의 방식으로 그것들을 흡수하면 웹 사이트가 눈에 띄고 방문자에게 지속적인 인상을 남길 수 있습니다.

서체와 글꼴의 차이점

일반적인 개념은 서체와 글꼴이 같은 의미를 갖지만 동의어는 아니라는 것입니다. 전자는 공통된 특성과 기능을 가진 글꼴 제품군을 나타내고 후자는 개별 글꼴을 나타냅니다.

예를 들어 Arial은 서체이고 16pt Arial Bold는 글꼴입니다.

웹 사이트의 기본 글꼴을 선택할 때 명심해야 할 사항

우리 모두는 세상에 완벽한 유료 및 무료 글꼴이 엄청나게 많다는 것을 알고 있습니다. 그러나 웹 사이트를 디자인하는 동안에는 더 많은 일이 진행되며 마음에 드는 것을 선택할 수 없습니다. 웹사이트에 가장 적합한 글꼴을 선택하는 것은 총체적인 일이며 사용 중인 다른 요소에 대한 철저한 조사와 이해가 필요합니다.

다음은 웹 사이트에 가장 적합한 글꼴을 선택할 때 고려해야 할 사항입니다.

기본을 바로 잡아라

웹 사이트에 사용할 좋은 글꼴을 찾기 전에 관련된 다른 항목을 정렬해야 합니다. 여기에는 다음이 포함됩니다.

• 대상 고객 이해
• 웹사이트의 목적
• 브랜드의 존재 이유
• 가지고 있는 개성

Amazon과 같은 브랜드는 Horror 글꼴을 사용하지 않습니다(할로윈과 같은 특정 경우 제외). 사용하는 글꼴 유형은 주로 대상 청중과 생성하려는 감정에 따라 다릅니다.

예를 들어 Sans-serif 글꼴은 미니멀리즘과 단순성을 나타냅니다. 그들은 또한 전통적인 가치와 유연성에 대한 당신의 성향을 가져옵니다. Serif 서체에는 형식적 표현을 나타내는 장식 획이 있습니다.

선택이 디자인 목적과 일치하는지 확인하십시오.

모든 것에는 목적이 있으며 웹사이트 디자인에도 목적이 있습니다. 귀하의 선택은 궁극적으로 대상 청중과 웹 사이트를 통해 불러일으키려는 전반적인 분위기에 따라 달라집니다. 또한 여러 디자인 요소가 웹 페이지의 전체 프레젠테이션에서 중요한 역할을 합니다.

따라서 여기에 명심해야 할 요소가 있습니다.

커닝, 행간 및 추적

이 세 용어는 웹 사이트의 간격 요소를 나타냅니다. 커닝은 인접한 두 문자 사이의 간격을 나타냅니다. 행간은 텍스트 줄 사이의 간격을 정의하며 문자 그룹 사이의 간격을 자간이라고 합니다. 선택한 간격으로 서체의 모양을 확인할 수 있습니다.

차이

웹 사이트와 관련하여 대조는 텍스트의 표시를 나타냅니다. 웹사이트 디자이너는 일부 요소를 돋보이게 하기 위해 다양한 미묘한 기술을 사용합니다. 여기에는 중요한 영역을 보강하기 위한 색상, 형태, 크기, 구조 및 무게가 포함됩니다.

조정

정렬이란 웹 사이트에 텍스트를 배치하는 방식을 말합니다. 왼쪽, 오른쪽 또는 중앙일 수 있습니다. 완전히 정당화된 텍스트는 보다 형식적인 접근 방식을 제공하는 반면 비정형 방식은 보다 비공식적이고 친근한 웹사이트에 적합합니다.

일반적으로 왼쪽 정렬 텍스트가 가장 읽기 쉽습니다. 명심해야 할 또 다른 측면은 텍스트 블록의 측면 사이의 거리입니다. 최대 80자(공백 포함)의 평균 문자 수를 설정하여 최적의 줄 길이를 설정할 수 있습니다.

좀 더 형식적인 모양을 찾고 있다면 완전히 정당화된 텍스트를 사용할 수 있습니다. 서체를 양쪽에 고르게 정렬하고 방향 감각 상실을 제거합니다.

서체를 신중하게 사용

제공되는 다양한 서체와 글꼴을 고려할 때 디자인을 선택하는 동안 길을 잃을 가능성이 높습니다. 따라서 한 걸음 물러서서 만들고자 하는 최종 제품을 이해해야 합니다.

다음 단계는 그에 따라 서체의 스타일을 지정하는 것입니다. 이러한 디자인 선택은 귀하가 제공하는 청중을 반영하고 브랜드 접근 방식에 대한 기본적인 이해를 제공합니다.

따라서 디자인 요소를 마무리할 때 다음과 같은 질문을 스스로에게 해보십시오.

• 브랜드의 성격은 무엇입니까?
• 실용성을 더 강조하고 싶습니까, 아니면 눈에 띄고 싶습니까?
• 귀하의 웹 사이트에는 어떤 종류의 그래픽이 포함됩니까? 그래픽이 많은 경우 앞부분의 톤을 낮추고 나머지는 말하도록 할 수 있습니다. 그 반대라면 선택한 글꼴이 원하는 감정을 불러일으키는지 확인하세요.
• 프로젝트 기반입니까? 그렇다면 어떤 종류의 임무이며 관련된 요구 사항은 무엇입니까?

로드 시간을 고려하는 것을 잊지 마십시오

느린 사이트는 트래픽이 적습니다. 웹사이트가 한 요소씩 로드할 때까지 기다릴 대역폭을 가진 사람은 많지 않습니다. 디자인 요소를 잘못 지정하거나 디자인 선택을 과도하게 하면 사이트가 느려지고 참여도가 떨어질 수 있습니다.

로딩 시간이 길면 채택한 서체와 스타일의 수를 살펴봐야 합니다. 필요한 항목만 선택했는지 확인하십시오.

웹 안전 글꼴 선택

웹 사이트 글꼴의 선택은 종종 브랜드를 표현하는 방법을 나타냅니다. 예를 들어 Amazon, Microsoft 및 Disney와 같은 글로벌 브랜드는 그들과 동의어가 된 고유한 글꼴을 사용합니다.

자신을 위해 동일한 작업을 수행할 수 없더라도 귀하의 선택이 웹 안전으로 간주되는지 확인하는 것이 필수적입니다. 이 용어는 다양한 환경에 적응할 수 있는 동적 글꼴 집합을 나타냅니다. 간단히 말해서 이러한 서체는 장치에 설치되어 있지 않아도 독자의 화면에 표시될 수 있습니다.

그 중 하나를 사용하지 않으면 브라우저는 백업으로 보관된 일반 글꼴로 돌아가 웹 콘텐츠를 표시합니다. 기능 및 디자인 문제가 발생하고 불완전한 메시지로 이어지며 브랜드를 괴롭힐 수 있습니다.

몇 년 전만 해도 웹에 안전한 글꼴을 충분히 찾는 것이 어려웠지만 오늘날에는 선택하고 훈습할 수 있는 유료 및 무료 글꼴이 많이 있습니다.

예를 들어 Times New Roman 및 Arial은 각각 Serif 및 Sans-serif 범주에 속하는 웹 안전 글꼴입니다. 장식적인 것을 찾고 있다면 Script MT와 Luminari는 각각 Cursive 및 Fantasy 카테고리에 속하는 적응형 글꼴입니다.

최상의 결과를 위해 혼합 글꼴을 사용할 때입니다.

웹 사이트에 가장 적합한 웹 글꼴을 선택하는 것은 계산된 혼합 및 일치에 관한 것입니다. 각 글꼴마다 특성이 있으므로 궁극적으로 클래스와 존재 이유를 발산하는 방식으로 최대 3개의 서로 다른 글꼴(1차, 2차 및 3차)을 선택하는 것이 좋습니다.

여기에 커닝 및 행간과 같은 요소를 추가하면 올바른 작업을 수행할 수 있는 다리 공간이 많이 생깁니다. 일부 글꼴은 쌍으로 잘 작동하지만 다른 글꼴은 그렇지 않다는 것을 이해하는 것도 중요합니다. 따라서 선택의 폭이 부족하지는 않지만 브랜드의 비전과 일치하는지 확인해야 합니다.

또한 오늘날 인터넷 사용자의 동적 사용 패턴을 고려할 때 웹 안전 글꼴을 사용하여 화면 크기를 동적으로 조정하는 것이 필수적입니다. 특정 글꼴이 설치되어 있지 않아도 최종 사용자가 의도한 대로 웹 페이지를 볼 수 있습니다.

궁극적으로 글꼴 선택은 다양한 요소에 따라 달라지며 최상의 결과를 얻으려면 올바른 균형을 유지해야 합니다.