웹 페이지에 지정한 글꼴이 사용자 환경에 설치되어 있지 않으면, 브라우저는 비슷한 다른 글꼴로 자동 대체하는데 이를 글꼴 대체(font fallback)라고 합니다. 문제는 글꼴마다 x-높이(소문자 높이)가 다르기 때문에 동일한 font-size를 지정해도 화면에 표시되는 실제 글자 크기가 제각각 달라지고, 그 결과 가독성이 크게 떨어질 수 있다는 점입니다.
이런 상황에서 font-size-adjust 속성을 사용하면 가독성을 유지할 수 있습니다. 이 속성은 첫 번째로 사용 가능한 글꼴의 x-높이 비율을 기준으로 글자 크기를 자동으로 보정해 주기 때문에, 대체 글꼴이 적용되더라도 원래 글꼴과 비슷한 시각적 크기를 일관되게 유지할 수 있습니다.
font-size-adjust 예제
다음 코드를 직접 실행하여 font-size-adjust 속성을 적용했을 때와 적용하지 않았을 때의 차이를 확인해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
font-family: Verdana, Georgia, serif;
font-size-adjust: 0.90;
}
</style>
</head>
<body>
<h2>font-size-adjust 속성 적용:</h2>
<div class="demo">This is demo text.</div>
<h2>font-size-adjust 속성 미적용:</h2>
<div>This is demo text.</div>
</body>
</html>주요 속성 값
none — 기본값으로, 글자 크기를 별도로 보정하지 않습니다.
<number> — 첫 번째 사용 가능한 글꼴의 x-높이와 글꼴 크기의 비율을 나타내는 숫자입니다. 예를 들어 0.90을 지정하면 대체 글꼴의 x-높이가 원래 글꼴의 90% 수준이 되도록 크기가 자동 조절됩니다.
참고 사항
font-size-adjust는 오랫동안 Firefox에서만 지원되었지만, 최근에는 Chrome과 Edge 등 주요 브라우저에서도 지원이 확대되어 실무에서 활용할 수 있게 되었습니다. 다만 아직 지원하지 않는 브라우저도 존재하므로, 필요하다면 @supports 규칙으로 지원 여부를 먼저 확인한 후 적용하는 것이 안전합니다.