CSS3 font-size-adjust
대채폰트의 크기조절 x-height, Aspect Value
일단 참조할 것
타이포그래피(Typography ) 각 폰트별 x-height 크기 도표 http://blog.naver.com/siatiger
w3c css3 font 소개 :http://www.w3.org/TR/css3-fonts/
웹폰트 Aspect Value http://www.barrypearson.co.uk/articles/text/aspect_values.htm
adjust 란 단어는 “조정하다”란 뜻으로 말 그대로 폰트 크기를 조정해주는 역할을 하는 속성이 font-size-adjust 이다. 영어는 대소문자가 구별되는 언어이고 그 때문에 폰트의 종류에 따라 특히 소문자의 크기가 다르게 표현된다.예를 들어 Verdana 의 대문자가 1 이라면 소문자 크기는 0.58(Aspect Value) 의 크기인 것이다.
주의)아이폰에서 텍스트크기를 정하는 -webkit-text-size-adjust와 혼동하지말것!
이러한 이유 때문에 브라우저에서 만약 첫 번째 font 를 사용할 수 없게 될 경우 두 번째로 지정된 폰트를 랜더링하는데 글자 크기가 같은 px 라도 들쭉날쭉하게 보여지는 것이다.
다른 폰트라면 같은 크기라도 글자크기가 다른것은 당연하다
사진은 대문자지만 적용은 x-height이므로 소문자임을 주의
이런 것을 방지하기 위해 font-size-adjust 속성을 사용하게 되면 서로 다른 폰트 종류라도 소문자의 처음 지정된 폰트의 크기로 유지할 수 있고 가독성을 높일 수 있다.. 하지만 현재 Firefox 에서만 지원한다
1. Aspect Value 확인해보기
W3C에서 보여주는 값은 다음과 같다. http://www.barrypearson.co.uk/articles/text/aspect_values.htm
글자크기에 따라 치수변동이 조금있다.
| Family name | Stated aspect value | Measured aspect value |
|---|---|---|
| These are in the W3C order. | These are values quoted by W3C. | These use the actual x-height at 100px. |
| Verdana | 0.58 | 0.55 |
| Comic Sans MS | 0.54 | 0.56 |
| Trebuchet MS | 0.53 | 0.52 |
| Georgia | 0.50 | 0.48 |
| Myriad Web | 0.48 | 0.48 |
| Minion Web | 0.47 | (This was only ever supplied by MS as part of the IE 4 supplemental font pack add-on, and is not on my PC). |
| Times New Roman | 0.46 | 0.45 |
| Gill Sans | 0.46 | (Not on my PC). |
| Bernhard Modern | 0.4 | (Not on my PC). |
| Caflisch Script Web | 0.37 | (Not on my PC). |
| Flemish Script | 0.28 | (Not on my PC). |
font-size-adjust가 적용될때 공식은 다음과 같다
c = (a/a’)s (c=조정될 글꼴 크기, a=font-size-adjust 에 지정된 숫자, a’=현재 지정된 글꼴의 소문자 비율)이다. 예를 들어, 14pt Verdana의 font-size-adjust를
1로 지정하면(Verdana의 소문자 높이 비율 기본값은 0.58) 14*1/0.58pt의 크기(약 24pt)로 표시된다.
에제로는 Times New Roman를 선택했다. 0.46 이다. font-size-adjust에 0.46을 주면 공식에서 나누어 떨어지므로 font-size-adjust를 설정하지않은 것과 똑같이 나와야 한다
<p><span id="num1">Aa</span><span id="num2">Aa</span></p>body{font-size:400px;}
p{ margin:100px;}/*가운데 보기위한 정렬*/
span{ border:solid 1px green; }/*크기비교위한 테두리*/
#num1{ font-family:Times New Roman ;}
#num2{ font-family:Times New Roman;
font-size-adjust:0.46;
}
http://sianasiatiger.cafe24.com/study/font-size-adjust-01.html
그림과 같이 문자가 크다보니 약간의 차이가 있다 직접 조절해본 결과는 0.447
#num2{ font-family:Times New Roman;
font-size-adjust:0.447;
}http://sianasiatiger.cafe24.com/study/font-size-adjust-02.html
이건 조절한결과
2. 다른 폰트의 같은 크기의 x-height 조절
폰트는 Verdana 와 Times New Roman을 선택했다
위에서 확인 해봤듯이 400px에서 값은 0.447이였다.
그러면 Verdana에 0.447을 정해주면 된다.
body{font-size:400px;}
#num1{ font-family:Times New Roman; }
#num2{ font-family:Verdana;
font-size-adjust:0.447;
}
최종결과 폰트특성상 아주 약간 차이날뿐 같게 된것을 볼 수 있다.
http://sianasiatiger.cafe24.com/study/font-size-adjust-03.html
앞서 말했지만 역시 문제는 아직 파이어폭스만 지원한다는 점
댓글