Page 2

Typography & content laboratory

Every block below is labelled with the exact technique used, so editor results can be traced back to implementation.

T-01 · Headings H1–H6 (direct text nodes)

Heading level one

Heading level two

Heading level three

Heading level four

Heading level five
Heading level six
T-02 · Rich text paragraph

Paragraph with an inline link, strong text, emphasis, bold, italic, underline, strike, small, code, mark, x2 and H2O.

T-03 · One highlighted word (span)

Only the word orange in this sentence should change colour.

T-04 · Nested spans 4 deep

Outer middle inner innermost

T-05 · Mixed families & weights

Serif 900 · Sans 300 · Mono 600

T-06 · Letter spacing & line height

WIDE TRACKING

Tall line-height paragraph that wraps onto a second line to make the gap visible at most widths.

T-07 · Text shadow

Shadowed headline

T-08 · Gradient text (background-clip)

Gradient text

T-09 · Rotated text (transform)

Rotated −6°

T-10 · Vertical text (writing-mode)

VERTICAL

T-11 · ::before / ::after text

Middle text node

T-12 · JS-replaced text (textContent)

Status: Fallback text from HTML

T-13 · SVG <text> SVG text label
T-14 · Inherited from parent

This paragraph has no rule of its own; colour, font and size are inherited.

T-15 · Competing selectors

Which colour wins? (ID selector)

T-16 · CSS-variable colour

Colour from --local-ink

T-17 · Media-query override

Desktop accent, phone primary

T-18 · Text transforms

uppercase via css

capitalize each word

T-19 · Text over background image with overlay layer

Text over a photo

Overlay is a separate div with opacity, not a gradient.

T-20 · Text in an absolutely positioned container
Absolutely positioned label
T-21 · Text inside button and card

Card heading

Card body text.