Testing text styles

Run the Inspect text styles bookmarklet, then click any sample. A panel should report the styles that apply to the element you clicked. Press Esc to stop.

Each sample has a small grey label above it showing the CSS used and the values you should expect in the panel. Click the sample text, not the label.

The panel rows are: Font, Size, Weight, Style, Line height, Letter sp., Word sp. and Colour. Background colour is not reported.

Font family: installed fonts

Stacks where the first choice is installed. The panel should name the family that is rendering. Generic keywords are labelled (generic). Named fonts assume a typical Mac or Windows machine. On a machine without one of them, expect the next entry in the stack and a Not available note.

font-family: serif
Expect: Font serif (generic)

The quick brown fox jumps over the lazy dog

font-family: sans-serif
Expect: Font sans-serif (generic)

The quick brown fox jumps over the lazy dog

font-family: monospace
Expect: Font monospace (generic)

The quick brown fox jumps over the lazy dog

font-family: cursive
Expect: Font cursive (generic)

The quick brown fox jumps over the lazy dog

font-family: fantasy
Expect: Font fantasy (generic)

The quick brown fox jumps over the lazy dog

font-family: system-ui
Expect: Font system-ui (generic)

The quick brown fox jumps over the lazy dog

font-family: Arial, sans-serif
Expect: Font Arial, no note (if the font is installed)

The quick brown fox jumps over the lazy dog

font-family: Georgia, serif
Expect: Font Georgia, no note (if the font is installed)

The quick brown fox jumps over the lazy dog

font-family: Verdana, sans-serif
Expect: Font Verdana, no note (if the font is installed)

The quick brown fox jumps over the lazy dog

font-family: 'Times New Roman', serif
Expect: Font Times New Roman, no note (if the font is installed)

The quick brown fox jumps over the lazy dog

font-family: 'Courier New', monospace
Expect: Font Courier New, no note (if the font is installed)

The quick brown fox jumps over the lazy dog

font-family: 'Trebuchet MS', sans-serif
Expect: Font Trebuchet MS, no note (if the font is installed)

The quick brown fox jumps over the lazy dog

font-family: 'Comic Sans MS', cursive
Expect: Font Comic Sans MS, no note (if the font is installed)

The quick brown fox jumps over the lazy dog

font-family: Impact, fantasy
Expect: Font Impact, no note (if the font is installed)

The quick brown fox jumps over the lazy dog

Font family: skipped and missing fonts

Stacks where earlier choices do not exist. Zzyzx names are made up, so they are never installed. The panel should report what is rendering and list the entries that were skipped.

font-family: 'Zzyzx Sans', sans-serif
Expect: Font sans-serif (generic). Note: Not available: Zzyzx Sans

The quick brown fox jumps over the lazy dog

font-family: 'Zzyzx Sans', 'Zzyzx Display', Georgia, serif
Expect: Font Georgia. Note: Not available: Zzyzx Sans, Zzyzx Display

The quick brown fox jumps over the lazy dog

font-family: Zzyzx, Arial, sans-serif
Expect: Font Arial. Note: Not available: Zzyzx

The quick brown fox jumps over the lazy dog

font-family: 'Zzyzx One', 'Zzyzx Two'
Expect: No generic fallback. Note: No family in the stack is available: Zzyzx One, Zzyzx Two

The quick brown fox jumps over the lazy dog

font-family: 'Zzyzx One', 'Zzyzx Two', serif
Expect: Font serif (generic). Note: Not available: Zzyzx One, Zzyzx Two

The quick brown fox jumps over the lazy dog

Font family: edge cases

Cases that could trip up the family check.

font-family: ARIAL, sans-serif
Expect: Font Arial, no note. Family names are case-insensitive, so this is not a missing font. The casing shown in the panel may vary

The quick brown fox jumps over the lazy dog

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif
Expect: Observe. A common system font stack. The result depends on the operating system and browser

The quick brown fox jumps over the lazy dog

Inherited: font-family: Arial, sans-serif set on the parent, nothing set on the inner span. Click the inner text
Expect: Font Arial, because the child inherits the parent family

Parent text, then inherited child text inside it

Size

The panel reports the computed size in pixels, however it was written.

font-size: 8px
Expect: Size 8px

The quick brown fox jumps over the lazy dog

font-size: 10px
Expect: Size 10px

