위키백과:타이포그래피
Wikipedia: | 이 에세이는 개발 중이다. 그것은 한 명 이상의 위키백과 기고자들의 조언이나 의견을 담고 있다. 에세이는 광범위한 규범이나 소수의 관점을 대표할 수 있다.특히 이 페이지는 아직 작성 중이므로 이러한 견해를 신중하게 고려하십시오. |
위키피디아에서 글꼴의 사용과 같은 타이포그래피는 종종 뜨거운 논쟁의 원천이 될 수 있다.위키피디아가 기본 피부에 명시적인 글꼴을 설정한 적이 없기 때문이다.이것은 모노북에게는 사실이었고, 벡터에게는 여전히 유효하다.이러한 스킨의 기본 글꼴은 간단히 다음과 같이 정의된다.font-family: sans-serif. 마찬가지로 글꼴의 크기 역시 논쟁의 대상이 된다.벡터는 의 정의를 사용한다.font-size: 0.875em;사용자의 브라우저에 설정된 기본 글꼴의 87.5%를 번역한다.Windows에서 브라우저의 기본 글꼴은 일반적으로 산세리프의 경우 16px의 Arial, 세리프의 경우 16px의 Times New Roman, 모노스페이스의 경우 13px의 Courier New로 정의된다. 0.875 × 16은 정확히 14px이다.그러나 여기에 표시된 모든 글꼴은 브라우저의 기본값인 16px이다.
아래는 웹 타이포그래피에 관한 몇 가지 개인적인 글과 위키피디아에 대한 그것의 잠재적인 사용이다.기본적으로 설치되는 글꼴이 안정적인 설치 기반을 제공하기 때문에 이를 중심으로 한다.윈도에도 집중한다.다른 플랫폼과 관련된 정보는 매우 환영한다.
문서에서 다른 글꼴을 사용하는 방법
기사 텍스트의 글꼴을 변경하려는 경우 사용할 태그는 다음과 같다.
캡 높이가 동일한 글꼴은 항상 x-높이에서 일치하지 않으므로 스케일링 없이 인라인으로 혼합하기 어렵다는 점에 유의하십시오.기본 폰트로 Arial을 기반으로 코믹 산스 MS, 조지아, 트레부체트 MS, 베르다나를 인라인으로 사용해도 안전하다.Times New Roman은 스케일링 없이 인라인을 사용하기에 안전하지 않다.Courier New는 높이가 낮지만 읽을 수 있고, 사실상의 단일 우주 글꼴이다. (Arial Black 및 Impact는 헤더 글꼴이기 때문에 나열되지 않는다.)
- 다음은 다양한 글꼴에 사용할 코드의 예입니다.
- 안전한 인라인 사용(자세한 내용은 위 참조):
- <스팬 스타일="스팬 패밀리:Arial;"Arial[/span]; 기본 글꼴,
- <span style="font-family: 'Comic Sans MS';"Comic Sans MS</span,
- <스팬 스타일="퐁가족: 조지아;"조지아,
- <span style="font-family: 'Trebucet MS';"Trebucet MS</span"
- *<스팬 스타일="퐁가족: 베르다나;"베르다나"
- 인라인 사용이 안전하지 않음(자세한 내용은 위 참조):
- <span style="font-family: 'Times New Roman';>타임즈 뉴로마어(Times New Roman)
- <span style="font-family: 'Courier New';"Courier New</span>
- 아래는 실제로 사용할 때 위의 글꼴 코드가 어떻게 보이는가이다.
- 안전한 인라인 사용(자세한 내용은 위 참조):
- 기본 글꼴인 Arial
- 코믹 산스 MS
- 조지아
- 트레부체트 MS
- 베르다나
- 인라인 사용이 안전하지 않음(자세한 내용은 위 참조):
- 타임스 뉴로마어
- 쿠리어 뉴
레거시 글꼴 이름
맥스에서는 헬베티카, 타임즈, 쿠리어 등이 어도비의 포스트스크립트와 PDF 기술에서 사용하는 3가지 핵심 글꼴이다.세 가지 글꼴 모두 1980년대로 거슬러 올라가는 모든 Mac에 포함되었으며, 거의 모든 웹 브라우저에서 기본 "산세리프", "세리프" 및 "우주" 글꼴이다.
Windows의 초기 버전에서 이러한 이름은 핵심 PostScript 글꼴의 픽셀화된 버전을 가리켰다.기술이 발전하면서 맥 폰트를 채택하기보다는 헬베티카를 에이리얼로, 타임즈를 타임즈 뉴로맨으로, 쿠리어 뉴로 대체했다.앞서 언급한 6개의 글꼴은 모두 2000년대 이후 맥스에 포함되었다.
| 글꼴 | 샘플 | 변형 | 윈도 대용품 |
|---|---|---|---|
| 헬베티카 | 퀵 브라운 여우가 게으른 개를 뛰어넘다. | 일반, 굵게, 기울임꼴, 굵게 기울임꼴 | 애리얼 |
| 시대 | 퀵 브라운 여우가 게으른 개를 뛰어넘다. | 일반, 굵게, 기울임꼴, 굵게 기울임꼴 | 타임스 뉴로마어 |
| 배달원 | 퀵 브라운 여우가 게으른 개를 뛰어넘다. | 일반, 굵게, 기울임꼴, 굵게 기울임꼴 | 쿠리어 뉴 |
사용 가능한 글꼴
웹의 핵심 글꼴
| 글꼴 | 샘플 | 변형 |
|---|---|---|
| 애리얼 | 퀵 브라운 여우가 게으른 개를 뛰어넘다. | 일반, 굵게, 기울임꼴, 굵게 기울임꼴 |
| 타임스 뉴로마어 | 퀵 브라운 여우가 게으른 개를 뛰어넘다. | 일반, 굵게, 기울임꼴, 굵게 기울임꼴 |
| 쿠리어 뉴 | 퀵 브라운 여우가 게으른 개를 뛰어넘다. | 일반, 굵게, 기울임꼴, 굵게 기울임꼴 |
| 코믹 산스 MS | 퀵 브라운 여우가 게으른 개를 뛰어넘다. | 일반, 굵게, 기울임꼴, 굵게 기울임꼴 |
| 조지아 | 퀵 브라운 여우가 게으른 개를 뛰어넘다. | 일반, 굵게, 기울임꼴, 굵게 기울임꼴 |
| 트레부체트 MS | 퀵 브라운 여우가 게으른 개를 뛰어넘다. | 일반, 굵게, 기울임꼴, 굵게 기울임꼴 |
| 베르다나 | 퀵 브라운 여우가 게으른 개를 뛰어넘다. | 일반, 굵게, 기울임꼴, 굵게 기울임꼴 |
가용성
웹용 Core 글꼴은 Windows[1](Andalé Mono 제외)에 99%, Mac OS X 플랫폼에 92~98%의 설치 기반을 가지고 있으며,[2] 현재 표준 설치에 포함되어 있다.이들 글꼴을 별도로 설치해야 하지만 여전히 Linux 설비 중 65%의 설치 기반을 누리고 있다.[3]
원래 코어 웹 글꼴의 일부였던 안달레 모노는 Windows와 함께 설치되지 않아(루치다 콘솔로 대체됨) Windows 설치의 4%만이 이 글꼴을 가지고 있으며, Mac OS X에서는 92%가 설치되었으며, 버전 6까지는 Internet Explorer와 함께 배송되어 Windows 98만 설치되었다.여전히 온라인에서 사용할 수 있기 때문에, 그것은 Linux에 70%의 설치 기반을 가지고 있다.루치다 콘솔과 비슷하고 미터법 호환이 가능하기 때문에 항상 폰트 스택에 루치다 콘솔과 안달레 모노를 결합하는 것이 좋다.
크기
- 참고: 이 섹션은 13px에 대해 유효하지만 타이포그래피 새로 고침으로 인해 대부분의 글꼴은 14px에서 더 이상 일치하지 않는다.
캡 높이가 같은 글꼴은 x-높이에서 항상 일치하지 않아 스케일링 없이 인라인 혼합이 어렵다.기본 폰트로 Arial을 기반으로 코믹 산스 MS, 조지아, 트레부체트 MS, 베르다나를 인라인으로 사용해도 안전하다.Times New Roman은 스케일링 없이 인라인을 사용하기에 안전하지 않다.Courier New는 높이가 낮지만 읽을 수 있고, 사실상의 단일 우주 글꼴이다. (Arial Black 및 Impact는 헤더 글꼴이기 때문에 나열되지 않는다.)
헤더 글꼴
Arial Black과 Impact는 웹을 위한 핵심 글꼴 세트의 일부지만 큰 사이즈에서만 사용하도록 권장되는 매우 무거운 디자인이다.또한 웹의 나머지 핵심 글꼴과 달리 iOS 기기에는 설치되지 않는다.
| 글꼴 | 샘플 | 변형 |
|---|---|---|
| 에이리얼 블랙 | 퀵 브라운 여우가 게으른 개를 뛰어넘다. | 블랙 |
| 임팩트 | 퀵 브라운 여우가 게으른 개를 뛰어넘다. | 정규 |
일반 Windows 글꼴
| 글꼴 | 이후 | 샘플 | 변형 |
|---|---|---|---|
| 타호마 | 윈도 98 | 퀵 브라운 여우가 게으른 개를 뛰어넘다. | 일반, 굵게 |
| 루치다 산스 유니코드 | 윈도 98 | 퀵 브라운 여우가 게으른 개를 뛰어넘다. | 정규 |
| 루치다 콘솔 | 윈도 98 | 퀵 브라운 여우가 게으른 개를 뛰어넘다. | 정규 |
| 마이크로소프트 산세리프 | 윈도 2000 | 퀵 브라운 여우가 게으른 개를 뛰어넘다. | 정규 |
| 팔라티노 리노타이프 | 윈도 2000 | 퀵 브라운 여우가 게으른 개를 뛰어넘다. | 일반, 굵게, 기울임꼴, 굵게 기울임꼴 |
| 프랭클린 고딕 미디엄 | 윈도 XP | 퀵 브라운 여우가 게으른 개를 뛰어넘다. | 중간, 중간 기울임꼴 |
| 세고유이 | 윈도 비스타 | 퀵 브라운 여우가 게으른 개를 뛰어넘다. | 일반, 굵게, 기울임꼴, 굵게 기울임꼴 |
| 칼리브리 | 윈도 비스타 | 퀵 브라운 여우가 게으른 개를 뛰어넘다. | 일반, 굵게, 기울임꼴, 굵게 기울임꼴 |
| 캄브리아 | 윈도 비스타 | 퀵 브라운 여우가 게으른 개를 뛰어넘다. | 일반, 굵게, 기울임꼴, 굵게 기울임꼴 |
| 칸다라 | 윈도 비스타 | 퀵 브라운 여우가 게으른 개를 뛰어넘다. | 일반, 굵게, 기울임꼴, 굵게 기울임꼴 |
| 위너스 | 윈도 비스타 | 퀵 브라운 여우가 게으른 개를 뛰어넘다. | 일반, 굵게, 기울임꼴, 굵게 기울임꼴 |
| 콘스탄티아 | 윈도 비스타 | 퀵 브라운 여우가 게으른 개를 뛰어넘다. | 일반, 굵게, 기울임꼴, 굵게 기울임꼴 |
| 코벨 | 윈도 비스타 | 퀵 브라운 여우가 게으른 개를 뛰어넘다. | 일반, 굵게, 기울임꼴, 굵게 기울임꼴 |
Palatino Linotype과 Segoe UI를 제외한 모든 것들은 하나의 큰 단점이 있다: 그것들은 모두 대담한 또는/또는 이탤릭적인 변형이 없다는 것이다.윈도 비스타에 도입된 '새로운' 윈도 클리어타입 폰트 제품군은 글꼴 지표가 일치하지만, 이것들은 위에 열거된 핵심 웹 폰트와 일치하지 않기 때문에 섞일 때 크기를 조정해야 한다.
Mac에서는 Tahoma, Microsoft Sans Serif가 2007년부터 MacOS의 표준 설치에 포함되었다(Mac OS X Leopard).맥에는 팔라티노 리노타입이 없지만, 겉보기에는 같지만 지표가 약간 다른 팔라티노의 포스트스크립트 버전을 가지고 있다(즉, 글자 높이와 너비).다음 CSS 글꼴 스택을 사용하여 Mac과 Windows 사용자가 비슷한 경험을 할 수 있도록 하십시오.font-family: Palatino, "Palatino Linotype", serif;
이 목록에 있는 다른 글꼴(예: Cambria, Calibri)은 Microsoft Word for Mac과 함께 제공되지만 최신(2011년 이후) 버전에는 시스템 전체에 설치되지 않는다.어쨌든, 모든 Mac에 Word가 있는 것은 아니므로, 설치되는 글꼴을 기대할 수는 없다.Segoe UI는 합법적인 수단을 통해 Mac에서 사용할 수 없다.
공통 Linux 글꼴
| 글꼴 | 샘플 | 변형 |
|---|---|---|
| 님버스 산스 L | 퀵 브라운 여우가 게으른 개를 뛰어넘다. | 일반, 굵게, 기울임꼴, 굵게 기울임꼴 |
| 님버스 로마 9번 L | 퀵 브라운 여우가 게으른 개를 뛰어넘다. | 일반, 굵게, 기울임꼴, 굵게 기울임꼴 |
| 님버스 모노 L | 퀵 브라운 여우가 게으른 개를 뛰어넘다. | 일반, 굵게, 기울임꼴, 굵게 기울임꼴 |
| 센츄리 스쿨북 L | 퀵 브라운 여우가 게으른 개를 뛰어넘다. | 일반, 굵게, 기울임꼴, 굵게 기울임꼴 |
| URW 고딕 L | 퀵 브라운 여우가 게으른 개를 뛰어넘다. | 일반, 굵게, 기울임꼴, 굵게 기울임꼴 |
| URW 북맨 L | 퀵 브라운 여우가 게으른 개를 뛰어넘다. | 일반, 굵게, 기울임꼴, 굵게 기울임꼴 |
| URW 팔라디오 L | 퀵 브라운 여우가 게으른 개를 뛰어넘다. | 일반, 굵게, 기울임꼴, 굵게 기울임꼴 |
| 데자부 산스 | 퀵 브라운 여우가 게으른 개를 뛰어넘다. | 일반, 굵게, 기울임꼴, 굵게 기울임꼴 |
| 데자부 세리프 | 퀵 브라운 여우가 게으른 개를 뛰어넘다. | 일반, 굵게, 기울임꼴, 굵게 기울임꼴 |
| 데자부 산모노 | 퀵 브라운 여우가 게으른 개를 뛰어넘다. | 일반, 굵게, 기울임꼴, 굵게 기울임꼴 |
| 해방 산스 | 퀵 브라운 여우가 게으른 개를 뛰어넘다. | 일반, 굵게, 기울임꼴, 굵게 기울임꼴 |
| 해방세리프 | 퀵 브라운 여우가 게으른 개를 뛰어넘다. | 일반, 굵게, 기울임꼴, 굵게 기울임꼴 |
| 해방 모노 | 퀵 브라운 여우가 게으른 개를 뛰어넘다. | 일반, 굵게, 기울임꼴, 굵게 기울임꼴 |
| 프리샌스 | 퀵 브라운 여우가 게으른 개를 뛰어넘다. | 일반, 굵게, 기울임꼴, 굵게 기울임꼴 |
| 프리세리프 | 퀵 브라운 여우가 게으른 개를 뛰어넘다. | 일반, 굵게, 기울임꼴, 굵게 기울임꼴 |
| 프리모노 | 퀵 브라운 여우가 게으른 개를 뛰어넘다. | 일반, 굵게, 기울임꼴, 굵게 기울임꼴 |
모노스페이스 글꼴
코드를 표시할 때, 모노스페이스 글꼴은 코드를 읽을 수 있도록 하고 서식을 일관적으로 유지하는데 도움을 주지만 주의사항이 있다.아래는 일반적인 모노스페이스 글꼴이다.
| 글꼴 | 샘플 | 지원되는 플랫폼 |
|---|---|---|
| 배달원 | 퀵 브라운 여우가 게으른 개를 뛰어넘다. 퀵 브라운 여우가 게으른 개를 뛰어넘다. | 맥 (Windows에서 Courier New로 교체) |
| 쿠리어 뉴 | 퀵 브라운 여우가 게으른 개를 뛰어넘다. 퀵 브라운 여우가 게으른 개를 뛰어넘다. | Windows, Mac |
| 위너스 | 퀵 브라운 여우가 게으른 개를 뛰어넘다. 퀵 브라운 여우가 게으른 개를 뛰어넘다. | 창문들 |
| 루치다 콘솔 | 퀵 브라운 여우가 게으른 개를 뛰어넘다. 퀵 브라운 여우가 게으른 개를 뛰어넘다. | 창문들 |
| 안데일 모노 | 퀵 브라운 여우가 게으른 개를 뛰어넘다. 퀵 브라운 여우가 게으른 개를 뛰어넘다. | 맥 |
| 멘로 | 퀵 브라운 여우가 게으른 개를 뛰어넘다. 퀵 브라운 여우가 게으른 개를 뛰어넘다. | 맥 |
모든 모노스페이스 글꼴이 굵은 무게 변형을 가진 것은 아니며, 굵은 글꼴이 텍스트의 나머지 부분과 잘못 정렬되게 한다.안달레 모노와 루치다 콘솔은 이로 인해 심한 고통을 겪고 있다.이는 대담하고 이탤릭적인 강조표시를 사용할 때 유일하게 안전한 선택으로 Courier New와 Consoras를 남겨둔다.Courier New는 Windows와 Mac 모두에서 동일한 외관을 보장하는 유일한 모노 스페이스 폰트여서 가장 안전한 선택이다.
2020년부터는 파이어폭스 포 맥(Firefox for Mac)이 기본 '우주' 폰트로 멘로(Courier 대신)를 사용하기 시작했다.
단공간 "버그"
여기 위키백과에서 단일공간으로 된 텍스트를 볼 때, 때때로 너무 작게 표시되기도 한다.이것은 버그가 아니라 모노스페이스에 대한 웹 사이트의 기본 글꼴 크기와 브라우저의 기본 글꼴 크기를 조합한 결과물이다.기본적으로 (Windows) 브라우저의 기본 글꼴 크기는 serif 및 sans-serif의 경우 16px, monospace의 경우 13px로 설정되어 있다.
벡터는 기본 글꼴 크기가 0.875em이며, Firefox를 제외한 대부분의 브라우저는 이에 따라 모노스페이스 글꼴을 포함한 모든 글꼴을 올바르게 축소한다.그래서 모노스페이스는 0.875 × 13px = 11px (이것은 "너무 작다"고 인식된다)로 표시된다.Firefox에서 글꼴 크기를 보정하면 글꼴이 너무 커진다.해결책은 예를 들어 "우주 공간" 외에 다른 글꼴을 할당하는 것이다.font-family: monospace, monospace;또는font-family: monospace, Courier;브라우저는 두 번째 값을 무시한다.그러나 더 이상 구성된 "우주" 글꼴 크기를 사용하지 않고 대신 sans-serif와 동일한 크기를 사용할 것이다.
참고 항목
참조
- ^ "Windows font survey results". Code Style. Archived from the original on 2013-04-25.
- ^ "Mac font survey results". Code Style. Archived from the original on 2012-02-10.
- ^ "Linux font survey results". Code Style. Archived from the original on 2012-03-15.
외부 링크
- 가로 세로 값, 글꼴의 x 너비 - 에 사용할 수
font-size-adjust글꼴 크기를 조정하는 CSS3 속성. - 설치된 글꼴의 '정상 높이' 및 '예상 값'을 계산
