CSS에서 font-size 속성을 설정할 때 em 단위를 사용할 수 있습니다. em은 상위 요소의 글꼴 크기를 기준으로 하는 상대 단위로, 텍스트 크기를 정밀하게 조절해야 하는 경우에 특히 유용합니다.
기본적으로 브라우저의 기본 글꼴 크기는 16px이므로 1em = 16px, 2em = 32px에 해당합니다. 예를 들어 1.3em으로 지정하면 약 20.8px 크기의 텍스트가 표시됩니다.
예제 1
다음은 .demo 클래스에 font-size: 1.3em을 적용한 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
text-decoration: overline;
text-decoration-color: yellow;
font-size: 1.3em;
}
</style>
</head>
<body>
<h1>Examination Details</h1>
<p class="demo">Exam on 20th December.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>실행 결과
예제 2
이번에는 <div> 요소에 font-size: 1.5em을 적용하여 본문 텍스트의 크기를 키워 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
text-align: justify;
text-justify: inter-word;
color: white;
background-color: gray;
font-size: 1.5em;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<div>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </div>
</body>
</html>실행 결과
정리
em 단위는 부모 요소의 글꼴 크기에 비례하기 때문에, 전체 페이지의 글꼴 크기를 한 곳에서 변경하면 하위 요소들이 자동으로 함께 조절됩니다. 이러한 특성 덕분에 반응형 웹 디자인에서 확장성 있는 타이포그래피를 구현할 때 em 단위가 널리 활용됩니다.