웹에서 보이는 폰트의 유형

📖

웹에서 자주 보이는 폰트가 있죠. 그 중 산세리프(Sans-serif)와 세리프(Serif)에 대해 알아보겠습니다.

이번 글에서는 세리프, 산세리프, 모노스페이스 등 웹폰트에 대해서 정리해 보았습니다.

주로 사용되는 웹폰트 유형

웹 에디터를 보면 세리프, 산세리프, 모노 라는 것이 있어. 어떤 거야?

세리프(Serif): 글자 끝부분에 장식적인 돌기(획의 끝부분의 삐침)가 있는 서체에요. 주로 책이나 신문 등 긴 문장의 본문에 사용되며, 가독성이 좋아요. 대표적으로 Times New Roman이 있어요.

산세리프(Sans-serif): ‘돌기가 없는’이라는 뜻으로, 글자 끝부분이 깔끔하게 떨어지는 서체에요. 현대적이고 단순한 디자인으로, 디지털 화면에서 가독성이 좋아요. 대표적으로 Arial, Helvetica가 있어요.

모노스페이스(Monospace): 모든 글자가 동일한 너비를 가지는 서체에요. 주로 코딩이나 프로그래밍에서 사용되며, 글자 간격이 일정하여 코드의 정렬이 쉬워요. 대표적으로 Courier New가 있어요. = 모노, 고정폭

대표적인 Sans-serif, serif 폰트를 소개해 줘.

좋아! 대표적인 Sans-serif(산세리프)와 Serif(세리프) 폰트를 한눈에 볼 수 있게 정리해볼게. 웹디자인, 출판, 브랜드 등에서 자주 쓰이는 고전이자 인기 폰트들이야.

✨ Sans-serif (산세리프)

특징: 획 끝에 장식(세리프)이 없고, 깔끔하고 현대적인 느낌

폰트 이름	특징/사용 예시
Helvetica	깔끔하고 중립적. UI 디자인, 간판, 브랜드 로고 등에서 많이 사용
Arial	Helvetica 대체용으로 윈도우에 기본 탑재. 웹에서도 자주 쓰임
Roboto	구글에서 만든 시스템 폰트. 안드로이드 UI 기본 글꼴
Noto Sans	다양한 언어 지원. 깔끔하고 넓은 범용성
Open Sans	읽기 편해서 웹 본문, UI에 자주 사용됨
Pretendard	한국어+영어 모두 깔끔하게 지원. SF Pro 느낌
Inter	디지털 환경에 최적화된 폰트. 요즘 웹 서비스에서 인기
Figma Sans	Figma에 기본 탑재된 부드럽고 현대적인 폰트
Apple San Francisco	애플 UI 기본 서체. 깔끔하고 감각적

프리텐다드 (Pretendard) 폰트

프리텐다드는 무슨 폰트?

프리텐다드는 가변폭 글꼴(Proportional Font)이에요.
그래서 소문자 i는 좁고, 대문자 W는 넓은 폭을 차지하게 돼요. 모노스페이스(고정폭)가 아니라, 문자마다 폭이 다른 폰트입니다.

프리텐다드(Pretendard)는 산세리프 계열의 모던한 고딕체로,
애플의 시스템 폰트인 San Francisco를 기반으로 만들어졌어요.
그래서 macOS, iOS 사용자에게 익숙한 느낌이 들어요.
읽기 좋고 디자인적으로 세련된 느낌을 주지만, 코드나 정렬이 중요한 표에는 적합하지 않아요.

🪶 Serif (세리프)

특징: 획 끝에 장식이 있어서 전통적이고 고전적인 느낌. 인쇄물, 책에서 많이 사용됨.

폰트 이름	특징/사용 예시
Times New Roman	전통적인 신문, 학술 문서에 사용. MS Office 기본 서체
Georgia	웹 가독성을 고려한 세리프체. 웹 본문용으로도 좋음
Garamond	클래식하고 우아함. 고급 책자나 문학 작품에 어울림
Baskerville	정제되고 명확한 느낌. 디자인 포스터, 고급 브랜드 등
Merriweather	화면용으로 최적화된 세리프. 웹 타이포그래피용으로 인기
Noto Serif	다양한 언어 지원. 깔끔한 디지털 세리프

