크기 (Size)
**크기(Size)**는 타이포그래피 위계를 만드는 가장 직관적인 도구입니다. 제목과 본문의 크기 차이만 뚜렷해도 페이지 구조가 한눈에 읽힙니다.
헷갈리기 쉬운 것 — 글자 크기 vs 박스 크기
Framer 텍스트 레이어에는 크기와 관련된 값이 두 개 있습니다.
| 값 | 의미 | 위치 |
|---|---|---|
| Size (Text 패널) | 글자 자체의 크기(font-size) | 오른쪽 패널 Text 섹션 |
| Width / Height | 텍스트가 담기는 박스 크기 | 오른쪽 패널 상단 (Fixed·Fit Content·Fill) |
박스를 크게 늘려도 글자는 커지지 않습니다. 글자를 키우려면 반드시 Text 패널의 Size 값을 바꿔야 합니다. 반대로 Size를 키웠는데 박스가 Fixed로 고정돼 있으면 글자가 잘리거나 줄바꿈될 수 있으니, 텍스트 박스는 보통 Fit Content로 두는 것이 안전합니다.
크기 바꾸는 법
텍스트 레이어 선택
크기를 바꿀 텍스트를 클릭합니다.
Text 패널에서 Size 값 수정
오른쪽 패널 Text 섹션의 Size 필드에 숫자를 입력하거나 드래그해서 조정합니다. 단위는 기본 px입니다.
필요하면 박스 크기도 확인
Size를 키운 뒤 텍스트가 잘리면, 텍스트 박스의 Width/Height를 Fit Content로 바꿔 글자 크기에 맞춰 자동으로 늘어나게 합니다.
위계를 위한 예시 스케일
정해진 규칙은 아니지만, 아래 비율 정도면 대부분의 사이트에서 무난하게 작동합니다.
| 용도 | 데스크톱 크기 | 모바일 크기 |
|---|---|---|
| H1 (페이지 제목) | 40~56px | 28~36px |
| H2 (섹션 제목) | 28~32px | 22~24px |
| Body (본문) | 16~18px | 15~16px |
| Caption (부가 설명) | 13~14px | 12~13px |
한글은 조금 더 크게 — 한글은 획이 많아 영문보다 작은 크기에서 뭉개져 보이기 쉽습니다. 본문은 최소 14px 이상을 권장하며, 16px 이상이면 대부분의 화면에서 안전합니다.
반응형으로 크기 줄이기
브레이크포인트 탭에서 Phone 선택
캔버스 상단의 브레이크포인트 전환기에서 Phone을 클릭합니다.
해당 텍스트만 다시 선택
Phone 화면에서 크기를 줄일 텍스트(보통 큰 제목)를 선택합니다.
Size 값만 낮추기
Text 패널의 Size를 모바일에 맞는 값으로 낮춥니다. Desktop 값에는 영향이 없습니다.
텍스트 스타일로 저장해서 여러 텍스트에 재사용 중이라면, 스타일 자체의 브레이크포인트별 값을 수정해야 그 스타일을 쓰는 모든 텍스트에 반영됩니다. 텍스트 스타일 만들기는 텍스트·색상 스타일을 참고하세요.