css 트릭2 (작은 글자)

  폰트의 크기는 사용자에게 꽤나 중요한 정보이다. 읽는 순서에도 영향을 끼칠정도이니까 말이다.

 이런 이미지를 본적 있나? 솔직히 나는 폰트 크기순으로 읽혔다. 그래서 이 포스팅을 쓰는거기도 하다.

 작은 폰트로 글써보기.

<div style="font-size: 14px">font-size: 14px</div>
<div style="font-size: 13px">font-size: 13px</div>
<div style="font-size: 12px">font-size: 12px</div>
<div style="font-size: 11px">font-size: 11px</div>
<div style="font-size: 10px">font-size: 10px</div>
<div style="font-size: 9px">font-size: 9px</div>
<div style="font-size: 8px">font-size: 8px</div>
<div style="font-size: 7px">font-size: 7px</div>
<div style="font-size: 6px">font-size: 6px</div>
<div style="font-size: 5px">font-size: 5px</div>
<div style="font-size: 4px">font-size: 4px</div>

 간단하게 폰트 사이즈를 변경하여 작성해보았다.

 자 문제는 이거다! 10픽셀부터는 4픽셀까지 같은 크기인 것이다. 이렇게 되면 우리는 할인 정보나 약관 철회 정보를 고객에게 안보이게 숨기기가 꽤나 힘들어질 것이다. 이렇게 되면 본문에 크게 영향을 주지 않는 각주 등을 표현하기위해 쓸데없이 큰 폰트를 쓰게 될 지도 모른다. 물론 14픽셀 이하의 글자를 본문에 작성하는 것은 큰 도움이 되지는 않지만 말이다.

 폰트를 강제로 줄여보기

 가장 간단하게 아래와 처럼 scale을 강제로 줄이는 것이 있을 것이다.

<div style="font-size: 14px">font-size: 14px</div>
<div style="font-size: 13px">font-size: 13px</div>
<div style="font-size: 12px">font-size: 12px</div>
<div style="font-size: 11px">font-size: 11px</div>
<div style="font-size: 10px">font-size: 10px</div>
<div style="font-size: 10px; transform: scale(.9);transform-origin: left;">
  font-size: 9px
</div>
<div style="font-size: 10px; transform: scale(.8);transform-origin: left;">
  font-size: 8px
</div>
<div style="font-size: 10px; transform: scale(.7);transform-origin: left;">
  font-size: 7px
</div>
<div style="font-size: 10px; transform: scale(.6);transform-origin: left;">
  font-size: 6px
</div>
<div style="font-size: 10px; transform: scale(.5);transform-origin: left;">
  font-size: 5px
</div>
<div style="font-size: 10px; transform: scale(.4);transform-origin: left;">
  font-size: 4px
</div>

 아쉽게도 9픽셀이하의 폰트사이즈를 정식으로 지원하는것이 아니기 때문에 line-height나 너비의 길이이가 달라지는 것은 어쩔수 없는 부분이다. 해당 사이즈의 폰트가 필요하다면, 해당 내용을 꼭 숙지 하고 요청한 디자이너분에게 확인을 요청하는 것이 좋을 것이다.