산세리프와 세리프, 무엇을 기준으로 골라야 할까

폰트를 고를 때 가장 자주 나오는 질문이 있어요. 산세리프가 더 현대적인가요? 세리프는 오래된 느낌인가요? 본문에는 세리프가 더 잘 읽히고, 화면에는 산세리프가 더 적합한가요?

이 질문들은 완전히 틀린 질문은 아니지만, 그대로 믿고 디자인 시스템에 적용하기에는 너무 거칩니다. 폰트는 장식이 아니라 인터페이스의 언어예요. 어떤 글꼴을 쓰느냐에 따라 정보의 위계, 제품의 분위기, 사용자의 읽기 속도, 심지어 폴백 상황에서의 화면 안정성까지 달라져요.

그래서 산세리프와 세리프를 고를 때는 "어느 쪽이 더 예쁜가"보다 "이 제품에서 이 텍스트가 어떤 일을 해야 하는가"를 먼저 봐야 해요.

산세리프와 세리프의 차이

세리프(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와 빠른 스캔에 강하고, 세리프는 긴 읽기 경험과 브랜드의 목소리를 만드는 데 강해요. 하지만 둘 중 하나가 항상 정답은 아니예요.

좋은 선택은 폰트 이름에서 끝나지 않아요. 실제 문장, 한글과 영문 조합, 숫자, 굵기, 행간, 화면 크기, 폴백까지 함께 확인해야 해요. 디자인 시스템에서 폰트를 고른다는 것은 예쁜 서체를 고르는 일이 아니라, 제품이 실패 상황에서도 같은 목소리로 말하게 만드는 일에 가까워요.

따라서 산세리프와 세리프를 고를 때는 먼저 이렇게 질문하는 것이 좋아요.

이 텍스트는 사용자가 빠르게 찾아야 하는 정보인가요, 아니면 오래 읽고 느껴야 하는 콘텐츠인가요?

그 질문에 답할 수 있다면 어떤 계열을 선택해야 할지도 훨씬 분명해집니다.

참고

• CSS Fonts Module Level 4 - W3C
• CSS Fonts Module Level 3 - W3C
• font-family - MDN Web Docs
• Sans serif - Google Fonts Knowledge