온라인 디자인에 사용할 서체를 선택하는 것은 어려울 수 있습니다. 그리고 개발 단계에 있는 웹 디자인에 많은 시간을 들이고, 거기에 도달하지 못한 채 유형을 바꾸면서 너무 쉽습니다. 글꼴 페어링에 대해 알아야 할 모든 것을 살펴보겠습니다.
웹 디자인에서 글꼴 결합
다른 많은 디자인 부분과 마찬가지로 타이포그래피에는 이상적인 서체 조합을 쉽게 찾을 수 있는 지침이 있습니다. 글꼴을 혼합하는 방법을 보여주고 비즈니스에 적합한 몇 가지 훌륭한 조합을 제공합니다.
1. 톤이 다른 글꼴 사용
글쓰기는 감정을 전달할 수 있습니다. 우리가 단어를 표현하는 데 사용하는 서체는 우리의 생각에도 영향을 미칩니다. 많은 글꼴은 진지하고 전문적이지만 다른 글꼴은 유쾌하고 비격식적입니다. 서체의 성격은 표시하는 텍스트에 의미를 나타냅니다. 웹 사이트 글꼴을 선택할 때 다양한 톤을 타이포그래피와 결합하면 시각적으로 놀라운 대비가 만들어집니다.
글꼴 조합을 선택할 때 웹사이트가 대표할 사람 또는 대상의 어조를 고려하십시오. 행복한 서체는 장난감 회사에 적합하지만 법률 회사의 웹 사이트에서는 이상하게 보일 수 있습니다. 반면에, 지나치게 진지한 Serif는 가벼운 마음을 위한 것일 수 있습니다.
고려해야 할 가장 중요한 요소 중 하나는 머리글과 본문에 사용할 서체입니다. 제목 수준은 더 큰 축척을 가지고 있기 때문에 스타일 서체에 더 큰 자유를 제공합니다. 작은 글씨 크기의 본문에는 보기 좋은 글꼴이 필요합니다.
웹사이트 레이아웃에서 반대되는 서체를 사용하는 것을 두려워하지 마십시오. 때때로 대비가 흥미를 불러일으킬 수 있습니다.
2. 서로 다르지만 너무 많지 않은 서체 조합을 사용하십시오.
본문에 사용된 것과 거의 동일한 머리글의 글꼴을 혼합하지 마십시오. 시각적으로 구별되지만 여전히 서로를 보완하는 여러 서체를 사용하십시오.
예를 들어 Great Vibes와 같은 붓글씨와 Merriweather와 같은 Serif 유형과 서체를 결합하면 어떻게 될까요? 결과적으로 디자인은 균형이 부족하고 불쾌한 대비감이 있습니다.
Great Vibes의 꽃과 루프는 부드러운 느낌과 약간의 세련미가 있습니다. Northwood는 세리프와 꼬리가 있는 비공식적인 서체인 반면, Merriweather는 세리프 서체에 의해 전달되는 형식이 있는 실용적인 서체입니다. 여기에서 대비가 너무 강하여 조합이 작동하지 않습니다.
좀 더 즐거운 폰트 조합을 시도해보자. 헤더에는 다소 재미있는 글꼴인 Volkorn을 사용합니다. 보다 중립적이고 평범한 산세리프체인 Open Sans를 사용하십시오. 이 조합은 서체의 차이에도 불구하고 둘 다의 미묘함이 시각적으로 호환되도록 하기 때문에 잘 작동합니다.
3. 3개 이하의 고유한 서체 사용
대부분의 디자인에서는 헤드라인에 하나의 웹 서체를 적용하고 본문에 다른 서체를 적용합니다. 창의적인 목적을 위해 손글씨와 보다 양식화된 서체를 레이아웃에 사용할 수도 있습니다. 사용 가능한 모든 무료 서체의 유혹에 관계없이 단일 웹 사이트에는 세 가지 서체가 필요합니다.
많은 디자이너가 디자인에 서체의 슈퍼패밀리를 활용합니다. 슈퍼패밀리는 하나 이상의 다른 패밀리와 관련된 서체 패밀리입니다. 이탤릭체, 가벼움에서 헤비급, 세리프체 및 산세리프체 버전과 같은 문체의 차이가 포함될 수 있습니다. 슈퍼패밀리의 가장 즐거운 점은 함께 작동하도록 만들어졌기 때문에 서체 일치에 관한 추측 게임을 제거한다는 것입니다.
단일 서체는 슈퍼패밀리에서 사용할 때 다양한 방식으로 사용할 수 있습니다. 이러한 Roboto 슈퍼패밀리 옵션을 살펴보십시오. Thin 100 Italic과 Regular 400의 차이는 미묘하지 않습니다.
대부분의 서체는 수퍼패밀리로 분류됩니다. 즉, 동일한 스타일을 사용하면서 실험할 수 있는 대체 글꼴이 많이 있습니다.
4. 글꼴 페어링을 통한 시각적 계층 구조 전달
다양한 서체 디자인, 크기 및 색상을 사용하여 커뮤니케이션 계층 구조를 시각화합니다. 콘텐츠의 다른 부분의 상대적 중요성에 대한 시각적 정보를 전달하기 위해 타이포그래피를 사용할 수 있습니다. 헤드라인이 가장 눈에 띄어야 하며, 그 다음으로 부제목과 본문이 따라야 합니다. 글꼴 조합을 사용하여 글에 명확한 구조감을 추가하십시오.
5. 순서를 암시하는 글꼴 크기 사용
거대한 서체는 가장 중요한 것을 나타내고 글꼴 크기를 줄이면 정보 계층 구조를 나타냅니다. 모든 대문자는 클릭 유도문안과 같은 중요한 부분을 돋보이게 하는 좋은 방법입니다. 모든 대문자를 적당히 사용하는 것이 좋습니다. 그러나 텍스트를 화나게 하거나 적대적으로 보이게 하지 마십시오.
대부분의 초보 디자이너는 다양한 글꼴 크기를 통합하여 시각적 계층 구조를 설정하지만 시각적 크기를 표시하는 다른 방법이 있습니다.
6. 다양한 가중치로 실험
상대적 중요성은 더 큰 가중치로 표시되는 반면 더 가벼운 가중치는 계층 구조에서 더 낮은 단계를 나타냅니다. Roboto 슈퍼패밀리에서 보았듯이 단일 서체의 무게를 변경하여 많은 것을 성취할 수 있습니다.
7. 다양한 글꼴 색상
디자인에 대비되는 색상의 만화경을 사용하고 싶지는 않지만 텍스트의 음영을 변경하면 특정 용어가 눈에 띄게 될 수 있습니다. 빨간색과 보라색과 같은 더 강렬한 색상이 헤드라인에 사용됩니다. 더 밝은 버전은 더 어두운 버전과 대조되며 먼저 읽어야 하는 사본을 나타냅니다. 실험 중인 글꼴 색상이 배경에서 손실되지 않는지 확인합니다.
8. 세리프
인쇄된 상태에서 읽을 수 있는 세리프 서체는 1700년대 후반으로 거슬러 올라가며 처음에는 가독성을 위해 만들어졌습니다.
세리프는 문자에 추가된 가는 선 또는 획입니다. 산세리프체에는 독자의 눈이 따라갈 수 있도록 도와주는 많은 시각적 단서가 있습니다. Serif 서체는 특히 책과 같이 긴 텍스트 블록에서 스캔 효율성을 향상시킵니다.
컴퓨팅 초기에는 셰리프 기반 서체를 효과적으로 렌더링하기에는 너무 낮은 화면 해상도로 인해 문제가 발생했습니다. 반면에 그래픽 디자이너는 오늘날의 고해상도 디스플레이 덕분에 과다한 세리프를 사용할 수 있습니다.
세리프체를 사용할 때는 항상 sans-serif체와 결합하십시오. Serif 서체는 종종 너무 유사하여 불쾌한 글꼴 일치를 초래합니다.
Serif 서체는 적응력이 매우 뛰어납니다. 다음은 작성된 텍스트에서 볼 수 있는 가장 빈번하고 유용한 글꼴 종류입니다. 다양한 크기로 쉽게 읽을 수 있으므로 본문 및 헤더에 이상적입니다.
글꼴 페어링 아이디어: EB Garamond 및 Montserrat
세리프 EB Garamond와 Montserrat를 헤드라인으로 결합하고 본문을 위해 크기를 줄입니다. 긴 텍스트 블록에 세리프 글꼴을 사용하면 작을 때 성능이 더 좋습니다.
글꼴 페어링 아이디어: Libre Baskerville 및 Raleway
Libre Baskerville의 보다 뚜렷한 세리프와 각이 Raleway의 가는 선을 병치합니다.
9. 산세리프체
추가 줄이 없으면 산세리프체와 세리프체를 구별합니다. 산세리프체는 더 작은 크기의 단락 또는 본문 텍스트에 사용하거나 머리글의 세리프체와 결합할 수 있습니다.
글꼴 조합과 관련하여 생각할 수 있는 몇 가지 글꼴이 있습니다.
가장 자주 사용되는 서체 종류와 오늘날 사용할 수 있는 몇 가지 창의적인 가능성을 살펴보겠습니다.
글꼴 페어링 아이디어: Open Sans 및 Lato
일부 디자이너는 Open Sans 및 Helvetica와 같은 글꼴을 구식으로 생각할 수 있지만 유명합니다. Open Sans는 다양한 글꼴과 잘 작동하는 기본적이지만 환영받는 서체입니다. 바닐라 아이스크림을 생각해 보십시오. 다른 많은 맛있는 것을 만들 수 있는 기초입니다.
예를 들어 헤더에는 Open Sans를 사용하고 본문에는 Lato를 사용합니다. 페이지의 나머지 부분에서 다른 산세리프체를 사용하십시오.
10. 글꼴 표시
사람들의 관심을 끌 필요가 있는 경우 디스플레이 글꼴이 이상적입니다. 일반적으로 크고 굵게 또는 희박하고 가늘게와 같이 아름답고 복잡한 문자 형식으로 작성됩니다. 디자인이 눈에 띄고 인상을 남기려면 디스플레이용으로 명시적으로 디자인된 서체를 사용하십시오.
글꼴 페어링 아이디어: Bubble 껌 Sans 및 Open Sans
Bubble 껌 Sanc는 Open Sans의 중립성과 잘 어울리는 밝은 글자체를 가지고 있습니다.
글꼴 페어링 아이디어: Poiret One 및 Lato
Poiret One은 세련된 느낌을 찾고 있다면 훌륭한 현대 글꼴입니다. 미묘한 아트 데코에서 영감을 받은 레터링과 얇은 라인워크가 이 글꼴을 훌륭한 현대 글꼴로 만듭니다. 이 서체는 Lato와 같은 더 겸손한 서체와 함께 환상적으로 보입니다. 이러한 종류의 대비는 Lato와 같은 보다 미묘한 서체와 잘 어울립니다.
11. 고정 폭 서체
고정 폭 서체에서 모든 문자의 너비는 동일합니다. 너비가 다른 서체의 경우 표준 가로 측정은 너비가 다른 서체와 구별하여 응집력을 줍니다. 고정 폭 글꼴은 초기 저해상도 디스플레이에 대한 단순성과 적응성으로 인해 컴퓨팅에서 오랫동안 인기를 얻었습니다.
글꼴 페어링 아이디어: IBM Plex Mono 및 PT Sans
IBM Plex Mono는 신생 기업 및 기타 기술 관련 조직에 이상적인 시각적 아이덴티티를 갖춘 현대적인 서체입니다. IBM에 대한 오마주로 만들어졌습니다. 이와 같은 Sans-serif 서체는 PT Sans와 함께 사용할 때 눈에 더 편안하고 대비를 더 잘 느끼게 합니다.
글꼴 페어링 아이디어: Roboto Mono 및 Roboto
많은 디자이너들이 뛰어난 가독성 때문에 Roboto를 선호합니다. 로보토모노와 일반버전이 결합된 이 글꼴 조합은 보기에 편하다.
타이포그래피는 웹 디자인에 필수적입니다
탄탄한 온라인 입지를 구축하는 것은 쉽지 않습니다. 그렇게 할 때 고려해야 할 몇 가지 요소가 있습니다. 색상 팔레트와 마찬가지로 글꼴 쌍을 일치시키는 데에도 주의를 기울이십시오. 선택한 서체, 스타일 지정 방식 및 가독성은 모두 웹사이트에 대한 사용자 경험에 기여합니다. 프로젝트의 성격을 반영하고 방문자에게 가장 즐거운 경험을 제공하는 가장 멋진 서체를 찾으십시오.
