Skip to Content
💬 궁금한 점이 있나요? 커뮤니티에서 질문하고 답을 받아보세요 →
요소 (글자·크기·반응형)글자글자 개요

글자 개요

Elements
글자
SizeWeightLine heightLetter spacing
Typography
FWiKi글자

좋은 타이포그래피는 색이나 장식이 아니라 크기 · 굵기 · 행간 · 자간, 이 네 가지 수치의 조합에서 나옵니다. 이 네 가지만 제대로 다뤄도 텍스트의 위계와 가독성이 눈에 띄게 좋아집니다.

네 가지 핵심 속성

속성역할Framer 패널 위치
크기 (Size)위계(제목·본문·캡션 구분)Text → Size
굵기 (Weight)강조, 위계 보조Text → Weight
행간 (Line height)문단 가독성Text → Line height
자간 (Letter spacing)글자 밀도, 인상Text → Letter spacing

반응형 지정 — 네 속성 모두 Desktop·Tablet·Phone 브레이크포인트마다 다르게 지정할 수 있습니다. 특히 제목 크기는 모바일에서 데스크톱보다 작게 주는 것이 일반적입니다.

왜 색보다 크기·굵기가 먼저인가

컬러로 강조를 표현하면 브랜드 컬러가 바뀔 때마다 위계가 흔들립니다. 반대로 크기·굵기로 위계를 잡아두면 컬러를 바꿔도 구조가 그대로 유지됩니다. 이 위키도 포인트 컬러 없이 블랙·화이트·그레이 모노톤만 쓰는데, 제목을 크고 굵게, 본문을 작고 가늘게 하는 것만으로 위계가 분명하게 읽힙니다.

이 카테고리에서 다루는 것

  1. 크기 (Size) — 위계를 만드는 가장 강력한 도구, 텍스트 박스 크기와의 차이
  2. 굵기 (Weight) — 100~900 굵기 체계, 가변 폰트 커스텀 굵기
  3. 행간 (Line Height) — 한글 문단 가독성의 핵심
  4. 자간 (Letter Spacing) — 타이트하고 정돈된 인상 만들기

다음 단계

크기 (Size)부터 시작하세요.

자주 묻는 질문

Last updated on