타이포그래피

시각디자인에서 타이포그래피는 레이아웃과 더불어 가장 핵심적인 요소 중 하나입니다. 단순히 문자를 꾸미는 것을 넘어, 가독성, 심미성, 주목성, 판독성 등 다양한 시각적 기능을 종합적으로 고려하는 것이 실무 타이포그래피의 핵심입니다. 글의 목적과 맥락에 따라 어떤 경우는 가독성이, 어떤 경우는 심미성이 더 중요해질 수 있습니다. 이처럼 목적에 맞는 타이포그래피를 구현하기 위해서는 여러 요소에 대한 이해가 필요하며, 본문에서는 그 핵심 요소들을 하나씩 살펴보겠습니다.

01. 폰트의 종류

폰트는 시각디자인에서 콘텐츠의 성격과 목적에 따라 선택되어야 하며, 크게 **본문용 서체(텍스트용)**와 **표현용 서체(디스플레이용)**로 나눌 수 있습니다.

1. 본문용 서체

본문에 사용되는 서체는 가독성과 판독성이 핵심 기준입니다. 장시간 읽기에도 눈의 피로가 적고, 다양한 매체에서 안정적으로 보이는 것이 중요합니다. 본문용 서체는 다시 두 가지 계열로 나뉩니다

고딕체 Sans Serif

획의 굵기 변화가 거의 없고, 깔끔하고 모던한 인상을 주어 웹 및 디지털 매체에서 많이 사용됩니다.

· Noto Sans KR

· 나눔스퀘어

· 나눔바른고딕

· Pretendard

· Spoqa Han Sans

· Apple SD Gothic Neo (Mac 기본)

명조체 Serif

획 끝에 장식이 있는 전통적인 스타일로, 인쇄물이나 긴 문장에 적합합니다. 클래식하고 신뢰감 있는 느낌을 줍니다.

· Noto Serif KR

· 나눔명조

· 마루부리

· 제주명조

· 바른명조

2. 표현용 서체 디스플레이용, 꾸밈체

표제, 인포그래픽, 광고 등에서 사용되는 꾸밈 서체는 시선을 끌고 개성을 표현하기 위해 사용됩니다. 스타일이 다양하며, 목적에 따라 선택의 폭이 매우 넓습니다. 단, 과도한 장식이나 복잡한 형태는 본문에 부적합하며 제한적인 용도로 사용하는 것이 좋습니다.

※ 폰트 다운로드 대표 사이트 :

· 눈누폰트 : 상업용 무료 한글 서체를 다양하게 제공

· FontShare, Google Fonts : 영문 및 다국어 무료 서체

· dafont.com : 영문 무료 디스플레이 서체 검색에 유용 (사용 전 라이선스 확인 필요)

3. 유료 서체

프로젝트의 브랜드 톤앤매너를 정확히 반영하거나 고급스러운 인상을 줄 때 유료 서체 사용이 적절합니다.

국내 대표 유료 서체 브랜드는 다음과 같습니다:

· 윤디자인그룹 (Yoon Design)

· 산돌커뮤니케이션 (Sandoll)

· 타입디자인랩, 폰트릭스, 폰트클럽 등

서체 사용 시 반드시 라이선스를 확인하고, 사용 목적(웹, 앱, 인쇄 등)에 맞는 계약 여부를 체크해야 합니다.

02.폰트의 단위

폰트의 단위는 **사용 환경(인쇄 / 웹 / 모바일 앱)**에 따라 서로 다른 기준을 가집니다. 단위를 정확히 이해하면, 다양한 매체에서 일관된 타이포그래피를 구현할 수 있습니다.

1. 인쇄 환경에서의 단위

· pt point

인쇄 분야에서 가장 널리 사용되는 단위입니다. 1pt는 일반적으로 1/72인치에 해당하며, 대부분의 DTP(Desktop Publishing) 소프트웨어에서도 기본 단위로 사용됩니다.

· pica

1pica는 12pt에 해당합니다. 주로 미국 전통 인쇄 산업에서 사용되었으며, 현재는 점차 사용 빈도가 줄어들고 있습니다.

인쇄 환경은 일반적으로 300dpi(ppi) 기준에서 작업되며, 이 경우1pt는 4.16픽셀(px)정도 됩니다. 그러나 실제 출력물에서는 해상도와 출력 장비에 따라 상대적 크기가 달라질 수 있습니다.

