2nd/10_Wiki/Topic_CSS/CSS_Font_Pairings.md

id, title, category, status, verification_status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, created_at, updated_at, review_reason, merge_history, tags, raw_sources, applied_in, github_commit

id	title	category	status	verification_status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	created_at	updated_at	review_reason	merge_history	tags	raw_sources	applied_in	github_commit
css-font-pairings	CSS Font Pairings	Frontend	draft	conceptual		font pairings CSS font pairings font combinations heading body font typography pairing		B	0.86	2026-06-23	2026-06-23			css web frontend w3schools fonts typography	https://www.w3schools.com/css/css_font_pairings.asp

CSS Font Pairings

🎯 한 줄 통찰 (One-line insight)

Great font pairings follow a few rules — fonts should complement each other, can come from a superfamily, should use contrast (e.g. serif with sans-serif), and one font should dominate the hierarchy — illustrated with both web-safe and Google Font combinations. [S1]

🧠 핵심 개념 (Core concepts)

• Complement — a great font combination should harmonize, without being too similar or too different. [S1]
• Font superfamilies — use fonts within the same family designed to work together (e.g. Lucida superfamily variations). [S1]
• Contrast — two fonts that are too similar will often conflict; contrasts, done the right way, bring out the best in each font. Serif-with-sans-serif combinations exemplify this. [S1]
• Hierarchy — one font should be "the boss"; vary size, weight, and color to establish visual hierarchy. [S1]

🧩 추출된 패턴 (Extracted patterns)

• Heading vs body split — assign one font to headings and a contrasting one to body text (e.g. Georgia headings + Verdana body). [S1]
• Serif + sans-serif contrast — pair a serif and a sans-serif to create deliberate contrast. [S1]
• Establish a boss font — make one font dominant via size/weight/color. [S1]

📖 세부 내용 (Details)

The tutorial establishes four guidelines for pairing fonts: [S1]

1. Complement — "A great font combination should harmonize, without being too similar or too different."
2. Font superfamilies — use fonts within the same family designed to work together, like the Lucida superfamily variations.
3. Contrast — "Two fonts that are too similar will often conflict. However, contrasts, done the right way, brings out the best in each font." Serif-with-sans-serif combinations exemplify this approach.
4. Hierarchy — "One font should be the boss." Vary size, weight, and color to establish visual hierarchy.

Web-safe combinations [S1]

• Georgia (headings) + Verdana (body text)
• Helvetica (headings) + Garamond (body text)

Georgia and Verdana example: [S1]

body {
  background-color: black;
  font-family: Verdana, sans-serif;
  font-size: 16px;
  color: gray;
}

h1 {
  font-family: Georgia, serif;
  font-size: 60px;
  color: white;
}

The Helvetica and Garamond pairing is described as another classic combination that uses web safe fonts, but its specific CSS is not displayed in an example box on the page — only a visual demonstration. (Exact CSS: Not found in source.) [S1]

Google Font pairings listed on the page: [S1]

• Merriweather + Open Sans
• Ubuntu + Lora
• Abril Fatface + Poppins
• Cinzel + Fauna One
• Fjalla One + Libre Baskerville
• Space Mono + Muli
• Spectral + Rubik
• Oswald + Noto Sans

Each pairing includes a "Try it Yourself" code example with the font declarations applied to a sample document about Norway. The explicit <link> tags and font-family declarations for the Google Font pairings are not quoted in the page content. (Exact Google Fonts CSS: Not found in source.) [S1]

🛠️ 적용 사례 (Applied in summary)

The page's applied example styles a "Beautiful Norway" sample document — Georgia headings over Verdana body text on a black background — and offers "Try it Yourself" demos for each Google Font pairing. No external project/commit applications found in the source.

💻 코드 패턴 (Code patterns)

Heading/body contrast pattern (language: CSS):

body {
  font-family: Verdana, sans-serif;
}

h1 {
  font-family: Georgia, serif;
}

⚖️ 비교 및 선택 기준 (Comparison & decision criteria)

The page frames pairing as a set of trade-offs: combinations must complement (not too similar, not too different); superfamilies guarantee harmony when fonts are designed together; intentional contrast (serif + sans-serif) outperforms near-identical fonts that conflict; and a clear hierarchy requires one dominant "boss" font set apart by size, weight, and color. Web-safe pairings (Georgia + Verdana, Helvetica + Garamond) favor reliability; the eight Google Font pairings favor expressiveness at the cost of loading external fonts. [S1]

⚖️ 모순 및 업데이트 (Contradictions & updates)

No contradictions found in the source.

✅ 검증 상태 및 신뢰도

• 상태: draft
• 검증 단계: conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
• 출처 신뢰도: B (W3Schools — widely used educational reference, not a primary standards body)
• 신뢰 점수: 0.86
• 중복 검사 결과: 신규 생성 (New discovery)

🔗 지식 그래프 (Knowledge Graph)

• 상위/루트: CSS Tutorial
• 관련 개념: CSS Font Family, CSS Google Fonts, CSS Web Safe Fonts
• 참조 맥락: Referenced when choosing complementary heading and body typefaces for a site's typography system.

📚 출처 (Sources)

• [S1] W3Schools — CSS Font Pairings — https://www.w3schools.com/css/css_font_pairings.asp

📝 변경 이력 (Change history)

• 2026-06-23: Initial draft synthesized from the W3Schools "CSS Font Pairings" page (Astra wiki-curation, P-Reinforce v3.1 format).