font-size

1. px (픽셀)

• 예시: font-size: 16px;
• 장점: 크기 고정이라 일관성 유지 쉬움.
• 단점: 반응형에 적합하지 않음. 화면 바뀌면 폰트 크기 변하지 않아 모바일에선 별로임.

2. em

• 예시: font-size: 1.2em;
• 장점: 부모 폰트 크기 기준으로 크기 조절 가능. 유동적이라 반응형에 유리함.
• 단점: 중첩되면 크기 예측 힘듦. 관리 어려움.

3. rem

• 예시: font-size: 1.2rem;
• 장점: 사이트 전체에서 일관성 있음. 브라우저 기본 폰트 크기 기반이라 유연하고 안정적임.
• 단점: 특정 요소는 따로 크기 조정 필요할 수 있음.

4. vw (뷰포트 너비)

• 예시: font-size: 2vw;
• 장점: 화면 너비에 따라 폰트 크기 유동적임. 반응형에 좋음.
• 단점: 큰 화면에선 너무 커지고 작은 화면에선 너무 작아짐. 가독성 문제 발생 가능.

5. vh (뷰포트 높이)

• 예시: font-size: 2vh;
• 장점: 화면 높이에 맞춰 폰트 크기 조절 가능. 특정 디자인에 유리.
• 단점: 뷰포트 변화에 따라 크기 편차 심해져서 가독성 떨어질 수 있음.

6. clamp() (크기 범위 설정)

• 예시: font-size: clamp(1rem, 2vw, 2rem);
• 장점: 최소/최대 크기 설정 가능하고 중간값 조절해서 반응형에 최적화됨.
• 단점: 구형 브라우저 지원 안 됨. 최신 브라우저만 지원.

7. max() 및 min()

• 예시: font-size: max(1rem, 2vw);
• 장점: 여러 크기 중 큰 값이나 작은 값 선택 가능. 반응형에 유용함.
• 단점: 브라우저 호환성 이슈 있을 수도.

요약

• 고정 크기 필요: px
• 상대적이고 유동적인 크기 필요: em, rem
• 뷰포트에 따라 유연한 크기 필요: vw, vh
• 최소/최대 제한 설정하며 반응형 적용: clamp()