Fontanello

Fontanello is a browser extension that reveals the typographic properties of any text on a webpage. By right-clicking on a word or phrase, you instantly see a popup displaying detailed CSS styling information. This tool is particularly useful for web designers, developers, and anyone curious about the fonts and styles used online.

Key Features

• Inspect Typography on Demand: Right-click any text element to view its typeface (font family), font weight, font size, color, and additional CSS properties like line height, letter spacing, and text decoration. This helps you understand how text is styled without diving into developer tools.
• Color Contrast Information: The extension calculates and displays the contrast ratio between the text color and its background. This is essential for accessibility compliance, as it helps you quickly check if text meets WCAG contrast guidelines for readability.
• Support for Multiple CSS Properties: Beyond basic typography, Fontanello shows less common properties such as font-style, text-transform, and font-variant. This gives a comprehensive view of the text's styling, useful for debugging or learning from existing designs.

With Fontanello, you can efficiently gather typographic data from any webpage without leaving your current context. Whether you're analyzing a competitor's site, checking your own designs, or learning how CSS works, this extension streamlines the inspection process. It works across all websites and does not require any configuration-just install and right-click.