타이포그래피라고도 하는 글꼴 웹사이트는 디자인 내에서 텍스트를 조정하는 동시에 강력한 콘텐츠를 만드는 것입니다. 매력적인 외관을 제공하고 콘텐츠의 미적 가치를 보존합니다. 웹 사이트의 전반적인 분위기를 설정하는 데 중요한 역할을 하며 훌륭한 사용자 경험을 보장합니다.

대부분의 웹사이트 방문자는 그래픽에 크게 신경 쓰지 않고 텍스트 콘텐츠만 살펴봅니다. 텍스트가 정보의 주요 소스이기 때문입니다. 따라서 웹사이트용 콘텐츠를 만드는 동안 그래픽과 텍스트의 균형을 유지해야 합니다. 이것은 글꼴 웹 사이트가 작동하는 곳입니다. 웹 디자이너라면 글꼴 웹사이트에 우선 순위를 부여해야 합니다.

최신 업데이트: 성능 개선 및 독점 기능이 포함된 Claue Multipurpose Magento 2 테마 버전 2.0을 출시했습니다. 지금 이 테마를 확인하세요: Claue Magento Theme 2. 0

라이브 데모

Claue – 깨끗하고 최소한의 Magento 2&1 테마 는 40개 이상의 홈페이지 레이아웃과 상점, 블로그, 포트폴리오, 상점 찾기 레이아웃 및 기타 유용한 페이지에 대한 수많은 옵션이 있는 현대적이고 깨끗한 전자 상거래 상점을 위한 훌륭한 템플릿입니다. Claue 버전 2.0에는 다음과 같은 독점 기능이 포함되어 있습니다.

• Luma 테마를 기반으로 합니다.
• Magento 테마의 모든 기준 충족
• 상당한 성능 향상
• 대부분의 타사 확장과 호환됩니다.
• Magento 2.4.x와 완벽하게 호환

이 두 번째 고급 버전은 이전 버전과 완전히 다릅니다. 따라서 Claue 버전 1을 사용 중이고 Claue 버전 2로 업데이트하려는 경우 이전 버전에서 업데이트하는 대신 새 웹사이트를 다시 빌드하는 것만 가능합니다. 이제 본론으로 돌아가자.

왜 그렇게 중요한가?

의사 소통의 매체입니다.

웹사이트는 비즈니스, 예술 또는 특정 제품과 관련될 수 있습니다. 웹 사이트를 방문하면 웹 사이트에서 제공하는 정보의 종류를 쉽게 결정할 수 있습니다. 이것은 타이포그래피를 사용하기 때문입니다.

콘텐츠의 배열, 사용된 색상 및 글꼴 및 기타 세부 사항은 방문자와 웹사이트 소유자 간의 커뮤니케이션 방법을 제공합니다.

그것은 방문자를 매료시킵니다.

글꼴 웹 사이트를 사용하는 기본 방법은 올바른 글꼴을 선택하는 것입니다. 글꼴은 가능한 한 깨끗해야 합니다. 너무 작고 퍽퍽하지 않아야 합니다. 읽기 쉬운 글꼴을 사용하는 것이 프레젠테이션의 핵심입니다.

글꼴은 텍스트에 가치를 더합니다. 독자가 텍스트에서 정보를 인식하는 데 도움이 됩니다. 색상, 글꼴 및 텍스트 크기의 올바른 선택은 대상 고객을 유치하는 데 매우 중요합니다.

특정한 기분이나 느낌을 전달합니다.

콘텐츠는 컴퓨터 게임의 광고일 수 있습니다. 여기에는 게임의 몇 가지 흥미로운 기능이 포함될 수 있습니다. 그런 경우에는 재미있고, 재미있고, 화려한 콘텐츠를 디자인해야 합니다.

콘텐츠에 진지함이 필요한 경우 단순하고 평범하며 전문적인 글꼴을 선택해야 합니다. 그러한 서체의 선택은 내용을 이해하는 방법을 결정합니다.

