개요
- 폰트는 5가지로 분류(명조, 고딕, 헤드라인, 손글씨, 일정간격)
- MS, Google, Apple, 네이버에서 배포한 폰트가 주류
- Google, 네이버는 무료 배포
폰트의 계보
| 계열명 | 국문 | 설명 |
|---|---|---|
| serif | 명조 | 아름답게 보일 목적으로 획의 끝 부분에 장식을 더함 |
| sans-serif | 고딕 | sans=없다(프랑스). 세리프가 없는 글자 |
| display | 헤드라인 | 굵고 강렬한 문자 |
| handwriting | 손글씨 | 자유로운 글자, 타이포그라피 |
| monospace | 동일간격 | 모든 문자의 간격을 일정하게 유지(한글: 2글자 취급), ㅇㅇ체 |
* serif, sans-serif, monospace는 폰트명이 아니라, 폰트 계열명을 나타냅니다.
운영체제나 브라우저는 기본(default)문자열을 설정할 수 있습니다. 따라서, 여러개의 보조 폰트를 설정할 때는 기본 폰트가 가장 마지막에 등장해야 합니다.
serif
명조(sarif)의 획 끝 부분은 휘어져 있지만, 고딕(sans-sarif)는 그렇지 않습니다.
monospace
monospace는 모든 글자 및 띄어쓰기의 가로넓이가 동일하지만, 일반 글씨는 그렇지 않습니다. 영문의 경우, A와 i의 세로 간격이 다릅니다. 한글의 경우 'ㅇㅇ체'라고 불리는
폰트는 해당 폰트의 가로넓이를 일정하게 유지하는 성격으로 작성된 경우가 많습니다.
monospace는 글자와 띄어쓰기의 크기가 일정하기 때문에, 특히 코딩영역에서는 아주 중요하게 받아들여집니다. 최근엔 영문과 국문이 혼용이 자연스러운 D2Coding으로 통일되는 것 같습니다.
폰트의 종류
국내
- 명조 : 나눔명조, 본명조, 바탕, 굴림, 돋움
- 고딕 : 맑은고딕, 나눔고딕
- 헤드라인 : 휴먼둥근헤드라인
- 손글씨 : 궁서, 휴면편지체, 나눔손글씨 펜 ...
- 일정 간격 : D2Coding, 바탕체, 궁서체, 굴림체
국내에서는 Naver에서 발간한 나눔체로 보편화되었 있습니다. 무료이며, 종류도 다양(배포중인 것만 109종)합니다. 메이커는 '산돌(Sandoll)'로 나오고 있습니다.
국외
- serif : Times new Roman, Garamond, Georgia
- sans-serif : Arial, Helvetica, Verdana, Tahoma, Segoe UI, AppleSDGothicNeoR
- Display : Impact, Segoe UI Black
- handwrite : Brush Script MT, Monotype Corsiva, Lucida Handwriting ...
- monospace : Consolas
수학공식
수학공식의 서체는 'Times new Roman' 또는 Symbola 의 이텔릭체를 이용합니다. lateX에서 MJXZERO, MJXTEX와 같은 서체를 사용하기도 합니다.
$$ x = \frac{-b \pm \sqrt{b^2-4ac}}{2a} $$한자
일부 폰트는 한자를 일부만 지원 할 수 있습니다.
| 적용 폰트 | 보여짐 |
|---|---|
| NanumBarunpen | 原生生物 |
| 나눔고딕 | 原生生物 |
설정 예시
- 구글 : Roboto, 'Segoe UI',Arial,'Malgun Gothic',Gulim,sans-serif
구글(유튜브): Roboto, Arial, sans-serif -
네이버 : -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", helvetica, "Apple SD Gothic Neo",
sans-serif
블로그: Helvetica-Light,"나눔고딕",nanumgothic,AppleSDGothicNeo,"malgun gothic","맑은 고딕",sans-serif -
다음 : AppleSDGothicNeo-Regular, Malgun Gothic, \b9d1\c740 \ace0\b515, dotum, \b3cb\c6c0, sans-serif
티스토리 : se-nanumgothic,\\B098\B214\ACE0\B515,nanumgothic,sans-serif,Meiryo - MS(bing) : "Segoe UI",Segoe,Tahoma,Arial,Verdana,sans-serif
대부분 '애플폰트' → '네이버/구글 폰트' → 'MS폰트' → '시스템폰트' 순으로 배치된 것을 볼 수 있습니다. 아무래도 가장 보편적인 MS폰트를 가장 앞에 배치하면, 모두 MS폰트로 걸러지기 때문에, 최초 의도한 폰트이면서 덜 유명한 폰트부터 배치하는 것이 일반적입니다.
폰트 제공
파일형식
| TrueType | OpenType | |
| 개발사 | Apple, Microsoft | Microsoft, Adobe Systems |
| 형식 | 글리프 데이터를 담은 헤더와 본문 데이터로 구성 | TrueType의 형식을 확장하여 PostScript 글꼴 데이터도 포함 |
| 언어 | 개별언어 지원 | 다국어 지원 |
| 파일크기 | 작음 | 큼 |
| 기능 | 기본기능 | 레이아웃과 타이포그래피 기능을 포함하여 글꼴의 더 많은 디자인 옵션을 제공 |
| 호환성 | 대부분 호환 Windows, macOS, Linux 및 Android |
레거시와 호환문제가 있을 수 있음 |
| 라이센스 | - | 무료 ~ 상용글꼴 |
윈도우 제공
윈도우 폰트의 특징이라면
- 대부분의 컴퓨터에서 딱히 추가 작업 없이 동작
- 무료 아님
- 호환성은 좋음 / 기능 제약이 많음 : 옛날 컴퓨터에선 잘 돌아감
- 엄청 유명한데 한글 지원 안되는 폰트가 많다.
- Arial(한글 x)
- 맑은 고딕,\b9d1\c740 \ace0\b515('Malgun Gothic', '\b9d1\c740 \ace0\b515')
- 돋움('\b3cb\c6c0')
-
'Segoe UI'(한글X)
https://learn.microsoft.com/ko-kr/typography/font-list/segoe-ui
네이버 제공
- 자체개발해서 무료 배포
- https://hangeul.naver.com/font 에서 배포(109종)
- '구글폰트'에서도 배포(일부)
- 기본서체 네이버 블로그 기본 서체
- 나눔고딕(Nanum Gothic) - 구글 폰트 다운로드
-
나눔명조(se-nanummyeongjo,
\\B098\B214\BA85\C870(나눔명조), nanummyeongjo)
또는 (Nanum Myeongjo) - 구글 폰트 다운로드 - 나눔바른고딕(se-nanumbarungothic, \\B098\B214\BC14\B978\ACE0\B515(나눔바른고딕), nanumbarungothic)
티스토리
- (자체개발 하진 않았지만) 잘 가져다 씀
- 네이버와 구글에 빨대를 잘 꼽아서 잘 쓰고 있다.(그러라고 만든거라 딱히 뭐라 할 수도..) - 서버에 따로 다운 안받아도 됨.
- 본고딕R('Noto Sans Demilight')
- 본고딕L('Noto Sans Light')
- 나눔고딕('Nanum Gothic')
- 본명조('Noto Serif KR')
궁서(GungSeo, 궁서) 사실상 윈도우 기본서체에 의존
- 온라인 폰트를 지원한다. (사이트 부담이 현저히 내려간다.)
- 한글 폰트는 31개 지원하는데, 다운 받을 수도 있다.(분류가 애매한 것들도 보인다.)
https://fonts.google.com/?subset=korean¬o.script=Kore (검색창에 '구글폰트') - Noto 시리즈: 웹에 존재하는 표기할 수 없음(□, 두부)를 없애겠다. No-tofu(두부 그만)에서 유래.(
작명센스가 구글 답다)
나눔고딕, 나눔명조, 본고딕, 본명조, 나눔고딕코딩 등 유명한 폰트 지원
Web Safe
아래 글꼴은 비교적 쉽게 가져다 쓸 수 있는 글꼴을 소개하고 있다.
- Arial
- verdana
- Tahoma
- Trebuchet MS
- Times New Roman
- Georgia
- courier New
- Brush Script MT
폰트 적용
css강좌의 폰트문법 참조