/* Young Marketers — webfaces. TWO faces, split by language. Both are geometric sans of the same 1920s lineage, both OFL-licensed, both variable across 100–900 with true italics. English → Jost assets/fonts/Jost-VariableFont_wght.ttf Vietnamese→ Josefin Sans assets/fonts/JosefinSans-VariableFont_wght.ttf WHY THE SPLIT. Jost does not cover Vietnamese. Verified against its own cmap: 92 of the 134 precomposed Vietnamese characters are absent, including Ơ ơ Ư ư and the whole of Latin Extended Additional (U+1EA0–U+1EF9). Josefin Sans covers all 134 — verified the same way. Set Vietnamese in Jost and "Nguyễn", "Phạm", "Đặng" break out of the face mid-word into an OS fallback. WHY JOSEFIN SANS AND NOT SOMETHING ELSE. Its cap height is 0.702 em against Jost's 0.700 — a 0.3% difference, which is to say none. Uppercase labels, tags, kickers, numerals and any cap-anchored display line can be swapped between the two faces at the SAME font-size and the optical size will not shift. No other Vietnamese-capable geometric matches Jost that closely. THE ONE ADJUSTMENT YOU MUST MAKE. x-heights do NOT match: Josefin 0.378 em against Jost's 0.460 em. Lowercase-dominant Vietnamese runs ~18% small beside English set at the same size. For running Vietnamese body copy, multiply the size by --ym-vn-optical (1.18). For uppercase, display and numerals, change nothing. The 18 static instances of each family ship in assets/fonts/static/ for Illustrator, InDesign and Figma. Licences: assets/fonts/OFL.txt (Jost), assets/fonts/OFL-JosefinSans.txt (Josefin). */ @font-face { font-family: "Jost"; src: url("../assets/fonts/Jost-VariableFont_wght.ttf") format("truetype-variations"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Jost"; src: url("../assets/fonts/Jost-Italic-VariableFont_wght.ttf") format("truetype-variations"); font-weight: 100 900; font-style: italic; font-display: swap; } @font-face { font-family: "Josefin Sans"; src: url("../assets/fonts/JosefinSans-VariableFont_wght.ttf") format("truetype-variations"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Josefin Sans"; src: url("../assets/fonts/JosefinSans-Italic-VariableFont_wght.ttf") format("truetype-variations"); font-weight: 100 900; font-style: italic; font-display: swap; } :root { /* English, and every language Jost covers. */ --ym-font-sans: "Jost", "Futura", "Century Gothic", ui-sans-serif, system-ui, sans-serif; /* Vietnamese. Jost is kept in the stack behind it only as a last-resort shape match. */ --ym-font-vn: "Josefin Sans", "Jost", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif; } /* Language switching — automatic wherever the markup declares its language, which it should. Put lang="vi" on the , the section, or the individual span. */ :lang(vi), [lang="vi"], .ym-vn { font-family: var(--ym-font-vn); } /* Optical size correction for running Vietnamese text. Opt-in, and deliberately NOT applied by the :lang() rule above — poster and A4 artboards are built on absolute px and must not be silently rescaled. Use it on Vietnamese body copy, captions and lists; leave it off uppercase labels, display lines and numerals, whose cap heights already align. */ .ym-vn-body { font-family: var(--ym-font-vn); font-size: calc(1em * var(--ym-vn-optical)); } /* The Brand Foundation document is set in a different pairing. That is a known error in that file, being corrected separately — it is deliberately not tokenised here. */