The quick brown fox jumps over the lazy dog

font-size: 12px
Expect: Size 12px

The quick brown fox jumps over the lazy dog

font-size: 14px
Expect: Size 14px

The quick brown fox jumps over the lazy dog

font-size: 16px
Expect: Size 16px

The quick brown fox jumps over the lazy dog

font-size: 20px
Expect: Size 20px

The quick brown fox jumps over the lazy dog

font-size: 24px
Expect: Size 24px

The quick brown fox jumps over the lazy dog

font-size: 32px
Expect: Size 32px

The quick brown fox jumps over the lazy dog

font-size: 48px
Expect: Size 48px

The quick brown fox jumps over the lazy dog

font-size: 72px
Expect: Size 72px

The quick brown fox jumps over the lazy dog

font-size: 13.5px
Expect: Size 13.5px

The quick brown fox jumps over the lazy dog

font-size: 1.5rem
Expect: Size 24px (if the root size is 16px)

The quick brown fox jumps over the lazy dog

font-size: 125%
Expect: Size 20px (parent is 16px)

The quick brown fox jumps over the lazy dog

font-size: x-large
Expect: Size 24px

The quick brown fox jumps over the lazy dog

font-size: xx-small
Expect: Size 9px

The quick brown fox jumps over the lazy dog

Weight

Numbers from 100 to 900 should show the name from the list. Fonts like Arial only have regular and bold, so the page may look the same for several weights. The panel reports the computed value, not what is drawn.

font-weight: 100
Expect: Weight 100 (thin)

The quick brown fox jumps over the lazy dog

font-weight: 200
Expect: Weight 200 (extra light)

The quick brown fox jumps over the lazy dog

font-weight: 300
Expect: Weight 300 (light)

The quick brown fox jumps over the lazy dog

font-weight: 400
Expect: Weight 400 (normal)

The quick brown fox jumps over the lazy dog

font-weight: 500
Expect: Weight 500 (medium)

The quick brown fox jumps over the lazy dog

font-weight: 600
Expect: Weight 600 (semibold)

The quick brown fox jumps over the lazy dog

font-weight: 700
Expect: Weight 700 (bold)

The quick brown fox jumps over the lazy dog

font-weight: 800
Expect: Weight 800 (extra bold)

The quick brown fox jumps over the lazy dog

font-weight: 900
Expect: Weight 900 (black)

The quick brown fox jumps over the lazy dog

font-weight: bold
Expect: Weight 700 (bold)

The quick brown fox jumps over the lazy dog

font-weight: bolder
Expect: Weight 700 (bold) (parent is 400)

The quick brown fox jumps over the lazy dog

font-weight: lighter
Expect: Weight 100 (thin) (parent is 400)

The quick brown fox jumps over the lazy dog

font-weight: 450
Expect: Observe. 450 sits between two named weights. Check the number and name the panel chooses

The quick brown fox jumps over the lazy dog

 with no CSS
Expect: Weight 700 (bold) (default for strong)

Strong text with no CSS

Style

The panel reports the computed value only. It does not compare the style with the markup. The last three samples are for you to compare what you see with what the markup says.

font-style: normal
Expect: Style normal

The quick brown fox jumps over the lazy dog

font-style: italic
Expect: Style italic

The quick brown fox jumps over the lazy dog

font-style: oblique
Expect: Style oblique or italic. Chrome reports plain oblique as italic, so the answer depends on the browser

The quick brown fox jumps over the lazy dog

font-style: oblique 10deg
Expect: Style oblique 10deg

The quick brown fox jumps over the lazy dog

font-style: oblique 20deg
Expect: Style oblique 20deg

The quick brown fox jumps over the lazy dog

 with no CSS
Expect: Style italic, from the browser default for em

Emphasis from the em element

 with no CSS
Expect: Style italic, from the browser default for i

Italic from the i element


Expect: Style italic. The slant comes from CSS only, so there is no emphasis in the accessibility tree

Looks emphasised but is only a span


Expect: Style normal. The markup is em, so it is emphasised in the accessibility tree but not slanted

Emphasised in markup, upright on screen

Line height

Shown twice: pixels, and as a multiple of the font size. Each sample wraps over several lines so the spacing is visible.

line-height: normal
Expect: Line height normal

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs. How vexingly quick daft zebras jump.

