여러가지 글꼴 테스트 (Font test)

Font Test in HTML

HTML에서 여러가지 Font testing.

Table of Contents

Which font-size is the best among "px", "mm", "pt", "em", "%"

아래 div를 감싸고 있는 parent div의 font-size를 10px로 해놨음. (style="font:10px/1.6 '맑은 고딕'") 굳이 10px로 정한 이유는 child div들(+다른 child tag들)의 font-size를 em(혹은 %)로 표시할거라서 계산 상 편의를 위함임. 보통 em을 쓰는 것이 권장되는 방법이라고 함. 즉 font-size를 정할 때 (px, cm/mm, pt)보다 %나 em을 쓸 것을 더 권장함. Parent의 font-size 기준으로 일관성 있게 일괄적으로 font-size 조정이 쉽게 가능해지기 때문임. % 같은 경우는 width나 height에서 쓰일 땐 parent의 width/height를 기준으로 %로 잡는 식이기 때문에 font-size 기준으로 한다는걸 명확히 하기 위해 em을 쓰는게 더 추천되는 방법같음. (padding/margin-top/bottom의 경우 parent의 height가 아닌 width를 기준으로 잡는다고 하니 주의를. 이런 성질(%)을 이용해서 width/height의 ratio를 고정하는 trick/technique(기교)도 있음.)
즉 width에도 em을 쓸 수 있음. 이건 parent의 font-size 기준으로 width를 정한다는 뜻. 통일성을 위해서 em을 씁시다. 그래도 뭐 자기 마음임. 어차피 (%를 em의 100배 비율로 입력하면) 같은 결과를 주긴 하니까. To sum up, (px, cm/mm, pt) 등의 font-size는 몇 개의 parent tag에만 사용하고 child tag들은 em을 씁시다 .

font:10px/1.6 '맑은 고딕';

font-size:160%; (10px * 160%)되어서 16px이 됨.

아무것도 안해놓으면 size가 같겠지? 즉 16px;

font-size:160%; 바로 상위 parent의 font-size를 기준으로 %가 적용되는듯? 따라서 (16px * 160%) = 25.6px인데 반올림해서 26px로 됨.

font-size:inherit;이면? 160%랑 같나? 즉 16px;

Various Font-family

array {'맑은 고딕', MG, '<span style="font-size:1.6em">가장 괜찮은 font 같음. Windows 7 이후부터 한글 기본 글꼴이라고도 하는듯?</span>'} 등 만들고 javascript로 처리하자? 귀찮....

'맑은 고딕'

가장 괜찮은 font 같음. Windows 7 이후부터 한글 기본 글꼴이라고도 하는듯?

'Malgun Gothic'

인코딩 문제로 '맑은 고딕'을 인식 못할 경우를 대비. 영어로 font 이름을 썼음. 띄어쓰기 없이 'MalgunGothic'으로 쓰면 안먹힘.

'나눔 고딕', 'Nanum Gothic'

나눔고딕도 괜찮은 폰트 같음.

NanumGothicCoding

Code 쓸 때랑 code highlight할 때 쓰라고 만든 font 같기는 한데... 영어 각 알파벳과 알파벳들의 대/소문자들의 넓이가 달라서 정렬은 잘 안되는듯도. Coding font 맞나?

dotum

Gulim

'Times New Roman'

serif

sans-serif

arial

Verdana

AppleGothic

'Courier New'

가로폭이 같음. 이런게 coding font 아닌가? 하지만 안 예뻐서 안쓴다는거;;;;

References and Related Articles

1. w3schools - CSS Font
2. Kyle Schaeffer's blog - CSS Font-Size: em vs. px vs. pt vs. percent, 2008-09-30, by Kyle