/* =========================================================================== EMAAR DESIGN SYSTEM · 03 — TYPOGRAPHY One type system for the whole site. --------------------------------------------------------------------------- THE VOICE --------------------------------------------------------------------------- Two families and no third. OPTIMA display and editorial. A humanist sans with calligraphic stress — which is what lets an EMAAR heading be elegant without reaching for a serif, and what keeps a 92px display line from shouting. Never emboldened. A display face is set at 400. SOURCE SANS 3 every working word: body, UI, navigation, labels, figures, metadata. 400 for prose, 600 for anything that labels or acts. --------------------------------------------------------------------------- THE RULES --------------------------------------------------------------------------- 1 · HIERARCHY IS MADE OF TRACKING, WEIGHT, COLOUR AND AIR — NOT SIZE. Two steps of the scale can sit beside each other and read as different kinds of thing because one is 11px/600/.26em in --em-text-eyebrow and the other is 16px/400/0 in --em-text-body. Reach for the next size up only when the first four have been spent. 2 · A DISPLAY SIZE IS FLUID, A WORKING SIZE IS FIXED. Every heading is clamp(min, vw, max), so it is never set by a breakpoint and never needs a mobile override. Body and label sizes do not scale: 15px is 15px on a phone because that is what is readable. 3 · HERO TYPE IS REFINED, NOT HEAVY. Type over a photograph uses the lockup sizes (--em-text-display-m and below) and the standard scrim. A display-xl line does not go on an image. See DESIGN-STANDARDS.md and 04-layout.css §hero. 4 · A COMPONENT NEVER STATES A RAW SIZE. `font-size: var(--em-text-label)`, not `font-size: 11px`. The token is what makes 62 separate declarations one decision. --------------------------------------------------------------------------- THE SCALE --------------------------------------------------------------------------- role token desktop mobile family ------------------------------------------------------------------------ Display XL --em-text-display-xl 92px 38px Optima Display L --em-text-display-l 72px 34px Optima Display M --em-text-display-m 56px 30px Optima H1 --em-text-h1 52px 30px Optima H2 --em-text-h2 42px 28px Optima H3 --em-text-h3 31px 23px Optima H4 --em-text-h4 24px 19px Optima H5 --em-text-h5 17px 17px Source Body Large --em-text-body-lg 16px 16px Source Body --em-text-body-md 15px 15px Source Body Small --em-text-body-sm 14px 14px Source Meta --em-text-meta 12.5px 12.5px Source Caption --em-text-caption 12px 12px Source Label / Button --em-text-label 11px 11px Source Label Small --em-text-label-sm 10px 10px Source Label XS --em-text-label-xs 9.5px 9.5px Source Figma mapping: Foundation Library → Text styles, named `Display / XL`, `Heading / H1`, `Body / Large`, `Label / Default`, … =========================================================================== */ /* ———————————————————— 1 · Display and headings ———————————————————— All Optima, all 400, all set tight. `text-wrap: pretty` because a two-word last line under a 52px heading is a hole in the page; `max-width` in `em` because a heading's measure is a function of its own size, not the page's. */ .em-display-xl, .em-display-l, .em-display-m, .em-h1, .em-h2, .em-h3, .em-h4 { font-family: var(--em-font-display); font-weight: var(--p-weight-regular); letter-spacing: var(--p-ls-display); text-wrap: pretty; } .em-display-xl { font-size: var(--em-text-display-xl); line-height: var(--p-lh-display); max-width: 14em; } .em-display-l { font-size: var(--em-text-display-l); line-height: var(--p-lh-display); max-width: 15em; } .em-display-m { font-size: var(--em-text-display-m); line-height: var(--p-lh-display); max-width: 16em; } .em-h1 { font-size: var(--em-text-h1); line-height: var(--p-lh-tight); max-width: 18em; } .em-h2 { font-size: var(--em-text-h2); line-height: var(--p-lh-tight); max-width: 20em; } .em-h3 { font-size: var(--em-text-h3); line-height: var(--p-lh-heading); max-width: 22em; } .em-h4 { font-size: var(--em-text-h4); line-height: var(--p-lh-heading); max-width: 24em; } /* H5 is the first step that stops being display type: it is a label for a block of words rather than a title, so it is Source at 600 and tracked. */ .em-h5 { font-family: var(--em-font-ui); font-size: var(--em-text-h5); font-weight: var(--p-weight-semi); line-height: var(--p-lh-heading); letter-spacing: var(--p-ls-none); } /* On the night ground a heading goes one step larger, because a light face on a dark ground optically shrinks. This is the only size change the two worlds ask for. */ .em-h2--dark { color: var(--em-text-on-inverse); font-size: var(--em-text-display-m); line-height: var(--p-lh-display); max-width: 16em; } /* ———————————————————— 2 · Body ———————————————————— */ .em-lead { font-size: var(--em-text-body-md); color: var(--em-text-body); margin-top: var(--space-12); max-width: var(--em-container-text); text-wrap: pretty; } .em-prose { max-width: var(--em-container-text); } .em-prose p { font-size: var(--em-text-body-lg); line-height: var(--p-lh-relaxed); color: var(--em-text-body); text-wrap: pretty; } .em-prose p + p { margin-top: var(--space-14); } .em-prose--dark p { color: var(--em-text-on-inverse-soft); } .em-body-lg { font-size: var(--em-text-body-lg); line-height: var(--p-lh-relaxed); color: var(--em-text-body); } .em-body { font-size: var(--em-text-body-md); line-height: var(--p-lh-body); color: var(--em-text-body); } .em-body-sm { font-size: var(--em-text-body-sm); line-height: var(--p-lh-body); color: var(--em-text-body); } .em-note { font-size: var(--em-text-caption); line-height: var(--p-lh-snug); color: var(--em-text-muted); margin-top: var(--space-10); } .em-caption { font-size: var(--em-text-caption); line-height: var(--p-lh-snug); color: var(--em-text-muted); } .em-meta { font-size: var(--em-text-meta); line-height: var(--p-lh-snug); color: var(--em-text-muted); } /* ———————————————————— 3 · Labels ———————————————————— The tracked, uppercase, 600-weight voice. This is the most recognisable thing on the site after the photography, and it appears as: an eyebrow, a breadcrumb, a button, a nav item, a tag, a field label, a figure's unit. Three tracking steps, and the step is chosen by LENGTH, not by importance: the longer the string, the tighter it is set, so the line stays a line. */ .em-label, .em-label-sm, .em-label-xs { font-family: var(--em-font-ui); font-weight: var(--p-weight-semi); text-transform: uppercase; line-height: var(--p-lh-snug); } .em-label { font-size: var(--em-text-label); letter-spacing: var(--p-ls-wide); } .em-label-sm { font-size: var(--em-text-label-sm); letter-spacing: var(--p-ls-label); } .em-label-xs { font-size: var(--em-text-label-xs); letter-spacing: var(--p-ls-ui); } /* ———————————————————— 4 · Eyebrow ———————————————————— A tracked label with a rule running off to the right of it. The site's section marker, above a heading, on every page family. */ .em-eyebrow { display: flex; align-items: baseline; gap: 22px; margin: clamp(24px, 3.5vh, 38px) 0 var(--space-20); } .em-eyebrow__t { font-size: var(--em-text-label); font-weight: var(--p-weight-semi); letter-spacing: var(--p-ls-widest); line-height: var(--p-lh-body); text-transform: uppercase; color: var(--em-text-eyebrow-neutral); /* NOT nowrap. At 320px a long eyebrow at .26em tracking is wider than the screen, and a nowrap span cannot be clipped by a flex parent — it pushes the page wider, which widens the layout viewport. */ flex: 0 1 auto; min-width: 0; } .em-eyebrow__rule { flex: 1; height: 1px; background: var(--em-border-rule); } .em-eyebrow--dark .em-eyebrow__t { color: var(--em-text-eyebrow-neutral-on-inverse); } .em-eyebrow--dark .em-eyebrow__rule { background: var(--em-border-on-inverse-soft); } /* The sand band needs its own eyebrow ink: --em-text-eyebrow measures 4.44:1 there and fails AA at the 11px an eyebrow is set in. The eyebrow gets a darker value rather than the band getting a lighter ground. */ .em-eyebrow--sand .em-eyebrow__t { color: var(--em-text-eyebrow-neutral); } .em-eyebrow--sand .em-eyebrow__rule { background: var(--em-border-on-sand); }