CSS

CSS 폰트 속성, font-family, weight, line-height와 단축 속성 사용법

by mystee
포스트 썸네일 이미지

이번 포스트에서는 글꼴의 서체부터 두께, 줄 간격에 이르기까지 텍스트의 가독성을 완성하는 CSS 폰트 관련 속성들을 하나씩 알아보겠다.

그리고 여러 줄의 코드를 단 한 줄로 줄여주는 font 단축 속성의 활용법과 주의사항까지 정리해 보겠다.




이전 포스트

CSS 색상 지정 방법 Color Name, HEX, RGB의 차이점과 투명도(RGBA vs Opacity) 비교

CSS에서 색상을 지정하는 3가지 방법(Color Name, HEX, RGB)의 장단점을 정리했습니다. 특히 자식 요소까지 흐려지는 'opacity'와 배경만 투명해지는 'rgba'의 결정적 차이점을 비유를 통해 쉽게 배워보세요. 바로 써먹을 수 있는 팁을 공개합니다.




생활코딩 CSS 수업 영상: 타이포그래피 font





<!DOCTYPE html>
<html>
<head>
    <style>
        #type1 {
            font-size: 5rem;
            font-family: Arial, Verdana, "Helvetica Neue", serif;
            font-weight: bold;
            line-height: 2;
        }
        #type2 {
            font: bold 5rem/2 Arial, Verdana, "Helvetica Neue", serif;
        }
    </style>
</head>
<body>
    <p id="type1">
        Hello World<br>
        Hello World
    </p>
    <p id="type2">
        Hello World<br>
        Hello World
    </p>
</body>
</html>

먼저 생활코딩 수업 영상에서 사용한 코드다.





font-family


글꼴(서체)을 지정하는 CSS 속성이다.

font-family는 사용자의 컴퓨터에 해당 폰트가 없을 상황을 대비해 여러 개의 후보를 나열하는 폴백Fallback 시스템을 가진다.


  1. 우선순위 나열: 왼쪽에서 오른쪽 순서로 브라우저가 확인한다. 가장 먼저 쓴 폰트가 있으면 적용하고, 없으면 다음 폰트를 찾는다.
  2. 따옴표 사용: 폰트 이름에 공백(띄어쓰기)이 포함되어 있다면 반드시 따옴표(' ')로 감싸야 한다. 큰따옴표(" ")를 써도 상관없다. (예: 'Franklin Gothic Medium', 'Arial Narrow')
  3. 마지막은 반드시 '일반 글꼴군(Generic Family)': 나열한 폰트가 사용자 컴퓨터에 하나도 없을 경우를 대비해, 마지막에는 반드시 sans-serif(고딕체)나 serif(명조체) 같은 공통 명칭을 적어야 한다. (예: font-family: Arial, Verdana, "Helvetica Neue", serif;)




font-weight


글꼴의 두께를 결정한다.

normal, bold, 또는 100에서 900 사이의 숫자를 사용한다.

font-weight 속성을 따로 지정하지 않았을 때의 기본값은 normal이다.


부모 요소보다 한 단계 더 굵은 두께를 선택하는 bolder와 부모 요소보다 한 단계 더 얇은 두께를 선택하는 lighter 등도 있고, 그 외에도 몇 가지 더 있지만 생각보다 자주 쓰이지 않는다.

bold와 100에서 900 사이의 숫자만 기억해 두면 된다.




line-height


줄 간격을 조절한다.

텍스트 줄 사이의 수직 거리를 정하며, 단위 없이 숫자만 쓰면(예: 1.5) 현재 글자 크기의 배수로 적용된다.

픽셀 단위 사용도 가능하지만 위의 수업 영상에서 나온 것처럼 권장되지 않는다.





font 단축 속성


이 모든 속성을 font: ...; 한 줄로 합쳐 쓸 수 있다.

하지만 이 방식에는 꼭 지켜야 하는 규칙이 있다.




1. 필수 포함 요소

단축 속성을 쓸 때는 font-size와 font-family가 반드시 포함되어야 한다.

하나라도 빠지면 해당 코드는 아예 작동하지 않는다.



2. 순서의 제약

일반적인 순서는 다음과 같다.


font: [style] [variant] [weight] [size]/[line-height] [family];


  • 중요: 위의 코드처럼 size와 family는 항상 맨 뒤에 와야 한다.
  • 줄 간격(line-height): 반드시 size 바로 뒤에 /와 함께 써야 한다.
  • font-style은 글자를 기울일지 말지를 결정하는 속성이고, font-variant 속성은 주로 영문 소문자를 다룰 때 사용하는데, 소문자를 '크기가 작은 대문자' 형태로 바꾸거나 할 수 있다.




/* 올바른 예 */
font: 700 1rem/1.5 Arial, sans-serif; /* 두께 700, 크기 16px, 줄간격 1.5, 서체 Arial */

/* 잘못된 예 */
font: 16px bold Aria"; /* 순서가 틀림. 두께가 크기 앞에 와야 함 */




font 단축 속성을 사용하면 지정하지 않은 다른 속성(예: font-style)들은 모두 기본값으로 초기화된다.

초보자에게는 단축 속성보다는 각각의 속성을 따로 적는 방식(font-size, font-family 등)이 실수를 줄이고 가독성을 높이는 데 더 유리하다.




생활코딩 CSS 수업 영상: 타이포그래피 웹폰트


생활코딩 CSS 수업 영상에서 폰트 관련 마지막 영상이다.

이건 딱히 글로 정리할만한 내용도 없는 것 같고, 중요하지 않은 것 같아서 영상만 올려두겠다.


웹폰트는 사용자 컴퓨터에 서체가 없어도 웹 사이트 접속 시 서버에서 폰트를 자동으로 다운로드해 보여주는 기술이다.

덕분에 어떤 환경에서든 제작자가 의도한 디자인 그대로 글꼴을 노출할 수 있다.

현재는 브라우저 성능이 좋아져서 Google Fonts나 Pretendard 같은 웹폰트를 사용하는 것이 웹 사이트의 표준이 되었다.




다음 포스트

CSS 상속: 상속되는 속성과 안 되는 속성 구분하기 (inherit 속성 활용법)

부모의 스타일을 자식이 물려받는 CSS 상속, 왜 필요할까요? 텍스트 관련 속성은 상속되고 박스 모델 속성은 상속되지 않는 이유를 정리했습니다. 강제 상속 키워드 inherit 활용 팁, 그리고 브라우저 디자인을 바꾸는 Stylus 익스텐션 이야기까지 확인해 보세요.
이 글이 도움이 됐거나 유익했다면 스크롤을 조금만 더 내려서 댓글을 남겨주세요. (비로그인도 가능합니다!)
응원이나 피드백이 담긴 댓글은 제가 계속 블로그를 해나갈 수 있는 원동력이 됩니다. 😊

지인에게 보여주고 싶은 글이었다면 URL을 복사해서 메신저나 소셜 미디어에 공유해 주세요.
Tags

작성자: mystee

다음 이전

댓글 쓰기

0 Comments

댓글 쓰기

🔸 댓글은 블로그 운영자의 승인 후에 블로그에 표시됩니다.
🔸 비로그인 방문자 분께서는 '익명'보다 이름/URL로 댓글을 남겨주시면 감사하겠습니다. (URL은 생략 가능합니다.)
🔸 구글 로그인 방문자는 '알림 사용'에 체크를 하시면, 남겨주신 댓글에 대한 답글 알림을 메일로 받아볼 수 있습니다. 📩

문의하기 양식