정보 계층 구조를 설정하는 데 도움이 됩니다.

정보 계층은 콘텐츠 내부의 텍스트를 중요도에 따라 분류하는 것을 의미합니다. 다양한 글꼴 유형과 크기를 사용하여 가장 중요한 텍스트를 구분할 수 있습니다.

더 큰 글꼴 크기를 사용하여 중요한 주제를 강조 표시할 수 있습니다. 이렇게 하면 청중이 더 주의를 기울여야 하는 정보를 쉽게 결정할 수 있습니다.

조화를 이루는 데 도움이 됩니다.

타이포그래피를 디자인하고 프레젠테이션 전체에 동일한 패턴을 반복하면 조화가 만들어집니다. 조화는 타이포그래피 디자인의 주요 기능입니다.

조화로운 디자인은 웹사이트에 예술적 효과를 제공합니다. 유사한 내용에 동일한 글꼴을 사용하여 연속성을 제공합니다. 글꼴을 올바른 비율로 정렬하면 프레젠테이션이 정리되고 깔끔해집니다.

전문성을 반영합니다.

디자인 프로젝트에 글꼴 웹사이트를 올바르게 추가하는 것은 뛰어난 전문성을 반영합니다. 글자체와 크기의 적절한 사용은 고객의 신뢰를 얻습니다. 웹 사이트가 비즈니스를 기반으로 하는 경우 제품 마케팅에 이점이 추가됩니다.

전문적인 디자인 접근 방식은 핵심에 타이포그래피를 포함합니다. 글꼴 웹 사이트는 귀하가 제공하는 콘텐츠의 중요성을 정의하고 고객은 얻은 정보에 대해 안전하다고 느낍니다.

그것은 인식을 만들고 구축합니다.

글꼴 사용 패턴을 따르고 사이트에 리듬을 부여하면 회사 브랜드에 큰 가치를 더할 수 있습니다. 청중은 시각 자료를 제시할 때 사용한 글꼴을 항상 기억합니다.

타이포그래피는 회사를 전문화하며 시청자를 식별하는 역할을 합니다. 타이포그래피의 도움으로 각 콘텐츠는 회사의 존재감을 얻습니다.

다음은 웹사이트에 이상적인 글꼴을 선택할 때 고려해야 할 몇 가지 사항입니다.

기초부터 시작하라

글꼴 웹 사이트에 관해서는 조사해야 할 것이 너무 많고 정말 순식간에 압도될 수 있습니다. 그렇기 때문에 더 진행하기 전에 가장 기본적인 것부터 시작하는 것이 가장 좋습니다.

Serif 또는 Sans를 선택해야 하는 경우: 이것은 기본 글꼴 범주 분류 중 하나입니다. 로마 알파벳을 기반으로 한 Serif 서체는 글자 의 세로 및 가로 획 끝에 장식 획이 있는 것이 특징입니다.

가장 유명한 세리프 글꼴로는 Times New Roman 과 Georgia 가 있습니다. 특히 Times New Roman 글꼴 은 클래식 웹 안전 글꼴 범주에 속합니다 . 전반적으로 이와 같은 기본 글꼴 유형을 선택하는 것은 잘못될 수 없습니다. 일반적으로 읽기 쉽고 오랫동안 사용되어 왔기 때문에 많은 인터넷 사용자에게 익숙하기 때문입니다. 그래도 더 과감한 접근 방식을 시도하고 싶다면 Noe Display, Freight Text 또는 Portrait 컬렉션 과 같은 글꼴을 확인하는 것이 좋습니다 . 물론 Playfair Display , Cormorant Garamond 또는 Crimson Text 와 같이 무료로 사용할 수 있는 Google의 세리프 서체가 항상 있습니다 .

Playfair Display 글꼴 웹 사이트가 있는 테마

Cormorant Garamond 글꼴 웹 사이트의 테마

