Font Guide

웹폰트란?

방문자의 로컬 컴퓨터에 폰트 설치 여부와 상관없이 온라인의 특정 서버에 위치한 폰트 파일을 다운로드하여 화면에 표시해주는 웹 전용 폰트이다.

 

웹폰트가 나온 이유

• 웹사용자 시스템에 특정 폰트가 없다면, 웹제작자가 의도한대로 UIUX를 표현할 수 없다.
• 웹폰트를 사용하면 사용자가 특정 폰트를 설치하지 않아도 웹제작자가 원하는 폰트를 웹페이지에 구현할 수 있다.
• 가독성 높은 웹폰트를 제공하여 사용자의 가독성을 높일 수 있다.

웹폰트의 문제점

웹폰트의 확장자는 크게 5가지가 있다. EOT, WOFF, WOFF2, SVG, TTF/OTF 가 있으며, 각각의 확장자는 웹 브라우저 지원 범위에 따라 다양하게 쓰인다.

• 웹폰트의 용량에 따라 다운로드하는 시간만큼 렌더링이 느려 진다.
• 한글 폰트는 용량이 크며, 일부 웹폰트의 경우 특정 다국어를 지원하지 않을 수 있다.
• 웹폰트 다운로드 요청에 지연되거나 실패될 경우, 웹폰트를 사용한 부분에 웹제작자가 의도한대로 구현할 수 없는 문제가 생긴다. (ex. 웹폰트가 지연/실패될 경우, 모던 브라우저에서는 해당 텍스트를 보이지 않게 처리하고, IE계열 브라우저에서는 기본 텍스트로 보여준다.)

웹폰트 확장자 종류

웹폰트의 확장자는 크게 5가지가 있다. EOT, WOFF, WOFF2, SVG, TTF/OTF 가 있으며, 각각의 확장자는 웹 브라우저 지원 범위에 따라 다양하게 쓰인다.

 

• TTF/OTF : 윈도우에 설치하는 폰트 파일로 우리가 흔히 폰트를 다운받으면 이 확장자의 파일은 받게 된다.
• EOT : IE8이하에서만 인식한다. MS에서 구버전에 대한 지원 종료로 인해 IE8이하의 브라우저는 고려 대상에서 제외되고 있는 추세라 EOT파일의 사용 빈도도 적어지고 있다.
• WOFF/WOFF2 : WOFF는 대부분의 브라우저를 지원한다. WOFF2의 경우 현재는 IE를 제외한 모든 브라우저를 지원한다. 이 둘의 차이점은 WOFF2형식이 30~50% 더 압축된 형식이다. 따라서 IE에서는 WOFF, 그 외 브라우저에서는 WOFF2를 사용하여 폰트 용량을 줄일 수 있다.
• SVG : 모바일 사용에 용이하다. Firefox, IE 구버전에서는 지원하지 않는다.

웹폰트 사용 방법

웹폰트는 ‘@font-face’라는 지시어를 통해 폰트를 명시하는 것으로 시작한다. 이 명령어는 사용할 폰트의 이름, 다운받을 위치 및 확장자를 브라우저에 알리는 명령어이다.

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 100;
    src: url('font/notoSansKrLight/NotoSansKR-Thin.woff2') format('woff2'),
    url('font/notoSansKrLight/NotoSansKR-Thin.woff') format('woff'),
    url('font/notoSansKrLight/NotoSansKR-Thin.otf') format('opentype'),
    url('font/notoSansKrLight/NotoSansKR-Thin.eot'),
    url('font/notoSansKrLight/NotoSansKR-Thin.eot?#iefix') format('embedded-opentype');
}

• Font-family : 폰트명으로 지정될 이름
• Font-style : 폰트스타일 값
• Font-weight : 폰트 굵기
• Src : 폰트 파일 경로, 콤마를 사용하여 여러 번 중첩 명시가 가능하며, 브라우저에서 적용할 수 있는 폰트 확장자를 찾을 때까지 콤마 순서대로 이동한다.
• Format : 웹상에서 사용할 폰트 파일 포맷 지정

html, body {
	font-family: 'Noto Sans KR';
}

css에는 html, body에 font-family : ‘선언한 폰트명’을 명시해준다.

 

Noto Sans KR 굵기에 대한 가이드

프로젝트에서 자주 사용되는 노트산스(Noto Sans KR)에 대한 굵기 가이드. 주로 사용되는 굵기는 Regular 400, Medium 500, Bold 700이다. 노트산스는 100~900까지의 굵기를 지원해주고 있다. 다만, 폰트의 100~900까지의 굵기를 전부 가져오는 것은 서로 다른 6가지 폰트를 다운로드 하는 것과 마찬가지이므로, 사용되는 굵기만 선택적으로 명시하는 것이 좋다.

 

