폰트를 고를 때 가장 자주 나오는 질문이 있습니다. 산세리프가 더 현대적인가요? 세리프는 오래된 느낌인가요? 본문에는 세리프가 더 잘 읽히고, 화면에는 산세리프가 더 적합한가요?
이 질문들은 완전히 틀린 질문은 아니지만, 그대로 믿고 디자인 시스템에 적용하기에는 너무 거칩니다. 폰트는 장식이 아니라 인터페이스의 언어입니다. 어떤 글꼴을 쓰느냐에 따라 정보의 위계, 제품의 분위기, 사용자의 읽기 속도, 심지어 폴백 상황에서의 화면 안정성까지 달라집니다.
그래서 산세리프와 세리프를 고를 때는 "어느 쪽이 더 예쁜가"보다 "이 제품에서 이 텍스트가 어떤 일을 해야 하는가"를 먼저 봐야 합니다.
산세리프와 세리프의 차이
세리프(serif)는 글자 획 끝에 작은 마감 장식이나 삐침이 있는 계열입니다. CSS Fonts Module Level 4에서도 serif 계열을 획 끝의 마감, 벌어짐, 두께 대비가 나타나는 글꼴로 설명합니다. 반대로 산세리프(sans-serif)는 이름 그대로 serif가 없는 계열입니다. 획 끝이 비교적 단순하고, 굵기 대비가 작으며, 기하학적이거나 중립적인 인상을 주는 경우가 많습니다.
.article {
font-family: "Noto Serif KR", Georgia, serif;
}
.product-ui {
font-family:
"Pretendard Variable",
Pretendard,
system-ui,
sans-serif;
}여기서 중요한 점은 serif와 sans-serif가 특정 폰트 이름이 아니라 generic font family라는 것입니다. 브라우저는 앞에 적힌 폰트를 사용할 수 없거나 필요한 글리프가 없을 때 뒤에 적힌 후보를 순서대로 확인합니다. MDN의 font-family 문서도 폰트 선택이 리스트의 첫 번째 폰트에서 끝나는 것이 아니라, 필요한 문자 단위로 다음 폰트를 시도할 수 있다고 설명합니다.
즉 serif와 sans-serif는 시각적 취향을 적는 값이면서 동시에 실패했을 때 디자인 의도를 보존하기 위한 마지막 안전장치입니다.
산세리프가 자주 쓰이는 이유
디지털 제품에서는 산세리프를 기본 폰트로 쓰는 경우가 많습니다. 이유는 단순히 "현대적으로 보여서"가 아닙니다.
산세리프는 획 끝의 장식이 적고 형태가 단순해서 작은 크기, 낮은 해상도, 다양한 UI 밀도에서 비교적 안정적으로 보입니다. 버튼, 탭, 입력창, 테이블, 내비게이션처럼 짧은 텍스트가 반복되는 화면에서는 이 단순함이 장점이 됩니다.
특히 제품 UI에서는 텍스트가 독립적으로 읽히지 않습니다. 아이콘, 색상, 간격, 상태값, 에러 메시지, 숫자 데이터와 함께 스캔됩니다. 사용자는 문장을 감상하기보다 필요한 정보를 빠르게 찾습니다. 이때 산세리프의 중립성과 단순한 실루엣은 화면의 잡음을 줄이는 데 도움이 됩니다.
하지만 산세리프가 항상 좋은 것은 아닙니다. 모든 텍스트를 산세리프로 통일하면 제품의 성격이 지나치게 평평해질 수 있습니다. 특히 긴 에세이, 브랜드 스토리, 편집형 콘텐츠처럼 읽는 경험 자체가 중요한 화면에서는 산세리프만으로는 리듬과 분위기를 만들기 어렵습니다.
세리프가 필요한 순간
세리프는 단순히 오래된 느낌을 내는 장식용 폰트가 아닙니다. 긴 문장, 인용문, 제목, 사설형 콘텐츠, 브랜드 중심 페이지에서는 세리프가 더 강한 인상을 만들 수 있습니다.
세리프 계열은 획의 대비와 끝처리 덕분에 글자 형태의 개성이 더 뚜렷하게 드러나는 경우가 많습니다. 그래서 같은 문장이라도 조금 더 문학적이거나 신뢰감 있는 분위기를 줄 수 있습니다. 출판, 매거진, 포트폴리오, 고급 소비재, 법률·금융 브랜드의 일부 영역에서 세리프가 자주 쓰이는 이유도 여기에 있습니다.
다만 세리프는 UI 전체에 무작정 적용하기 어렵습니다. 작은 버튼, 밀도 높은 표, 모바일 하단 내비게이션처럼 제한된 공간에서는 획의 디테일이 오히려 노이즈가 될 수 있습니다. 한글 세리프 계열은 서체 품질, 굵기 지원, 웹폰트 용량, 화면 렌더링 상태에 따라 결과 차이도 큽니다.
그래서 세리프를 쓸 때는 "감성적인 느낌이 필요해서"에서 멈추지 말고, 어떤 텍스트 계층에 적용할지 좁혀야 합니다. 예를 들어 본문 전체가 아니라 큰 제목, 인용문, 에디토리얼 섹션에만 쓰는 식입니다.
한글에서는 더 조심해야 합니다
영문 타이포그래피에서 말하는 serif와 sans-serif의 감각을 한글에 그대로 옮기면 어색해질 때가 많습니다. CSS Fonts Module Level 3는 한국어에서 serif에 대응하는 예로 바탕 계열, sans-serif에 대응하는 예로 굴림 계열을 언급합니다. 하지만 실제 제품 디자인에서는 명조, 고딕, 바탕, 돋움, 굴림이라는 이름이 섞여 쓰이고, 각 서체의 인상도 제작 방식에 따라 크게 달라집니다.
한글은 조합형 구조와 받침, 초성·중성·종성의 균형 때문에 영문보다 글자 내부의 밀도가 높게 느껴질 수 있습니다. 같은 16px이라도 한글 본문이 더 답답해 보이거나, 특정 굵기에서 획이 뭉쳐 보이는 경우가 있습니다.
그래서 한글 폰트를 고를 때는 대표 문장 하나만 보면 부족합니다. 최소한 다음 텍스트를 함께 확인해야 합니다.
- 받침이 많은 문장
- 숫자와 단위가 섞인 문장
- 영문 약어가 들어간 문장
- 버튼처럼 짧은 명령형 텍스트
- 에러 메시지처럼 긴 설명형 텍스트
- 굵기별 제목과 본문 조합
폰트는 시안의 한 문장에서만 잘 보이면 되는 요소가 아닙니다. 실제 서비스에서는 사용자가 입력한 이름, 긴 상품명, 다국어, 숫자, 날짜가 계속 섞입니다. 이 조합에서 버티는지가 더 중요합니다.
폴백까지 포함해서 선택해야 합니다
디자인 시안에서는 선택한 폰트가 항상 정상적으로 보입니다. 하지만 웹에서는 그렇지 않습니다. 웹폰트 다운로드가 실패할 수 있고, 특정 브라우저나 운영체제에서 렌더링이 다르게 보일 수 있으며, 선택한 폰트가 일부 글리프를 포함하지 않을 수도 있습니다.
이때 마지막 generic family가 잘못되어 있으면 폰트 로딩 실패 순간에 제품의 인상이 완전히 달라질 수 있습니다.
/* 세리프 본문이라면 마지막도 serif로 끝내는 편이 자연스럽습니다. */
.editorial-body {
font-family: "Noto Serif KR", "Apple SD Gothic Neo", serif;
}
/* UI 산세리프라면 시스템 UI와 sans-serif 폴백을 명시합니다. */
.app-shell {
font-family:
"Pretendard Variable",
Pretendard,
-apple-system,
BlinkMacSystemFont,
system-ui,
sans-serif;
}좋은 폴백은 완전히 같은 화면을 보장하지 않습니다. 대신 실패했을 때도 같은 계열의 인상을 유지하게 해줍니다. 세리프를 의도한 본문이 갑자기 산세리프로 떨어지거나, 산세리프 UI가 예상과 다른 장식적 폰트로 바뀌는 일을 줄이는 것입니다.
이 관점에서 serif와 sans-serif는 CSS의 형식적인 마지막 값이 아닙니다. 제품의 타이포그래피 의도를 브라우저에게 끝까지 설명하는 값입니다.
실무에서 고르는 기준
산세리프와 세리프를 고를 때는 다음 순서로 보는 것이 좋습니다.
첫째, 텍스트의 역할을 먼저 정합니다. 내비게이션, 버튼, 폼, 테이블처럼 빠르게 스캔해야 하는 텍스트라면 산세리프가 유리한 경우가 많습니다. 반대로 긴 읽기 경험, 브랜드 메시지, 에디토리얼 콘텐츠라면 세리프를 검토할 만합니다.
둘째, 화면 크기와 밀도를 봅니다. 모바일 작은 화면, 관리자 페이지, 데이터 테이블처럼 정보 밀도가 높은 환경에서는 디테일이 많은 서체보다 안정적인 산세리프가 관리하기 쉽습니다. 넓은 화면의 히어로, 제목, 포스터형 섹션에서는 세리프가 더 강한 계층감을 만들 수 있습니다.
셋째, 언어와 문자 조합을 확인합니다. 한글만 보는 것이 아니라 영문, 숫자, 기호, 이모지, 다국어까지 함께 테스트해야 합니다. 특히 제품에서는 API, OAuth, 12,500원, 2026-06-15 같은 조합이 자주 등장합니다.
넷째, 굵기와 행간을 함께 봅니다. 같은 서체라도 font-weight, line-height, letter-spacing에 따라 가독성이 크게 달라집니다. 폰트 선택만으로 문제를 해결하려고 하면 오히려 조정해야 할 지점을 놓치기 쉽습니다.
다섯째, 폴백을 설계합니다. 웹폰트가 실패했을 때도 같은 계열의 인상이 유지되도록 마지막 generic family를 명확히 적어야 합니다. 산세리프를 썼다면 sans-serif, 세리프를 썼다면 serif로 끝내는 것이 기본입니다.
피해야 할 선택
가장 피해야 할 접근은 분위기만 보고 폰트를 고르는 것입니다. "고급스러워 보여서 세리프", "깔끔해 보여서 산세리프" 정도의 판단은 초안 단계에서는 가능하지만, 제품에 넣기 전에는 부족합니다.
또 하나는 한 가지 폰트로 모든 문제를 해결하려는 태도입니다. 디자인 시스템에서는 하나의 대표 폰트를 정하는 것이 중요하지만, 모든 계층에 같은 방식으로 적용할 필요는 없습니다. UI 기본 폰트는 산세리프로 두고, 긴 읽기 콘텐츠나 브랜드 섹션에만 세리프를 제한적으로 쓰는 전략이 더 현실적일 수 있습니다.
마지막으로 폴백을 생략하는 것도 위험합니다.
/* 비추천: 실패했을 때 의도를 브라우저에 설명하지 못합니다. */
body {
font-family: "Some Web Font";
}이 코드는 시안에서는 문제가 없어 보일 수 있습니다. 하지만 운영 환경에서는 폰트 로딩 실패, 글리프 누락, 플랫폼 차이 앞에서 너무 취약합니다.
정리
산세리프와 세리프의 선택은 취향 문제가 아니라 텍스트의 역할을 정하는 문제입니다. 산세리프는 밀도 높은 UI와 빠른 스캔에 강하고, 세리프는 긴 읽기 경험과 브랜드의 목소리를 만드는 데 강합니다. 하지만 둘 중 하나가 항상 정답은 아닙니다.
좋은 선택은 폰트 이름에서 끝나지 않습니다. 실제 문장, 한글과 영문 조합, 숫자, 굵기, 행간, 화면 크기, 폴백까지 함께 확인해야 합니다. 디자인 시스템에서 폰트를 고른다는 것은 예쁜 서체를 고르는 일이 아니라, 제품이 실패 상황에서도 같은 목소리로 말하게 만드는 일에 가깝습니다.
따라서 산세리프와 세리프를 고를 때는 먼저 이렇게 질문하는 것이 좋습니다.
이 텍스트는 사용자가 빠르게 찾아야 하는 정보인가요, 아니면 오래 읽고 느껴야 하는 콘텐츠인가요?
그 질문에 답할 수 있다면 어떤 계열을 선택해야 할지도 훨씬 분명해집니다.
