Browsing text styles

Explore the entire range of fonts and styles used across the site. This feature allows you to view and analyze the complete typographic hierarchy, from headings to body text, making it easy to understand how different text styles are applied throughout the website. Typography is exclusively available in Professional and Ultra plans.

Here are some of the key design aspects you can inspect:

• Font-family

• Font-size

• Font-weight

• Letter-spacing

• Text color

• Color contrast

Locate text-style instances

With the Ultra plan, you can go a step further by locating typography styles used across the page to see them in context. Reveal instances for each type style and use the “Locate” feature to navigate to a dedicated screen where you can select and inspect any typography instance on the page.

What are text style instances?

Text style instances on a site refer to distinct typographic elements applied across the pages. These instances include:

• Headings (H1-H6) – Titles and subtitles with different font sizes and weights.

• Body Text – Paragraph styles with specific font families, sizes, and spacing.

• Links & Buttons – Text with unique styles like underlines, colors, or hover effects.

• Captions & Labels – Small text used for annotations or UI elements.

• Miscellaneous – Stylized text for emphasis, citations, or coding snippets.

When “Locate Instance” feature is selected, use the Up (↑) / Down (↓) arrows to quickly move between instances and see where each type style is used. Each instance provides a quick preview of key design properties, including: Element name Font family Font size Font weight Letter spacing Color Color contrast

CSS Peeper allows you to inspect these text style instances, helping you analyze font families, weights, sizes, letter spacing, and colors used on a webpage.