[Design] 폰트 하나로도 충분히 좋은 디자인을 할 수 있다! (feat. 타이프페이스 & 대비 Contrast)

“TIP! 01. 컬러와 폰트는 1~2개만 사용하자!“에서 하나의 폰트, 즉 폰트 패밀리 개념인 타이프페이스(Typeface)를 하나만 사용해서 좋은 디자인을 하는 방법에 대해서 알아보았습니다.

이번에는 일반적으로 호칭하는 폰트 하나, 즉 1개의 타이프페이스를 사용해서 디자인 방법 중 대비(Contrast) 효과를 적용하여 디자인의 통일성을 유지하면서 변화를 주는 방법에 대해서 알아보도록 하겠습니다.

차례

1. [무게 대비] 타이프페이스(Typeface)의 폰트 굵기 속성을 활용하세요.

여러분은 보통 폰트를 사용 후 다음과 같이 말할겁니다. “나눔고딕 폰트를 사용했습니다!”

하지만 이는 반은 맞고, 반은 틀린 것으로 좀 더 정확히 얘기하자면 “나눔고딕 타이프페이스(Typeface)를 사용했습니다!”라고 말하는 것이 정확합니다.

물론 디자이너들도 현실에서는 ‘폰트’와 ‘타이프페이스’ 두 용어를 혼용해서 사용하긴 합니다.^^;

윈도우 시스템에서 폰트 중 나눔고딕을 찾아보면 위의 그림과 같이 ‘나눔고딕 가늘게(Light)’, ‘나눔고딕 보통(Regular)’, ‘나눔고딕 굵게(Bold)’, ‘나눔고딕 아주 굵게(ExtraBold)’가 한 세트로 구성되어 있습니다.

‘글꼴 패밀리 세부 정보’라고 나와 있듯이 타이프페이스는 폰트 패밀리로 ‘Light‘, ‘Regular‘, ‘Bold‘의 속성을 가진 폰트들의 한 세트로 구성되어 있습니다. 다시 말해 폰트의 속성 중 굵기에 따라 구분됩니다.

일반적으로 지칭하는 폰트 한 개로도, 즉 하나의 타이프페이스를 사용해도 Light, Regular, Bold 등 굵기의 속성을 응용해서 디자인에 다양한 변화를 줄 수 있습니다.

예를 들어 글 또는 디자인에서 중요한 역할을 담당하는 제목과 키워드에 두꺼운(Bold) 폰트를 사용하는 것입니다.

위의 디자인에서 제목 “LAMB STEAK POTATO“를 보면 고딕체 스타일의 타이프페이스를 사용하고 폰트 획의 속성 중 굵기의 변화를 통해 표현하고 있습니다.

이렇게 하나의 타이프페이스를 사용하면서 폰트의 속성 중 굵기(Weight)를 잘 활용하면 디자인의 통일성을 유지할 수 있으면서 변화를 줄 수 있습니다. 비전공자와 디자인 초보자가 폰트를 디자인에 사용하는 데 있어서 안전하게 적용할 수 있는 한 방법입니다!

타이프페이스(Typeface)의 개념을 이해하고 적용할 수 있다면 당신은 이미 디자인 전문가입니다.^^

이러한 타이프페이스의 속성 중 Light, Regular, Bold 등의 폰트의 굵기를 활용하는 디자인 방법을 무게 대비(Weight Contrast) 또는 중량 대비라고 합니다.

2. [크기 대비] 폰트의 크기를 역할에 맡게 조절해주세요.

우리는 서류를 작성할 때 제목, 소제목, 본문의 폰트 크기를 다르게 적용합니다. 대부분 제목의 크기를 가장 크게 적용할 것입니다. 왜냐하면, 제목이 가장 중요한 역할을 담당하고 있기 때문입니다.

디자인 방법 중 일반적으로 제목, 소제목, 본문에 적용하는 크기의 비율이 있습니다. 본문이 10pt면 제목은 2배인 20pt로 설정하고, 소제목은 제목과 본문의 중간인 15pt를 적용합니다.

문장과 단락에서도 중요한 단어(Keyword)는 무게 대비로 두꺼운 폰트를 사용하면서 크기를 1.1~1.2배로 조금만 크게 하는 것도 강조해주면서 주목성을 높일 수 있는 디자인의 한 방법입니다.

이처럼 폰트를 적용하는 데 있어서 글 또는 디자인에서 담당하고 있는 역할에 맞춰 크기의 변화를 주는 대비 효과를 크기 대비(Size Contrast)라고 합니다.

디자인 트렌드(2021년도) 중 제목에 폰트를 굵게 그리고 특대형(Oversized)으로 적용하는 것이 유행입니다.

극단적인 크기 대비를 활용한 강조 효과를 통해 사용자에게 강한 인상을 심어주어 해당 미디어에 주목하게 하고 끌어들이기 위함입니다.

특대형의 제목을 사용할 때는 폰트 등 디자인의 구성요소를 심플하게 적용하는 것이 좋습니다!

3. [색상 대비] 1개의 컬러로 강조하고, 검은색의 변화를 적용하세요.

Kibana의 홈페이지 디자인을 보면 중요한 단어에 노란색을 사용하여 강조하였습니다. 이렇게 색으로 구별하여 디자인하는 방법을 색상 대비(Color Contrast)라고 합니다.

대비되는 컬러를 사용하여 해당 디자인 요소를 강조하는 방법에서는 주제색(Primary Color) 또는 강조색(Accent Color)을 정하고 적용하는 것이 좋습니다.

물론 주제색이든 강조색이든 1개의 색만 사용하는 것이 비전공자와 초보자에게 안전한 방법입니다.

디자인 시 간과하기 쉬운 것이 대부분 텍스트에 적용하는 검은색의 변화입니다.

검은색의 어둡기를 80% 정도 적용하면 회색으로 많이 밝아질 거라 생각되지만, 실제로는 어두운 회색(Dark Gray)으로 표현되어 알려주지 않으면 잘 모를 정도입니다.

위의 경우 제목에는 검은색 100%, 소제목에는 검은색 어둡기를 90%, 본문에는 80% 정도만 적용한 예입니다.

특히 디지털 환경에서는 본문의 경우 80% 정도의 어둡기를 적용한 검은색이 가독성을 높인다고 합니다.

이렇게 검은색의 밝기 조절을 통해 적용하는 방법(명도 대비)은 눈에 확연히 띄지는 않습니다. 하지만 이러한 작은 디테일을 적용하는 것이 좋은 디자인을 하는 방법이고 디자인 전문가가 많이 활용하는 방식입니다.

4. [모양 대비] 필요하면 비슷한 스타일의 폰트를 추가하여 변화를 주세요.

먼저 비전공자와 디자인 초보자는 타이프페이스 한 개를 적용하는 것을 추천합니다. 하지만 1개 정도 더 폰트를 추가하는 것도 디자인에 변화를 주는 방법이 됩니다.

단! 비슷한 모양의 폰트를 사용해주세요! 예를 들어 기존의 적용한 폰트의 스타일이 고딕체였을 경우에는 고딕체 계열로 적용하고, 명조체였으면 명조체 스타일의 폰트를 추가하는 것입니다.

위의 경우 제목에는 ‘나눔스퀘어 Bold’를 적용하고, 나머지는 ‘나눔고딕’을 사용한 예입니다. 이렇게 비슷한 스타일의 폰트를 적용하면 변화를 주면서도 통일성을 유지하는 전체적인 디자인의 일관성을 확보할 수 있습니다.

이렇게 다른 폰트를 사용하여 디자인의 변화를 주는 방법은 모양 대비(Shape Contrast)에 속합니다.

참조