Line height

html의 기본 폰트 사이즈는 16px.

코딩 시 폰트 사이즈를 따로 주지않고 만약 font-size: 2em으로 할 경우 2배라는 뜻으로 32px의 폰트 크기를 갖게 된다.

검사를 살펴보면 폰트 크기보다 크게 잡히는데 이것이 리딩 영역을 위한 line height이다. 리딩영역은 폰트 종류별로 천차만별이다.

line height: normal이 폰트 고유의 리딩영역이고, normal이 아닌 1;로 할 경우 폰트 크기와 같은 line height를 가지게 된다.

ex)

.css { font-size: 2em; }

font-size는 32px < content는 NNpx

.css { 
	font-size: 2em;
    line height: 1;
    }

font-size 32px = content는 32px

위 img처럼 같은 크기의 다양한 종류의 폰트를 한 페이지에 사용해도 line height를 주게되면 동일한 line height 즉, 동일한 높이값(리딩영역)을 가지게 된다.