fluid typography를 위한 CSS clamp() 생성기
이 생성기는 숫자 5개로 글자 크기마다 CSS 사용자 지정 속성을 하나씩 만들어요. 모두 rem과 vw 단위를 섞은 clamp()로 쓰여 있어요. 뷰포트 범위, 양쪽 끝의 기본 크기, 스케일 비율을 입력하면 --text-xs부터 --text-4xl까지 모든 단계가 미디어 쿼리 없이 화면 너비에 맞춰 부드럽게 커져요. 아무것도 업로드되지 않고, CSS는 브라우저 안에서 만들어져요.
fluid type scale 만드는 순서
위쪽의 입력칸 5개를 채워요. 최소 뷰포트(기본값 320)와 최대 뷰포트(1200)는 글자가 가장 작아지는 화면 너비와 가장 커지는 화면 너비이고, 단위는 픽셀이에요. 최소 기본 크기(16)와 최대 기본 크기(20)는 그 두 너비에서의 본문 글자 크기예요. 스케일 비율(1.25)은 각 단계가 바로 아래 단계보다 얼마나 커지는지를 정해요. 입력칸마다 숫자 상자와 슬라이더가 있어요.
- 화면 너비 범위를 입력해요.
- 좁은 화면과 넓은 화면에서의 기본 크기를 입력해요.
- 스케일 비율을 골라요.
- 아래의 CSS 칸은 입력할 때마다 바로 바뀌어서 제출 버튼이 없어요. 결과가 마음에 들면 CSS 복사를 누르고 :root 블록을 스타일시트에 붙여 넣으세요.
쓸 수 없는 값이 있으면 그 자리에 메시지가 나와요. 최대 뷰포트는 최소 뷰포트보다 커야 하고, 최대 기본 크기는 최소 기본 크기보다 커야 하며, 비율은 1 이상이고 모든 숫자는 0보다 커야 해요. 크기를 지정하는 곳에는 h1 { font-size: var(--text-3xl); } 처럼 단계를 쓰면 돼요.
어떤 너비에서도 미리보기로 확인해요
미리보기에서 미리보기 너비를 최소 뷰포트와 최대 뷰포트 사이로 끌어 보세요. 각 단계가 그 너비에서 실제로 적용되는 크기의 예시 문장 “부드럽게 크기가 변하는 글자”로 나타나고, 변수 이름과 픽셀 크기도 함께 보여요. 가장 큰 단계가 맨 위에 와요.
복사하기 전에 작은 스마트폰과 넓은 데스크톱에서 본문과 제목의 크기 차이를 미리 판단할 수 있어요.
clamp() 글자 크기를 계산하는 방법
각 단계마다 좁은 쪽 크기(최소 기본 크기에 비율의 단계 제곱을 곱한 값)와 넓은 쪽 크기(최대 기본 크기에 같은 거듭제곱을 곱한 값)를 구해요. 그다음 두 점을 잇는 직선을 그려요. 기울기는 크기 변화량을 뷰포트 너비 변화량으로 나눈 값이고, 절편은 최소 크기에서 최소 뷰포트 곱하기 기울기를 뺀 값이에요. 기울기는 vw 부분이 되고 절편은 rem 부분이 되며, 양 끝의 크기는 clamp()의 최솟값과 최댓값이 돼요. 값은 소수 넷째 자리까지 반올림해요.
기본값일 때 320px, 760px, 1200px에서의 크기는 이래요.
- --text-sm: 12.8 / 14.4 / 16 px
- --text-base: 16 / 18 / 20 px
- --text-lg: 20 / 22.5 / 25 px
- --text-xl: 25 / 28.13 / 31.25 px
px 대신 rem과 vw를 쓰는 이유
vw로만 쓴 크기는 방문자가 브라우저에서 고른 글꼴 크기를 무시하고, 확대해도 커지지 않아요. 여기서는 모든 숫자를 rem 부분과 vw 부분으로 나눠서 내보내기 때문에, 글자가 사용자의 기본 글꼴 크기를 따르고 확대도 돼요. 더 큰 글자가 필요한 사람도 계속 편하게 읽을 수 있어요. 이 도구는 px를 출력하지 않아요.
사이트에서 html { font-size: 62.5% } 처럼 16px이 아닌 루트 크기를 쓴다면 고급을 열고 루트 글꼴 크기를 바꿔서 1rem에 맞춰 주세요.
뷰포트, 기본 크기, 스케일 비율 고르기
기본값 320에서 1200까지는 작은 스마트폰부터 노트북까지 넉넉히 포함해요. 글자가 더 이상 커지지 않았으면 하는 가장 넓은 너비를 최대 뷰포트로 정하세요. 그보다 넓은 화면에서는 최대 크기로 고정돼요. 본문은 16px과 20px 조합을 많이 써요. 스케일 비율에 따라 스케일의 느낌이 달라져요.
- 1.2(단3도): 단계 간격이 좁고 부드러워요
- 1.25(장3도): 균형 잡힌 기본값이에요
- 1.333(완전4도): 차이가 뚜렷해요
- 1.5(완전5도): 제목이 두드러져요
- 1.618(황금비): 단계 간 차이가 아주 커요
비율을 1로 하면 모든 단계의 크기가 같아져요. 비율은 양쪽 끝에 같이 쓰는 숫자 하나라서 320px에서도 1200px에서도 스케일의 비율은 같고, 바뀌는 것은 기본 크기뿐이에요.
고급에서는 변수 접두사(기본값 --text)로 모든 속성의 이름을 바꿀 수 있어요. 단계 이름은 sm, lg, xl(--text-sm, --text-base, --text-lg 등)과 -1, 1, 2(--text--1, --text-0, --text-1 등) 중에서 골라요. 더 작은 단계(0~4, 기본값 2)와 더 큰 단계(0~8, 기본값 5)는 기본 크기 아래와 위로 크기를 몇 개 만들지 정해요.
이 도구가 하지 않는 일
글자 크기 스케일만 만들어요. Tailwind 같은 형식으로 내보내기, 단계별 개별 설정, 좁은 쪽과 넓은 쪽에 서로 다른 비율, px 출력은 지원하지 않아요.
자주 묻는 질문
fluid type scale이 무엇인가요?
fluid type scale은 브레이크포인트에서 갑자기 바뀌는 대신 화면 너비에 맞춰 부드럽게 커지는 글자 크기 모음이에요. 작게, 기본, 크게, 아주 크게 같은 단계마다 좁은 화면용 최소 크기와 넓은 화면용 최대 크기를 정하고, 그 사이 크기는 직선을 따라 바뀌어요. 이 생성기는 각 단계를 CSS 사용자 지정 속성으로 내보내서 사이트 전체에서 다시 쓸 수 있어요.
css clamp 사용법을 알려 주세요. 글자 크기에는 어떻게 쓰나요?
clamp(최소, 선호, 최대)는 값을 세 개 받아요. 브라우저는 선호값을 쓰되 최솟값보다 작아지거나 최댓값보다 커지지는 않아요. 글자에서는 선호값을 rem 값에 vw 값을 더한 형태로 쓰는데, 예를 들면 clamp(1rem, 0.9091rem + 0.4545vw, 1.25rem) 같은 식이에요. 이것을 사용자 지정 속성에 넣고, 필요한 곳에 font-size: var(--text-base)라고 쓰면 돼요.
CSS로 화면에 맞게 변하는 글자 크기는 어떻게 만드나요?
크기를 clamp() 변수로 한 번만 선언해 두면 미디어 쿼리 없이 창 크기에 따라 글자가 끊김 없이 바뀌어요. “최소 뷰포트”와 “최대 뷰포트”에 가장 작은 크기와 가장 큰 크기를 원하는 너비를 넣고, “최소 기본 크기”와 “최대 기본 크기”를 입력한 뒤 CSS를 복사하세요. 최소 뷰포트보다 좁으면 가장 작은 크기로, 최대 뷰포트보다 넓으면 가장 큰 크기로 유지돼요.
clamp() 글자 크기가 적용되지 않는 이유가 뭔가요?
흔한 원인은 값에 단위가 빠졌거나, clamp() 안의 더하기 기호 앞뒤에 공백이 없거나, 최솟값이 최댓값보다 크거나, 선호값을 vw로만 써서 사용자의 글꼴 크기 설정을 무시하는 경우예요. 생성된 줄은 이 네 가지를 모두 피해요. 모든 값에 단위가 붙고, 더하기 기호 앞뒤에 공백이 있으며, 최솟값은 항상 최댓값보다 작아요.
Utopia fluid type scale calculator와 같은 방식인가요?
생각은 같아요. 좁은 뷰포트와 넓은 뷰포트 사이에서 크기를 직선으로 보간하고, 각 단계는 기본 크기에 스케일 비율을 곱한 값이에요. 다른 점은 이 도구는 양쪽 끝에 비율이 하나뿐이고, 단계별로 덮어쓰기가 없으며, Tailwind 등으로 내보내기 없이 순수한 CSS 사용자 지정 속성만 출력한다는 거예요. :root 블록을 빠르게 만들고 싶을 때 알맞아요.
장3도와 완전4도 중에 어떤 스케일 비율을 골라야 하나요?
장3도(1.25)는 본문이 많은 페이지에 알맞은 기본값이에요. 단계 간격이 가까워서 제목이 본문을 압도하지 않아요. 완전4도(1.333)는 단계 사이의 차이가 커서 홍보 페이지나 큰 제목에 어울려요. 단3도(1.2)는 더 부드러워요. “스케일 비율”에 값을 입력하고 복사하기 전에 “미리보기”로 확인해 보세요.
clamp()는 모든 브라우저에서 쓸 수 있나요?
clamp()는 Chrome, Edge, Firefox, Safari의 최신 버전에서 모두 쓸 수 있고, 2020년부터 그랬어요. 아주 오래된 브라우저는 이해하지 못하는 선언을 무시하므로, 지원해야 한다면 clamp() 줄 앞에 고정 font-size 줄을 대체값으로 넣어 두세요.
입력한 내용이 서버로 전송되나요?
아니요. 숫자는 이 페이지에서 브라우저가 CSS로 바꿀 뿐이고, 업로드되거나 저장되는 것은 없어요. 계정도 가입도 필요 없어요.
