왜 필요한가
긴 문단이 있는 정원 소식지를 만든다고 가정해 봅시다. 독자가 이어진 글을 읽을 때 좁고 넓은 글자에 같은 폭을 주면 간격이 어색해질 수 있습니다.
어떻게 해결하는가
정원 소식지를 읽고 별도 폭 실험을 봅니다. 로드된 Noto Sans에서 i와 W의 전진 폭은 다릅니다. 숫자는 따로 등폭 정렬할 수 있습니다. 자간을 바꾸는 것이 비례폭의 정의는 아닙니다.
정원 소식지 읽기와 문자별 전진 폭 비교정원 소식 / 9월정원에서 온 소식

Small leaves, wide windows
Morning light reaches the new shelf. We moved the fern beside the window and left a little space for the next green arrival.
토요일 식물 교환에 작은 가지를 가져오세요.
본문 안의 가상 데모입니다. 초기화·새로고침으로 처음 상태로 돌아갑니다.
무엇이라 부르는가
비례폭 글자는 서로 다른 전진 폭을 씁니다.
지원 문자·숫자 기능이 다르므로 이름으로 추정하지 말고 로드된 서체를 측정하세요.
W3C
더 깊이 살펴보기
선택해서 읽는 자료 · 개요 읽기 시간과 별도
01선택·비교
이어지는 글에서 글자별 비율을 살릴 때 비례폭을 선택합니다. 공백으로 라틴 열을 맞춰야 하면 고정폭이 맞습니다. 세리프·산세리프 모두 비례폭일 수 있고 등폭 숫자도 함께 쓸 수 있습니다.
02응용 사례
정원 소식지는 이어지는 라틴 문단과 현지화 안내를 함께 보여줍니다. 편집 글이나 일반 UI 문구에도 적용합니다. 모든 글자가 비례폭이라 가정하지 말고 실제 글꼴과 문자 체계를 확인합니다.
03구현 참고·주의점
document.fonts.ready 이후 실제 로드된 글꼴을 확인합니다. 하나의 텍스트 노드에서 Range로 측정해 연결 형태를 유지하며 합자·결합 문자·대체 글꼴은 범위에 영향을 줄 수 있습니다. 실험과 실제 사용 화면을 분리하고 현지화 문자 지원을 검사합니다.
04근거
비교 요약
이어서 살펴보기
원본·수정 제안 ↗내 프로젝트에 적용하기
프로젝트를 처음 시작하나요? 설명을 입력해 첫 프롬프트를 준비하세요.
맞춤 프롬프트 만들기 →이미 외부 AI와 대화 중이라면 이 글의 링크와 내 프로젝트에 맞는 이유, 중요하게 보는 장단점을 전달하세요. 합의한 요구사항에 어떻게 적용할지 요청하세요.
이 글 링크: 비례폭
이 선택에 관한 이야기
세 언어가 댓글을 공유합니다. 작성하려면 GitHub 로그인이 필요합니다.