Font Size에 관한 모든 것

font-size의 단위로 px을 쓰지 말아야 한다.

장치의 픽셀 환경에 따라 다른 크기로 표시될 수 있기 때문이다.

대신 rem을 쓴다.

 

rem은 상대적인 값이다.

root인 html에서 font-size로 설정한 px 값의 배수를 표현한 값이다.

예를 들어 아래와 같이 설정했다면

 

html {
  font-size: 16px;
}

 

1rem은 16px이고 2rem은 두 배인 32px이 된다.

 

크롬에서 기본 font-size는 16px이고 크롬 환경 설정에서 기본 글자 크기를 변경할 수도 있으니 

위처럼 html에 font-size를 직접 명시하지는 않는다.

이해를 위해 코드를 첨부했을 뿐이다.

대신 아래처럼 rem의 계산을 편하게 하기 위해 62.5%로 설정하기도 한다.

 

html {
  font-size: 62.5%;
}

 

그러면 기본 font-size는 16px의 62.5%인 10px이 되고 1rem은 10px이 되니 rem을 계산하기 쉬워진다.

 

추가적으로 다음 사이트에서 웹 페이지에서 사용할 글자 크기 비율을 미리 정할 수 있다.

type-scale.com

 

Font 세로 폭

margin을 이용해서 제목과 문단 사이의 폭을 설정한다.

font-size와 직접적으로 관련이 있으니 rem을 사용한다.

 

line-height를 이용해서 글자의 세로 폭 공간을 설정한다.

단위를 넣을 수도 있지만 그냥 숫자만 넣으면 font-size와 곱한 값만큼의 값이 된다.

예를 들어 font-size가 10px일 때 line-height를 1.5로 하면 15px이 된다.

보통 1.5로 설정하는 게 무난하다.

 

Font 가로 폭

letter-spacing으로 글자 간격을 조절할 수 있다.

보통 1px이 무난하다.

제목의 경우 마이너스 값을 넣어서 글자 간격을 가깝게 해 좀 더 무게감을 줄 수 있다.

 

word-spacing으로는 단어 간격을 조절할 수 있다.

 

가독성 좋은 문단의 가로 길이는 알파벳 기준 50에서 70 글자 사이라고 한다.

1ch는 0문자의 너비를 의미하고

width를 50ch로 하면 대략 50에서 70 글자가 들어간다.

i와 같은 단어는 폭이 좁기 때문이다.