CSS Typography(글씨) : Font Family, Font Weight, Font Style, Word Spacing, Letter Spacing, Text Transformation, Text Alignment

지금부터는 글꼴을 스타일링하여 읽기 쉽고 매력적으로 만드는 과정을 해보고자 합니다. 결국 정보를 제공하는 측면에서는 글꼴의 스타일링이 중요한 작업중 하나인 것은 확실한 것 같습니다. 

 

 

▒ Font Family

 

글꼴 유형을 변경할 때 사용하는 속성이름입니다. 속성이름은 font-family로 사용합니다. 지난 HTML 시간에도 한번 언급했는데 다음 고려할 사항을 다시 한번 보시죠.

 

1. 나만의 글씨체를 사용할 경우 다른 웹페이지 사용자의 컴퓨터에 같은 글꼴이 설치가 되어 있지 않을 수 있다.

2. 웹페이지의 로딩 시간 등을 고려할 때 글꼴은 2~3개 정도로 사용하는 것이 좋다.

3. 기본 글꼴은 Times New Roman 체이다.

4. 글씨체 이름이 두개 단어 이상으로 되어 있는 경우는 큰따옴표 "    "로 묶어야 한다. 

 

※ 참고로 다른 컴퓨터 언어에서 코딩을 할때 작은따옴표와 큰따옴표를 사용하는 예시를 본적이 있을겁니다. 헷갈릴 수 있으니 전부 큰따옴표로 사용해도 무방합니다. (최소 HTML, CSS, Python, React,JavaScript 에서는 그런것 같습니다.)

 

 

---

 

▒ Font Weight

 

중요한 내용이나 타이틀 같은 콘텐츠들은 인식하기 쉽게 해 주는 것이 좋습니다. 이럴경우 font-weight 속성을 사용하여 굵게 강조를 합니다. 

 

 

대부분의 텍스트 요소 속성값의 기본설정은 Normal로 설정되어 있습니다. Header같은 경우는 강조된 글꼴이 기본적으로 내재되어 있습니다. 

 

그러면 글꼴의 가중치는 어느정도일지 숫자로 보는게 이해가 쉽습니다. 

 

Font Weight의 숫자 속성값은 100 ~ 900사이로 표시할 수 있으며 단위가 100입니다. 기본 Font Weight는 400이며 Bold Font Weight는 700 가벼운 Font Weight는 300 정도입니다. 

 

예를들어 머리글과 바닥글의 Font Weight를 다음과 같이 줄 수 있겠죠.

 

 

---

 

▒ Font Style

 

글씨를 이탤릭체처럼 기울게 쓰고 싶다면 Font Style 속성을 사용합니다. 

 

 

---

 

▒ Word Spacing (단어 간격)

 

단어간 간격은 기본적으로 설정이 되어 있습니다만 좀 더 가독성을 높이기 위해 단어사이의 간격을 추가하여 설정할 수 있습니다. 

 

다음 예를 기준으로 설명을 보면 이해하기 쉬울겁니다. 

 

 

상기 CSS는 단어사이의 간격을 0.3em으로 설정하라는 명령입니다. 원래 단어사이의 기본 간격은 0.25em입니다. 따라서 기본간격(0.25em)에 주어진 간격(0.3em)이 더해진 0.55em만큼 단어사이 간격이 떨어지게 됩니다. 

 

 

☞ em 이란 ? 

 

em은 Typography 단위 중 하나입니다. 사용한 글꼴의 크기와 연동하여 문자의 너비와 높이의 비율이 정해집니다. 1em은 현 글꼴의 크기 12point 크기의 대문자 "M"의 너비를 기준으로 높이등이 정해집니다. 

 

 

---

 

▒ Letter Spacing (문자 간격)

 

단어사이의 간격을 word-spacing의 속성을 사용하였으니 문자사이 간격 또한 letter-spacing 속성을 사용하면 됩니다. 다음과 같이 CSS에서 사용합니다. 

 

 

Word Spacing과 Letter Spacing은 잘 사용하지는 않습니다만, 참고로 알아두면 좋을 것 같아 소개해 드립니다. 

 

 

---

 

▒ Text Transformation (텍스트 변환)

 

영어에서는 대문자, 소문자를 구분할 필요가 있습니다. 이럴경우 text-transform이라는 속성을 사용하며 대문자는 uppercase 소문자는 lowercase라는 속성값을 사용합니다. 

 

HTML에서 텍스트를 사용할 때 부터 대문자, 소문자를 써서 입력할 수 있지만 모든 <h1>태그를 전부 대문자로 지정하고자 하거나하는 필요성이 있을때 CSS에서 텍스트 변환을 사용합니다. 

 

---

 

▒ Text Alignment (텍스트 정렬)

 

텍스트는 브라우저에서 기본적으로 왼쭉에서부터 정렬이 되어 나타납니다. 텍스트를 이동시키거나 정렬이 필요할 경우 text-align이라는 속성을 사용합니다. 속성값은 left, center, right가 있습니다. 

 

Text Alignment 예시

 

 

다음 시간에는 Typography의 또 다른 속성에 대해 같이 생각해 보는 시간을 갖도록 하겠습니다.