타이포그래피

웹사이트 텍스트 크기 설정

피그마 오픈카톡방2026. 3. 7.

질문사항

웹사이트 제작 시 1920px 너비 기준으로 텍스트 크기를 어떻게 설정해야 할까요? 25px로 설정하면 개발 시 실제보다 커 보이는 경향이 있는데, 보통 텍스트 크기를 더 줄여서 사용하나요?

답변

웹사이트 텍스트 크기는 사용성, 가독성, 그리고 디자인 시스템의 일관성을 고려하여 설정해야 합니다. 1920px 너비 기준이라면 25px는 본문 텍스트로는 다소 크게 느껴질 수 있습니다. 일반적으로 다음과 같은 접근 방식을 추천합니다:

기준 배수 사용 (4px 또는 8px Grid): 텍스트 크기, 행간, 여백 등을 4px 또는 8px의 배수로 설정하면 디자인 시스템의 일관성을 유지하고 개발자와의 협업을 용이하게 합니다. 예를 들어, 본문 텍스트는 14px, 16px, 18px 등을 기준으로 하고, 제목은 24px, 32px, 40px 등으로 설정할 수 있습니다.

레퍼런스 사이트 분석: 경쟁사나 잘 만들어진 웹사이트를 방문하여 개발자 도구(F12)를 열어 실제 사용된 폰트 크기와 행간을 확인해보세요. 이를 통해 업계 표준이나 트렌드를 파악하는 데 도움이 됩니다.

반응형 고려: 1920px는 데스크탑 기준이므로, 모바일 등 다른 해상도에서는 텍스트 크기가 어떻게 조정될지 미리 계획해야 합니다. `rem` 또는 `em` 단위를 고려하여 유연하게 대응할 수 있도록 디자인하는 것이 좋습니다.

개발 환경과의 차이: 피그마와 실제 브라우저 렌더링 방식의 차이로 인해 폰트가 다르게 보일 수 있습니다. 이는 폰트 렌더링 엔진, 안티앨리어싱 방식, 그리고 폰트 패밀리 설정 등에 따라 발생할 수 있습니다. 개발자와 초기 단계에서 폰트 렌더링 기준을 맞춰보는 것이 중요합니다.