[웹 개발] 폰트, 텍스트 (1)

타이포그래피의 구조

폰트를 이해하기 위해서는 타이포그래피의 구조를 먼저 이해해야 합니다.

모든 폰트는 em박스를 가지고 있고 위 그림과 같은 구조로 이루어져 있습니다.

•em 폰트의 전체 높이를 의미합니다.
•ex ( = x-height ) 해당 폰트의 영문 소문자 x의 높이를 의미합니다.
•Baseline 소문자 x를 기준으로 하단의 라인을 의미합니다.
•Descender 소문자에서 baseline 아래로 쳐지는 영역을 의미합니다. 서체에 따라 descender의 길이가 다릅니다. ( g, j, p, q, y )
•Ascender 소문자 x의 상단 라인 위로 넘어가는 영역을 의미합니다. ( b, d, h, l )

 

 

font-family 속성

글꼴을 지정하는 속성입니다.

• family-name: 사용할 폰트의 이름을 나타내며 ' , ' 로 구분하여 여러 개 선언 할 수 있습니다. 먼저 선언된 순서대로 우선순위가 결정됩니다.  이름 중간에 공백이 있거나, 한글일 경우 홑따옴표로 묶어서 선언합니다.
  
  
• generic-family: family-name으로 지정된 글꼴을 사용할 수 없을 경우를 대비해, 브라우저가 대체할 수 있는 폰트가 필요한 경우 선택할 수 있게 해줍니다. font-family 속성의 맨 마지막에 선언해야 하며, 키워드이기 때문에 따옴표 등의 인용부호로 묶지 않는 것이 원칙입니다.

 

line-height 속성

line-height는 텍스트 라인의 높이를 의미하는 것으로 주로 행간을 제어할 때 사용됩니다.

    기본 값 : normal

 

행간을 제어할 때 사용하는 속성이라 해서 줄 간격으로 생각해 오해하기 쉬울 수가 있습니다.

줄 바꿈이 되었을 때, 윗줄의 텍스트 하단과 아랫줄의 텍스트 상단까지의 간격이라고 생각할 수도 있지만,

line-height로 제어되는 부분을 line-box라고도 하며 이는 타이포그래피 구조에서 배웠던 [em 박스] + [상하단의 여백]까지를 의미합니다. 

 

< 속성 값 >

normal	기본값으로 브라우저의 기본 속성을 따릅니다. 폰트에 따라 브라우저에 따라 다르지만 보통 1.2 정도로 할당되어 있습니다.
number	font-size를 기준으로 설정한 숫자만큼 배율로 적용합니다.
length	px, em 등 고정 수치로 할당할 수 있습니다.
%	font-size를 기준으로 설정한 퍼센트만큼 배율로 적용합니다.

주의할 점은, line-height의 값으로 number를 선언할 때와 %로 선언할 때의 차이입니다.

두 값 모두 font-size를 기준으로 동작하기 때문에 1이나 100%를 같은 것이라고 오해할 수 있습니다.

하지만 두 값은 큰 차이가 있습니다. 바로 line-height의 값이 자식 요소로 상속되었을 때의 계산 방식입니다. 

• number 부모 요소의 숫자 값이 그대로 상속됩니다. 즉, 자식 요소에서도 또 한 번 자식 요소의 font-size를 기준으로 계산된 값을 가집니다.
  
  
• % 부모 요소에서 %값이 그대로 상속되는 것이 아니고, %에 의해 이미 계산된 px값이 상속됩니다.

 

font-size 속성

글꼴의 크기를 지정하는 속성입니다.

    기본 값 : medium

 

 < 속성 값 >

keyword	medium(기본 값), xx-small, x-small, small, large, x-large, xx-large, smaller, larger
length	px, em 등 고정 수치로 지정합니다.
%	부모 요소의 font-size 기준의 퍼센트로 지정합니다.

 