line-height: 1
Expect: Line height 16px (1×)

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs. How vexingly quick daft zebras jump.

line-height: 1.2
Expect: Line height 19.2px (1.2×)

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs. How vexingly quick daft zebras jump.

line-height: 1.5
Expect: Line height 24px (1.5×) (the WCAG 1.4.12 minimum)

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs. How vexingly quick daft zebras jump.

line-height: 2
Expect: Line height 32px (2×)

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs. How vexingly quick daft zebras jump.

line-height: 24px
Expect: Line height 24px (1.5×)

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs. How vexingly quick daft zebras jump.

line-height: 150%
Expect: Line height 24px (1.5×)

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs. How vexingly quick daft zebras jump.

font-size: 20px; line-height: 2em
Expect: Size 20px. Line height 40px (2×)

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs. How vexingly quick daft zebras jump.

font-size: 32px; line-height: 0.9
Expect: Size 32px. Line height 28.8px (0.9×). Tight leading

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs. How vexingly quick daft zebras jump.

Letter spacing

Shown in pixels and in em. WCAG 2.2 1.4.12 asks that content survives letter spacing of at least 0.12em.

font-size: 20px; letter-spacing: normal
Expect: Letter sp. normal (0em)

The quick brown fox jumps over the lazy dog

font-size: 20px; letter-spacing: 0
Expect: Letter sp. normal (0em) or 0px (0em). Chrome reports zero as normal, so the answer depends on the browser

The quick brown fox jumps over the lazy dog

font-size: 20px; letter-spacing: 1px
Expect: Letter sp. 1px (0.05em)

The quick brown fox jumps over the lazy dog

font-size: 20px; letter-spacing: 2px
Expect: Letter sp. 2px (0.1em)

The quick brown fox jumps over the lazy dog

font-size: 20px; letter-spacing: 0.12em
Expect: Letter sp. 2.4px (0.12em)

The quick brown fox jumps over the lazy dog

font-size: 20px; letter-spacing: 0.5em
Expect: Letter sp. 10px (0.5em)

The quick brown fox jumps over the lazy dog

font-size: 20px; letter-spacing: -1px
Expect: Letter sp. -1px (-0.05em). Negative value

The quick brown fox jumps over the lazy dog

font-size: 16px; letter-spacing: 0.12em
Expect: Letter sp. 1.92px (0.12em). The WCAG 1.4.12 value

The quick brown fox jumps over the lazy dog

Word spacing

Same idea as letter spacing. WCAG 1.4.12 asks for word spacing of at least 0.16em.

font-size: 20px; word-spacing: normal
Expect: Word sp. normal (0em) or 0px (0em). Chrome reports normal as 0px, so the answer depends on the browser

The quick brown fox jumps over the lazy dog

font-size: 20px; word-spacing: 0
Expect: Word sp. 0px (0em)

The quick brown fox jumps over the lazy dog

font-size: 20px; word-spacing: 5px
Expect: Word sp. 5px (0.25em)

The quick brown fox jumps over the lazy dog

font-size: 20px; word-spacing: 0.16em
Expect: Word sp. 3.2px (0.16em)

The quick brown fox jumps over the lazy dog

font-size: 20px; word-spacing: 1em
Expect: Word sp. 20px (1em)

The quick brown fox jumps over the lazy dog

font-size: 20px; word-spacing: -2px
Expect: Word sp. -2px (-0.1em). Negative value

The quick brown fox jumps over the lazy dog

font-size: 16px; word-spacing: 0.16em
Expect: Word sp. 2.56px (0.16em). The WCAG 1.4.12 value

The quick brown fox jumps over the lazy dog

Colour

Hex first, then the full rgb() value underneath. A swatch shows the colour over white. Where alpha is below 1 the panel should say so. Background colour is out of scope, so check that it is never reported.

color: #000
Expect: Colour #000000, rgb(0, 0, 0) underneath. Opaque, so no alpha note

The quick brown fox jumps over the lazy dog

color: rgb(0, 0, 0)
Expect: Colour #000000. Opaque black, not transparent

The quick brown fox jumps over the lazy dog

color: #336699
Expect: Colour #336699, rgb(51, 102, 153) underneath

The quick brown fox jumps over the lazy dog

color: #0c2238
Expect: Colour #0C2238, rgb(12, 34, 56) underneath

The quick brown fox jumps over the lazy dog

