Display headlines and banner headers often require specialised capital letterforms proportioned specifically for large optical point sizes. The OpenType titl (Titling) feature activates bespoke uppercase glyphs designed to maintain elegant stroke weight and open counters at massive display scales. Safari Web Inspector offers native visual controls to preview, test, and audit titling capitals on macOS.
Design Rationale for Titling Glyphs
Standard capital letterforms are drawn to harmonise with lowercase text at body sizes (typically 12pt to 16pt). When magnified to display sizes, standard capitals appear disproportionately heavy. Titling alternates provide lighter stem weights and refined proportions tailored for editorial titles.
Configuring Titling Capitals in CSS
Implement the titling feature across display elements using standard CSS:
.hero-title {
font-family: "Adobe Garamond Pro", "Baskerville", serif;
font-feature-settings: "titl" 1;
font-variant-caps: titling-caps;
font-size: 3.5rem;
letter-spacing: 0.04em;
}Inspecting Features in Safari Web Inspector
- Open your website in Safari.
- Right-click the display headline and select Inspect Element.
- In Web Inspector’s right pane, switch to the Font tab.
- Locate Titling (titl) in the Features section.
- Toggle the interactive switch to observe real-time glyph adjustments rendered by Apple’s CoreText layout engine.
Pairing with Optical Sizing
When using modern variable fonts, combine font-feature-settings: "titl" 1; with font-optical-sizing: auto; to guarantee flawless optical balance across all viewport breakpoints.