16. Web font, line-height

이번 포스팅에서는 웹에 폰트를 저장하여 사용하는 Web font와 줄의 높이, 행간을 의미하는 line-height에 대하여 다뤄보겠습니다.

웹 폰트는 디자이너의 의도에 맞게 스타일링을 가능하게 해 주며, line-height도 상황에 맞게 많이 사용되는 속성이니 잘 숙지하시고 넘어가는 것을 권해드립니다.

 

1. Web font

웹 폰트는 페이지 방문자의 로컬에 폰트 설치 여부와는 무관하게 서버에 저장해 제공하거나 웹 경로를 통해 제공하는 폰트인데요.

웹 폰트를 사용하게되면 가독성이 좋거나 디자인 적으로 우수한 페이지를 만들 수 있다는 등의 장점이 있지만, 웹 폰트의 용량이 무겁기 때문에 속도 저하 등의 이슈가 발생할 수 있다는 단점이 있습니다.

이러한 웹 폰트는 아래와 같이 @font-face를 선언한 뒤에 사용합니다.

 

@font-face {
    font-family: 글꼴 이름(원하는 이름 지정);
    src: url(폰트 파일 경로) format(파일 유형);
}

 

사용 가능한 파일 유형으로는 woff, woff2, ttf, otf, eot, svg가 있는데요.

ttf나 otf 파일은 다른 유형의 파일보다 용량이 크기 때문에 woff 파일 뒤에 선언하는 게 좋습니다.

일반적으로 폰트 파일의 순서는 eot, woff, ttf/otf, svg 순으로 불러오는 것이 좋으며, 두어 절 이상의 글꼴 이름의 경우에는 따옴표(')를 선언합니다.

 

@font-face {
    font-family: 'NanumSqure';
    src: url('../webfont/NanumSqure.eot');
    src: local('NanumSqure')url('../webfont/NanumSqure.eot?#iefix') format(‘embedded-opentype’),
         url('../webfont/NanumSqure.woff') format('woff'),
         url('../webfont/NanumSqure.woff2') format('woff2'),
         url('../webfont/NanumSqure.ttf') format('truetype'),
         url('../webfont/NanumSqure.otf') format('opentype'),
         url('../webfont/NanumSqure.svg') format('svg');
}

 

보유하고 있는 파일 유형을 사용하면 되며, 위와 같이 모든 유형을 선언할 필요는 없습니다.

또한, 필요에 따라 @font-face에 font-weight나 font-style을 함께 선얼할 수 있는 점 참고해 주세요.

 

2. line-height

글을 읽다보면 글 사이의 간격이 좁아 보기 힘든 글들이 있는 반면, 적당한 글 간격으로 가독성이 높은 글들이 있는데요.

이렇게 글 사이의 간격을 조정하는 속성이 line-height입니다.

이러한 line-height는 아래와 같이 선언합니다.

 

h1 {
    line-height:16px;
}

 

line-height의 속성 값으로는 number, 고정 수치, 퍼센트(%)가 있습니다.

number는 font-size 기준으로 설정한 숫자의 배율만큼 line-height를 적용하는 방법이며, 고정 수치는 px이나 em, 퍼센트(%)는 font-size 기준으로 설정한 퍼센트만큼 line-height를 적용하는 방법입니다.

 

h1 {
    line-height:16px;
}
h1 {
    line-height:1.5;
}
h1 {
    line-height:100%;
}

 

line-height: 16px;은 말 그대로 16px의 행간을 적용하라는 것이며, font-size:10px 기준으로 1.5는 15px을, 100%는 10px의 line-height가 적용됩니다.

number 방법과 퍼센트(%) 방법은 유사한 것 같지만 상속의 방식에서 차이점이 있는데요.

number 방법은 부모 요소에 선언된 숫자가 자식에게도 동일하게 적용되지만, 퍼센트(%) 방법은 부모 요소에 계산되어 적용된 line-height가 자식 요소에 적용됩니다.

 

h1 {
    font-size:20px;
    line-height:2;
}
span {
    font-size:10px;
}

 

위의 예시에서 h1의 자식 요소로 span이 있다고 생각하고 line-height를 살펴보면, h1의 line-height는 40px(20px * 2)이 되고 span은 20px(10px * 2)이 됩니다.

 

h1 {
    font-size:20px;
    line-height:200%;
}
span {
    font-size:10px;
}

 

마찬가지로 h1의 자식 요소로 span이 있다고 생각하고 line-height를 살펴보면, h1의 line-height는 40px(20px * 2%)이 되고 span에도 40px(부모 요소의 line-height)이 적용됩니다.

이렇게 각 속성 값 별로 차이점이 있으니 잘 숙지하신 후 사용해 보세요.

 

웹 폰트를 연습하실 때에는 인터넷에 무료로 배포되고 있는 폰트가 많으니, 다운로드하여 시도해 보세요.

또한, 웹 폰트를 포함해 상대 경로를 지정하는 경우가 많으니 상대 경로 사용법도 연습을 많이 하시는 것이 좋습니다.

오늘도 읽어주셔서 감사합니다.

좋은 하루 보내세요! :)