Inspecting Fonts Beyond CSS Declarations with Typical

ebuka
ebuka Posts: 3
in Font Technology

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.

Tagged:

Comments

  • Thomas Phinney
    Thomas Phinney Posts: 3,209
    More such tools are always good!

    A couple of things:

    - while it says whether a font is variable, and identifies the range of an axis, it does not seem to say what that axis is? While weight is certainly the most common one, it would be good to actually identify the axes.

    - The font version string and the copyright notice would be nice. The copyright notice gives you the year of production and the foundry.
  • ebuka
    ebuka Posts: 3
    edited October 10

    Thanks for the suggestions!

    ---

    On the variable font axes, thanks for pointing that out. I'll work on making the individual axes explicit soon. The information will be structured something like this:

    • Variable: Yes
    • Variable axes:
      • Weight (wght): 200–900
      • Width (wdth): 75–125
      • Optical size (opsz): 8–72
      • Slant (slnt): -10–0
      • Italic (ital): 0–1

    These are illustrative values. The axes a font supports and their ranges depend on the font itself.

    ---

    On the version string:

    Typical already reads the version from the name table's Version string (name ID 5).

    The only thing stripped from the Version string is the word Version itself. So if a font provides Version 1.04, Typical reports it as Version: 1.04 rather than Version: Version 1.04. Any additional information included in the Version string should already be captured.

    ---

    On the copyright notice:

    This is already available in Typical for fonts that include it in the name table under name ID 0.

  • ebuka
    ebuka Posts: 3
    edited October 10

    I've implemented the variable axes changes, and they'll be included in the next update. I've attached a screenshot showing how it looks. Thanks for pointing this out.




    Also, here's a screenshot of the version string and copyright notice, which are already available in Typical. I've renamed “Version” to “Version String” and “Copyright” to “Copyright Notice” to make the labels clearer.

  • Thomas Phinney
    Thomas Phinney Posts: 3,209
    Nice!

    I think if you have any variable axes, you can leave out the “variable: yes”

Categories