Sans 서체는 글자에 세리프가 없으며 ("sans"는 프랑스어로 "without"을 나타냄) 세리프 서체에 비해 보다 현대적이고 깔끔한 디자인 으로 알려져 있습니다. Helvetica, Tahoma, Verdana, Futura 및 Arial 은 모두 널리 사용되는 산세리프 글꼴의 예입니다. 무료 글꼴의 경우 Google 글꼴 무료 글꼴 라이브러리에 대해 Roboto, Source Sans Pro, Poppins, Heebo 또는 Montserrat를 사용해 볼 것을 제안합니다.

Poppins 글꼴 웹 사이트 테마

Heebo 글꼴 웹 사이트의 Quart 테마

선택할 유형은 대상 청중과 글꼴 디자인으로 불러일으키고 싶은 분위기에 따라 크게 달라집니다. 일반적으로 세리프체는 보다 포멀하고 우아한 톤을 표현하기 위해 사용됩니다 . 웹 페이지에 대안적인 모양을 제공하는 데 사용할 수도 있지만 잡지와 패션 업계에서 자주 볼 수 있습니다.

반면에 Sans 글꼴 은 대부분 미니멀리즘, 단순함 및 단순함을 상징 합니다. 그러나 sans serif 글꼴의 가장 큰 특징 중 하나는 유연성이 매우 높다는 것 입니다. 예를 들어, 오래된 스타일의 서체와 짝을 이루면 산세리프체의 특성이 그대로 유지되어 보다 전통적인 분위기를 연출할 수 있습니다.

• 커닝, 행간 및 자간: 이 세 가지 디자인 요소는 서체의 모양을 파악할 때 매우 중요할 수 있습니다. 이러한 방법은 시각적으로 보기 좋고 읽기 쉬운 글꼴을 얻기 위해 문자 사이의 간격을 수정하는 것을 목적으로 합니다. 커닝은 두 문자 사이의 간격을 나타내고 선행은 텍스트 줄 사이의 간격을 나타내며 자간(또는 문자 간격)은 문자 그룹 간의 간격을 나타냅니다.

• 대비: 글꼴 웹사이트 디자인에서 대비는 중요한 부분을 더욱 돋보이게 하기 위한 목적으로 다양한 방법으로 다양한 텍스트 덩어리를 강조하는 데 사용됩니다. 다양한 대비 유형에는 크기, 두께(텍스트의 특정 부분을 굵게 표시), 색상, 형태(예: 대문자 또는 소문자) 및 구조(서체와 혼합된 다양한 형태)가 있습니다.

• 정렬: 페이지에 텍스트가 배치되는 방식을 파악하는 것도 글꼴 디자인에 크게 기여할 수 있는 요소입니다. 텍스트를 왼쪽, 오른쪽 또는 가운데로 정렬할 수 있습니다 . 또한 텍스트를 오른쪽으로 들쭉날쭉하게 만들지 양쪽 정렬할지 여부를 선택할 수 있습니다.

텍스트를 정렬할 때 줄 길이 (텍스트 블록의 왼쪽과 오른쪽 사이의 거리) 에도 주의 해야 합니다. 줄 길이를 측정하는 가장 효과적인 방법은 줄당 평균 문자 수입니다. 최적의 줄 길이는 공백을 포함하여 45~80자 입니다.

글꼴 웹사이트 선택은 디자인 목적을 반영해야 합니다.

웹에는 선택할 수 있는 다양한 서체가 있으며 글꼴 선택은 사실상 제한이 없습니다. 이것은 그 자체로 좋은 것이지만 원하는(또는 원하지 않는) 것에 대한 최소한의 아이디어가 없는 경우 쉽게 복잡해질 수 있습니다. 그렇기 때문에 웹 디자인의 목적과 관심을 끌 대상의 유형을 신중하게 고려하는 것이 중요합니다 . 그런 다음 고려 중인 서체의 스타일이 방문자에게 전달하려는 일반적인 메시지와 일치하는지 확인합니다.

Lato 글꼴 웹 사이트의 버스트 테마