2. 웹 디자인 및 UI 코딩에서의 단위

웹 환경에서는 디지털 화면의 해상도와 사용자 설정에 따라 상대 단위와 절대 단위가 혼합되어 사용됩니다.

· px pixel

가장 직관적인 단위로, 화면상의 실제 픽셀 수를 기준으로 합니다. 고해상도(HiDPI) 기기에서는 상대적으로 작게 보일 수 있습니다.

· pt point

웹에서는 거의 사용되지 않으며, 인쇄 미리보기나 PDF 렌더링 등 특수한 경우에만 사용됩니다.

· em

현재 요소의 폰트 크기 기준 상대 단위입니다. 예를 들어, 부모 요소의 글자가 16px일 때 1.5em은 24px입니다. 상속 영향을 받습니다.

· rem

문서의 루트 요소(html)의 폰트 크기를 기준으로 하는 상대 단위입니다. html { font-size: 16px; }이면, 1rem은 항상 16px입니다. 상속에 영향을 받지 않아 일관성 유지에 유리합니다.

· %

주로 line-height, letter-spacing 등에 사용되며, 상대적인 비율로 크기를 지정합니다.

웹에서는 rem을 기준 단위로 삼고, em은 내부 요소 조정에 사용하면 유지보수와 반응형 대응에 유리합니다.

3. 모바일 앱 단위

iOS : pt point

iOS에서의 pt는 논리적 픽셀(logical pixel) 단위입니다. 1pt는 일반적으로 2~3개의 실제 픽셀로 렌더링됩니다 (Retina 디스플레이 기준).

Android : sp scale-independent pixel

sp는 사용자 설정에 따른 텍스트 크기 확대/축소에 대응하는 단위입니다. 텍스트 크기에만 사용하며, 시각적 일관성과 접근성을 보장합니다. 또한 **dp(density-independent pixel)**와 유사하지만, dp는 UI 요소 전체에 사용되고, sp는 텍스트에 특화되어 있습니다.

03. 크기와 두께

1. 폰트의 크기 Font Size

폰트의 크기는 **문자의 세로 길이(높이)**를 기준으로 하며, 사용하는 매체와 툴에 따라 단위와 권장 크기가 달라집니다.

· 인쇄물 디자인에서는 일반적으로 pt(point) 단위를 사용하며, 본문의 경우 6~11pt 정도가 적정 범위입니다. 최소 크기는 가독성과 용지 크기에 따라 다르지만 5pt 이하의 사용은 지양하는 것이 좋습니다. 제목이나 캡션 등은 문맥에 따라 홀수나 소수점 단위도 사용됩니다.

· 웹 및 앱 디자인에서는 주로 px(pixel) 단위를 사용하며, 본문 기준으로 14~20px가 일반적인 범위입니다.

단, 모바일 환경에서는 ‘논리 픽셀(logical pixel)’ 기준으로 동작하기 때문에, 실제 디바이스 해상도에 따라 렌더링 크기가 달라질 수 있습니다.

웹/앱에서는 가급적 정수 및 짝수 px 값을 사용하는 것이 권장됩니다. 이는 렌더링 오차와 뭉개짐을 방지하기 위함입니다.

2. 폰트의 두께 Font Weight

폰트의 두께는 글자의 시각적 무게감을 결정하며, 각 폰트마다 제공되는 두께(weight)의 종류와 범위는 다를 수 있습니다. 일반적으로 다음과 같은 단계로 구분됩니다:

· Thin

· Light

· Regular / Normal

· Medium

· Bold

· Black / Heavy

숫자로 표현할 경우 CSS에서는 100(Thin)부터 900(Black)까지 100단위로 지정합니다.

· 본문 

보통 Regular 또는 Light를 사용하여 장시간 읽기에도 부담이 없도록 합니다.

· 제목 및 강조 텍스트

Medium, Bold를 활용해 시각적 위계를 줍니다.

· Thin 또는 Black 

세련되거나 극적인 느낌을 줄 수 있으나, Thin은 작은 크기에서는 가독성이 낮아 사용을 피하는 것이 좋습니다.

※ 활용 팁

· 너무 다양한 두께를 혼합하면 시각적 일관성이 깨질 수 있으므로, 3단계 이내의 weight만 사용하는 것이 이상적입니다.

