font-size-adjust 속성이란?
웹 페이지에서 지정한 글꼴이 사용자의 기기나 브라우저 환경에 설치되어 있지 않으면, 브라우저는 자동으로 대체 글꼴(font fallback)을 사용합니다. 이때 글꼴마다 소문자의 실제 높이(x-height)가 다르기 때문에, font-size 값이 동일하더라도 화면에 보이는 텍스트의 크기가 달라져 가독성이 크게 떨어질 수 있습니다.
CSS의 font-size-adjust 속성은 이러한 문제를 해결해 줍니다. 이 속성은 대문자 기준 폰트 크기 대비 소문자 높이의 비율(aspect value)을 조절하여, 대체 글꼴로 바뀌더라도 원래 글꼴과 비슷한 시각적 크기를 유지하도록 도와줍니다.
font-size-adjust 사용 예제
아래 코드를 실행하면 font-size-adjust 속성을 적용한 요소와 적용하지 않은 요소의 차이를 직접 비교해 볼 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
font-size-adjust: 0.90;
}
</style>
</head>
<body>
<h2>Heading Two</h2>
<h2>font-size-adjust 속성 적용:</h2>
<div id = "demo">
This is demo text.
</div>
<h2>font-size-adjust 속성 미적용:</h2>
<div>This is demo text.</div>
</body>
</html>주요 포인트
- 값의 의미:
font-size-adjust: 0.90은 소문자 높이와 폰트 크기의 비율을 0.90으로 맞추겠다는 의미입니다. - 기본값: 기본값은
none이며, 이 경우 별도의 조정 없이 브라우저 기본 방식대로 렌더링됩니다. - 활용 팁: 웹폰트 로딩 실패나 시스템 글꼴 차이로 인한 레이아웃 흔들림(layout shift)을 줄이고 싶을 때 특히 유용합니다.