이러한 핵심 원칙을 파악한 후 글꼴 웹사이트 디자인을 선택할 때 자문해야 할 몇 가지 추가 질문이 있습니다.

• 당신의 브랜드의 본질은 무엇입니까? 예를 들어 진지한가 아니면 느긋한가?

• 귀하의 웹사이트가 프로젝트를 중심으로 이루어진다면 어떤 유형의 프로젝트입니까? 단기인가 장기인가?

• 실용성과 기능성을 목표로 하고 웹에 안전한 글꼴 중 하나를 선택하시겠습니까, 아니면 나머지 글꼴과 차별화하여 더 독특한 글꼴을 시도하고 싶으십니까?

• 귀하의 웹사이트는 보다 시각적으로 주도될 것입니까(사진, 애니메이션 및 비디오와 같은 그래픽), 아니면 대부분이 귀하의 브랜드 또는 제품에 대한 많은 정보를 제공하는 많은 부분의 텍스트로 구성될 것입니까?

스스로에게 이러한 질문을 하면 최소한 원하는 것이 무엇인지에 대한 일반적인 아이디어를 얻는 데 도움이 될 것이므로 글꼴을 우연히 발견했을 때 글꼴이 적합한지 여부를 결정하는 것이 적어도 조금 더 쉬울 것입니다.

서체의 수를 선택하고 중요도에 따라 순위를 매기십시오.

글꼴 웹 사이트에서는 좋은 것이 너무 많으면 쉽게 나빠질 수 있습니다. 웹사이트에 사용할 서체 수를 선택할 때 세 가지 이상의 글꼴을 사용하지 않는 것이 좋습니다 . 이에 대해 더 자세히 설명하겠습니다.

• 기본 글꼴: 페이지에서 가장 눈에 잘 띄는 글꼴이므로 기본 글꼴은 브랜드 아이덴티티와 가장 동의어여야 합니다 . 기본 글꼴은 제목과 같은 큰 텍스트에 주로 사용됩니다.

몬세라트 글꼴 웹 사이트가 있는 Capri 테마

가능하면 브랜드 로고에 기본 글꼴의 힌트도 포함해야 합니다. 기본 글꼴을 선택할 때 더 대담한 글꼴 유형을 선택할 수 있지만 결국 모든 것은 브랜드에 따라 다릅니다. Voga, Ikaros 또는 Qontra와 같은 글꼴을 살펴보는 것이 좋습니다.

• 보조 글꼴: 본문에 이 글꼴을 사용해야 합니다 . 즉, 페이지의 모든 기사 또는 설명이 보조 글꼴로 표시됩니다. 무엇보다도 보조 글꼴은 깨끗하고 읽기 쉬워야 합니다 . Futura, Roboto 또는 Verdana와 같은 글꼴 유형은 모두 본문 텍스트에 대한 확실한 글꼴 선택이 될 수 있습니다.

• 3차(액센트) 글꼴: 요청하는 경우 이 글꼴은 전적으로 선택 사항 입니다. 액센트 글꼴은 클릭 유도문안이나 탐색 메뉴와 같은 특정 웹사이트 요소에 사용할 수 있습니다. 방문자의 시선을 빠르게 사로잡을 수 있을 만큼 눈에 잘 띄어야 합니다.

이 모든 것을 말하면서도 모든 브랜드에는 고유한 요구 사항이 있으므로 실제로 정해진 것은 없습니다. 글꼴이 많을수록 모든 글꼴을 조화시키기가 더 어렵다는 점을 기억하십시오 . 따라서 가능하면 절대적으로 필요한 경우가 아니면 글꼴 번호를 최소로 유지하십시오.

로드 시간을 염두에 두십시오.

이 시대에는 느린 사이트에 시간도 인내심도 없습니다. 그렇기 때문에 글꼴을 로드하는 데 시간이 너무 오래 걸리면 최상의 솔루션이 아닐 수 있습니다. 다음은 글꼴이 웹사이트의 속도를 늦추는 것을 방지하기 위해 할 수 있는 몇 가지 사항입니다.