• absolute size (keyword) 기본 값인 medium에 대한 상대적인 크기로, 브라우저마다 사이즈가 다르게 정의되어있습니다.
• relative size (keyword) 부모 요소의 font-size 크기에 대해 상대적입니다. smaller는 0.8배, larger는 1.2배입니다.
• length px, em, rem 등의 단위를 이용하여 고정된 크기를 지정할 수 있습니다. - em :  부모 요소의 font-size에 em 값을 곱한 크기 - rem : 루트의 font-size에 rem 값을 곱한 크기
• percent (%) 부모 요소의 font-size를 기준으로 백분율 계산된 값을 지정할 수 있습니다.
• viewport units vw, vh 단위로 뷰포트를 기준으로 하여, 유동적인 font-size를 지정할 수 있습니다. vw는 뷰포트 width의 1%, vh는 뷰포트 height의 1% 값을 가집니다.

 

font-weight 속성

글꼴의 굵기를 지정하는 속성입니다.

 

    기본 값 : normal

 

< 속성 값 >

normal	기본 값 (400)
bold	굵게 표현(700)
bolder	부모 요소 보다 두껍게 표현
lighter	부모 요소 보다 얇게 표현
number	100, 200, 300, 400, 500, 600, 700, 800, 900 (클수록 더 두껍게 표현)

실무에서는 normal과  bold를 많이 사용하고, 부모 요소에 영향이 있는 bolder와 lighter는 사용을 될 수 있으면 지양하는 편입니다.

물론 상속 관계에서 바뀌어야 하는 스펙이라면 당연히 유용하게 사용될 수 있지만, 그 외의 경우에는 사용에 있어 신중해야 합니다. 

font-weight는 normal, bold와 같은 키워드 외에 숫자로도 그 굵기를 표현할 수 있습니다.

100~900까지 100단위로 값을 지정하여 사용할 수 있고 숫자가 커질수록 더욱 굵게 표현됩니다.

기본적으로 400은 normal과 같고, 700은 bold와 같습니다

그러나 수치를 이용한 font-weight는 폰트 자체에서 지원을 해야 표현할 수 있습니다.

폰트에 따라 font-weight를 적용해도 굵기에 변화가 없을 수도 있으며,

normal과 bold만 지원하는 폰트일 경우에는 100~500까지는 normal로, 600~900까지는 bold로 표현됩니다.

폰트가 점차 다양해지면서 굵기 자체를 폰트 family-name으로 가지고 있는 경우도 있습니다.

또한,  디바이스별로 조금 다르게 표현될 수도 있습니다. 

font-weight와 font-family, font-size는 서로 밀접하게 연관되어있습니다.

 

font-style 속성

글꼴의 스타일을 지정하는 속성입니다.

    기본 값 : normal

 

< 속성 값 >

normal	font-family 내에 분류된 기본 값
italic	italic 스타일로 표현합니다.
oblique	oblique 스타일로 표현합니다.

 

• oblique 텍스트의 기울기에 대한 각도를 추가로 지정할 수 있습니다.

font-weight oblique <각도>;

유효한 값은 -90 ~ 90도이며, 따로 각도를 지정하지 않으면 14도가 사용됩니다. 양수 값은 글의 끝 부분 쪽으로 기울어지며, 음수값은 시작 부분 쪽으로 기울어집니다. 그러나 아직 초안 단계로 CSS Fonts Module Level 4를 지원하는 브라우저에서만 사용 가능합니다.

 

font-variant 속성

글꼴의 형태를 변형하는 속성으로 소문자를 작은 대문자로 변환할 수 있습니다.

    기본 값 : normal 

 

 < 속성 값 >

normal	기본 값
small-caps	소문자를 작은 대문자로 변형합니다.

 

font 관련 속성

font-style, font-variant, font-weight, font-size/line-height, font-family 속성들을 한 번에 선언할 수 있는 축약형 속성입니다. 

    기본 값 : 각 속성들의 기본 값

 

< 속성 값 >

font-style	font-style 지정, 기본 값은 normal
font-variant	font-variant 지정, 기본 값은 normal
font-weight	font-weight 지정, 기본 값은 normal
font-size/line-height	font-size/line-height 지정, 기본 값은 normal
font-family	font-family 지정

 

축약형을 선언할 때는 아래 사항들을 유의해야 합니다.

• font-size와 font-family는 반드시 선언해야 하는 필수 속성입니다.
• 빠진 속성이 있다면 기본 값으로 지정됩니다.
• 각 속성의 선언 순서를 지켜야 합니다.