왜 필요한가
승객이 노선과 시간을 빠르게 읽는 교통 안내 화면을 만든다고 가정해 봅시다. 편집자는 인쇄물 같은 분위기보다 담백한 글자 형태를 택하되, 비슷한 표지가 구별되는지도 확인해야 합니다.
어떻게 해결하는가
교통 안내의 출발 시간·목적지·상태를 읽습니다. 별도 실험에서 굵기와 비슷한 글자를 비교합니다. 로컬 Noto Sans와 CJK 글꼴로 지원 문자를 표시하고 초기화하면 처음 표본으로 돌아갑니다.
교통 안내 읽기와 글자·굵기 확인본문 안의 가상 데모입니다. 초기화·새로고침으로 처음 상태로 돌아갑니다.
무엇이라 부르는가
산세리프는 세리프 장식이 없지만 획 끝과 비율은 다양합니다.
보편적인 가독성을 가정하지 말고 유사 글자와 한·일 서브셋을 확인하세요.
W3C
더 깊이 살펴보기
선택해서 읽는 자료 · 개요 읽기 시간과 별도
01선택·비교
정보 위계에 담백한 인상이 맞으면 산세리프를 씁니다. 세리프는 편집물의 분위기, 스크립트는 짧은 표현에 어울립니다. 어느 쪽도 보편적으로 더 읽기 쉽지는 않으므로 글자·크기·굵기·언어를 비교합니다.
02응용 사례
가상 교통 안내는 크기와 굵기로 시간·목적지·운행 상태를 구분합니다. 표지와 인터페이스에도 적용할 수 있습니다. 실제 운행 정보가 아닌 글꼴 예제입니다.
03구현 참고·주의점
document.fonts.ready 이후 실제 로드된 글꼴을 확인합니다. 하나의 텍스트 노드에서 Range로 측정해 연결 형태를 유지하며 합자·결합 문자·대체 글꼴은 범위에 영향을 줄 수 있습니다. 실험과 실제 사용 화면을 분리하고 현지화 문자 지원을 검사합니다.
04근거
비교 요약
이어서 살펴보기
원본·수정 제안 ↗내 프로젝트에 적용하기
프로젝트를 처음 시작하나요? 설명을 입력해 첫 프롬프트를 준비하세요.
맞춤 프롬프트 만들기 →이미 외부 AI와 대화 중이라면 이 글의 링크와 내 프로젝트에 맞는 이유, 중요하게 보는 장단점을 전달하세요. 합의한 요구사항에 어떻게 적용할지 요청하세요.
이 글 링크: 산세리프
이 선택에 관한 이야기
세 언어가 댓글을 공유합니다. 작성하려면 GitHub 로그인이 필요합니다.