Font Family
HTML 요소의 글꼴은 font-family 속성을 사용해 변경할 수 있다.
h1 {
font-family: Arial;
}
위 예제는 모든 <h1> 요소에 Arial 글꼴을 적용한다.
여러 단어로 이루어진 글꼴 이름
여러 단어로 구성된 글꼴 이름(ex: Times New Roman)은 작은따옴표(' ') 또는 큰따옴표(" ")로 묶어야 한다.
h1 {
font-family: 'Times New Roman';
}
웹 안전 글꼴 (Web Safe Fonts)
웹 브라우저와 운영체제에 공통적으로 설치되어 있는 글꼴을 웹 안전 글꼴이라고 한다.
→ 예: Arial, Georgia, Times New Roman 등
→ 대부분의 환경에서 일관된 표시가 가능
폰트 스택(Fallback Fonts)
원하는 글꼴이 없을 경우를 대비해, 대체 글꼴을 나열한 목록을 폰트 스택(font stack) 이라고 부른다.
h1 {
font-family: Caslon, Georgia, 'Times New Roman';
}
- Caslon이 있으면 사용
- 없으면 Georgia
- 둘 다 없으면 Times New Roman
Serif vs Sans-Serif
- Serif 글꼴: 글자 끝에 장식이 있음
- 예: Times New Roman, Georgia, Caslon
- Sans-Serif 글꼴: 장식 없이 깔끔함
- 예: Arial, Helvetica, Verdana
마지막 최종 대체용 글꼴로 serif 또는 sans-serif 를 지정할 수 있다.
h1 {
font-family: Caslon, Georgia, 'Times New Roman', serif;
}
위와 같이 작성하면, 앞의 글꼴들이 모두 없는 경우 브라우저는 기본 serif 글꼴을 적용한다.
Font Weight
font-weight 속성은 텍스트의 굵기(볼드 여부) 를 조절하는 데 사용된다.
이 속성은 키워드 값 또는 숫자 값으로 설정할 수 있다.
font-weight의 키워드 값(Keyword Values)는 다음과 같다 :
| 값 | 의미 |
| normal | 기본 굵기 (기본값) |
| bold | 굵은 글씨 |
| lighter | 부모 요소보다 더 얇게 |
| bolder | 부모 요소보다 더 굵게 |
font-weight의 숫자 값(Numerical Values)는 다음과 같다 :
- 1(가장 얇음) ~ 1000(가장 굵음) 사이 숫자 사용 가능
- 일반적으로는 100 단위로 사용 (100, 200, ..., 900)
- 400은 normal, 700은 bold 와 같음
.left-section {
font-weight: 700; /* 굵은 글씨 */
}
.right-section {
font-weight: bold; /* 동일하게 굵은 글씨 */
}
위 코드의 두 클래스는 모두 굵은 텍스트를 출력한다.
font-weight을 사용할 때 주의할 점은 다음과 같다 :
- 모든 글꼴이 숫자 굵기를 모두 지원하지는 않는다.
- 일부 글꼴은 400, 700 등 일부 단계만 제공한다.
- 따라서 사용하는 글꼴(Font) 에 따라 사용 가능한 font-weight 값을 확인하는 것이 좋다
시각적으로 안정된 타이포그래피를 위해,
중요한 텍스트는 700, 보통은 400, 보조 텍스트는 300 이하로 설정하는 것이 일반적이다.
Font Style
font-style 속성은 텍스트를 이탤릭체(기울임꼴) 로 표시할 때 사용한다.
아래 코드는 <h3> 요소의 텍스트를 기울임꼴로 표시한다 :
h3 {
font-style: italic;
}
Text Transformation
text-transform 속성은 텍스트를 모두 대문자 또는 소문자로 표시하거나, 단어마다 첫 글자만 대문자로 바꿔주는 기능을 한다.
h1 {
text-transform: uppercase;
}
- 위 코드는 <h1> 요소의 텍스트를 모두 대문자로 표시한다.
- HTML 코드에 소문자로 작성해도 브라우저에서는 대문자처럼 렌더링된다.
text-transform의 주요 속성 값은 다음과 같다 :
| 값 | 설명 |
| uppercase | 모든 글자를 대문자로 표시 |
| lowercase | 모든 글자를 소문자로 표시 |
| capitalize | 각 단어의 첫 글자만 대문자로 표시 |
| none | 기본 상태로 표시 (변경 없음) |
이때, HTML에서 직접 대소문자를 입력해도 되는데 왜 CSS로 지정하는지 의문이 들 수 있다.
그 이유는 아래와 같다 :
- HTML은 내용, CSS는 표현 담당 → 역할 분리 원칙
- HTML에 모두 대문자로 작성하면 가독성이 떨어지고 유지보수가 어렵다
- CSS에서 처리하면 콘텐츠는 깔끔하게 유지하면서 시각적 효과는 자유롭게 조절 가능하다
Text Layout
텍스트 레이아웃을 조정하는 CSS 속성은 다음과 같다 :
1. letter-spacing
문자 간 간격을 조절한다. (글자와 글자 사이의 수평 거리)
p {
letter-spacing: 2px;
}
- 각 문자 사이에 2픽셀 간격 부여
- 가독성 향상이나 스타일링 목적에 유용
2. word-spacing
단어 간 간격을 조절한다.
h1 {
word-spacing: 0.3em;
}
- 단어 사이의 간격을 0.3em로 설정
- 굵은 글씨나 큰 글씨의 가독성을 높일 때 사용
3. line-height
줄 간격(행간)을 조절한다.
p {
line-height: 1.4;
}
- 줄과 줄 사이 간격을 1.4배로 설정
- 단위 없는 수치로 지정하면 폰트 크기에 비례해 반응형 적용됨
4. text-align
텍스트의 정렬 위치를 설정한다. (값 : left, right, center, justify)
h1 {
text-align: right;
}
- 텍스트를 오른쪽 정렬
- 기본값은 왼쪽 정렬(left)
Web Fonts
기존에는 웹 안전 폰트(web safe fonts) 를 사용했지만, 웹 폰트를 통해 훨씬 다양하고 개성 있는 글꼴을 사용할 수 있다.
웹 폰트를 사용하는 방법은 아래와 같다 :
1. 무료 폰트 서비스 활용
- 대표 서비스: Google Fonts, Adobe Fonts
- HTML에 <link> 태그로 폰트를 연결하여 사용
2. 유료 폰트 직접 호스팅
- 예: fonts.com에서 다운로드한 폰트를 직접 서버에 저장
- CSS에서 @font-face 규칙을 사용하여 연결
Web Fonts Using <link>
Google Fonts는 다양한 웹폰트를 손쉽게 검색하고, 웹사이트에 연동할 수 있게 도와주는 무료 서비스이다.
사용 방법은 아래와 같다 :
1. 폰트 선택
- 원하는 스타일에 맞는 폰트를 검색 및 선택
- 해당 폰트의 다양한 스타일(굵기, 기울임 등) 확인 가능
2. 스타일 선택 후 링크 복사
- 선택한 스타일을 확인하면 <link> 태그가 자동 생성
3. CSS에서 사용
- 일반 폰트처럼 font-family로 지정
p {
font-family: 'Roboto', sans-serif;
}
유의해야 할 사항은 다음과 같다 :
- font-family의 마지막에 대체 폰트(sans-serif 등) 를 추가해주는 것이 좋다.
- <link>는 반드시 HTML의 <head> 태그 내부에 넣어야 적용된다.
Web Fonts Using @font-face
웹폰트를 외부 링크(<link>) 없이 직접 적용하고 싶다면 @font-face를 사용하면 된다.
순서는 다음과 같다 :
1. 폰트 파일 다운로드
- .ttf, .woff, .woff2 등의 형식으로 폰트를 다운로드
- 예: Google Fonts에서 ‘Roboto’ 다운로드 가능
2. 작업 디렉토리에 저장
- 예: fonts/Roboto.woff2, fonts/Roboto.woff, fonts/Roboto.ttf
3. CSS에 @font-face 정의
@font-face {
font-family: 'MyParagraphFont';
src: url('fonts/Roboto.woff2') format('woff2'),
url('fonts/Roboto.woff') format('woff'),
url('fonts/Roboto.ttf') format('truetype');
}
- font-family: 사용할 폰트 이름을 직접 지정 (자유롭게 작명 가능)
- src: 상대 경로와 형식(format) 명시
- 위에서부터 브라우저가 지원하는 형식을 찾아 적용함
4. 폰트 사용
p {
font-family: 'MyParagraphFont', sans-serif;
}
- 'MyParagraphFont': 위에서 지정한 이름으로 호출
- sans-serif: 대체 폰트로 설정 (폰트 적용 실패 시 대비)
유의할 점은 다음과 같다 :
- 가능한 경우 .woff2, .woff, .ttf 세 가지 형식을 모두 제공해 브라우저 호환성 확보
- @font-face는 보통 CSS 파일 상단에 정의함
참고