[CSS] Typography

내가 느끼기에 웹이든 앱이든 아무리 디자인이 잘 나왔다고 해도 폰트가 그지같으면 안 예뻐보인다. 그만큼 폰트가 디자인에 차지하는 비중이 엄청 크다고 생각하는 사람 중 한 명이다. 오늘은 Typography에 대해서 공부해보자.
(이 글은 김버그의 CSS 강의를 듣고 정리한 글입니다)

font-size

말 그대로 글씨의 크기를 설정할 수 있다. 폰트 사이즈를 설정할 수 있는 단위는 총 3가지이다.

• px : [절대 단위]
• em : [상대 단위 ] equal to capital M의 약자로, 대문자 M 사이즈의 크기를 기준으로 한다고 한다. 이게 도대체 뭔 말일까? 내가 이해한 바로는 다음과 같다.

  일단, font-size의 값에 비례해서 결정된다. 예를 들어 font-size: 20px이라고 하자. 그렇다면, 1em을 px로 환산하면 20px이 되고, 1.5em은 30px이 된다.
  그렇다면, 도대체 어디에 있는 font-size를 기준으로 em을 설정하는 걸까? 해당 단위가 사용되고 있는 요소의 font-size의 값이 기준이 된다.

div {
	font-size: 20px;
    width: 5em;
}

다음과 같이 코드가 작성되었다고 가정하자. 그렇다면 이 div의 width 크기는 100px이 되는 것이다. 개념만 봐도 좀 복잡하다. 이걸 실제 코드에 쓰면 더 복잡해질 것이다. 너무 상대적이라 좀 불안정하다고 느낄 수도 있다. 그래서 사실 font-size를 설정할 때 em보단 rem을 사용한다.

• rem : [상대 단위 ] em은 알아봤는데 그럼 rem은 또 대체 뭘까. root em이라고 생각하면 되는데, 즉, html에 적용된 font-size의 크기를 1rem이라고 정하는 것이다.

html {
	font-size: 20px;
}

p {
	font-size: 2rem;
}

위와 같은 코드가 있다. rem은 root. 즉, html에 적용된 font-size를 기준삼는다고 했다. 위 코드에서 우리는 html의 font-size를 20px로 정의했기 때문에, p 태그의 font-size는 40px이 된다.

---

line-height

이것도 font-size와 마찬가지로 이름이 직관적이다. line-height 즉, 줄 간격을 뜻한다. line-height도 px, em, rem을 사용할 수 있는데, line-height에서는 em을 많이 사용한다. 왜냐? 현재 적용된 폰트 사이즈에 비례해서 줄간격을 얼마나 띄울지를 설정해야 하기 때문이다. em이 기본 단위다.

p {
	font-size: 20px;
    line-height: 1.5;
}

em이 기본 단위이기 때문에, px, rem을 특별히 사용하는 것이 아니라면 위와 같이 단위를 생략해도 된다.
(line-height는 무조건 글자가 줄간격의 정 가운데에 정렬이 된다.)

---

letter-spacing

letter-spacing은 자간을 조정할 수 있다. letter-spacing을 사용할 때에는 px과 em을 사용하게 되는데, 이도 line-height와 마찬가지로 em을 많이 사용한다. 근데 line-height마냥 단위를 생략하면 안된다. 꼭 적어주어야 한다.

p {
	font-size: 20px;
    line-height: 1.5;
    letter-spacing: -0.01em;
}

---

font-family

font-family는 서체를 결정할 수 있다.

p {
	font-family: "Poppins";
   	font-family: "Poppins", sans-serif;
    font-family: "Poppins", "Roboto", sans-serif;
}

위와 같은 코드를 볼 수 있게 되는데, 어렵지 않다. 첫 번째 폰트를 사용하고, 만약 없으면 다음 폰트를 사용하라는 뜻이다.

---

font-weight

font-weight는 폰트의 굵기를 설정한다. 값은 100부터 900까지 100단위로 있는데, 높을수록 굵어진다.

• 100 : thin
• 300 : Light
• 400 : Regular
• 500 : Medium
• 700 : Bold
• 900 : Black

---

color

말 그대로 글씨의 색상을 조절한다.
색상을 조정할 때에는 3가지 표현 방식이 있다.

• hex : #000000
• rgb : rgb(0, 0, 0)
• rgba : rgba(0, 0, 0, 1) - 마지막 인자는 alpha. 투명도이다.

---

text-align

text를 정렬할 때 사용한다. left right center 등 text의 정렬 방향을 정하면 된다.

---

text-indent

텍스트를 들여쓰고 싶을 대 사용한다.

p {
	font-size: 20px;
    line-height: 1.5;
    letter-spacing: -0.01em;
    text-indent: 50px;
}

---

text-transform

이 속성은 알파벳을 사용하는 언어들을 다룰 때 사용하면 된다.

• none
• capitalize
• uppercase
• lowercase

---

text-decoration

이 속성은 텍스트에 줄을 그어버릴 때 사용한다. 밑줄이라던가.. 가운데줄이라던가..
이 속성은 주로 a 태그에 사용한다. 왜냐? a 태그를 사용하면 기본적으로 밑줄이 생기게 되는데, 이 밑줄을 지울 수 있다!

• none
• underline
• line-through
• overline

---

font-style

주로, 폰트를 기울이고 싶을 때 사용한다.

• normal
• italic
• oblique