# Bold Typography (Poster) > Every screen is a printed poster: one enormous condensed word, black ink on newsprint, a yellow highlight and almost no imagery. - Nickname: Big-word poster - Also called: Poster Typography, Type-led Layout, Broadsheet Bold - Category: Editorial & Typographic - Moods: Bold, Edgy, Serious, Playful - Industries: Creative & Portfolio, Media & Entertainment, Startup & Tech, Food & Restaurant, Gaming - Style page: https://uilingo.dev/styles/bold-typography-poster/ Bold Typography treats the page like a wall of letterpress posters. Headlines are set in an ultra-condensed black display face at 10–12vw, uppercase and stacked tight so one or two words fill the screen. Contrast is broadsheet-stark — black ink on grey newsprint, whole sections flipped to black, and one highlighter yellow for tape labels and the call to action. Imagery is nearly absent: numbers, rules and words do the work. Components are blunt rectangles with heavy rules rather than outlined cards. ## Best for - Campaign, launch and event pages - Music, festival and sports promotions - Bold personal sites and portfolios - Manifestos and brand statements ## Avoid for - Data-heavy products that need dense hierarchy - Calm healthcare, finance or luxury contexts - Long reading where giant type becomes noise ## Do - Let the headline fill 80–100% of the width; break lines by meaning, 1–3 words per line - Use line-height 0.84–0.9 for Latin display and set it uppercase; Thai display (Kanit 900) 1.15, Thai h2/h3 1.3, never uppercase - Separate sections with 6–10px black rules or by flipping the whole section to black - Keep one highlight colour (yellow) for labels and the primary action only ## Don't - Don’t add photos, illustrations or icon grids — type is the image (except a ruled type-only grid and halftone dot fields) - Don’t use rounded corners or soft shadows - Don’t set more than one giant headline per screen ## Audit Passed after 2 rounds · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, light mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "Bold Typography (Poster)" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line Every screen is a printed poster: one enormous condensed word, black ink on newsprint, a yellow highlight and almost no imagery. Design keywords: one huge word per screen, ultra-condensed display, uppercase stacked headlines, black on newsprint, highlighter yellow, tape labels, heavy black rules, no imagery. ## Visual language Every screen is a letterpress poster pasted on a wall. An ultra-condensed black display face (Big Shoulders Display 900) is set uppercase at 10–12vw with 0.84–0.9 line-height so one or two words fill the frame; Thai uses Kanit 900 with no uppercase. The paper is a grey newsprint (#ECE8DE) with a fine dot screen, ink is pure black, and the only colour is a highlighter yellow (#FFE500) used for tape labels, a marker band behind the headline, the stats band and the primary action. There is no imagery: numbers, rules and words do all the work, and components are blunt rectangles on heavy rules. ## Signature details (must be visible) - Latin hero headline at clamp(4rem, 10.5vw, 9.5rem), weight 900, uppercase, line-height 0.84, filling 80–100% of the width, with a yellow marker band behind each line (linear-gradient transparent 58% → #FFE500 58–88%, box-decoration-break: clone) - Thai display: Kanit 900 at clamp(3.2rem, 8vw, 7.5rem) (about 0.8× the Latin size, because Kanit isn't condensed), line-height 1.15 — an approved exception to the generic ≥1.3 heading rule — broken by phrase into 2–3 lines max. Thai h2/h3 use line-height 1.3. Width-filling is a Latin-only goal - Eyebrows as black tape labels sized to their text (width: fit-content, never full width): black background, yellow display-face caps (Big Shoulders Display 800; Thai Kanit 800, no caps), padding 4px 10px, rotated −1.5deg - Heavy black rules: 10px between landing sections, 6px on top of every card, KPI and stat, 3px between list rows - Whole sections flip to solid black with newsprint type; the stats section is a full-bleed yellow band with 6.5rem condensed numerals and the label 14px below the numeral - Feature list as a numbered poster index: yellow 3.4rem '01' numerals and 3.8rem uppercase titles, no icons - Nav, dashboard top bar, mobile tab bar and footer are solid black strips; the active item is a solid yellow block - 0 radius, 3px borders, no shadows, no gradients except the marker band and halftone dots ## Design tokens — use these exact values Colours (light mode): - background #ECE8DE - surface #F6F3EC - surface-2 #DFDACD - text #0B0B0B - text-muted #4F4B44 - primary #0B0B0B (text on it #FFE500) - secondary #FFE500 (text on it #0B0B0B) - accent #FFE500 - border #0B0B0B - success #1B7A3A · warning #8F6400 · danger #C8231A - chart series #0B0B0B, #E6C800, #7A766C, #C8231A, #B8B2A3 Radius: sm 0px, md 0px, lg 0px, xl 0px, pill 0px Border width: 3px Shadows: sm `none`, md `none`, lg `none` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1 density Motion: 120ms steps(2, end) ## Typography (Latin + Thai) - Headings: Big Shoulders Display 800/900 with Thai fallback Kanit 800/900 - Body: Archivo 400/600/800 with Thai fallback Bai Jamjuree 400/600/700 - Google Fonts URL: https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@800;900&family=Archivo:wght@400;600;800&family=Kanit:wght@800;900&family=Bai+Jamjuree:wght@400;600;700&display=swap - CSS stacks: heading `"Big Shoulders Display", "Kanit", system-ui, sans-serif`; body `"Archivo", "Bai Jamjuree", system-ui, sans-serif` — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(4rem, 10.5vw, 9.5rem), heading weight 900, heading tracking -0.005em (Latin only), uppercase small labels (Latin only). - Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side. - Why this pairing: Kanit’s heavy, narrow-shouldered weights are the closest Thai answer to a condensed poster face; Bai Jamjuree’s squarish loopless forms echo Archivo’s engineered grotesque in body text. ## Components - Buttons: rectangular slabs in the condensed display face, uppercase 1.2rem (1.6rem large, 64px tall); primary black with yellow text → yellow with black text on hover; secondary 3px black outline → solid black on hover; ghost is a 3px underline - Motion: hovers use 120ms steps(2, end) on purpose — colour flips snap like a printed overlay, never fade - Cards: no box — transparent with a 6px black top rule; on hover the whole card floods yellow. Cards inside a ruled grid (hero artefact, dashboard) sit on the newsprint surface #F6F3EC so text never lands on the black grid lines - Pricing: the pricing section is black; price cards are newsprint (#F6F3EC) slabs with a 12px yellow top rule; the featured card is solid yellow - Testimonials: one large quote per row at 2.4rem (Thai 2rem Kanit 800, no uppercase), smaller than the section h2, so there is only one giant headline per viewport - Inputs: 3px black frame, square, semibold text; focus adds a 4px solid yellow ring; labels are condensed uppercase 1.1rem - Badges: square black chips with condensed caps; warning is yellow, success green, danger red; the solid badge is yellow - Chips, segmented controls and tabs: 3px outlines with condensed caps; active is black with yellow text; the active tab gets an 8px yellow underline - Tape labels and metadata use the display face (Big Shoulders Display 800 caps; Thai Kanit 800) — no mono font anywhere - Charts: 4px solid black and yellow lines, square bars, funnel steps as yellow slabs with bold counts, table headers in condensed caps over a 6px rule - Pull quote: a black slab wider than the column with yellow 3.6rem uppercase condensed text (Thai 2rem, no uppercase) - Thai body: Bai Jamjuree 400/600/700 — cap Thai bold at 700 and never request 800 for Thai body text ## Layout for this web page Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer. Hero: poster-sized headline that fills the viewport width, visual below. Navigation: bar style. Sections in order: hero → stats → features → testimonials → pricing → cta. Feature section as list. Black nav strip, then the poster hero: a tilted tape eyebrow, a headline that fills the width with yellow marker bands, a thick-ruled lead paragraph on the left and stacked slab buttons on the right, then a type-only artefact below: a ruled black schedule, lineup or price grid in condensed caps (3px black lines between newsprint cells) with one cell flooded yellow. Follow with a yellow stats band, a black features index, testimonials as one big uppercase quote per row, black pricing with newsprint slabs under 12px yellow rules, and a solid yellow CTA with a black input. Each section is one statement — one giant headline per screen. Dashboards keep the black top bar with a yellow active tab, a yellow first KPI and newsprint widgets under 6px rules. ## Content Use realistic product copy (fictional brand) suited to: Campaign, launch and event pages. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## Do - Let the headline fill 80–100% of the width; break lines by meaning, 1–3 words per line - Use line-height 0.84–0.9 for Latin display and set it uppercase; Thai display (Kanit 900) 1.15, Thai h2/h3 1.3, never uppercase - Separate sections with 6–10px black rules or by flipping the whole section to black - Keep one highlight colour (yellow) for labels and the primary action only ## Don't - Don’t add photos, illustrations or icon grids — type is the image (except a ruled type-only grid and halftone dot fields) - Don’t use rounded corners or soft shadows - Don’t set more than one giant headline per screen - Photos, illustrations, device mockups or icon grids — type is the image (the only exceptions are a ruled type-only grid and halftone dot fields) - Rounded corners, soft shadows, eased fades or gradients - A second accent colour or pastel tints of the yellow - Wide or geometric display faces (that drifts to Swiss 2.0 or kinetic type) — keep it condensed - Uppercase or tracking on Thai, or Thai display tighter than line-height 1.15 - More than one giant headline competing in a single viewport ## Stack notes One self-contained HTML file with a