· 디지털 환경에서는 반응형 웹 또는 고해상도 디바이스에서도 안정적으로 보일 수 있도록 가독성 확보에 주의해야 합니다.

04. 자간과 행간

가독성 좋은 타이포그래피를 만들기 위해서는 폰트의 종류나 두께뿐만 아니라, 자간(letter-spacing)과 행간(line-height) 설정이 매우 중요합니다. 텍스트를 어떻게 연결되고, 어떻게 나뉘어 보이게 할 것인지 결정짓는 핵심 요소입니다.

1. 자간 Letter-spacing

자간은 글자 간 간격을 의미하며, 글줄 내의 연결감과 밀도에 영향을 미칩니다.

· 자간이 너무 좁으면 글자가 뭉쳐 보이고 가독성이 저하됩니다.

· 반대로 자간이 너무 넓으면 글줄의 흐름이 끊겨 보이며, 단어 인지가 어려워질 수 있습니다.

적절한 자간은 단어 단위의 인지를 쉽게 하고, 글줄의 일체감을 높여줍니다.

· 일반적으로 본문 자간은 약 0% ~ +5% 이내에서 조정되며,

· 인쇄물은 0에서 -25 사이,

· 웹에서는 기본 0 또는 약간의 음수(-0.5px)로 시작하는 경우도 있습니다.

2. 행간 Line-height

행간은 줄과 줄 사이의 간격으로, 텍스트의 수직적 흐름과 시각적 안정성을 결정합니다. 문단을 구분 짓고, 읽는 속도와 집중도에도 큰 영향을 줍니다. 행간은 작업공간과 글줄의 길이에 따라 다양하게 조절이 되어야합니다.

· 기본적인 기준은 보통 폰트 크기의 1.4 ~ 1.6배, 최대 2배 입니다.

예: 16px 폰트 → line-height: 24px ~ 26px

· 행간이 너무 좁으면 글줄이 붙어 보이며 압박감을 줄 수 있고, 너무 넓으면 줄과 줄의 연결성이 떨어져 시선이 분산됩니다.

3. 조합 원칙

· 자간이 타이트하면 행간도 타이트하게

· 자간이 넉넉하면 행간도 넉넉하게

자간과 행간은 서로 비례적으로 조정해야 자연스러운 타이포그래피가 완성됩니다.

글줄 길이가 길수록 행간은 여유 있게, 글줄 길이가 짧으면 행간도 압축적으로 구성하는 것이 좋습니다.

※ 요약

자간은 글의 밀도와 흐름, 행간은 호흡과 구분감을 만들어냅니다. 두 요소를 함께 조절하면 텍스트의 전달력과 시각적 완성도를 동시에 끌어올릴 수 있습니다.

05. 장평과 정렬

1. 장평 Character Width, 글자의 가로 비율

장평은 글자의 가로폭 비율을 의미하며, 텍스트의 압축도와 시각적 안정성을 결정짓는 중요한 요소입니다. 보통 100%가 서체 본연의 비율이며, 이 상태에서 조형적으로 가장 안정적이고 가독성이 높습니다.

· 장평은 가능한 100%를 유지하는 것이 이상적입니다. 폰트를 설계한 디자이너가 조형적 균형을 고려하여 제작했기 때문에, 임의로 변형하는 것은 가독성과 조형미를 해칠 수 있습니다.

· 다만, 특정 상황에서는 예외적으로 95~97% 수준의 미세 조정은 허용됩니다. 특히 **편집디자인(책자, 브로셔 등)**에서 제한된 공간에 많은 텍스트를 넣어야 할 경우 가독성을 해치지 않는 선에서 장평을 조절해 텍스트 배치 효율을 높이기도 합니다.

· 패키지 디자인, 특히 식품 패키지의 정보표시면에서는 법적 텍스트 크기 기준(예: 주원료/원산지 12pt 이상)을 맞추면서도 제한된 면적에 텍스트를 밀도 있게 넣기 위해 장평을 줄이는 경우가 많습니다. 이로 인해 자간이 지나치게 좁아지고 조형적으로 아쉬운 경우도 있지만, 법규 준수를 위한 불가피한 선택이라는 점에서 이해가 필요합니다.

