Hype5 Stage 1.0.2 · Pre-release
Typography and media
Stage pairs a grotesque for the stage voice with an italic serif for the spoken voice, and shows pictures in their natural proportions.
On this page
Fonts
| Font | Role | Files |
|---|---|---|
| Bricolage Grotesque (variable) | The "stage voice": headings, navigation and interface | Bundled; about 201 KB; preloaded |
| Newsreader Italic (variable optical size) | The "spoken voice": introductions, teasers and quotes | Bundled, Latin and Latin Extended subsets |
Both fonts are bundled with the theme under the SIL Open Font License 1.1 and are served from your own site: Stage loads no fonts from external services. Licence texts are in assets/fonts/.
Corners and widths
- Corners — Rounded (pictures 12 px, cards 18 px, controls 10 px) or Square; pills stay round.
- Content width 1280 px and wide width 1520 px by default, adjustable in the Customiser. See Theme settings.
Pictures
- Pictures keep their natural proportions. Stage adds two image sizes that do not crop — 1600 px and 2400 px wide — for wide pictures and the full-bleed home picture.
- Portraits of people (company cards, the people directory, the cast spotlight) use a fixed 2:3 frame. With Hype5 Theater's directory fit set to natural, a 2:3 picture fills the frame and any other shape is shown whole on a blurred fill of itself; with cover, every picture fills the frame, anchored on its upper third. Without a picture the frame shows a ghost light (Portrait to follow).
- List thumbnails use a 3:2 frame with the same rule: a 3:2 picture fills it, other shapes are shown whole.
- Posters of productions are taken from the production's featured image. A production without a poster is shown as a typographic title instead.
- Loading is careful: the production poster on its own page loads with high priority; stacked posters on the home page load lazily with real sizes; the logo never takes high priority.
The home-page photograph and film
- Photograph: at least 2400 px wide; an optional portrait phone poster for screens under 768 px; a focal point to keep faces in view.
- Film: self-hosted WebM and/or MP4, muted and looped, about 15 seconds and around 1600 px wide. Embeds from video services cannot be used as a silent background.
- The film is loaded only after the page has loaded and only while it is on screen, never plays by itself on phones, with reduced motion, Save-Data or slow connections, and pauses when the tab is hidden.
See Home page.
Logo and site icon
- Logo: Appearance → Customise → Site Identity → Logo (WordPress's custom logo). Stage prints it with its own alternative text from the media library. WordPress does not accept SVG uploads, and Stage does not enable them because of the risk of scripts in SVG files — upload a PNG of at least twice the displayed size, for example 1600 px wide with a transparent background.
- No logo? Stage sets the site title as a wordmark: the last word (or the part after a dash) is set lighter.
- Dark single-colour logos: turn on Blend a dark single-colour logo into the page so that the logo works in Lights down and over photographs. See Lights.
- Site icon: Site Identity → Site Icon, a 512 px square image. Stage does not change it.
Performance notes
The main stylesheet is about 77 KB minified (about 15 KB compressed); production pages also load Hype5 Theater's two stylesheets. WordPress's emoji script is left to the site. See Known limitations.