폰트 변환 사이트

https://transfonter.org/

반응형 처리에 적합한 가변 폰트

가장 자주 쓰이는 폰트 단위는 ‘px’이다. 웹디자이너가 디자인을 작업할 때에도 px단위가 기본으로 작업되고 있는 단위이다. 하지만 ‘px’은 고정 값이기 때문에 반응형 사이트에 사용할 경우 해상도 브레이크 포인트마다 폰트 크기를 재설정해주어야 하는 번거로움이 있다. 이 번거로움을 해결하기 위해 등장한 것이 ‘가변 폰트’이다. 가변폰트는 상대적인 값으로 비율에 따라 크기가 계산이 된다.

1. em 단위

• em단위는 대문자 M의 너비를 1em으로 표현한 것으로, 1em=16px에 해당한다. 바로 위 부모 요소를 기준으로 자식 요소의 크기를 정한다.
• 부모 요소를 기준으로 하기 때문에 매우 유동적이고 파악하기 어려울 수 있다는 단점이 있다.

적용할 글자 크기(px) / 부모 요소의 글자 크기(px) = 가변 폰트 크기(em)

2. rem 단위

• em단위의 상속 문제를 해결하기 위해 나온 것이 rem단위이다. rem단위는 최상위, 즉 웹 문서의 시작인 html 태그를 기준으로 하기 때문에 상속 문제가 발생하지 않는다
• html요소에 font-size를 고정 값으로 지정해 두면 그 값을 기준으로 비율에 따라 크기가 계산된다. 따라서 반응형 사이트 제작 시 rem단위가 사용하기 편리하다.
• html에서 사이즈를 지정하지 않으면 웹 브라우저에서 정한 기본 시스템 사이즈인 16px이 적용된다. Html {font-size:62.5%}혹은 {font-size:10px}로 하면 10px=1rem, 12px = 1.2rem, 14px=1.4rem이 되므로 따로 계산이 필요 없이 px을 사용할 때처럼 사용 가능하다.

3. vw(viewport width) 폰트

• vw단위는 웹 브라우저의 가로 폭(너비)를 기준으로 결정되는 크기이다.
• 만약 웹 브라우저의 너비가 1280px이고, 폰트 크기를 10vw로 하면 10vw의 크기는 1280의 1%인 12.8px이 된다.

적용할 글자 크기 * 브라우저의 너비 = 크기 값

4. vh(viewport height) 폰트

• vh단위는 웹 브라우저의 세로 폭(높이)를 기준으로 결정되는 크기이다.
• 웹 브라우저의 높이가 600px이고 폰트 크기를 10vh로 하면 600의 1%인 6px이 된다.

적용할 글자 크기 * 브라우저의 너비 = 크기 값

5. vmin (viewport minimum) 폰트

vmin단위는 웹 브라우저의 너비와 높이 중 짧은 쪽을 기준으로 하여 결정되는 크기이다. 웹 브라우저의 너비, 높이 중 작은 쪽을 100으 기준으로 하여 결정된다.

6. vmax (viewport maximum) 폰트

vmax단위는 웹 브라우저의 너비와 높이 중 긴 쪽을 기준으로 하여 결정되는 크기이다. 웹 브라우저의 너비, 높이 중 긴 쪽을 100으 기준으로 하여 결정된다.

 

가변 폰트에 대한 고찰

rem단위의 장점

1. 웹 브라우저마다 다른 기본 폰트 사이즈에 대응

: e북 리더기기, opera Mini, Blackberry 등 작은 기기에 주로 활용되는 웹 브라우저의 기본 폰트 사이즈는 16px을 넘는 경우가 있다. 기본 폰트의 크기를 늘림으로써 가독성을 향상하기 위함이다. 이때, 스타일가이드에서 px단위를 사용하면, 기기 특성에 맞춰 사전 설정된 폰트 사이즈가 무시되어 가독성이 떨어지는 문제가 생긴다. 따라서 이에 대응하려면 기본 폰트 사이즈에 비레하는 단위인 rem 단위를 사용하는 것이 적합하다.

1. 저시력자 접근성에 대응

: 기본 폰트 사이즈 값은 보통 웹브라우저 선에서 고정되어 있다. 일부 웹브라우저에서는 이 기본값을 변경할 수 있는 저식력자 설정을 제공한다. 이때, px단위를 사용하면 저시력자 설정이 무시되므로 rem단위를 사용해야 저시력자 접근성에 유연하게 대응이 가능하다.

1. 전체 스타일의 스케일을 손쉽게 조정

: rem단위는 최상단, 즉 루트 요소의 폰트 사이즈 값에 대해 상대적으로 계산되기 때문에, 루트 폰트 사이즈를 변경하는 것만으로도 웹사이트 전체 폰트 사이즈를 한번에 변경할 수 있다.

 

