I did a bunch of work with extracting info from fonts for a site I built last year [1], a useful tool to know about if you want to do something like this yourself (e.g. automating extraction of data from fonts) is ttx [2] from the fonttools package (available for Python and also a CLI tool which can be brew installed), which can dump out all of the tables in the font (which is where all the information about the glyphs and variations etc. is stored) to XML. There’s a lot of data (fonts are amazingly complex things with all the OpenType features, variable support [3] etc) and the structure takes some working out, but it’s all in there!
There’s also opentype.js [4] which can do similar on the client side, I’m not sure if there’s some info that you can only get from ttx or if opentype.js exposes all the same information off the top of my head.
Finally, Fontforge [5] is an OSS font editor which can be useful for inspecting the glyphs in a font visually etc.
1. Don’t know why but when I read the title of the post, I expected the website to tell me how a font would make the average viewer “feel” when they encountered the font in the wild…something like “this font is playful with a hint of seriousness and notes of business casual” or whatever else people look at to decide which font to use on their website.
2. I wish the list of fonts was filterable/searchable. I’m on mobile so maybe I missed the option somewhere.
For question 1, it's pretty much a perfect use case for ChatGPT to provide you with the consensus of the (pre-2021) internet.
For instance with the prompt "why should I use sans-serif over times new roman" you get "Sans-serif fonts, such as Arial or Verdana, are considered more legible on screens, while serif fonts, such as Times New Roman, are considered more legible in print. Sans-serif fonts are generally considered to be easier to read on a screen because the lack of serifs (the small lines at the ends of characters) makes the letters more distinct, especially at small font sizes. Additionally, sans-serif fonts are often used on websites and in digital media because they appear more modern and clean."
Maybe the author should include a summary of the font at the top?
Nice, I've been looking for a way to see what the math symbol coverage is for various fonts. (For writing Agda/Lean code.)
The web page seems to hang a while for some fonts (e.g. JetBrainsMono-Regular), long enough to get a warning from Chrome, but it does work itself out eventually.
It would be nice to have a mouseover or something (even title="...") to give me the name / description of a character that I'm curious about.
(As an aside - does anybody know of a macos input method that will get me something like agda-mode globally?)
This tool is useful for subsetting a font. In my limited experience, it looks like many typefaces are determined to accommodate every diacritical mark and language-specific glyph there is. I’m not sure how heavily that impacts font file sizes. Is “font bloat” a thing (yet)? If so, I’m curious as to whether more type designers may consider separate “W1G” releases. I may be imagining this problem.
Indeed, I get the bar at the top "This page is slowing down Firefox" with a button to stop it. If I don't do anything though (i.e. let it run), the result does appear within one minute.
I’ve been looking for a tool which does this for ages… if the creator is here, thanks so much for making this! I’ve been using FontForge to inspect fonts previously, but obviously that software is optimised for a different usecase.
tangentially - if anyone has useful recommendations for extracting Adobe Type1 Mac fonts into flat files with code, I could .. hm.. take the results and try this site!
(or point to lines in FontForge sources.. not there yet)
I'm being pedantic, but the tool really answers the question "what fonts can my typeface make?". Fonts are specific configurations (size, boldness, italicization, etc) of a typeface.
There’s also opentype.js [4] which can do similar on the client side, I’m not sure if there’s some info that you can only get from ttx or if opentype.js exposes all the same information off the top of my head.
Finally, Fontforge [5] is an OSS font editor which can be useful for inspecting the glyphs in a font visually etc.
[1] https://f37foundry.com
[2] https://fonttools.readthedocs.io/en/latest/ttx.html
[3] https://f37foundry.com/playground has some fun examples of what you can do creatively with variable fonts (best on desktop)
[4] https://github.com/opentypejs/opentype.js
[5] https://fontforge.org/en-US/