color: rebeccapurple
Expect: Colour #663399, rgb(102, 51, 153) underneath

The quick brown fox jumps over the lazy dog

color: hsl(200, 80%, 40%)
Expect: Colour #1481B8, rgb(20, 129, 184) underneath

The quick brown fox jumps over the lazy dog

color: rgba(0, 0, 0, 0.5)
Expect: Colour #000000 with a note that alpha is 0.5. Swatch looks mid grey

The quick brown fox jumps over the lazy dog

color: rgb(255 0 0 / 25%)
Expect: Colour #FF0000 with alpha 0.25. Swatch looks pale pink

The quick brown fox jumps over the lazy dog

color: rgba(0, 0, 0, 0); outline: 1px dashed #666
Expect: Colour #000000 with alpha 0. The text is invisible, so a dashed outline marks where to click

The quick brown fox jumps over the lazy dog

color: oklch(60% 0.2 30)
Expect: Raw computed value such as oklch(0.6 0.2 30), with no hex. Needs a browser that supports oklch

The quick brown fox jumps over the lazy dog

color: color(display-p3 1 0 0)
Expect: Raw computed value such as color(display-p3 1 0 0), with no hex

The quick brown fox jumps over the lazy dog

Inherited: color: #336699 set on the parent, nothing set on the inner span
Expect: Colour #336699, because the child inherits it. Click the inner text

Parent text, then inherited child text inside it

color: currentcolor beside a red border
Expect: Colour #000000 (the border colour is ignored)

The quick brown fox jumps over the lazy dog

color: #fff; background: #222; padding: 8px
Expect: Colour #FFFFFF. The dark background is not reported

The quick brown fox jumps over the lazy dog

color: #000; opacity: 0.4
Expect: Colour #000000, with no alpha note. The opacity property is not part of the colour value, so it is not reported

The quick brown fox jumps over the lazy dog

Everything at once

One element with every row filled in, and one with the WCAG 1.4.12 text spacing values.

font-family: Arial, sans-serif; font-size: 18px; font-weight: 600; font-style: italic; line-height: 1.6; letter-spacing: 0.05em; word-spacing: 0.1em; color: #7a1f5c
Expect: Font Arial. Size 18px. Weight 600 (semibold). Style italic. Line height 28.8px (1.6×). Letter sp. 0.9px (0.05em). Word sp. 1.8px (0.1em). Colour #7A1F5C

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs. How vexingly quick daft zebras jump.

font-family: Arial, sans-serif; font-size: 16px; line-height: 1.5; letter-spacing: 0.12em; word-spacing: 0.16em; margin-bottom: 2em
Expect: Line height 24px (1.5×). Letter sp. 1.92px (0.12em). Word sp. 2.56px (0.16em). The full WCAG 1.4.12 set (paragraph spacing is not shown by the panel)

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs. How vexingly quick daft zebras jump.

Elements and properties

Nested elements, form controls and properties the panel does not cover.

Click the outer text, then each styled word. The panel should report the element you click, not its parent.
Expect: Outer 20px, #222222. Bold word 700 (bold). Big word 36px. Red word #B00020

Outer paragraph text with a bold word, a big word and a red word inside it.

Different elements. Click each one. The panel should report whatever computed styles apply. Default values differ by browser and system, so just check that each one reports sensible values.
Expect: Observe

A link

A label

Textarea text

Code element and small element and H₂O and E=mc²

A blockquote

A list item

Table header	Table cell

text-transform: uppercase; text-decoration: underline; font-variant: small-caps; text-shadow
Expect: Only the usual rows. Uppercase, underline, small caps and text shadow are not reported

The quick brown fox jumps over the lazy dog

Pointer suppression

While the bookmarklet is active, pointer activation should be suppressed so clicking a control inspects it instead of using it. Try each control with the bookmarklet on, then press Esc and try again.

Link
Expect: Active: the page does not jump and no message appears. After Esc: the message appears

Follow this link

The link was followed.

Details toggle
Expect: Active: stays closed. After Esc: opens

Toggle this

The details element opened.

Checkbox and label
Expect: Active: stays unchecked, whether you click the box or the label. After Esc: toggles

Check this box

Event counter
Expect: Active: every count stays 0, including double-click. After Esc: counts go up

mousedown: 0
mouseup: 0
click: 0
dblclick: 0