/* ===================================================================== CYPHIA SOLUTIONS LLC — /why/zh Chinese typographic layer. Loaded AFTER deck.css; overrides only. Four things Chinese changes, and why: 1 · FACES. Cormorant Garamond carries no CJK glyphs. The display voice becomes Noto Serif SC; the body voice Noto Sans SC. IBM Plex Mono is kept FIRST in the mono stack so codes, indices and numerals (F—01, 07 /16, $46,800) still render in the instrument face, with Noto Sans SC catching only the Chinese characters after it. 2 · NO ITALICS. Chinese has no italic tradition; browsers fake one by shearing the glyph, which looks like a rendering fault. Every italic in the base sheet is reset to normal here, and emphasis is carried by colour and weight instead. 3 · SMALLER, LOOSER. A Han glyph fills its em square, so it reads noticeably larger than Latin lowercase at the same px. Display sizes come down ~13%, and line-height goes up sharply — 1.05 is right for a Latin headline and unreadable for a Chinese one. 4 · TIGHTER TRACKING. 0.24em letter-spacing opens Latin small-caps nicely and shreds a Chinese phrase into loose characters. ===================================================================== */ :root { --serif: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', STSong, serif; --sans: 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; --mono: 'IBM Plex Mono', 'Noto Sans SC', 'PingFang SC', ui-monospace, monospace; } /* --------------------------------------------------------------------- 1 · kill every synthesized italic --------------------------------------------------------------------- */ .display em, .pull, .struck li, .col-claim, .case-ask, .fault .said, .ledger .t em, .card h3, .shifts .to, .contact .v, .step h4, .sys h3, .term .v, .case-do em { font-style: normal; } /* emphasis without slant: gold plus a half-step of weight */ .display em, .ledger .t em, .case-do em { font-weight: 600; } /* --------------------------------------------------------------------- 2 · display voice — smaller, much looser, slight positive tracking --------------------------------------------------------------------- */ .display { font-weight: 500; font-size: 76px; line-height: 1.3; letter-spacing: 0.015em; max-width: 1300px; } .display.xl { font-size: 88px; line-height: 1.26; } .display.sm { font-size: 58px; line-height: 1.34; } .display.xs { font-size: 44px; line-height: 1.38; } .pull { font-size: 32px; line-height: 1.62; letter-spacing: 0.012em; max-width: 1230px; } /* --------------------------------------------------------------------- 3 · reading voices — Chinese needs far more leading than Latin --------------------------------------------------------------------- */ .lede { font-size: 22px; line-height: 1.9; letter-spacing: 0.01em; max-width: 940px; } .body { font-size: 19px; line-height: 2.0; letter-spacing: 0.01em; max-width: 840px; } /* --------------------------------------------------------------------- 4 · the instrument layer — tracking down, since Han glyphs are already full-width and do not need opening up --------------------------------------------------------------------- */ .rail { letter-spacing: 0.16em; } .rail-section{ letter-spacing: 0.2em; } .tag { letter-spacing: 0.2em; } .micro { letter-spacing: 0.13em; line-height: 2.05; } .col-head { letter-spacing: 0.18em; } .card .n, .ledger .n, .step .n, .disc li span { letter-spacing: 0.16em; } .term .k { letter-spacing: 0.14em; } .sys .kind { letter-spacing: 0.14em; } .chip { letter-spacing: 0.06em; font-size: 12px; padding: 7px 11px; } .fault .code { letter-spacing: 0.14em; } .fsbtn { letter-spacing: 0.14em; } .help h2 { letter-spacing: 0.2em; } /* the spine index stays Latin — leave its wide tracking alone */ /* --------------------------------------------------------------------- 5 · components --------------------------------------------------------------------- */ .struck li { font-size: 38px; line-height: 1.5; } .col-claim { font-size: 29px; line-height: 1.55; margin-bottom: 18px; } .col-reply { font-size: 17.5px; line-height: 2.0; } .ledger .t { font-size: 20px; line-height: 1.75; } .ledger li { padding: 13px 10px 13px 4px; } .card h3 { font-size: 29px; line-height: 1.42; margin-bottom: 14px; } .card p { font-size: 16px; line-height: 1.95; } .card { padding: 32px 28px 36px; } .term .k { font-size: 10px; } .term .v { font-size: 72px; } .total .v { font-size: 108px; } /* Chinese states these six faults in ~60% of the characters English needs, so the cells are given back the size the shorter text affords */ .fault .said { font-size: 19.5px; line-height: 1.64; } .fault .dx { font-size: 14.5px; line-height: 1.85; } .faults { gap: 26px 50px; } .shifts .from { font-size: 18px; } .shifts .to { font-size: 26px; line-height: 1.5; } .shifts li { padding: 12px 6px; } .case { padding: 34px 40px 38px; } .case-ask { font-size: 29px; line-height: 1.5; } .case-do { font-size: 27px; line-height: 1.72; } .sys h3 { font-size: 25px; line-height: 1.4; } .sys p { font-size: 14px; line-height: 1.92; } .work { gap: 22px; } .disc li { font-size: 18px; line-height: 1.7; padding: 12px 0; } .step h4 { font-size: 25px; line-height: 1.45; margin-bottom: 5px; } .step p { font-size: 15px; line-height: 1.88; } .seq { gap: 17px; } .split { gap: 66px; } .contact .v { font-size: 27px; line-height: 1.45; } .contact .k { font-size: 10px; } .help dd { font-size: 16px; line-height: 1.8; } .help dt { font-size: 11px; } /* --------------------------------------------------------------------- 6 · line breaking — keep Chinese punctuation off the start of a line --------------------------------------------------------------------- */ .display, .pull, .lede, .body, .col-claim, .col-reply, .fault .said, .fault .dx, .card p, .step p, .sys p, .ledger .t { line-break: strict; overflow-wrap: normal; }