웹 페이지에서 화면 크기에 따라 글자 크기가 자동으로 조절되는 반응형 글꼴을 구현하려면 CSS의 vw(viewport width) 단위를 사용하면 됩니다.
vw 단위란?
vw는 뷰포트(viewport) 너비의 백분율을 나타내는 단위입니다. 1vw는 뷰포트 너비의 1%에 해당하며, 브라우저 창의 크기가 변하면 이 값에 비례하여 글꼴 크기도 함께 조절됩니다. 예를 들어 뷰포트 너비가 1000px일 때 1vw는 10px입니다.
예제 코드
아래 코드에서는 <h1> 요소에 font-size: 8vw;를 적용하여, 화면 너비에 따라 제목 크기가 유동적으로 변하도록 설정했습니다. 직접 실행해 보면서 브라우저 창 크기를 조절해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size:8vw;
}
</style>
</head>
<body>
<h1>This is demo heading</h1>
<p>This is demo text.</p>
</body>
</html>참고 사항
vw 단위만 사용하면 모바일처럼 화면이 작은 기기에서 글자가 지나치게 작아질 수 있습니다. 이 경우 최소·최대 크기를 함께 지정하는 CSS 함수인 clamp()를 활용하면 더 안정적인 반응형 타이포그래피를 만들 수 있습니다.
h1 {
font-size: clamp(24px, 8vw, 64px);
}위 코드는 글꼴 크기를 최소 24px, 최대 64px 범위 내에서 뷰포트 너비의 8%로 유지합니다. 이처럼 vw 단위와 clamp()를 적절히 조합하면 다양한 디바이스에서 가독성 좋은 반응형 텍스트를 손쉽게 구현할 수 있습니다.