/* =========================================================================== Korean typography. Loaded only on /kr/ pages — base.html links this file when page.lang is "kr", so English pages download none of it. Two problems this file exists to solve: 1. Until now the Korean pages shipped NO webfont at all. The stack was system-only, so a Mac reader got Apple SD Gothic Neo (fine) and a Windows reader got 맑은 고딕 — a face that reads as "site built in 2012" whatever it happens to say. Pretendard is the de facto standard for Korean web today, and is the closest Korean companion to the -apple-system look the English pages already have. 2. Every metric here was tuned for English. Latin letters vary in height and sit on a baseline with ascenders and descenders; Hangul syllables are full square blocks that fill the em box. The same line-height that looks airy in English looks crushed in Korean, and the same tracking that looks normal in English looks gappy. Both are corrected below. =========================================================================== */ /* --------------------------------------------------------------------------- Pretendard, self-hosted and subset. Two faces, split by unicode-range: core - every character this site actually renders today (501 Hangul syllables + Latin + punctuation), 137 KB. ext - the rest of the common Korean set (KS X 1001), 301 KB. "ext" is declared FIRST and "core" second on purpose. Both cover the Hangul block, and where two faces of one family match the same codepoint the later declaration wins — so core serves everything on the site today and the browser never requests ext at all. The moment somebody publishes a post containing a syllable outside core, ext is fetched for that page and the text still renders in Pretendard instead of falling back mid-sentence. Changing the content cannot break the page; it can only cost more. Both files are ONE variable font instanced to wght 400-900, the range this site uses. The five static weights it replaces would have been 1.35 MB. Regenerate after a large content change: tools/build-korean-font.sh --------------------------------------------------------------------------- */ @font-face { font-family: 'Pretendard'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('/assets/fonts/pretendard-ko-ext.woff2') format('woff2'); unicode-range: U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7A3, U+D7B0-D7FF; } @font-face { font-family: 'Pretendard'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('/assets/fonts/pretendard-ko-core.woff2') format('woff2'); unicode-range: U+000A, U+0020-007E, U+00A0-00AC, U+00AE-00B4, U+00B6-0130, U+0132-0148, U+014A-0162, U+0164-017E, U+0192, U+01FA-01FF, U+0218-021B, U+02B0, U+02B2-02B3, U+02B7-02B8, U+02C6-02C7, U+02D8-02DD, U+02E1-02E3, U+0300-0301, U+0303, U+0391-03A1, U+03A3-03A9, U+03B1-03C1, U+03C3-03C9, U+0401, U+0410-044F, U+0451, U+1D43, U+1D47-1D49, U+1D4D, U+1D4F-1D50, U+1D52, U+1D56-1D58, U+1D5B, U+1D62-1D65, U+1D9C, U+1DA0, U+1DBB, U+1E80-1E85, U+1EF2-1EF3, U+2002-2007, U+2009-200A, U+2012-2015, U+2018-201A, U+201C-201E, U+2020-2023, U+2025-2026, U+2030, U+2032-2033, U+2039-203B, U+2044, U+2060, U+2070-2071, U+2074-208C, U+2090-2093, U+2095-209C, U+20A9, U+20AC, U+20B9-20BA, U+2103, U+2109, U+2122, U+212E, U+2153, U+215A-215F, U+2190-2199, U+2202, U+220F, U+2211-2212, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+2460-2473, U+24B6-24CF, U+24EA-24F4, U+24FF, U+25A0-25A1, U+25AA, U+25CA-25CB, U+25CF, U+25E6, U+25EF, U+2600, U+2605-2606, U+263C, U+2661, U+2665, U+266A, U+26A0, U+2713, U+2717, U+2776-277F, U+2C7C, U+3008-300F, U+3131-3163, U+321C, U+AC00-AC01, U+AC04, U+AC08, U+AC10, U+AC14-AC15, U+AC19, U+AC1C-AC1D, U+AC70, U+AC74, U+AC77-AC78, U+AC80-AC81, U+AC83, U+AC8C, U+AC90, U+ACA0, U+ACA8-ACAA, U+ACAC, U+ACB0, U+ACB8, U+ACBC-ACBD, U+ACC4, U+ACE0, U+ACE7-ACE8, U+ACF3, U+ACF5, U+ACFC, U+AD00, U+AD11, U+AD50, U+AD6C-AD6D, U+AD70, U+AD8C, U+ADC0, U+ADE0, U+ADF8-ADF9, U+ADFC, U+AE00, U+AE08-AE09, U+AE30, U+AE34, U+AE38, U+AE41, U+AE4C, U+AE68, U+AED8, U+AEF4, U+AFB8, U+AFC8, U+B05D, U+B07C, U+B080, U+B098-B099, U+B09C, U+B0A0, U+B0A8-B0A9, U+B0AB-B0AD, U+B0B4, U+B0D0, U+B0E5, U+B108, U+B110, U+B118, U+B123-B124, U+B144, U+B155, U+B178, U+B180, U+B18D, U+B192-B193, U+B1CC, U+B204, U+B20C, U+B214, U+B258, U+B274, U+B290, U+B294, U+B298, U+B2A5, U+B2C8-B2C9, U+B2CC, U+B2D0, U+B2D8-B2D9, U+B2E4-B2E5, U+B2E8, U+B2EB-B2EC, U+B2F4-B2F5, U+B2F9, U+B300, U+B354, U+B358, U+B369, U+B370, U+B3C4-B3C5, U+B3CC, U+B3D5, U+B3D9, U+B3FC, U+B418, U+B41C, U+B429, U+B450, U+B454, U+B458, U+B4A4, U+B4DC, U+B4E0, U+B4E4, U+B4F1, U+B514, U+B530, U+B54C, U+B5A4, U+B5BB, U+B610, U+B6F0, U+B73B, U+B77C-B77D, U+B780, U+B78C-B78D, U+B790, U+B798-B799, U+B7A8, U+B7AC, U+B7C9, U+B7F0, U+B7FC, U+B800, U+B807-B809, U+B824-B825, U+B828, U+B838, U+B85C-B85D, U+B860, U+B86F, U+B8CC, U+B8E8, U+B974, U+B978, U+B97C, U+B984, U+B98E, U+B9AC, U+B9B0, U+B9B4, U+B9BC-B9BD, U+B9C8-B9C9, U+B9CC, U+B9CE, U+B9D0, U+B9DD-B9DE, U+B9E4, U+B9F5, U+BA38, U+BA3C, U+BA54, U+BA70, U+BA74, U+BA85, U+BA87, U+BAA8-BAA9, U+BAAC, U+BABB, U+BB34, U+BB38, U+BB3B-BB3C, U+BB49, U+BBC0, U+BBF8, U+BBFC, U+BC00, U+BC0F, U+BC14-BC15, U+BC18, U+BC1B-BC1C, U+BC29, U+BC84, U+BC88, U+BC8C, U+BC94-BC95, U+BCA8, U+BCC0, U+BCC4, U+BCD1, U+BCF4-BCF5, U+BCF8, U+BCFC, U+BD05, U+BD10, U+BD80, U+BD84, U+BD88, U+BDF0, U+BE0C, U+BE14, U+BE44, U+BE60, U+BE68, U+BED0, U+BED7, U+BEE3, U+BF08, U+BFCC, U+BFD0, U+C068, U+C0AC, U+C0B0, U+C0B6, U+C0BC, U+C0C1, U+C0DD, U+C11C-C11D, U+C120, U+C124, U+C131, U+C138, U+C140, U+C14B, U+C154, U+C158, U+C168, U+C18C-C18D, U+C190, U+C218, U+C220, U+C288, U+C2A4, U+C2AC, U+C2B5, U+C2B9, U+C2DC-C2DD, U+C2E0, U+C2E4, U+C2EC-C2ED, U+C313, U+C4F0, U+C529, U+C52C, U+C544, U+C548-C54A, U+C54C, U+C555, U+C558, U+C55E, U+C560-C561, U+C57C-C57D, U+C591, U+C5B4, U+C5B8, U+C5BB-C5BC, U+C5C4-C5C9, U+C5D0, U+C5D8, U+C5EC-C5ED, U+C5F0, U+C5F4, U+C5FC, U+C600-C601, U+C608, U+C624, U+C62C, U+C635, U+C637, U+C640, U+C644, U+C654, U+C65C, U+C678, U+C694-C695, U+C6A9, U+C6B0, U+C6B4, U+C6B8, U+C6CC, U+C6D0, U+C6D4, U+C6F0, U+C704, U+C720-C721, U+C73C, U+C740, U+C744, U+C74C, U+C751, U+C758, U+C774, U+C778, U+C77C-C77D, U+C784-C785, U+C788-C789, U+C790-C791, U+C798, U+C7A0-C7A1, U+C7A5, U+C7AC, U+C800-C801, U+C804, U+C808, U+C810-C811, U+C815, U+C81C, U+C820, U+C84C, U+C870-C871, U+C874, U+C878, U+C881, U+C885, U+C88B-C88C, U+C8FC, U+C904, U+C90D, U+C911, U+C99D, U+C9C0-C9C1, U+C9C4, U+C9C8, U+C9D0-C9D1, U+C9DC, U+C9E7, U+CABD, U+CB59, U+CC28-CC29, U+CC2C, U+CC30, U+CC3D-CC3E, U+CC44, U+CC59, U+CC98-CC99, U+CC9C, U+CCA8, U+CCAB, U+CCAD, U+CCB4, U+CCD0, U+CCE4, U+CD08, U+CD94-CD95, U+CD9C, U+CDA9, U+CDE8, U+CE20-CE21, U+CE58, U+CE5C, U+CE60, U+CE68, U+CE74, U+CF1C, U+D06C, U+D074, U+D0A4, U+D0AC, U+D0C0, U+D0C8, U+D0D5, U+D0DD, U+D130, U+D134, U+D14C, U+D1A0-D1A1, U+D1B5, U+D1F4, U+D22C, U+D234, U+D2B8-D2B9, U+D2C0, U+D2F0-D2F1, U+D30C-D30D, U+D310, U+D314, U+D329, U+D398, U+D39C, U+D3A0, U+D3B8, U+D3C9, U+D3EC, U+D45C, U+D480, U+D488, U+D48D, U+D504, U+D508, U+D50C, U+D53C, U+D544, U+D558-D559, U+D55C, U+D560, U+D568-D569, U+D56D, U+D574, U+D588-D589, U+D5A5, U+D5C8, U+D5D8, U+D5DB, U+D604, U+D608, U+D611, U+D615, U+D638, U+D63C, U+D648, U+D654-D655, U+D658, U+D65C, U+D669, U+D68C, U+D69F, U+D6A8, U+D6C4, U+D6E8, U+D720, U+D734, U+D754, U+D76C, U+D788, U+D798, U+E131-E147, U+E14E-E162, U+F000-F057, U+FFE6, U+1F130-1F149, U+1F150-1F169, U+1F170-1F189, U+F0000; } /* --------------------------------------------------------------------------- Korean metrics. Scoped to html[lang="ko"] even though this file only loads on Korean pages, so that the rules stay self-describing and survive being concatenated into a bundle later. The attribute is "ko", not "kr": the site keys Korean as `kr` everywhere else (URL prefix, data key, page.lang), but that is the country code and takes the language subtag. languages.js maps the one to the other. See the matching note in base.css. --------------------------------------------------------------------------- */ html[lang="ko"] body, html[lang="ko"] input, html[lang="ko"] button, html[lang="ko"] textarea, html[lang="ko"] select { font-family: var(--font-stack-kr); /* Hangul is monospaced-square by construction, so text set at the tracking Latin wants reads loose. Korean design systems land between -0.01em and -0.02em for running text; the Latin runs mixed into these sentences (PRP, C-arm, ABPMR, phone numbers) still look right at this value. */ letter-spacing: -0.015em; } /* Headings: tighter tracking as the type gets larger, which is the same optical correction Latin display type needs, only Korean needs more of it. */ html[lang="ko"] h1, html[lang="ko"] h2, html[lang="ko"] h3, html[lang="ko"] h4 { letter-spacing: -0.03em; /* base.css sets 1.25 for every heading. That is a Latin value: it works because lowercase Latin only fills about 70% of the em box, so the gap between lines is larger than the number suggests. Hangul fills the box, and 1.25 puts the blocks almost edge to edge. */ line-height: 1.4; } /* The hero headline is the extreme case — 50px at line-height 1.1, which on Hangul reads as two bars stacked with no air between them. */ html[lang="ko"] .hero__title { line-height: 1.32; letter-spacing: -0.035em; } /* Running text. base.css is at 1.6 and several inner blocks inherit 1.35-1.5 from root.css, which is cramped for Hangul — Korean body copy conventionally sits near 1.7, and this text is read by patients looking up a diagnosis. */ html[lang="ko"] p, html[lang="ko"] li, html[lang="ko"] dd, html[lang="ko"] summary, html[lang="ko"] .banner__body { line-height: 1.72; } /* Small print — chips, tags, badges, the action bar. 1.72 is too open at this size and pushes fixed-height UI out of shape, but 1.35 is still too tight. */ html[lang="ko"] .actionbar, html[lang="ko"] .perks li, html[lang="ko"] .tag, html[lang="ko"] .cs-phone-hours, html[lang="ko"] .footer__list { line-height: 1.55; } /* Numerals sit with Latin metrics, not Hangul ones. Phone numbers, ratings and the stat blocks are the only places digits carry meaning on their own, and the negative tracking above makes them look cramped. */ html[lang="ko"] .cs-phone-number, html[lang="ko"] .stat__value, html[lang="ko"] time { letter-spacing: 0; font-feature-settings: 'tnum' 1; } /* --------------------------------------------------------------------------- No synthetic italics. Hangul has no italic. Pretendard ships no oblique face and neither does any system Korean font, so `font-style: italic` makes the browser SLANT the upright glyphs itself — a shear transform on square blocks, which is why it reads as a rendering fault rather than as emphasis. Korean sets emphasis with weight, colour or 방점, never with slope. Two rules ask for it: .hours-note (the caveat under the email address and the opening hours) and .prose blockquote (pulled quotes in blog posts). Both are correct in English and both are turned off here. Any Latin caught inside those elements loses its slant too, which is the right trade — a sentence that is half-slanted looks worse than one that is not slanted. --------------------------------------------------------------------------- */ html[lang="ko"] .hours-note, html[lang="ko"] .prose blockquote, html[lang="ko"] em, html[lang="ko"] i, html[lang="ko"] address { font-style: normal; } /* .hours-note was carrying the whole distinction between a caveat and the text around it in that slant. With the slant gone it needs the difference back, so it takes the muted colour Korean web copy uses for the same job. */ html[lang="ko"] .hours-note { /* --color-3 is the body slate; this sits one step back from it. There is no muted-text token in tokens.css, so rather than invent one for a single rule it borrows the slate at reduced opacity, which tracks the palette if --color-3 ever moves. */ color: color-mix(in srgb, var(--color-3) 78%, transparent); }