[CSS] 가독성을 높이기 위한 행간 높이 설정(ft. line-height)

글을 배치할 때 중요한 것은 가독성과 디자인에 적절한 지 여부라고 생각합니다.

특히 글 길이가 긴 포함한 기사나 블로그 같은 문장이 길기 때문에,

적절한 행간 높이를 설정하는 것이 중요합니다.

 

행간 높이가 100% / 150% / 200% 일 때의 예제는 다음과 같습니다.

 

행간높이 : 100%

 

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

p { 
	line-height: 100%;
}

 

행간높이 : 150%

 

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

p { 
	line-height: 150%;
}

 

 

행간높이 : 200%

 

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

p { 
	line-height: 200%;
}

 

100% 는 확실히 너무 행간높이가 좁아서 가독성이 떨어지고

150% 와 200%는 가독성이나 디자인적인 목적에 따라 상황에 맞게 이용할 수 있습니다.

 

line-height 는 % 나 em 단위로 조절할 수 있는데, 개인적으로는 % 단위가 편한 것 같습니다.

% 단위로 미세하게 조절이 가능하기 때문에 수치를 바꿔가면서 적당한 값을 선택하면 좋습니다.