Typography Properties
Configure font stacks, responsive clamp scaling, line spacing, and OpenType features.
Font Family & Fallbacks
Outfit
sans-serif • SIL Open Font License 1.1Font Size & Root rem
1rem ref
Unitless multiplier
letter-spacing
Fluid clamp() Scaling
at 360px viewport
at 1440px viewport
OpenType Feature Flags
Compiled Code & Tokens
/* Hero Display Typography */
.typography-custom {
font-family: "Outfit", system-ui, -apple-system, sans-serif;
font-size: clamp(2rem, calc(1.5rem + 2.2222vw), 3.5rem);
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.02em;
font-kerning: normal;
overflow-wrap: break-word;
hyphens: manual;
font-feature-settings: "kern" 1, "liga" 1;
}Diagnostics & Accessibility
Explain CSS
Defines the prioritized list of font family names. The browser tests each font in sequence until a local or loaded match is found.
Fallback: If the primary webfont fails to download, the browser falls back seamlessly to the declared system generic stacks.Fluid clamp() interpolates font size mathematically between mobile and desktop screen widths, eliminating abrupt breakpoint jumps.
Fallback: Browsers safely honor the bounded minimum or user zoom preferences.Controls stroke thickness. Numeric weights (100–900) map directly to OpenType font master coordinates without browser faux-bolding.
Fallback: If a specific weight is missing, the browser synthesizes bolding or rounds to the nearest available weight.Unitless line-height acts as a relative multiplier of font-size, preventing compounding inherited leading bugs on nested elements.
Fallback: Inherited cleanly by child elements proportionally.Applies uniform tracking across all glyphs. In digital typography, display headings typically benefit from slight negative tracking, while all-caps text demands positive tracking.
Fallback: Universally supported across all modern and legacy browsers.Controls pair-specific optical spacing tables embedded in the font software (GPOS/kern). Distinct from uniform letter-spacing tracking.
Fallback: Supported in all modern browsers; defaults to font master kerning.Prevents long unbreakable strings or URLs from causing horizontal layout overflow on narrow mobile screens.
Fallback: Standards-compliant replacement for word-break.