CSS 타이포그래피

CSS 2012.02.24 12:38

CSS 타이포그래피

타이포그래피 관련 텍스트 속성들을 알아본다. 간단하게 예제만으로 복습해보자.
일단 타이포그래피라면  알고있어야 할 것들

자간: 글자 하나하나 사이의 간격
어간: 단어사이의 간격
행간: 줄사이의 간격

자간<어간<행간 이건 당연한것

CSS에서 각속성은 다음과 같다


자간: letter-space , 흔히 사용하는 값 설정 (em,px ....)
어간: word-space, 흔히 사용하는 값 설정 (em,px ....)
행간: line-height, 폰트에 비례하는 퍼센트 설정가능

하나하나 설명하기보다 단번에 설명하는게 좋을 듯하다 일단 예로 해를품은달 html을 준비했다.

<h2><span>수목드라마 </span>해를 품은 달</h2>

<p>조선 시대 가상의 젊은 왕(태양) 이훤은 달과 ..... </p>

<p class="character">한가인: 홍문관 대제학 허영재의 딸, 염의 ... </p>

<p class="character">김수현 : 달을 그리는 해....</p>

CSS는 다음과 같다. 설명은 주석으로 해놨다.

/*문서마진설정 폰트사이즈100%*/
body{ font-size:100%; margin: 0 5em;}
/*개별 폰트사이즈 설정*/
h2{font-size:1.5em;
   text-align:center;
   /*제목을 가운데 정렬*/
   }
h2 span{font-size:.5em; 
        vertical-align:super; 
	/*세로정렬 위족에*/
	font-weight:lighter;
	}
/*첫번째 글자를 좀더크게*/		
h2 + p:first-letter{font-size:1.8em;}
/*문서의 자간,어간 행간 조절*/
p{font-size:.9em; 
  letter-spacing:-.03em; 
  word-spacing:.1em;
  line-height:1.8;   
}
/*등장인물 들여쓰기*/
.character{ text-indent:1em;}

각 속성에 대해서는 그림을 참고해보자


최종결과는 여기 http://sianasiatiger.cafe24.com/study/CSS-typo.html


세로정렬 vertical-align은 웹에서 흔히 잘 볼 수 없는데 값과 결과는 여기서 예제를 볼 수 있다.
http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

덧1) 첫번째 글자를 크게한 유사 클래스 선택자가 이해 안가면 이 블로그에서 검색해 보길 바란다
덧2) 한가지 빠트렸는데 첫번째 글자가 커지다 보니 첫문단 첫줄과 다음줄의 행간이 커진 것이 보인다. 따라서 이를 해결하기 위해 유사 클래스 선택자 h2 + p:first-letter에서  line-height 의 적절한 조절이 필요하다. 알아서 값을 조절해보자

저작자 표시
신고

설정

트랙백

댓글

CSS3 font-size-adjust 대채폰트의 크기조절 x-height, Aspect Value

CSS/CSS3 2012.02.22 18:15

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


앞서 말했지만 역시 문제는 아직 파이어폭스만 지원한다는 점

저작자 표시
신고

설정

트랙백

댓글

웹 CSS 폰트 테스트 미리보기 사이트 typeteste

CSS 2011.03.17 13:30

http://www.typetester.org/


CSS를 다루면서 여러폰트를 사용하고 크기 색깔 마진 패딩들을 다루게 되는데 미리한번 볼수 있는 좋은 사이트가 있다. 좋은점은 위에는 우리가 흔히 사용하는 기본적인 폰트 그리고 아래는 자신이 가지고 있는 폰트가 있다.


모두테스트 가능 설정함에 따라 아래에 뜬다.



아쉬운 점이라면 한글로 못본다는점?

저작자 표시
신고

설정

트랙백

댓글


티스토리 툴바