JavaScript에서 텍스트의 가독성을 유지하려면 fontSizeAdjust 속성을 사용하면 됩니다. 이 속성은 글꼴의 종횡비(aspect value)를 설정하는데, 여기서 종횡비란 소문자 크기와 대문자 크기 사이의 비율을 의미합니다.
fontSizeAdjust 속성이 필요한 이유
웹 페이지에서 지정한 첫 번째 글꼴을 사용자의 브라우저에서 사용할 수 없는 경우, 대체 글꼴(font fallback)이 자동으로 적용됩니다. 그런데 서로 다른 글꼴은 같은 폰트 크기라도 실제 화면에 나타나는 글자 크기가 다르기 때문에, 대체 글꼴이 적용되면 텍스트가 갑자기 커지거나 작아져 가독성이 떨어질 수 있습니다.
이때 fontSizeAdjust 속성으로 종횡비를 고정해 주면, 어떤 대체 글꼴이 사용되더라도 원래 글꼴과 비슷한 시각적 크기를 유지할 수 있어 일관된 가독성을 확보할 수 있습니다.
예제
다음 코드를 실행하면 JavaScript에서 폰트 대체가 발생했을 때에도 텍스트의 가독성을 유지하는 방법을 직접 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<h1>Heading 1</h1>
<p id="myID">
This is Demo Text.
</p>
<button type="button" onclick="display()">Set Aspect Value</button>
<script>
function display() {
document.getElementById("myID").style.fontFamily = "verdana,sans-serif";
document.getElementById("myID").style.fontSizeAdjust = "0.90";
}
</script>
</body>
</html>코드 설명
버튼을 클릭하면 display() 함수가 실행되어 해당 문단의 글꼴을 verdana, sans-serif로 변경하고, 동시에 fontSizeAdjust 값을 0.90으로 설정합니다. 이렇게 하면 Verdana 글꼴을 사용할 수 없는 환경에서 sans-serif 계열의 대체 글꼴이 적용되더라도 텍스트 크기가 일정하게 유지됩니다.
참고: 일반적으로 글꼴의 종횡비 값은 약 0.58~0.62 범위에 분포합니다. 예를 들어 Verdana는 0.58 정도의 낮은 값을, Times New Roman은 0.46 정도의 값을 가집니다. 기본 글꼴의 종횡비를 미리 파악해 두면 대체 글꼴 상황에서 더 정확한 조정이 가능합니다.