가장 합리적인 워드프레스 폰트크기 줄간격

1. '완벽'이 아니라 '합리적'인 이유는 모든 포스팅에 완벽히 조화로운 폰트크기와 줄간격은 논리적으로 불가능하기 때문
2. 이유는 같은 작성자라 해도, 광적으로 동일한 규격으로 작성하지 않는 이상 개별 포스팅마다 폰트크기, 줄간격, 사용한 오브젝트, 스타일 등이 필연적으로 달라지기 때문
3. 때문에 100% 완벽하게 하려면 모든 포스팅마다 폰트와 줄간격을 일일히 조절하는게 맞다
4. 근데 그건 말이 안되니까 모든 상황에서 최소한 가독성이나 기능 면에서 문제가 없는 '가장 합리적'인 세팅을 고수해, 딱 맞진 않더라도 이상한점은 못 느끼는 기능적인 Front-end 구성이 정답

핵심 폰트 크기 세팅

가장 합리적인 폰트 크기 구성은 html(or body)의 기본 폰트 사이즈를 포스팅 본문의 <p>와 같게 기준점으로 잡고, 나머지는 px단위를 사용하지 않고 rem 을 활용해 비율적으로 사이즈를 조절하는 것.

가장 많은 양을 차지하고, 사용자가 가장 많이 읽게 되는것이 본문의 평범한 글 <p> 안의 내용이기 때문이고, 여기에 비례해 <h2>같은건 크게, <code>같은건 작게 하는 식으로 기능적으로 구성한다.

또 html의 폰트와 핵심 폰트의 기준점이 같기 때문에, 포스팅을 제외한 전체적인 사이트 요소들의 크기도 필연적으로 적절하게 디자인 된다.

그 핵심 <p>의 사이즈 자체는 본인이 정하면 된다, 예제에선 좀 크게 20px 정도를 기준으로 세팅하면

html{
	font-size:20px;
}
.entry-content{
	font-size:1rem;
}
.entry-content>:is(h2,h3,h4,h5,h6){
	font-size:1.2rem;
	font-weight:bold;
}
code{
	font-size:0.9rem;
}

이런식으로 html 20px 크기를 기준으로 본문에 1rem 줘서 <p>같은 기본적인 폰트들을 전부 20px로 나오게 하고, h2,h3 같은 큰 글씨가 필요한 요소는 1.2rem으로, code같은 작게 나와야 하는건 0.9rem으로 통일시켜 버리면 매우 기능적이고, 사이트가 전체적으로 균일하고 깔끔한 톤이 된다.

가독성 위주 줄간격의 요점

폰트 크기보다 줄간격이 훨씬 변수가 많다.

예로 평범한 문체의 블로그 같은 경우는 구어체에 문장 형식상 엔터가 필요 없음에도 엔터키를 남발하기 때문에 <p> 간격이 널널한게 사용자 의도에 더 부합하고

ex 이웃님덜~~~

오늘 하루 미~~세먼지.... 고생 많이 하셨쥬~~?



저 병아리맘이 아무 영양가 없는 글로 시간낭비 잔뜩 시켜드릴게욧~~☆☆

맨 아래에 별로 유용하지도 않은 뻔한 복사 붙여넣기 정보도 잊지마세용~!~~!
(이상한 병아리 이모티콘)

전문적인 리스트형 웹 문서 같은 경우에는 아예 줄간격을 주지 않는 것이 훨씬 가독성이 좋은 경우도 잦다.

ex 가장 합리적인 워드프레스의 줄간격은?
	1. 병아리맘에게 물어본다
	2. 하드필터에게 물어본다
	3. 병아리맘이 저렇게 된 이유
		1. 병아리맘과 치킨맘의 대립
		2. 치킨맘의 배신

해결방안 모색
	1. 병아리가 문제다
	2. 하드필터가 문제다

또 사이트 가로폭이 좁냐 넓냐에 따라도 다르고, 특히 가로폭이 충분히 넓은 경우 오히려 문단의 줄간격이 지나치게 넓으면 좁을때보다 더 가독성이 떨어진다. 마냥 줄간격을 늘리게 정답이 아니라는 것.

ex (가로폭이 좁은 경우)
가로폭의 변화에 따라 같은 양의 텍스
트임에도 가독성과 톤이 달라진다.

이는 데스크탑과 모바일간의 변화에서
도 유사히 나타나는 현상이다.

ex (가로폭이 충분히 넓은 경우)
가로폭의 변화에 따라 같은 양의 텍스트임에도 가독성과 톤이 달라진다.


이는 데스크탑과 모바일간의 변화에서도 유사히 나타나는 현상이다.

때문에 양방향 모두 가독성을 해치지 않는 합리적인 스윗스팟을 찾는게 핵심이다.

핵심 줄간격 세팅

그 스윗 스팟은 폰트 크기 때와 같은 개념으로 폰트 크기와 정확히 같은 1배의 줄간격을 기준점으로 사용하는 것.

1. 핵심 줄간격 으로 1rem을 사용하고,
2. 그것 보다 넓은 폭이 필요하면 1.5rem, 2rem, 2.5rem 순으로 균일한 증가폭으로 설정
3. 유사한 타입의 오브젝트에 같은 줄간격을 설정(ex ol ul 이나 p li 등)해 통일감을 준다

p, ol li, ul li{
	margin-bottom:1rem;
}
ol, ul, pre{
	margin:2rem 0;
}
h2,h3,h4,h5,h6{
	margin:3rem 0 1rem;
}

1. 이런 식으로 평범한 <p> 문단이나 리스트는 1rem씩 평범하게 줄간격을 주고,
2. ol, ul, pre같은 오브젝트는 확실히 본문과 구분되게 위 아래로 margin값 2rem을,
3. h2,h3같은 헤더는 더더욱 구분이 잘 되게 3rem을 주는 식이다.

이렇게 설정하면 앞서 말한 양방향 어느 경우에도 최소한 기능적으로 구분이 안되거나 하는 문제는 사라진다.

또 실제 포스팅에는 요소가 서로 마구 교차하게 되는데, 각 요소들의 margin값대로 알아서 정렬되니까 한 번만 세팅해 놓으면 어떻게 글을 적어도 가장 합리적으로 적절히 제 위치를 갖는다.