폰트의 크기는 사용자에게 꽤나 중요한 정보이다. 읽는 순서에도 영향을 끼칠정도이니까 말이다.
이런 이미지를 본적 있나? 솔직히 나는 폰트 크기순으로 읽혔다. 그래서 이 포스팅을 쓰는거기도 하다.
작은 폰트로 글써보기.
<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픽셀까지 같은 크기인 것이다.폰트를 강제로 줄여보기
가장 간단하게 아래와 처럼 scale을 강제로 줄이는 것이 있을 것이다.
아쉽게도 9픽셀이하의 폰트사이즈를 정식으로 지원하는것이 아니기 때문에 line-height나 너비의 길이이가 달라지는 것은 어쩔수 없는 부분이다. 해당 사이즈의 폰트가 필요하다면, 해당 내용을 꼭 숙지 하고 요청한 디자이너분에게 확인을 요청하는 것이 좋을 것이다.
<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>
댓글
댓글 쓰기