Inspecting Fonts Beyond CSS Declarations with Typical

ebuka

Hi everyone,

I’ve been spending some time exploring the technical side of web typography, and earlier this year I built a browser extension called Typical to help me inspect fonts on websites.

One thing I wanted to explore was how much information you can get from the font file itself, rather than relying solely on CSS declarations. CSS can tell you which font a page requests, but the font file can reveal more about what is actually being used.

Typical reads the rendered text on a page and inspects the underlying font file to identify the font and extract details such as its canonical name, foundry, classification, licensing information, and other metadata.

I thought it might be useful for people who work with typefaces, whether you're checking how a font is being used on a website, debugging a font stack, or simply curious about a typeface you've come across.

It runs locally in the browser, without accounts, analytics, or a backend.

I'd be interested to hear how others approach font inspection on the web, and whether there are details about web fonts you find particularly difficult to investigate.

If anyone wants to take a look, it's available here: https://typicalhq.vercel.app

The idea was partly inspired by Roel Nieskens’ work on Wakamai Fondue, which got me thinking about how much information is hidden inside font files and how that information could be made accessible while browsing the web.