CSS 타이포그래피

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 의 적절한 조절이 필요하다. 알아서 값을 조절해보자