design-isms/typography.html at main · lidge-jun/design-isms · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Typography Pairings — Design -isms</title>
<meta name="description" content="헤딩·본문 폰트 페어링 카탈로그. 한글 중심·영문 클래식·모던 산세리프·에디토리얼·ISM 연계 페어링 20종과 라이브 스페시멘을 제공합니다.">
<link rel="icon" type="image/svg+xml" href="./favicon.svg">
<link rel="preconnect" href="https://cdn.jsdelivr.net">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./assets/css/style.css?v=20260718-encyc">
<link rel="stylesheet" href="./assets/css/theme-atlas.css?v=20260718-encyc">
<link rel="stylesheet" href="./assets/css/nav.css?v=20260718-encyc">
<link rel="stylesheet" href="./assets/css/catalog.css?v=20260718-encyc">
<link rel="stylesheet" href="./assets/css/effects.css?v=20260718-encyc">
<link rel="stylesheet" href="./assets/css/typography.css?v=20260718-encyc">
<link rel="stylesheet" href="./assets/css/runtime-states.css?v=20260718-encyc">
</head>
<body>

<a class="skip-link" href="#main-content">본문으로 건너뛰기</a>

<header class="site-header">
  <div class="header-inner">
    <a class="logo logo-link" href="./index.html" aria-label="Design -isms home">
      <div class="logo-sketch"><img src="./assets/icons/atlas-mark.svg" alt="" aria-hidden="true" width="14" height="14"></div>
      Design -isms
    </a>
    <nav class="header-right" aria-label="Primary navigation">
      <a class="nav-link" data-nav-axis="isms" href="./index.html">Isms</a>
      <div class="nav-dropdown" data-nav-axis="catalog">
        <button class="nav-link nav-dropdown-trigger" type="button" data-catalog-trigger aria-expanded="false" aria-controls="catalog-nav-list" aria-current="page">Catalog <span class="nav-dropdown-caret" aria-hidden="true">▾</span></button>
        <ul class="nav-dropdown-list" id="catalog-nav-list" role="list">
        <li><a href="./effects.html" data-catalog-target="effects">Effects</a></li>
        <li><a href="./color.html" data-catalog-target="color">Color</a></li>
        <li><a href="./typography.html" data-catalog-target="typography" data-catalog-current="true">Typography</a></li>
        <li><a href="./layout.html" data-catalog-target="layout">Layout</a></li>
        <li><a href="./motion.html" data-catalog-target="motion">Motion</a></li>
        </ul>
      </div>
      <a class="nav-link" data-nav-axis="faq" href="./faq.html">FAQ</a>
      <a class="nav-link nav-link--external" data-nav-axis="github" href="https://github.com/lidge-jun/design-isms" target="_blank" rel="noopener">
        GitHub <span aria-hidden="true">↗</span>
      </a>
      <button class="lang-toggle" data-nav-axis="lang" id="lang-toggle" type="button" aria-label="언어 전환 / Switch language">
        <span class="lang-option" data-lang="ko">한</span>
        <span class="lang-divider" aria-hidden="true">/</span>
        <span class="lang-option" data-lang="en">EN</span>
      </button>
      <!-- data-sot:typography-nav-count:start --><span class="header-count" data-nav-axis="count">20 pairings</span><!-- data-sot:typography-nav-count:end -->
    </nav>
  </div>
</header>

<main id="main-content">
  <section class="catalog-hero" aria-labelledby="catalog-title">
    <h1 id="catalog-title">Typography Pairings <span class="catalog-title-kr">타이포그래피 페어링</span></h1>
    <p>헤딩·본문 폰트 페어링 카탈로그. 라이브 스페시멘, 타입 스케일, 한글 지원 정보를 함께 제공합니다.</p>
  </section>

  <div class="typo-toolbar">
    <input type="search" id="typography-search" placeholder="페어링 검색 (명조, serif, 코딩…)" aria-label="페어링 검색">
    <div class="typo-filter-row" id="typography-category-filter" role="group" aria-label="분류 필터">
      <button type="button" class="active" data-category="all">All</button>
      <button type="button" data-category="Korean">Korean</button>
      <button type="button" data-category="English Classic">English Classic</button>
      <button type="button" data-category="Modern Sans">Modern Sans</button>
      <button type="button" data-category="Editorial">Editorial</button>
      <button type="button" data-category="ISM Linked">ISM Linked</button>
    </div>
    <span class="typo-result-count" id="typography-result-count" aria-live="polite"></span>
  </div>

  <section class="typo-grid" id="typography-grid" aria-label="페어링 카탈로그" aria-busy="true"></section>

  <div class="modal-overlay" id="typography-modal-overlay" aria-hidden="true">
    <div class="modal-container" id="typography-modal-dialog" role="dialog" aria-modal="true" aria-labelledby="typography-modal-title" tabindex="-1">
      <button class="modal-close" id="typography-modal-close" type="button" aria-label="닫기">✕</button>
      <div class="modal-scroll" id="typography-modal-content"></div>
    </div>
  </div>

  <div class="lightbox" id="typography-lightbox" role="dialog" aria-modal="true" aria-label="Guide image preview" aria-hidden="true">
    <button class="lightbox-close" id="typography-lightbox-close" type="button" aria-label="닫기">✕</button>
    <img class="lightbox-image" id="typography-lightbox-image" alt="">
  </div>
</main>

<footer class="site-footer">
  <span>Design -isms Reference Board</span>
  <span>Typography Pairings catalog</span>
</footer>

<script src="./assets/js/app-dialog.js?v=20260718-encyc"></script>
<script src="./assets/js/app-runtime.js?v=20260718-encyc"></script>
<script src="./assets/js/nav-dropdown.js?v=20260718-encyc"></script>
<script src="./assets/js/catalog-shell.js?v=20260718-encyc"></script>
<script src="./assets/js/typography-fonts.js?v=20260718-encyc"></script>
<script src="./assets/js/typography.js?v=20260718-encyc"></script>
</body>
</html>