• 제한된 수의 서체를 고수 하십시오. 너무 많은 글꼴을 사용하는 것이 최선의 아이디어가 아닐 수 있는 이유를 이미 언급했습니다. 로딩 속도는 글꼴 번호를 너무 많이 사용해서는 안 되는 또 다른 이유입니다.

• 필요한 스타일만 선택하세요. 이런 식으로 글꼴 웹 사이트의 크기가 최소화되고 크기가 작을수록 로딩 시간이 줄어듭니다. 예를 들어 글꼴을 다운로드할 때 일반 및 굵은 글꼴만 선택합니다.

• 사용하지 않을 언어를 다운로드하지 마십시오. 특정 글꼴에 대해 하나 또는 몇 개의 다른 언어만 필요한 경우 다운로드할 때 필요하지 않을 것이라고 확신하는 언어는 선택을 취소해야 합니다.

글꼴 조합에 대해 생각해 보세요.

서로 다른 글꼴을 페어링할 때 고려해야 할 여러 가지 사항이 있습니다. 결국, 각 글꼴에는 고유한 특성이 있습니다. 일부 글꼴은 더 ​​진지해 보이고, 일부는 더 세련되게 보이고, 다른 글꼴은 더 ​​기발하고 자연스러운 느낌을 줍니다.

서로 다른 "분위기"를 가진 두 개의 글꼴 웹사이트를 혼합하면 실제로 트릭 을 수행할 수 있습니다. 즉, 반대가 끌린다고 말하며 이 규칙은 서체에도 적용됩니다. 뭉툭한 글꼴 유형을 보다 중립적이고 차분한 글꼴과 결합해 보십시오. 전자는 헤드라인에 사용해야 하고 후자는 본문에 가장 적합합니다.

거의 잘못 갈 수 없는 또 다른 좋은 조합은 세리프체와 산세리프체를 혼합 하는 것 입니다. 글꼴 조합은 대비를 만드는 것이며, 셰리프체와 산세리프체는 짝을 이룰 때 미묘하지만 뚜렷한 차이를 만들기에 충분합니다.

어떤 글꼴을 함께 결합해야 할지 여전히 불확실한 경우 항상 안전한 경로를 선택하고 동일한 글꼴 모음을 공유하는 두 글꼴을 사용할 수 있습니다. 처음부터 같이 가도록 만들어졌기 때문입니다. 또한 동일한 글꼴 패밀리의 글꼴을 페어링하면 일관성을 느낄 수 있으므로 웹 사이트를 디자인하는 과정이 훨씬 쉬워집니다. 크기, 대소문자, 두께 등을 변경하고 일반 글꼴과 기울임꼴 등을 혼합하여 동일한 글꼴 모음 간에 대비를 만들 수 있습니다.

글꼴 페어링에 도움이 필요한 경우 fontpair와 같이 도움이 될 수 있는 몇 가지 훌륭한 온라인 도구가 있습니다.

실제로 글꼴 웹 사이트 는 웹 사이트 콘텐츠의 약 90%를 구성 합니다. 따라서 글꼴 웹 사이트의 중요성은 사용자 경험에 직접적인 영향을 미치고 웹 사이트를 만들거나 깨뜨릴 수 있으므로 간과해서는 안됩니다. 사용자가 편안하게 읽을 수 있도록 웹사이트를 충분히 읽을 수 있도록 하려면 다양한 기기와 화면 크기에서 글꼴이 어떻게 나타나는지 항상 테스트하세요 .

어떤 글꼴 디자인이 가장 적합한지 알아낼 때 먼저 디자인 목적을 생각하십시오. 가고자 하는 일반적인 방향을 결정했으면 원하는 서체 수를 선택한 다음 가능한 글꼴 조합에 대해 웹 검색을 시작합니다. 선택의 폭이 넓기 때문에 자신에게 잘 맞는 것을 찾을 수 밖에 없습니다.