| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | ||||
| 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 11 | 12 | 13 | 14 | 15 | 16 | 17 |
| 18 | 19 | 20 | 21 | 22 | 23 | 24 |
| 25 | 26 | 27 | 28 | 29 | 30 | 31 |
- ENFJ포스팅
- REACT강의
- 패스트캠퍼스
- 국비지원
- react
- HTML
- 자바스크립트
- 코딩
- 바이트디그리
- JavaScript
- object-oriented programming
- CSS
- 퍼블리싱
- XHTML
- Dispatch
- 내일배움카드
- class
- 객체지향
- 반응형
- scss
- 이메일 코딩
- 웹디자인
- 반응형 이메일
- K디지털기초역량훈련
- prototype
- React & Redux로 시작하는 웹 프로그래밍
- coding
- redux
- ENFJ
- Today
- Total
취미부자의 취미 버리기
[폰트] 폰트파일 뭘 다운받아야 할지 고민될 때! 본문
뭘 다운받아야하지..?
글꼴 다운 받을 때 마다 항상 헷갈리던 거ㅠㅠ
단계별로 선택해 나가자!
폰트를 다운받을 때 파일은 두 가지 타입과 세 가지 확장자에 따라 파일이 나뉜다.
(예👇 Suit 폰트)

폰트 타입을 선택할 때,
일반적으로는 Variable 타입을 선택하는데,
그 이유는 다운 받아야 할 파일이 적어서 편리하기 때문이다.
하지만 호환성에 있어서는 Static 타입이 더 좋다.
Variable 타입은 최신 환경에 권장된다.
각 타입에 대해 좀 더 설명해 보자면,
설명시작
Static 파일 많음
Variable 파일 1개
/
Static Fonts (고정 글꼴)
'가변성'이 필요 없는 안정성, 호환성, 단순함이 중요한 모든 디자인과 개발 상황
파일이 많음
볼드/이탈릭 등 스타일마다 파일이 있음
/
Variable Fonts (가변 글꼴)
접근성, 성능 최적화, 동적인 웹/앱, 세밀한 조정
파일 딱 1개 (모든 스타일이 하나의 파일에 있음)
웹 로딩 속도가 빠름
미세하고 자유자재로 스타일 변경 가능
폰트 타입을 선택한 이후,
확장자를 선택할 때,
폰트의 용도에 따라 OTF, TTF, WOFF2 중 선택해서 다운받으면 된다.
그래픽 디자인 작업은 OTF, 문서 및 시스템 폰트는 TTF, 웹사이트 작업은 WOFF2의 용도로 적합하다.
설명시작
그래픽 디자인 작업 OTF
문서 및 시스템 폰트는 TTF
웹사이트 작업 WOFF2
/
OTF (OpenType Font)
Adobe + Microsoft가 개발
고해상도 출력물, 디자인 작업에 유리
(정교하게 곡선을 그리는 방식)
/
TTF (TrueType Font)
Apple + Microsoft가 개발
화면 출력 속도가 빠름
문서 작업, 시스템 폰트에 사용
/
WOFF2 (Web Open Font Format 2.0)
웹 환경에 최적화된 압축 형식
TTF/OFT의 용량을 줄인 버전
웹사이트 폰트로 사용
이렇게 나의 작업 환경과 용도에 따라 선택해서 다운받으면 된다.
'Programming > 🤓 스터디' 카테고리의 다른 글
| [코딩일기] React function return이 항상 1개 태그만 가능한 이유 (0) | 2023.07.27 |
|---|---|
| [코딩일기] React 시작 전, 알아두면 좋은 JS 짜잘한 지식 (0) | 2023.07.23 |
| [Javascript] export vs export defaul (0) | 2023.07.06 |
| [코딩일기] Redux combineReducers(), createStore() 흐름 이해 (0) | 2023.07.03 |
| [코딩일기] 스프레드 연산자 (0) | 2023.07.02 |