웹사이트에 적합한 글꼴 선택 – 가이드

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

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

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

이집트 글꼴로 Slab Serif라고도 하는 Serif 글꼴 유형입니다. 기존의 Serif보다 명암비가 낮고 뭉툭하고 튼튼해 보이는 글꼴 스타일입니다.

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

스크립트

예 – 애리조니아, 탠저린, 그레이트 바이브

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

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

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

장식

예 – Helios, Casandra, Cherie Bomb, 시골

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

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

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

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

서체와 글꼴의 차이점 - 2020 - 다른 사람

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

예를 들어 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차)을 선택하는 것이 좋습니다.

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

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

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