타이포그래피란?
타이포그래피는 텍스트의 배열과 스타일링을 의미하며, 웹 디자인에서 중요한 역할을 합니다. 좋은 타이포그래피는 가독성을 높이고, 사용자 경험을 향상시키며, 전체적인 디자인의 일관성을 유지하는 데 도움이 됩니다.
웹 폰트 사용
웹 폰트를 사용하면 웹 페이지에서 다양한 글꼴을 사용할 수 있습니다. Google Fonts와 같은 서비스를 통해 쉽게 웹 폰트를 추가할 수 있습니다.
Google Fonts 사용 예제
HTML:
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
</head>
CSS:
body {
font-family: 'Roboto', sans-serif;
}타이포그래피 기본 속성
글꼴 패밀리 (font-family)
글꼴 패밀리를 설정하여 텍스트의 스타일을 지정합니다.
예제:
body {
font-family: 'Arial', sans-serif;
}글꼴 크기 (font-size)
글꼴 크기를 설정하여 텍스트의 크기를 지정합니다.
예제:
h1 {
font-size: 2.5rem;
}
p {
font-size: 1rem;
}글꼴 두께 (font-weight)
글꼴의 두께를 설정하여 텍스트의 강조 정도를 조절합니다.
예제:
h1 {
font-weight: 700;
}
p {
font-weight: 400;
}글꼴 스타일 (font-style)
글꼴의 스타일을 설정하여 텍스트를 기울임꼴로 만들 수 있습니다.
예제:
em {
font-style: italic;
}글꼴 변형 (font-variant)
글꼴의 변형을 설정하여 텍스트의 스타일을 조절합니다.
예제:
small-caps {
font-variant: small-caps;
}텍스트 정렬
텍스트 정렬은 텍스트를 수평 방향으로 정렬하는 방법을 정의합니다.
수평 정렬 (text-align)
텍스트를 수평 방향으로 정렬합니다.
예제:
h1 {
text-align: center;
}
p {
text-align: justify;
}수직 정렬 (vertical-align)
인라인 요소나 테이블 셀 안의 내용을 수직 방향으로 정렬합니다.
예제:
td {
vertical-align: middle;
}텍스트 장식 및 변형
텍스트 장식과 변형을 통해 텍스트의 스타일을 추가로 조절할 수 있습니다.
텍스트 장식 (text-decoration)
텍스트에 밑줄, 윗줄, 취소선 등을 추가합니다.
예제:
a {
text-decoration: underline;
}
del {
text-decoration: line-through;
}텍스트 변형 (text-transform)
텍스트를 대문자, 소문자로 변형하거나 각 단어의 첫 글자를 대문자로 만듭니다.
예제:
h1 {
text-transform: uppercase;
}
p {
text-transform: capitalize;
}줄 간격과 글자 간격
텍스트의 줄 간격과 글자 간격을 조절하여 가독성을 높일 수 있습니다.
줄 간격 (line-height)
텍스트 줄 사이의 간격을 설정합니다.
예제:
p {
line-height: 1.5;
}글자 간격 (letter-spacing)
글자 사이의 간격을 설정합니다.
예제:
h1 {
letter-spacing: 2px;
}반응형 타이포그래피
반응형 타이포그래피는 다양한 화면 크기에 맞춰 텍스트 크기를 조절하는 것을 의미합니다.
뷰포트 상대 단위 (vw, vh)
뷰포트 너비와 높이에 상대적인 단위를 사용하여 텍스트 크기를 설정합니다.
예제:
h1 {
font-size: 5vw;
}미디어 쿼리를 사용한 타이포그래피
미디어 쿼리를 사용하여 화면 크기에 따라 텍스트 크기를 조절할 수 있습니다.
예제:
h1 {
font-size: 2rem;
}
@media (max-width: 768px) {
h1 {
font-size: 1.5rem;
}
}
@media (max-width: 480px) {
h1 {
font-size: 1.2rem;
}
}결론
타이포그래피 디자인은 웹 페이지의 텍스트를 가독성 높게, 시각적으로 매력적으로 만드는 중요한 요소입니다. 웹 폰트 사용, 글꼴 속성 설정, 텍스트 정렬 및 장식, 줄 간격 및 글자 간격 조절을 통해 효과적인 타이포그래피 디자인을 구현할 수 있습니다. 이번 글에서는 타이포그래피 디자인의 기본 개념과 다양한 속성에 대해 배웠습니다.
다음 글에서는 애니메이션과 트랜지션에 대해 알아보겠습니다.
다음 글에서 만나요!
'웹 디자인' 카테고리의 다른 글
| [웹 디자인] 21일차: 모던 레이아웃 기법 (0) | 2024.08.21 |
|---|---|
| [웹 디자인] 20일차: 애니메이션과 트랜지션 (0) | 2024.08.20 |
| [웹 디자인] 18일차: 그리드 레이아웃을 이용한 반응형 디자인 (0) | 2024.08.18 |
| [웹 디자인] 17일차: 플렉스박스를 이용한 반응형 레이아웃 (0) | 2024.08.17 |
| [웹 디자인] 16일차: 미디어 쿼리 사용법 (0) | 2024.08.16 |