UI/웹에서는 대부분 Sans-serif를 사용 (가독성, 현대적 느낌)
책/논문/인포그래픽 등은 Serif를 선호 (전통적이고 안정적인 분위기)
브랜드는 폰트 하나로 톤앤매너가 확 바뀌니까 적절한 조합이 중요해.

가변폭/고정폭, 전각/반각 용어

가변폭과 고정폭은 뭐야?

가변폭(Variable Width): 각 글자가 자신의 실제 너비에 맞게 다른 공간을 차지하는 방식이에요. 예를 들어 ‘i’는 좁은 공간을, ‘W’는 넓은 공간을 차지하죠. 대부분의 현대 폰트가 이 방식을 사용해서 자연스럽게 읽을 수 있어요. = 변동폭이라고도 부름

고정폭(Fixed Width): 모노스페이스와 같은 의미로, 모든 글자가 동일한 너비를 차지하는 방식이에요.

전각과 반각은 뭐야?

전각(Full-width): 주로 동아시아 문자 체계에서 사용되는 개념으로, 글자가 정사각형 모양의 전체 공간을 차지하는 것을 의미해요. 한자나 한글 등이 대표적이에요.

반각(Half-width): 전각의 절반 크기를 차지하는 문자를 의미해요. 주로 영문자나 숫자가 이에 해당하며, 동아시아 문자와 함께 사용될 때 공간 효율성을 높이기 위해 사용돼요.

전각(全角)과 반각(半角)은 글자 하나가 차지하는 공간의 크기를 말해.
글꼴(폰트)보다는 문자의 너비 속성에 대한 개념이야 — 특히 한글, 한자, 일본어, 숫자, 기호 등에서 중요하게 쓰이지.

🟥 전각(全角, Full-width)

글자 하나가 정사각형 공간을 가득 차지함
한글, 한자, 일본어, 특수기호 등이 대표적
폭이 넓음. 알파벳/숫자도 전각으로 표현되면 가로로 많이 차지함
코드 작성 시 정렬이 깨져 ❌ 비권장
예시: 가, 中, Ａ, １한 자 전 각
Ａ　Ｂ　Ｃ　１　２　３

🟦 반각(半角, Half-width)

글자 하나가 전각의 절반 너비를 가짐
영어 알파벳, 숫자, 일반적인 기호는 대부분 반각
코드 작성에 선호됨 (고정폭과 잘 어울림)
예시: A, 1, a, !ABC123!@

전각/반각은 같은 문자라도 다르게 표현될 수 있음

문자	전각	반각
A	Ａ	A
1	１	1
공백	全角 공백	일반 스페이스( )

그래서 문서나 DB 다룰 때 전각/반각이 섞이면 정렬이 틀어지거나, 검색이 안 되거나, 디자인이 깨질 수 있음.

어느 나라에서 전각을 많이 써?

좋은 질문이야! 전각(全角)은 주로 동아시아 문화권에서 많이 써.
왜냐하면 한글, 한자, 가나(일본 문자) 등은 구조적으로 복잡하고,
가독성이나 시각적 정렬을 위해 정사각형 공간 안에 표현되는 게 적절하거든.

🌏 전각을 많이 쓰는 나라들

나라	사용하는 문자	전각 사용 이유
🇰🇷 한국	한글, 한자	글자 구조상 정사각형에 맞춤. 타자기/문서 정렬에서 전각 기준 사용
🇯🇵 일본	히라가나, 가타카나, 한자	전통적으로 전각 문자 기반. 특히 일본어 타자나 인쇄에서 전각 필수
🇨🇳 중국	한자	복잡한 구조의 글자를 일정한 공간에 넣기 위해 전각 사용

🔠 영어권(서구권)과의 차이

