CSS 속성 : 폰트의 기본 속성

서론

CSS에서는 여러가지 스타일을 지정할 수 있다. 그 중에서 이번 포스트에서는 가장 기본이 되는 서체를 스타일링 할 수 있는 속성 중 가장 많이 사용되는 속성에 대해서 알아볼 것이다.

CSS 폰트의 기본 속성

폰트 종류 지정

font-family: 'Noto Sans', Arial, sans-serif;

• font-family는 문서 또는 요소의 폰트를 지정하는 것이다.
• 속성 값 개수 : 속성 값에는 개수 제한이 없지만 보통 3개, 많아야 5개 정도로 지정한다.
  • 너무 많이 적으면 성능에서 불리하기 때문에 3~5개 선에서 마무리하는 것이 일반적이다.
• 속성 값 의미 : 첫번째 값부터 차례대로 폰트 적용을 시도한다. 사용자의 PC나 웹에 해당하는 폰트가 없으면 2순위, 3순위 폰트로 적용을 시도한다.
• 속성 값 적용 방법
  • 첫번째에는 개발자가 의도한 웹 폰트를 지정한다. (위에서는 Noto Sans)
  • 웹 폰트가 적용되지 않을 때를 대비하여 2순위로는 시스템 기본 폰트를 지정한다. (Arial)
  • 3순위로는 위 두 가지 모두 적용되지 않았을 경우를 대비해서 폰트의 계열을 지정한다. (sans-serif)
  • 속성 값에는 따옴표를 작성하지 않는다. 다만 폰트의 이름에 공백(띄어쓰기)이 있는 경우에는 따옴표로 감싼다. (위에서는 'Noto Sans'

만약 디자인이 중요한 사이트라면 폰트에도 민감할 수밖에 없는데, 이럴 경우 웹 폰트로 1~2순위를 아래처럼 지정하기도 한다.

font-family: 'Noto Sans', 'Helvetica Neue', Arial, sans-serif;

참고로 웹 폰트를 사용하기 위해서는 @font-face로 웹 폰트를 로드한 다음 font-family를 사용하여야 한다.

• 시스템 폰트(System Font)란?
  • 사용자의 OS에 기본적으로 설치되어 있는 폰트.
    • Windows: Arial, Segoe UI
    • macOS: Helvetica, San Francisco
    • Android: Roboto
    • iOS: San Francisco
  • 웹 폰트 적용이 안 되어 시스템 폰트를 사용하게 되는 경우, OS마다 기본 시스템 폰트의 디자인이 다르기 때문에 개발자가 의도한 대로 디자인이 나오지 않을 수 있다는 점은 인지하고 있어야 한다.
• 폰트 계열(Generic Font Family)
  • 구체적인 폰트를 지정하는 것이 아니라 폰트의 계열만 지정하는 것.
  • sans-serif: 고딕체처럼 깔끔한 글꼴
  • serif: 명조체처럼 삐침이 있는 글꼴
  • monospace: 흔히 코딩할 때 사용하는 폰트와 같이 글자폭이 일정한 글꼴
  • sursive: 필기체
  • fantasy: 장식용 글씨체처럼 화려한 글꼴

그러면 위에서 예시로 들었던 'Noto Sans', Arial, sans-serif; 라는 속성 값 예시는 웹 폰트가 적용되지 않았을 때 Windows의 시스템 폰트만 2순위로 지정했기 때문에 다른 OS는 고려하지 않는 것인가 의문이 들 수도 있다. 일단 이에 대한 답은, 웹 폰트가 적용되지 않는 경우 자체를 배제해야 하긴 한다. 하지만 여러가지 이유로 그렇게 될 가능성이 높다면, 가장 베스트는 모든 OS에서 최대한 비슷한 글꼴로 보이는 것이 될 것이다. 따라서 OS별로 비슷한 느낌의 시스템 폰트를 모두 지정해주는 것이 가장 안전한 방법이겠다. 하지만 대부분의 경우에서는 웹 폰트가 적용이 안 되는 경우는 버그나 다름이 없으니, 굳이 2~3순위까지 자세하게 지정해서 리소스 낭비를 하지 않는다. 성능이 좋은 PC에서는 큰 차이를 못느끼지만 성능이 떨어지는 PC나 특히 모바일에서는 이 폰트 지정 개수가 많아져서 검사해야 할 리소스가 늘어나면 이 작은 차이도 사용자가 체감될 정도로 성능 저하를 유발한다.

font-family: 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;

하지만 공공기관, 은행 등 초기 로딩 속도보다 신뢰가 더 중요한 엄격한 사이트는 OS별로 지정하기도 한다.

폰트 사이즈

font-size: 16px;

• 가장 일반적으로 사용되는 기본 글자 크기는 16px.
• 크기 단위
  • px: 고정 크기
  • rem: 반응형 크기
  • em: 반응형 크기

폰트 굵기

font-weight: 400;

• 속성 값
  • 100~900 사이에서 설정한다. 100이 가장 가늘고 900이 가장 굵다.
  • 400: normal
  • 700: bold
  • 숫자 대신 normal, bold, lighter, bolder로도 지정 가능.

폰트 스타일

font-style: italic;

• 속성 값
  • normal: 기본
  • italic: 기울임
  • oblique: 비스듬히

줄 간격

line-height: 1.5;

• 속성 값
  • 숫자만 쓰면 줄 간격의 배율. 위의 1.5는 글자 크기의 1.5배 만큼 줄 간격을 띄운다는 의미.
  • px, %, em으로도 설정 가능.
  • 글자가 많은 페이지에서 가독성을 높이기 위해서 필수적으로 조정해야 하는 것.

글자 간격

letter-spacing: 0.5px;

• 속성 값
  • px, em로 글자와 글자 사이의 간격을 지정 가능.
  • 이 값은 0보다 크면 사이를 띄우는 것이고, 0보다 작으면 좁아진다.
• word-spacing: 2px;은 단어와 단어 사이의 간격을 설정하는 것인데, 이것보단 letter-spacing이 더 많이 쓰인다.

한 번에 폰트 설정하기

font: italic small-caps bold 16px/1.5 'Noto Sans', sans-serif;

여러 폰트 속성들을 한 번에 작성할 수 있다.
순서는 font-style font-variant font-weight font-size/line-height font-family 순이고,  이 중에서 font-size와 font-family는 필수로 작성해야 한다.
그러나 가독성이 떨어져서 유지보수에 어려움이 있을 수 있으니, 분리해서 작성하는 것이 좋겠다.

폰트 컬러

color: red;

color: #f7570b;

위 red는 CSS에서 기본적으로 입력해놓은 색상을 자연어로 표기한 것이고, 기본 색상은 16개이나 midnightblue 같은 세밀한 컬러까지 포함하면 100개가 넘는 컬러가 미리 준비되어 있다.
(https://developer.mozilla.org/ko/docs/Web/CSS/color_value)

그리고 아래처럼 RGB 컬러의 16진수 표기 방법인 hexcode를 직접 넣어서 색을 표현해도 된다.

글자 꾸밈

text-decoration: underline;

글자에 밑줄이나 윗줄, 취소선을 없애거나 넣을 때 사용한다.

주요 속성 값은 아래와 같다.

• none: 밑줄 없앰. 하이퍼링크에서 밑줄을 없앨 때 주로 사용.
• underline: 밑줄 넣음
• overline: 윗줄 넣음
• line-through: 취소선 넣음

text-decration: underline overline;

위와 같이 여러 개의 속성을 함께 사용할 수 있다.

CSS 글자 관련 속성의 접두사가 다른 이유

어떤 것은 font-, text-가 붙고 어떤 것은 아예 없는지, 그 차이가 무엇인지 설명하겠다.

font-

글자 자체의 모양, 크기, 스타일 등을 설정할 때 사용한다.

주요속성

• font-family: 폰트 지정
  • font-family: "Arial", sans-serif
  • Airal 폰트를 기본으로 하고 없으면 폰트 계열로 없으면 OS 기본 서체인 sans-serif로 설정.
• font-size: 폰트 사이즈 지정
  • 16px...
  • 단위
    • 고정크기
      • px
      • pt
      • mm
    • 상대크기 (반응형)
      • 부모 요소 기준 상대적인 크기를 지정하는 것. 
      • em (1.5em 등)
      • % (120% 등)
      • smaller
    • 키워드
      • small
      • medium
      • large
• font-weight: 폰트 굵기 지정
  • 키워드: normal, bold, lighter(부모보다 가늘게), bolder(부모보다 굵게)
  • 숫자값: 100~900 (100이 가장 가늚)
  • 사용을 해보면 100이나 300이나 같게 보이고, 400부터 변화를 하는 모습을 보이기도 하는데 이 이유는 
• font-style: 폰트 기울임 설정
  • normal: 기본. 기울임 없음.
  • italic: 기울임. 기울임이 디자인 되어 있는 폰트 그 자체를 사용함. 그래서 더 스타일리시함.
  • oblique: 이탤릭과 유사함. 기울임이 디자인되지 않은 폰트를 강제로 기울이는 것.
• font-variant: 작은 대문자. 'Hello'를 보면 ello는 소문자라 작게 써짐, 그런데 이걸 대문자로 쓰는데 글자를 작게 쓰는 효과.
• font: 위 속성을 한꺼번에 넣을 수 있는 속성
  • 순서가 중요하다.
  • 순서: font-style > font-variant > font-weight > font-size > font-family
  • 예시: font: italic small-caps bold 16px/1.5 "Arial", sans-serif;

text-

텍스트의 배치나 장식 등, 글자 자체가 아니라 글자와 관련된 요소를 설정할 때 사용한다.

주요속성

• text-align: 텍스트 정렬
• text-decoration: 밑줄, 윗줄, 취소선
• text-transform: 대소문자 변환
• text-indent: 들여쓰기 지정
• text-overflow: 넘치는 텍스트에 대한 설정
• text-shadow: 그림자 효과 설정
• text-wrap / white-space: 줄 바꿈 관련 설정

접두사가 없는 속성들

대표적으로 color: red; 와 같은 속성인데 이것은 글자와 관련된 속성에 국한된 것이 아니라 모든 CSS 요소에 사용되는 범용적 속성들이다.
예를 들어 color 속성은 글자 색상을 설정하는 것 뿐만 아니라 박스의 색상, 테이블의 색상 등 모든 CSS 요소에 적용되는 것이다.

이런 범용적 속성들 중에서 글자와 관련되어 자주 사용하는 주요속성은 아래와 같다.

주요속성

• color: 색상
  • color: red;
  • rgb(255, 0, 0)
  • rgba(0, 0, 0, 0.5) : 0.5는 반투명(50%의 투명도)
  • hsl(0, 100%, 50%) : H = 색상, S = 채도, l = 밝기
  • hsla(120, 100%, 25%, 0.8) : 투명도를 포함한 HSL 표기
  • 속성 값은 CSS에 기본적으로 입력된 색상들(위에 CDN 링크 있음)과 #hexcode 16진수 색상 코드를 사용한다. 투명도를 포함한 RGB 값을 넣을 수도 있다.
• line-height: 줄 간격
  • 1.5: 숫자만 입력하면 글자 크기 대비 줄 간격 설정 (추천)
  • 16px, 1.5em: 절대 단위(px) 또는 상대 단위(em)으로 줄 간격 설정
  • 150%: 글자 크기 대비 줄 간격 설정
  • normal: 키워드로 줄 간격 설정 가능
• letter-spacing: 단어 간의 간격 (아래 word-spacing 보다 자주 사용 됨.)
  • normal, 2px, -1px(음수로 설정 시 글자를 겹칠 수 있음)
• word-spacing: 글자 간의 간격
  • normal, 1em, 10px
• direction: 텍스트 방향(정렬)
  • ltr: left to right (왼쪽 정렬)
  • rtl: right to left (오른쪽 정렬)