[CSS 속성] 폰트

[CSS 속성] 폰트
/category/%EA%B3%B5%EB%B6%80/HTML%EA%B3%BC%20CSS

2022. 12. 23. 13:08

typography

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

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

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

font-family

기본값은 브라우저에 따라 다르게 적용된다.

family-name은 사용할 폰트의 이름을 나타내며 ','로 구분하여 여러 개를 한번에 선언할 수 있다. 먼저 선언된 순서대로 우선순위가 적용된다. 이름 중간에 공백이 있거나, 한글인 경우 홑따옴표로 묶어서 선언한다.

generic-family는 family-name으로 지정된 글꼴을 사용할 수 없을 경우를 대비해, 브라우저가 대체할 수 있는 폰트가 필요한 경우 선택할 수 있게 해준다.

font-family 속성의 마지막에 선언해야 하며, 키워드이기 때문에 따옴표 등의 인용부호로 묶지 않는 것이 원칙이다.

예를 들어 아래와 같이 선언할 수 있다.

font-family: Helvetica, Dotum, '돋움', Apple SD Gothic Neo, sans-serif;

가장 먼저 Helvetica 폰트를 사용하고, 이를 사용할 수 없을 때 Dotum을 사용하는 방식으로 우선순위가 차례대로 적용된다.

그리고 Dotum과 '돋움'을 굳이 영문으로 한번, 한글로 한번 선언한 이유는 한글을 지원하지 않는 디바이스의 경우 해당 한글 폰트를 불러올 수 없기 때문이다.

font-family 속성을 지정할 때는 반드시 generic-family를 선언해줘야 한다는 것을 기억하자.

선언된 모든 서체를 사용할 수 있다는 보장이 없기 때문에 항상 generic-family를 선언해야한다.

generic-family를 선언해두면 앞서 선언한 폰트들을 사용할 수 없어도 사용자가 의도한 스타일과 유사한 서체로 적용된다.

또한, 자식 요소에 font-family를 재선언하면 부모에 generic-family가 선언되어 있더라도 다시 선언해주어야 한다.

generic-family에는 대표적인 서체로 serif, sans-serif가 있다.

sans는 삐침이라는 뜻이고, sans는 프랑스어로 '~이 없이'라는 뜻이다.

https://looka.com/blog/best-sans-serif-fonts/

serif는 글자 획에 삐침이 있는 폰트로 대표적으로 명조체가 있으며, sans-serif는 획에 삐침이 없는 폰트로 대표적으로 돋움체가 있다.

line-height

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

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

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

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

line-height의 기본값은 normal이다.

normal은 폰트에 따라 브라우저에 따라 다르지만 보통 1.2 정도로 할당되어 있다.

number는 font-size를 기준으로 설정한 숫자만큼 배율로 적용한다.

length는 px, em 등 고정 수치로 할당할 수 있다.

%는 font-size를 기준으로 설정한 퍼센트만큼 배율로 적용한다.

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

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

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

number는 부모 요소의 숫자 값이 그대로 상속된다. 즉, 자식요소에서도 또 한번 자식 요소의 font-size를 기준으로 계산된 값을 가진다.

%는 부모 요소에서 %값이 그대로 상속되는 것이 아니라, %에 의해 이미 계산된 px값이 상속된다.

<!--html 파일-->
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>line-height</title>
        <link href="css/line_height.css" rel="stylesheet">
    </head>
    <body>
        <div class="parent">
            <div class="child">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum, voluptatem itaque! Voluptatum iste doloremque, harum sit accusantium ipsa ullam adipisci qui excepturi fugiat exercitationem architecto dolor minima reprehenderit sequi dicta.
            </div>
        </div>
    </body>
</html>

/*line_height.css*/
.parent {
    width: 200px;
    font-size: 10px;
}

.child {
    font-size: 20px;
}

위 예제에서 parent의 line-height를 2와 200%로 수정해서 각각의 차이점을 확인해보자.

/*line_height.css 파일*/
.parent {
    width: 200px;
    font-size: 10px;

    line-height: 2;
}

.child {
    font-size: 20px;
}

/*line_height.css 파일*/
.parent {
    width: 200px;
    font-size: 10px;

    line-height: 200%;
}

.child {
    font-size: 20px;
}

결과를 보면 2와 200%가 크게 차이나는 것을 볼 수 있다.

line-height: 2는 상속되면서 child의 font-size인 20px의 두 배 값 40px로 적용되었고

line-height: 200%는 상속되면서 parent의 font-size인 10px의 두 배 값 20px이 그대로 상속되어 적용되었다.

따라서 부모 요소에서의 line-height 비율을 그대로 자식에 상속해주고 싶다면

%가 아닌 단위가 없는 숫자 값을 사용해야 한다.

font-size

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

기본값은 medium이다.

