폰트 설정

폰트 설정
폰트 패밀리
폰트 크기
줄 높이
자간

실제 인터페이스와 약간 다를 수 있습니다.

폰트 패밀리

폰트 패밀리
기본값
시스템 폰트
두께모두 사용 가능
100200300400500600700800900
폰트 편집

실제 인터페이스와 약간 다를 수 있습니다.

변경 미리보기

폰트 패밀리 미리보기

포인트:
버튼에 사용할 서체를 설정합니다. 브랜드 톤과 신뢰감에 직접 영향을 줍니다.

이 설정으로 달라지는 점:
같은 문구라도 글꼴에 따라 인상이 크게 바뀝니다.

조정 팁:
사이트 본문과 계열이 너무 다르면 이질감이 생기므로 먼저 전체 톤에 맞추는 것이 안전합니다.

설정 항목

  • 폰트 목록(기본값 / System / 테마 폰트)
  • 두께(100~900)
  • 폰트 편집

Hover 상태의 폰트 패밀리/굵기도 개별 설정 가능합니다.

폰트 크기

폰트 크기
반응형 설정OFFON
기본값
사용자 정의
폰트 크기 편집

실제 인터페이스와 약간 다를 수 있습니다.

변경 미리보기

폰트 크기 미리보기

포인트:
텍스트 크기를 설정합니다. 가독성과 클릭률에 직결되는 핵심 항목입니다.

이 설정으로 달라지는 점:
특히 모바일에서 너무 작으면 메시지가 전달되지 않습니다.

조정 팁:
PC에서 기준을 만든 뒤 SP에서 한 단계 조정하는 방식이 안정적입니다.

설정 항목

  • 프리셋(기본값 / 테마 / 사용자 정의)
  • 사용자 정의 크기
  • 단위(px / em / rem / vw)
  • 반응형
  • 폰트 크기 편집

em/rem은 상대 단위, vw는 화면 폭 연동 단위입니다. 극단값이 나오지 않도록 최소/최대 확인을 권장합니다.

줄 높이

줄 높이
프리셋
기본값
사용자 정의 줄 높이
1.2

실제 인터페이스와 약간 다를 수 있습니다.

변경 미리보기

줄간격 미리보기

포인트:
여러 줄 텍스트의 읽기 편의성을 조정합니다.

이 설정으로 달라지는 점:
너무 좁으면 답답하고, 너무 넓으면 응집력이 떨어집니다.

조정 팁:
보통 1.2~1.6 범위에서 시작하면 안정적입니다.

설정 항목

  • 프리셋(기본값 / Tight / Normal / Loose)
  • 사용자 정의 줄 높이
  • 단위(없음 / px / em / rem / %)
  • 반응형

단위 없이 1.5처럼 설정하면 폰트 크기에 비례해 계산되므로 반응형 설계에 유리합니다.

자간

자간
프리셋
노멀
사용자 정의 값
0.05
단위
em

실제 인터페이스와 약간 다를 수 있습니다.

변경 미리보기

자간 미리보기 (0.05em)

포인트:
글자 간격을 조정해 읽기 리듬과 인상을 조절합니다.

이 설정으로 달라지는 점:
미세한 변화로도 분위기가 크게 달라집니다.

조정 팁:
과도한 확대는 가독성을 해치므로 작은 범위부터 조정하세요.

설정 항목

  • 프리셋(Tight / Normal / Wide)
  • 사용자 정의 값
  • 단위(px / em / rem / %)
  • 반응형

기본 단위는 em입니다. 마이너스 값은 글자 간격을 좁히므로 과도한 사용에 주의하세요.