4. CSS 타이포그래피: 글꼴, 스타일, 줄간격

타이포그래피(Typography)란 글자와 문장을 디자인하여 정보를 효과적으로 전달하는 기술입니다. 웹 디자인에서는 CSS를 사용하여 타이포그래피를 구현할 수 있으며, 글꼴, 스타일, 줄간격 등을 조절하여 가독성과 디자인을 개선할 수 있습니다. 이번 글에서는 CSS 타이포그래피에 대한 기본적인 개념과 사용법에 대해 알아보겠습니다.

 

1. 글꼴 설정하기: font-family

웹페이지에 사용되는 글꼴을 설정하기 위해서는 CSS의 'font-family' 속성을 사용합니다. font-family 속성 값을 지정함으로써 웹페이지의 전반적인 글꼴 스타일을 사용자에게 보여줄 수 있습니다. 여러 글꼴을 나열하면 브라우저는 먼저 나열된 글꼴을 사용하며, 그 글꼴이 사용자의 시스템에 없을 경우 다음에 나열된 글꼴을 사용합니다.

 <style> 
 	body { font-family: 'Noto Sans KR', sans-serif; } 
 </style>

 

2. 글자 스타일 설정하기: font-size, font-weight, font-style 등

글자 스타일을 설정하기 위해서 크기(size), 굵기(weight), 기울기(style) 등을 지정할 수 있는 여러 가지 CSS 속성이 있습니다.

font-size: 글자의 크기를 설정할 수 있는 속성이며 'px', 'em', 'rem' 등 단위를 사용하여 지정할 수 있습니다. 상대적인 단위인 'em'과 'rem'은 반응형 웹페이지의 디자인 시 사용됩니다.

font-weight: 글자의 굵기를 설정하는 속성입니다. 'normal', 'bold', 'bolder', 'lighter', 그리고 숫자 값 (100~900)을 사용할 수 있습니다.

font-style: 글자의 기울기, 일반적으로 이탤릭체와 연관됩니다. 속성 값을 'normal', 'italic', 'oblique'로 지정할 수 있습니다.

<style> 
	h2 { font-size: 24px; font-weight: bold; }
	p {
        font-size: 16px;
        font-style: italic;
    }
</style>

 

3. 줄간격 설정하기: line-height

'line-height' 속성은 텍스트 라인 간의 높이를 조정하며, 높은 가독성을 위해 필요합니다. 속성 값을 단위 없이 숫자, 퍼센트, 또는 길이 단위(px, em, rem 등)로 지정할 수 있습니다.

 <style> 
 	body { line-height: 1.6; } 
 </style>

 

마치며

CSS를 이용한 타이포그래피는 가독성 높은 텍스트를 제공하여 사용자 경험을 개선하는 데 큰 역할을 합니다. 디자인과 정보의 전달을 동시에 고려하여 웹페이지를 제작하면, 사용자들에게 보다 직관적이고 쾌적한 환경을 제공할 수 있습니다.