Typography는 글자의 디자인을 의미하여 이 디자인적 요소에는 서체(Typeface), 글꼴(Font) 등 다양한 것들이 있습니다. 이러한 요소를 먼저 학습한 뒤에, CSS로 이 요소를 구현하는 방법을 알아보겠습니다.
서체(Typeface)는 글자의 기본적인 형태와 스타일을 정의하는 요소입니다. 크기나 굵기 보다는 모양이 중점을 둔 요소입니다.
글꼴(Font)은 서체(Typeface)의 구체적인 구현으로, 서체의 크기, 굵기, 스타일(이탤릭, 볼드 등)을 포함하는 요소입니다.
행간은 두 줄 사이의 공간으로, 적절한 행간은 텍스트가 읽기 쉽도록 돕습니다. 너무 좁거나 넓으면 가독성이 떨어질 수 있습니다.
자간(Letter Spacing)은 글자 사이의 공간을 정의하는 요소입니다. 단어 간격(Word Spacing)은 단어 사이의 공간을 정의하는 요소입니다.
계층은 문서에서 중요도에 따라서 어떤 글자가 사용자의 시선을 더 끌 수 있는지를 구분한 뒤에, 중요한 내용은 시선을 더 끌 수 있도록하고, 중요하지 않은 내용은 시선을 비교적 덜 끌게하여, 사용자로 하여금 효율적으로 글자를 읽을 수 있도록 도와주는 요소입니다. 이 계층은 글꼴뿐만아니라, 행간, 자간 등 다양한 요소의 변화를 주어서 구성할 수 있습니다.
Typography를 웹에서 적용하기 위해서는 당연하게도 CSS를 사용해야합니다. 하지만, html5에서는 기본적으로 Typography를 정의하고 있으며, 개발자는 이 정의에 CSS를 덭붙여서 새로운 Typography를 구성할 수 있습니다.
html5에서는 글자의 의미에 따라서 다른 tag를 사용하도록 하는 것을 표준으로 하고 있습니다. 이러한 행동은 시각장애인으로 하여금 스크린리더가 글 혹은 글자의 의미를 잘 전달 할 수 있도록 도움을 줄 수 있고, 모든 사용자가 웹의 컨텐츠를 사용할 수 있도록 도와줍니다.
- Heading tag:
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>는 각 문서 혹은 문단의 제목을 나타내며, h1이 가장 중요한 제목으로서 일반적으로 크기가 가장 크고 h6은 가장 작다. - Paragraph Tag:
<p>는 일반적인 텍스트 단락을 나타내며, 텍스트 콘텐츠를 감싸는 데 사용됩니다. - Strong Tag:
<strong>는 글에서 특정 단어나 문장을 강조하기 위해서 사용됩니다. ex.저는 Gitsunmin입니다.
- Emphasis Tag:
<em>도<strong>와 마찬가지로 강조를 위한 Tag이지만, 굵기의 변화가 아닌, 기울임을 이용하여 글자를 강조합니다. ex.저는 Gitsunmin입니다.
- Mark Tag:
<mark>또한 강조를 의미하는 Tag이지만, 글자의 배경색에 변화를 주어 글자를 강조할 떄 사용되면, 일반적으로는 검색 결과에서 특정 단어를 강조하기 위해서 사용됩니다. ex.저는 Gitsunmin입니다.
- Quotation Tags:
<blockquote>는 긴 인용을 표시할 때 사용합니다. 보통 다른 사람의 말이나 문서를 인용할 때 사용하며, 기본적으로 들여쓰기가 적용됩니다. ex.gitsunmin이 말했다.
저는 Gitsunmin입니다.
라고... 참고로 짧은 이용문인 경우에는<q>를 사용하며 작은 따옴표를 붙여서 표시합니다. ex.gitsunmin이 말했다.
저는 Gitsunmin입니다.
라고...
이 외에도 다양한 Tag를 사용하여 글자의 의미를 더 풍부하고, 간편하게 만들 수 있는 방법이 있습니다.
html로 문자의 의미를 부여했다면, 그 의미에 부함하는 스타일 즉, Typography는 css로 구현을 하면 됩니다.
- Font-family: 서체(Typeface)의 이름을 지정하며, css에서 기본적으로 제공되는 serif, sans-serif와 같은 값들은 따옴표없이 작성할 수 있으며, custom으로 등록한 서체인 경우에는 따옴표를 이용하여 서체의 이름을 지정합니다. 또한 폰트가 사용자에게 설치되어 있지 않은 경우를 대비하여 font-family는 인자를 여러 개 받을 수 있습니다. 가장 왼쪽에 있는 내용부터 먼저 적용되며, 폰트가 없을 경우에는 바로 오른쪽의 서체가 적용되도록 설계 되어있습니다. ex. font-familty: 'Roboto', Arial, sans-serif;
- Font-Size: 이 속성은 글자의 크기를 지정하는 속성이며, px나 pt등 절대적인 값을 지정할 수 있는 단위와 em나 rem등 relative 값을 지정할 수 있습니다. ex. font-size: 1.5em;
- Font-Weight: 이 속성은 글자의 두께를 지정하는 속성이며, 글자의 두께를 100, 200, ..., 900 과 같이 100 배수의 숫자로 굵기의 정도를 1단계 ~ 9단계로 지정할 수도 있으며, normal, bold, lighter, bolder 등과 같이 css에서 제공하는 기본 값을 지정할 수도 있습니다. ex. font-weight: bold;
- Font-Style: 이 속성은 글자의 스타일을 지정하는 속성이며, 기울어진 글자완 같은 설정을 위해서 사용될 수 있습니다. 일반적으로 지정할 수 있는 값은 normal, italic, oblique 등이 있습니다.
- Line-Height: line-height는 행 간의 수직 간격을 설정하는 속성입니다. 이 속성은 텍스트가 여러 줄로 나눠졌을 때 각 줄 사이의 간격을 정의합니다. line-height는 단위가 옵션입니다. 즉, 단위 없이 숫자만 지정할 수도 있습니다. 단위 없이 숫자를 지정하면, 해당 숫자가 기본 폰트 크기에 대한 비율로 작용합니다. (1.4 ~ 1.6배의 line-height는 대부분의 텍스트에서 가독성이 좋습니다.) ex. line-height: 1.5;
- letter-spacing: 글자와 글자 사이의 수평 간격을 설정하는 속성입니다. 이 속성은 텍스트의 가독성과 디자인을 조정하는 데 사용됩니다.
- 0em (기본값): 대부분의 폰트에서는 기본 간격이 잘 맞습니다. 특별히 조정할 필요가 없으면 기본값을 사용하세요.
- 0.02em ~ 0.05em: 이 정도 간격은 가독성을 유지하면서 글자들이 너무 붙어 보이지 않게 합니다.
- 0.1em 이상: 큰 제목이나 디자인을 강조하고 싶을 때 사용됩니다. 헤드라인에서 특히 효과적입니다.