장평이 과도하게 줄어들면 글자가 뭉개져 보이고, 넓어지면 비정상적으로 늘어난 인상을 줄 수 있으므로 항상 90~105% 이내로 제한하는 것이 좋습니다.

2. 정렬 Text Alignment

텍스트 정렬은 시각적 흐름, 위계 구조, 사용성에 직접적인 영향을 주는 요소입니다. 텍스트 콘텐츠의 성격에 따라 적절한 정렬 방식을 선택해야 합니다.

· 좌측 정렬 Left Align

대부분의 한글, 영문 본문에 기본 적용되는 정렬 방식입니다. 시선의 흐름이 일정해 가독성이 높고, 긴 문장에도 안정적입니다.

· 양쪽 정렬 Justify

단어 길이가 일정한 영문에 적합하며, 단락 전체를 균형 있게 정렬할 수 있습니다. 한글에서는 단어 단위 띄어쓰기와 줄바꿈 이슈로 인해 문장 간격이 불균형하게 벌어질 수 있어 주의가 필요합니다.

· 중앙 정렬 Center Align

짧은 문장이나 제목, 인용구, 행사 안내 등 강조가 필요한 콘텐츠에 적합합니다. 긴 문장에는 가독성이 떨어지므로 본문에서는 지양합니다.

· 우측 정렬 Right Align

숫자 정렬, 가격 정보, 발신자 정보 등 끝단 기준 정렬이 필요한 경우에 사용됩니다.

디지털 매체에서는 반응형 대응을 위해 좌측 정렬 + 적절한 줄바꿈 길이가 가장 일반적이며 안정적인 선택입니다.

06. 폰트색상

폰트 색상은 디자인의 분위기, 목적, 매체 환경에 따라 유연하게 활용할 수 있는 요소입니다.

하지만 인쇄와 웹은 색상의 표현 방식과 시각적 체감이 매우 다르므로, 환경에 맞는 기준을 이해하고 적용해야 합니다.

1. 인쇄에서의 폰트 색상 CMYK 환경

인쇄 디자인에서는 CMYK 컬러 모델을 사용합니다. 이 중 **블랙(K값)**은 가장 기본적인 본문 색상으로 사용되며, 특히 작은 본문 글씨의 경우 아래 사항을 준수해야 합니다:

· K : 100% (순수 블랙)을 사용하는 것이 원칙입니다. 이는 작은 크기의 텍스트에서도 인쇄 품질이 선명하고, 망점 분리 오차(Registration Error)를 방지할 수 있습니다.

· K: 90%까지는 두꺼운 제목 등에서 시각적 차이를 줄 수 있으나, 본문에는 지양합니다.

· CMYK를 혼합한 블랙(C=60, M=60, Y=60, K=100 등)은 절대 본문용으로 사용하면 안 됩니다. 이른바 “리치 블랙(Rich Black)“은 색상 깊이감은 있지만, 작은 글씨에서는 인쇄 뭉침이나 흐림 현상이 발생할 수 있습니다.

본문용 블랙 = K : 100% 단독 사용이 기본 원칙

2. 웹에서의 폰트 색상 RGB 환경

웹과 모바일에서는 RGB 모델을 사용하며, 디스플레이 장치의 발광 방식에 따라 빛의 대비가 인쇄보다 훨씬 강합니다. 이 때문에 색상 사용 시 아래 사항에 유의해야 합니다.

· 웹에서의 #000000 (완전한 블랙)은 눈에 피로감을 주거나 지나치게 강한 대비를 유발할 수 있습니다.

이는 흰 배경(빛 100%)과의 대비가 과도하게 날카롭기 때문입니다.

· 따라서 본문에서는 완전한 블랙 대신 다크 그레이 계열을 사용하는 것이 바람직합니다.

추천 예시 :

#111111 , #222222, #333333

또는 Tailwind 기준 text-neutral-800 / text-zinc-700 등

시각적 부드러움과 가독성 향상을 동시에 확보할 수 있으며, 다크모드 디자인과의 조화도 고려한 설정이 됩니다.

※ 실무 팁

· 폰트 색상은 시각적 목적 외에도 가독성, 접근성, 브랜드 아이덴티티에 영향을 줍니다.

· 특히 웹 디자인에서는 **WCAG 기준 대비 비율(명도 대비)**도 고려하여 색상을 선택해야 합니다.