Tracereader

Inspect typography, visual effects and motion. Turn any interface into a reusable design recipe.

Tracereader helps designers understand how a web page is styled. Point at text to inspect its typography, then click to explore the element’s layout, visual effects and configured CSS motion. Copy individual values or a CSS starting point, and save useful references in your library. You can also inspect page media and sample visible colors. Static elements show “No animation” rather than default timing values. JavaScript-driven animation is not measured. Getting started 1. Open Chrome’s Extensions menu and pin Tracereader. 2. On a regular website, click its icon and choose Start live inspect. 3. Point to preview; click to capture. Use the arrows to inspect a visible parent or child. Open Setup in the popup to check your keyboard shortcut. Protected browser pages, including Chrome settings and the Chrome Web Store, cannot be inspected. Accounts and plans Inspection works without signing in. Installation starts a 14-day unlimited Pro trial with no card required. Afterwards, the free plan includes 10 Full Reads per month; hover previews and color sampling remain unlimited. Pro offers unlimited Full Reads for $1.99/month or $19.99/year. Purchasing requires a separate confirmation in Stripe Checkout. Subscriptions renew until cancelled and can be managed through the billing portal. Privacy Inspection runs locally in the active tab. Optional Google sign-in syncs the references you choose to save, along with account usage and subscription status. Page content and media are not sent for remote analysis. Font files are identified for reference, not downloaded; check their licenses before reuse.