영어, 유럽권 등은 라틴 알파벳 기반이기 때문에 → **반각(좁은 폭)**으로도 충분히 표현 가능 → 그래서 기본적으로 전각을 거의 안 써
전각 알파벳이나 숫자 (ＡＢＣ, １２３)는 동아시아 특수환경에서만 주로 등장해

이런 곳에 전각 문자가 쓰여요:

일본어 웹사이트: 전각 알파벳과 숫자가 많이 섞임
(예: Ｈｅｌｌｏ，２０１９年！)
한글 문서 포맷: 오래된 공문서나 학교 숙제에서 전각 공백 사용하기도 함
게임/콘솔 UI: 한글/한자/가나 정렬을 맞추기 위해 전각 기반 렌더링
인쇄물, 타자기: 예전엔 전각 기준이 표준

요즘은 디지털 환경이 유연해져서 전각보다 반각을 많이 쓰지만,
동아시아 언어의 기본 문자 구조는 여전히 전각 기반이에요

웹에서 범용 폰트를 사용하지 못하게 하는 이유

요즘 웹 서비스에서 PC용 폰트를 사용할 수 없는 이유는 뭐야?

좋은 질문이야! 요즘 웹 서비스에서 PC에 설치된 시스템 폰트를 그대로 사용하지 않는 이유는 몇 가지가 있어. 핵심만 딱딱 짚어줄게!

PC용(시스템) 폰트를 웹에서 안 쓰는 이유

사용자마다 설치된 폰트가 다르기 때문

어떤 사람은 윈도우, 어떤 사람은 맥, 또 어떤 사람은 리눅스를 써.
각각 기본으로 설치된 폰트가 다 달라서, 디자인이 제각각 보일 수 있어.
- 예: 윈도우에선 Malgun Gothic, 맥에선 Apple SD Gothic Neo 등이 기본.
같은 웹페이지라도 폰트 차이로 레이아웃이 깨지거나, 분위기가 달라져 버릴 수 있어.

브랜드 일관성 문제

서비스마다 고유의 이미지나 감성이 중요한데,
시스템 폰트를 쓰면 브라우저/OS에 따라 폰트가 바뀌어서 브랜드 톤이 깨짐.

한글 폰트는 특히 편차가 큼

영문은 기본 시스템 폰트도 괜찮은 게 많은데,
한글은 시스템 글꼴 품질이 낮거나 미묘하게 다르게 생긴 게 많아.
그래서 디자이너들은 한글 디자인 품질 유지하려고 직접 웹폰트를 씀

웹폰트 기술이 좋아짐

@font-face를 이용하면 브라우저가 폰트를 웹에서 불러와서 렌더링할 수 있어.
덕분에 특정 폰트를 모든 사용자에게 동일하게 보여줄 수 있음.
Pretendard 같은 오픈소스 웹폰트도 많아져서 사용도 쉬워졌어.

웹폰트 단점

🤔 그런데 웹폰트는 용량 무거운 거 아냐?

맞아, 단점도 있어.

로딩 지연: 처음 페이지 열 때 웹폰트 다운로드 때문에 살짝 느릴 수 있음.
FOUT/FOIT 현상: 폰트가 늦게 적용되거나 깜빡거리기도 해.

그래서 성능 고려해서 꼭 필요한 폰트만 제한적으로 쓰거나,
font-display: swap 같은 CSS 속성으로 성능 최적화도 같이 하게 돼.

※ GPT-4를 사용하는 생성형 AI 서비스가 작성하는 내용을 기반으로 필자가 교차 검증과 팩트 체크를 통해 정확한 정보를 전달, 게시합니다. 어투를 친숙하게 변형하고자 노력하지만 생성형 인공지능의 어투가 남아 있음을 참고해 주세요.

※ 콘텐츠에 오류 또는 실수가 있을 수 있습니다. 잘못된 정보를 제공하고 있을 경우 언제든지 댓글 또는 공식 연락처를 통해 제보해 주시면 수정하도록 하겠습니다. 관심 가져 주셔서 감사합니다.