글꼴크기가 가변적인 제목만들기

clamp() 속성을 이용하여 글꼴크기가 Container의 사이즈에 따라서 유동적으로 변하도록 할 수 있습니다.

clamp() 속성은 최소값, vw값, 최대값의 3가지 속성을 설정합니다.

media (max-width: )는 page-width 값을 참조하여 설정합니다.

/* media max-width는 page-width로 조정함 */

@media (max-width: 1300px) {
  h1 {
    font-size: clamp(24px, 4.31vw, 56px);
  }
  h2 {
    font-size: clamp(22px, 3.46vw, 45px);
  }
  h3 {
    font-size: clamp(20px, 2.77vw, 36px);
  }
  h4 {
    font-size: clamp(18px, 2.31vw, 30px);
  }
  h5 {
    font-size: clamp(16px, 1.85vw, 24px);
  }
  h6 {
    font-size: clamp(14px, 1.54vw, 20px);
  }
}

상기 설정에서 vw값은 아래 링크된 사이트에서 Viewport Width값과 px값을 입력하여 쉽게 구하실 수 있습니다.

PX to VW