개념 및 지식 허브
웹 타이포그래피 및 어울리는 폰트 조합 설계 가이드
웹 타이포그래피 및 어울리는 폰트 조합 설계 가이드
본 도구는 100% 클라이언트 환경(브라우저)에서 작동합니다. 사진, 동영상, 음성 또는 PDF 문서가 외부 서버로 절대 전송되지 않으며 로컬 메모리에서 안전하게 처리됩니다.
핵심 아키텍처 및 수학 공식
Visual Harmony = Superfamily Variation OR (High Contrast + Similar X-Height)
The Golden Rule of pairing is to avoid conflict. Do not pair two distinct sans-serif fonts that look 90% identical. Pair fonts that are extremely different (Serif Header + Sans Body) but share the same underlying geometric proportions.
모범 사례 및 필수 지침
- The 2 Font Limit: Never use more than two distinct font families on a single webpage. Use Font A for all Headers (H1-H6), and Font B for all Body Text and Buttons. Use font weights (bold, italic) to create further distinction.
- Pair a Serif with a Sans Serif: This is the most reliable pairing method in graphic design. A classic Serif (like Merriweather) commands attention for headlines, while a clean Sans Serif (like Open Sans) ensures readable paragraphs.
- Check the X-Height: The 'x-height' is the height of lowercase letters. Fonts that look great together often share the exact same x-height, ensuring horizontal visual rhythm remains consistent across the page.
자주 묻는 질문 (FAQ)
Does loading multiple fonts hurt my SEO?
Yes. Every unique font family and font weight requires a separate HTTP request, which blocks rendering and hurts your Core Web Vitals. Never load font weights you aren't actively using.
What are Variable Fonts?
Variable fonts bundle every possible weight (from 100 to 900) into a single, highly compressed file. This allows designers to use infinite weight variations without the severe performance penalty of loading 9 separate font files.
Should I use system fonts instead?
Using a system font stack (e.g., `-apple-system, Segoe UI, Roboto`) requires zero downloads, resulting in literal instant rendering. It is highly recommended for massive SaaS dashboards where performance is critical.