CSS의 font-size-adjust 속성은 글꼴의 x-height(소문자 'x'의 높이)를 기준으로 글꼴 크기를 조정하여, 서로 다른 글꼴 간에도 일관된 가독성을 유지할 수 있도록 도와주는 속성입니다.
font-size-adjust란?
글꼴마다 x-height 비율이 다르기 때문에 동일한 font-size 값을 지정하더라도 실제 화면에 보이는 텍스트의 크기는 글꼴마다 제각각으로 나타날 수 있습니다. 특히 첫 번째 지정한 글꼴을 사용자 시스템에서 사용할 수 없어 대체 글꼴(fallback font)이 적용되는 경우, 텍스트가 의도보다 작거나 크게 보여 가독성이 떨어질 수 있습니다.
font-size-adjust 속성을 사용하면 이러한 문제를 방지할 수 있습니다. 속성 값으로는 모든 숫자를 사용할 수 있으며, 일반적으로 글꼴의 x-height와 font-size의 비율(aspect ratio)을 지정합니다.
사용 예제
<html> <head> </head> <body> <p style="font-size-adjust:0.91;"> Asia is a continent. </p> </body> </html>
정리
위 예제처럼 font-size-adjust: 0.91;을 적용하면 브라우저가 해당 비율에 맞춰 글꼴 크기를 자동으로 조정합니다. 이를 통해 어떤 글꼴이 렌더링되더라도 소문자 높이가 일정하게 유지되어 텍스트의 가독성과 시각적 일관성을 높일 수 있습니다.