서체와 위계로
‘격’을 만드는 법 — 타이포그래피
분양 사이트의 ‘격’은 화려한 장식이 아니라 서체와 위계에서 나옵니다. PLOT은 시리프 제목 + 산세리프 본문으로 품격과 가독성을 나누고, 큰 스케일 대비로 위계를 세우며, 한글은 keep-all로 어절 단위로 끊고, 웹폰트 없이 시스템 폰트로 외부 CDN 호출 0을 만들어 첫 글자가 즉시 뜨게 합니다. 이 타이포 설계는 PLOT 제작에 바로 포함됩니다.
- 시리프 제목 + 산세리프 본문 — 제목은 격, 본문은 가독성. 두 서체의 대비가 곧 위계입니다.
- 위계는 큰 스케일 대비로 — 제목과 본문 크기 차이가 작으면 ‘급하게 만든 느낌’이 납니다.
- 한글은 word-break:keep-all로 어절 단위 줄바꿈 — 단지명·핵심 문구가 어색하게 잘리지 않습니다.
- 웹폰트 없이 시스템 폰트(외부 CDN 0)로 첫 글자 즉시 노출, clamp()로 모바일 가변 — 이 설계는 PLOT 제작에 바로 포함됩니다.
우리는 왜 ‘격’을 서체부터 잡나?
방문자는 분양 사이트의 글을 읽기 전에 글자의 모양을 먼저 봅니다. 제목 서체가 무엇인지, 제목과 본문의 크기 차이가 얼마나 나는지, 줄이 어디서 끊기는지 — 이 세 가지만으로 ‘여기는 정돈된 곳인가, 급하게 찍어낸 곳인가’가 0.1초 만에 전달됩니다. 분양은 수억 단위의 결정이라, 이 첫인상의 격이 곧 신뢰로 이어집니다. 그래서 우리는 색이나 사진보다 먼저 서체와 위계를 잡습니다. 격은 비싼 장식에서 오는 게 아니라, 글자가 제자리에 정확한 크기로 놓일 때 생깁니다.
제목과 본문 서체는 왜 다르게 쓰나?
제목과 본문은 하는 일이 다릅니다. 제목은 ‘격’과 분위기를 담당하고, 본문은 ‘오래 읽어도 편한 가독성’을 담당합니다. 그래서 우리는 제목에 시리프(명조 계열)를 써서 단지의 무게와 품격을 만들고, 본문에는 산세리프(고딕 계열)를 써서 작은 글씨에서도 획이 흐트러지지 않게 합니다. 이 두 서체의 대비 자체가 위계가 됩니다. 방문자는 ‘여기가 제목, 여기가 설명’을 머리로 구분할 필요 없이, 모양만 보고 자연스럽게 읽습니다. 색이 격을 만드는 방식은 자매 노트 색으로 단지의 정체성을 만드는 법에서 이어집니다.
위계는 어떻게 ‘눈에 보이게’ 만드나?
위계는 ‘무엇이 더 중요한가’를 크기·굵기로 보여 주는 것입니다. 핵심은 대비를 크게 두는 것입니다. 제목이 본문보다 살짝만 크면 둘 다 어중간해 보이고, 그 어중간함이 곧 ‘아마추어 느낌’입니다. PLOT은 제목·소제목·본문·캡션의 크기 차이를 분명하게 벌려서, 화면을 훑기만 해도 읽는 순서가 저절로 잡히게 합니다. 굵기도 한 축입니다. 제목은 무겁게, 본문은 가볍게 두면 같은 화면 안에서 ‘봐야 할 것’과 ‘읽을 것’이 분리됩니다. 이렇게 정리된 위계는 정렬·여백과 만나 완성됩니다. 정렬 쪽 이야기는 자매 노트 레이아웃과 정렬로 신뢰를 만드는 법에서 다룹니다.
약한 타이포와 위계 있는 타이포는 뭐가 다른가?
아래는 같은 내용을 두고, 위계가 약한 타이포와 PLOT이 실제로 쓰는 위계 있는 타이포를 항목별로 나란히 둔 것입니다. 오른쪽이 ‘격’이 읽히는 방향입니다.
| 항목 | 약한 타이포 | 위계 있는 타이포 (PLOT) |
|---|---|---|
| 서체 | 제목·본문 한 서체로 통일 | 시리프 제목 + 산세리프 본문으로 역할 분리 |
| 크기 대비 | 제목이 본문보다 살짝만 큼 → 어중간 | 제목·본문·캡션 스케일을 크게 벌려 읽는 순서가 저절로 |
| 한글 줄바꿈 | 글자 단위로 끊겨 단지명이 잘림 | keep-all로 어절 단위 — 단지명·핵심 문구가 통째로 |
| 폰트 로딩 | 외부 웹폰트 수백 KB → 첫 글자 지연 | 시스템 폰트로 외부 CDN 0 → 첫 글자 즉시 |
| 모바일 | 고정 크기 → 작은 화면에서 깨짐 | clamp() 가변 타이포로 화면 폭에 맞춰 자동 조정 |
▲ 오른쪽은 장식을 더한 게 아니라, 서체 역할을 나누고 대비를 분명히 한 것뿐입니다. 같은 정보라도 격이 다르게 읽힙니다.
한글 줄바꿈을 왜 keep-all로 잡나?
브라우저 기본값은 한글을 글자 단위로 끊습니다. 그래서 ‘운정아이파크포레스트’가 줄 끝에서 ‘운정아이파크포레/스트’처럼 어색하게 잘립니다. 단지명·세일즈포인트는 분양 사이트의 핵심 문구인데, 그게 깨지면 격이 같이 깨집니다. 우리는 한글 사이트에 word-break:keep-all을 기본으로 걸어, 띄어쓰기(어절) 단위로만 줄이 바뀌게 합니다. 단어가 통째로 붙어 다니니 읽기 편하고, 단지명이 한눈에 들어옵니다. 이건 디자인 취향이 아니라 한글 사이트의 표준에 가깝습니다. 우리는 모든 한글 데모에 이 규칙을 일괄 적용했습니다.
웹폰트를 왜 안 쓰고 시스템 폰트로 가나?
예쁜 웹폰트를 외부에서 불러오면 수백 KB를 추가로 받아옵니다. 그 사이 첫 화면 글자가 늦게 뜨거나 모양이 바뀌어(FOIT/FOUT), 광고를 누르고 들어온 방문자를 폰트가 다 받아질 때까지 기다리게 만듭니다. 분양에서 그 몇 초는 그대로 이탈입니다. 그래서 PLOT은 기기에 이미 깔린 시스템 폰트(애플 SD산돌고딕Neo·삼성 원UI·맑은 고딕 등)와 시리프 스택을 조합해 외부 CDN 호출 0으로 갑니다. 다운로드 대기가 없으니 첫 글자가 즉시 뜨고, 위계는 폰트가 아니라 크기·굵기·서체 대비로 만들기 때문에 ‘격’은 그대로 지킵니다. 속도가 전환에 미치는 영향은 분양 사이트 속도 최적화에서 더 다룹니다.
모바일에서 글자 크기는 어떻게 자동으로 맞추나?
분양 사이트 방문자의 대부분은 모바일입니다. 그런데 PC 기준으로 잡은 고정 크기를 그대로 두면, 작은 화면에서 제목이 화면을 뚫고 나가거나 본문이 답답하게 작아집니다. 우리는 clamp()로 가변 타이포를 씁니다. ‘최소–권장–최대’ 세 값을 주면, 글자 크기가 화면 폭에 따라 그 사이를 부드럽게 오갑니다. 작은 폰에서는 줄어들되 너무 작지 않게, 큰 화면에서는 커지되 과하지 않게. 단계마다 미디어쿼리를 따로 쓰지 않아도 한 줄로 모든 화면에 맞춰집니다. 그래서 위계와 가독성이 기기와 상관없이 유지됩니다. 2026년 웹 타이포 흐름은 2026 웹 디자인 트렌드에서 정리했습니다.
분양 사이트 제작 전체 흐름이 궁금하다면 → 분양 사이트 제작 안내.
자주 묻는 질문
분양 사이트에서 타이포그래피가 왜 ‘격’을 좌우하나요?
제목과 본문 서체를 왜 다르게 쓰나요?
한글 줄바꿈에 keep-all을 쓰면 뭐가 달라지나요?
웹폰트 대신 시스템 폰트를 쓰면 손해 아닌가요?
우리 현장의 ‘격’, 어떤 서체로 만들까?
현장 정보만 주시면, 그 단지에 맞는 서체 조합과 위계 체계를 견적과 함께 제안합니다. 시리프·산세리프 조합, keep-all, 시스템 폰트, clamp 가변 타이포까지 — 이 타이포 설계는 별도 옵션이 아니라 PLOT 제작에 바로 포함됩니다.
무료 견적 받기※ 본 글의 타이포그래피 예시·화면은 PLOT이 역량 시연을 위해 자체 제작한 데모·리디자인 컨셉이며, 실제 의뢰·감수·승인을 받은 것이 아닙니다. 169개·36종+는 PLOT의 실제 작업·라이브러리 수치이고, 검증되지 않은 외부 통계·후기는 사용하지 않았습니다(날조 0). 분양 관련 표기는 해당 현장의 입주자모집공고 및 분양계약을 우선합니다. 최종 업데이트 .