색상 코드 변환
HEX, RGB, HSL과 투명도를 변환하고 색을 미리 보며 바로 쓸 수 있는 CSS 값을 복사합니다.
CSS clamp 반응형 글자 크기 생성기
글자 크기와 뷰포트 너비의 최솟값·최댓값으로 px 또는 rem 기반 clamp()를 만듭니다.
rem은 지정한 루트 크기로 계산합니다. 실제 페이지에서 브라우저 확대와 큰 글씨 설정도 확인하세요.
편안한 글자 크기로 한 줄 한 줄 또렷하게 읽어 보세요.
CSS
도구 소개
모바일·데스크톱 제목 크기를 정하고 그 사이에서 어떻게 변하는지 확인할 수 있습니다.
사용 방법
최소·최대 글자 크기와 각각에 해당하는 뷰포트 너비를 입력하고 px 또는 rem을 선택하세요. 가상 뷰포트 슬라이더로 계산된 크기를 확인한 뒤 font-size: clamp(...)를 복사하거나 저장합니다. 너비는 작은 값부터 입력하고 최소 글자 크기는 최대보다 클 수 없습니다.
지정한 너비 구간에서는 글자 크기가 선형으로 변하고 구간 밖에서는 설정한 한도를 유지합니다. rem을 쓸 때는 루트 글자 크기를 실제 페이지에 맞추세요. 컨테이너가 아닌 뷰포트 너비를 기준으로 계산하며 다른 타이포그래피 설정은 변경하지 않습니다.
자주 묻는 질문
rem의 루트 크기가 왜 필요한가요?
미리보기에서 rem을 픽셀로 바꾸는 데 쓰므로 루트 글꼴 크기를 실제 페이지와 맞춰야 합니다. 식은 브라우저 뷰포트 너비에 반응하며 루트 글꼴 크기가 다르면 결과도 달라집니다.
모바일 16px, 데스크톱 32px 글자 크기는 어떻게 설정하나요?
뷰포트 너비 400px에서 16px, 1200px에서 32px를 원하면 px를 선택하고 두 쌍의 값을 입력하세요. 결과는 clamp(16px, 8px + 2vw, 32px)이며 800px에서 24px, 범위 밖에서는 상한·하한을 유지합니다. 컨테이너가 아닌 뷰포트 너비를 따릅니다.
관련 도구
새 탭에서 열립니다
댓글
0