rem단위를 폰트에만 사용했을 때의 레이아웃의 변화

기본 폰트 사이즈가 16px이라고 가정했을 때, 다음과 같이 height:20px, font-size:1rem으로 코딩된 상자가 있다.

html,body {font-size:16px;}
.box {
  background-color: #111;
  color: #eee;
  border-radius: 3px;
  height: 20px;
  font-size: 1rem;
}

기본 폰트 사이즈가 16px이라면 아무 문제 없이 텍스트가 박스 안에 위치할 것이다. 하지만 기본 폰트 사이즈를 32px로 키우면 폰트 사이즈가 height:20px보다 훨씬 커져 텍스트가 상자 밖으로 넘치게 된다. 즉, 폰트 사이즈 변경만으로 레이아웃이 틀어져버리는 문제가 생기게 된다.

이러한 문제 해결을 위해서는 min-height를 활용해서, 픽셀 단위로 지정한 높이값보다 rem단위가 더 커지면 해당 값으로 대체되도록 할 수 있다.

.box {
	font-size: 1rem;
	height: 20px;
	min-height: 1.5rem;
}

이렇게 하면 기본 폰트 사이즈가 커짐에 따라 유연하게 박스의 크기도 같이 확대가 된다.

 

rem단위를 레이아웃 모든 속성에 사용했을 때의 레이아웃의 변화

rem단위를 폰트 사이즈뿐만 아니라 모든 속성(margin, padding 등)에 대해 사용하는 경우, 기본 폰트 사이즈가 커지면 레이아웃의 크기 또한 함께 확대가 되므로, 폰트가 커져서 레이아웃이 망가지는 문제는 고민하지 않아도 된다.

 

rem단위의 단점(레이아웃 모든 속성에 사용한 경우)

1. 단위의 난해함

디자이너와 협업하거나 웹 사이트에 외부 리소스를 삽입하는 등 여러 상황에서 px단위가 필요할 수 있다. 이때, 모든 속성에 대해 원하는 픽셀 값에서 16으로 나누어 입력해야 하기 때문에 단위가 낯설고 계산하기에도 불편하다. 또한, rem 값을 보고 실제 계산되는 px 값이 얼마인지 가늠하기도 힘들다.

 

1. 웹브라우저의 종류나 사용자 설정이 rem계산에 영향을 준다.

rem단위로 레이아웃을 구성할 때, 사파리 브라우저는 다른 브라우저와 다르게 계산하는 문제가 많다.

 

1. IE 구버전 호환성 문제

CSS3에 등장한 rem단위는 IE9부터 지원한다. 이또한 IE9~10까지는 완벽하게 지원하지 않는다.

:before, :after와 같은 가상 엘리먼트에서는 rem단위를 사용할 수 없다.

 

1. 미디어 쿼리 단위의 변화

@media only screen and (min-width: 640px) {
  /* 브라우저 폭이 640px 이상일 때 */
  .container {
    margin: 0 auto;
    max-width: 640px;
  }
}

미디어쿼리 작성 시, 보통 위와 같이 작성하는데, rem단위로 레이아웃을 구성할 경우 아래와 같이 단위도 변경해야 한다.

html {
  font-size: 62.5%;
}
@media only screen and (min-width: 64rem) {
  /* 브라우저 폭이 640px 이상일 때 */
  .container {
    margin: 0 auto;
    max-width: 64rem;
  }
}

하지만 이는 사파리에서 작동하지 않는다.. 사파리에서 rem단위의 미디어쿼리를 지원하려면 다음과 같이 작성해야 한다.

html {
  font-size: 62.5%;
}
@media only screen and (min-width: 40em) {
  /* 브라우저 폭이 640px 이상일 때 */
  .container {
    margin: 0 auto;
    max-width: 64rem;
  }
}

 

rem단위를 사용할 때의 유의점

- font-size에 대해서만 사용할 경우

• 모든 font-size에 rem단위를 사용한다.
• 다른 속성에는 px, em단위를 사용한다. 이때, 기본 폰트 사이즈가 커져도 레이아웃이 망가지지 않도록 주의한다.

- 모든 속성에 사용할 경우

• 최상위 요소 폰트 사이즈를 기본으로 두거나 62.5% 또는 625%로 설정한다.
• rem단위를 전체 레이아웃 단위로 쓸 경우에 발생하는 모든 이슈에 대해 숙지해야 한다.
• 미디어쿼리는 em단위를 쓰며, max-width는 사용하지 않는다.

참고 사이트

https://blog.jeongtae.com/rem-고찰#웹-브라우저마다-다른-기본-폰트-사이즈에-대응