medium부터 xx-large는 absolute size로 기본 값인 medium에 대한 상대적인 크기를 나타낸다(브라우저마다 다름). absolute size의 경우 실무에서는 잘 사용되지 않는다. 브라우저가 달라지더라도 보여주는 화면은 그대로여야 하는 경우가 많기 때문이다.
smaller와 larger는 relative size로 부모 요소의 font-size 크기에 대해 상대적이다. smaller는 0.8배, larger는 1.2배이다.
length는 px, em, rem 등의 단위를 이용해서 고정된 크기를 지정할 수 있다.
%는 부모 요소의 font-size를 기준으로 백분율 계산된 값을 지정한다.
viewport units이라는 것도 있는데 vw, vh 단위로 뷰포트를 기준으로 하여 유동적인 font-size를 지정할 수 있다. vw는 뷰포트 width의 1%, vh는 뷰포트 height의 1% 값을 가진다.

font-weight

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

기본값은 normal이다.

normal과 bold는 각각 number에서의 400과 700과 같다. 실무에서 가장 많이 사용된다.

bolder와 lighter는 각각 부모 요소보다 두껍게, 얇게 표현한다. 부모 요소에 영향을 받기 때문에 실무에서 자주 사용되지 않는다.

100~900의 number는 클수록 더 두껍게 표현된다. 이때 normal과 bold만 지원하는 폰트의 경우 100~500은 normal로, 600~900은 bold로 표현한다. 폰트에 따라 number를 입력해도 굵기가 변하지 않는 폰트도 있다.

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

font-style

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

기본값은 normal이다.

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

oblique 텍스트의 기울기에 대한 각도를 추가로 지정할 수 있다. font-style: oblique <각도>;

유효한 값은 -90도~90도이며, 따로 각도를 지정하지 않으면 14도가 사용된다. 양수값은 글의 끝 부분 쪽으로 기울어지며, 음수값은 시작 부분 쪽으로 기울어진다.

이 기능은 CSS Fonts Module Level 4를 지원하는 브라우저에서만 사용할 수 있다.

italic과 oblique 둘 다 텍스트를 기울게 하는 것은 동일한데 차이가 있다.

italic은 이텔릭체가 디자인되어있는 폰트에서 사용하고 oblique는 이텔릭체가 없어도 무조건 글자를 기울여서 표현한다.

font-variant

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

normal : 기본값이다.
small-caps : 소문자를 작은 대문자로 변형한다.

<!--html 파일-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>font-variant</title>
        <link href="css/fontvariant.css" rel="stylesheet">
    </head>
    <body>
        <p>Font-Variant: Small-Caps</p>
    </body>
</html>

/*fontvariant.css 파일*/
p {
    font-variant: small-caps;
}

font

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

기본값은 각 속성들의 기본값과 같다.

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

font-size, font-family를 반드시 선언해야 한다.
빠진 속성이 있다면 기본 값으로 지정된다.
각 속성의 선언 순서를 지켜야 한다.

사용할 때 제약사항이 많아 실무에서는 잘 사용하지 않는다.

webfont

실무에서 폰트 관련해서 주로 사용되는 명칭으로 '시스템 폰트', '이미지 폰트', '웹 폰트'가 있다.

시스템 폰트는 font-family로 선언한 글꼴이 사용자 시스템에 기본으로 설치가 되어 있어 사용할 수 있는 경우를 말하고,

이미지 폰트는 특정 글꼴을 사용하는 것이 아닌, 이미지를 이용해 표현하는 것을 의미한다. 정확하게는 폰트가 아니라 이미지다.

웹 폰트는 서버에 글꼴을 저장해 제공하거나, 웹 경로를 통해 사용하는 폰트를 의미한다.

@font-face는 웹에 있는 글꼴을 사용자의 로컬 환경으로 다운로드하여 적용하는 속성이다.

font-family는 글꼴의 이름을 지정하는 속성값으로 필수로 입력해야 한다.

src는 다운로드 받을 글꼴의 경로를 나타내는 속성값으로 이 값도 필수이다.

font-style과 font-weight는 필수 속성값은 아니며, 지정하지 않을 시 normal로 지정된다.

사용 예시는 아래와 같다

@font-face {	
	font-family: myFont;
    src: url(myFont.eot);
    font-weight: bold;
    font-style: italic;
}

div {
	font-family: myFont;
}

위 예시에서는 eot 확장자의 파일 한 개만을 사용했지만, 여러 종류의 웹폰트를 동시에 선언할 수 있다.

이때 브라우저는 사용할 수 있는 폰트를 찾을 때 까지 위에서 아래부터 순서대로 폰트를 확인한다.

부스트코스의 강의 내용을 정리한 포스트입니다.

https://www.boostcourse.org/cs120

비전공자를 위한 HTML/CSS

부스트코스 무료 강의

www.boostcourse.org

'공부 > HTML과 CSS' 카테고리의 다른 글

[CSS 속성] 레이아웃 (display, visibility) (0)	2022.12.28
[CSS 속성] 텍스트 (0)	2022.12.27
[CSS 속성] 단위, 배경, 박스모델 (0)	2022.12.21
[CSS 속성] (0)	2022.12.16
[CSS 이해하기] 캐스케이딩(cascading) (0)	2022.12.15

김철용 기록소

CATEGORIES